SlideShare uma empresa Scribd logo
A10
Um curso Infnet utilizando a metodologia
NETLEARN®
.
Adobe Photoshop
para Web
2
APRESENTA
ÇÃO
NETLEARN® ONE
TEORI
A
MÓDULO DE
INTRODUÇÃ
O
1a
UNIDADE
DE
APRENDIZAD
O
INTRODUÇÃ
O
DA UA
BLOCO DE
CONSTRUÇÃ
O
DO
APRENDIZA
DO
U
A
EXEM
PLO
EXERCÍ
CIOS
DESCRI
ÇÃO
CONCEI
TOS
BÁSICO
S
REFERÊNCIA
S
ESTUDO DE
CASOS
PROJETO
JÚNIOR
LAB
BLOCO DE
CONSTRUÇÃ
O
DO
APRENDIZA
DO
APRESENTA
ÇÃO
TEORI
A
EXEM
PLO
EXERCÍ
CIOS
LAB
NETLEARN®
- INTRODUÇÃO
3
A apostila
• Sua apostila é dividida em 2 partes:
– os slides, na parte de cima de cada página
– as anotações, na parte de baixo
• Slides:
– São os slides que o professor vai utilizar durante o curso.
• Anotações:
– Informações complementares, zoom no código de programas e
espaço para você escrever
Adobe Photoshop
4
Apresentações
• Professor
– Nome
– E-mail
– Experiência
• Alunos
– Nome
– Empresa onde trabalha e cargo
– Expectativas
Adobe Photoshop
5
Todo e qualquer apoio didático fornecido pela Instituição
ou pelo professor, seja em papel ou por meios digitais,
desde que devidamente aprovados, serão considerados
material didático.
Ao final de cada curso na avaliação, os alunos podem levar
em conta essa informação para avaliar o material didático.
Sobre o material didático
Adobe Photoshop
6
A Adobe Certified Expert (ACE)
O programa Adobe(R) Certified Expert (ACE)
(Especialista Certificado da Adobe)
destina-se a designers gráficos, designers da
Web, integradores de sistemas,
revendedores, desenvolvedores e
profissionais do comércio que estejam
buscando um reconhecimento oficial da sua
experiência com produtos da Adobe.
Adobe Photoshop
7
Logística
• Horários
• Computadores e Rede
• Banheiros
• Cigarro
• Telefone
Adobe Photoshop
8
Unidades do curso
• UA 1: Introdução ao Photoshop
• UA 2: Introdução ao Photoshop
• UA 3: Ajustes nas imagens
• UA 4: Seleções
• UA 5: Transferência de Imagens
• UA 6: Transformações
• UA 7: Painel de Camadas / Layers
• UA 8: Retoques de Imagens
Adobe Photoshop
9
Unidades do curso
• UA 9: Camadas de ajuste
• UA 10: Aplicação de Fill Layers
• UA 11: Clipping Mask
• UA 12: Ferramenta Crop
• UA 13: Ferramenta Forma / Shape
• UA 14: Uso do Photoshop na Web
• UA 15: Ferramenta Fatia / Slice
• UA 16: Coleção de atalhos do Photoshop
Adobe Photoshop
10 Adobe Photoshop
11
UA 1: Introdução ao
Photoshop
Você aprenderá:
• Apresentação do Photoshop
• Abrir documentos
• Navegação nos documentos
• Atalhos para navegação
Introdução ao Photoshop
Unidade de Aprendizagem
12
1.1 - Apresentação do
Photoshop
Introdução ao Photoshop
Bloco de Construção do Aprendizado
13 Introdução ao Photoshop
Apresentação do Photoshop
Pixels
14
1.2 - Abrir documentos
(imagens)
Introdução ao Photoshop
Bloco de Construção do Aprendizado
15
Documentos PSD
Introdução ao Photoshop
16
1. Menu File < Open, cujo atalho é Ctrl+O: Essa operação
faz abrir uma janela onde escolheremos o arquivo.
Formas de Abrir documentos
Introdução ao Photoshop
17
2. Duplo-clique: Esse processo é bem rápido para abrir
documentos e imagens: basta dar dois cliques no fundo
cinza escuro. Esse caminho abre a janela Open.
Formas de Abrir documentos
Introdução ao Photoshop
18
3. Adobe Bridge: O pacote de programas Adobe vem com
um gerenciador de arquivos, que apresenta várias
informações importantes sobre os documentos, bem
como sua visualização em miniaturas. O nome desse
recurso é Adobe Bridge.
Formas de Abrir documentos
Introdução ao Photoshop
19 Introdução ao Photoshop
20
1.3 - Tipos de visualização
(screens)
Introdução ao Photoshop
Bloco de Construção do Aprendizado
21
• Para variar entre os modos de tela, basta usar a tecla
“F” algumas vezes, ou ainda utilizar o ícone de Screen
Mode, presente na parte superior.
• Para não ver mais o menu, a barra de controle e as
paletas do Photoshop, basta usar a tecla TAB.
Telas de visualização (screen)
Introdução ao Photoshop
22
1.4 - Navegação nos
documentos
Introdução ao Photoshop
Bloco de Construção do Aprendizado
23
• É uma paleta presente no Photoshop, para que possamos
ampliar ou reduzir o zoom (através do rodapé) e ainda
deslocar a visualização através do retângulo vermelho.
Clique no retângulo vermelho e mova-o quando estiver
em zoom maior do que 100%.
Painel Navigator
Introdução ao Photoshop
24
CTRL+ “+” – amplia o zoom
CTRL+ “-” – reduz o zoom
CTRL+ “0” (zero) - para dar um zoom suficiente para caber na
área de trabalho disponível. Fit on Screen.
CTRL+ALT + “0” (zero) - para dar um zoom de 100% que é o
tamanho real, ou “Actual size”.
A Tecla espaço - enquanto estiver pressionada o cursor virará a
Hand, possibilitando clicar e deslocar a visualização em zooms
maiores do que 100%.
Atalhos de navegação
Introdução ao Photoshop
25
• Quando temos várias janelas abertas ao mesmo tempo
no Photoshop, podemos usar a função Arrange (Menu
Window < Arrange).
Visualização de vários documentos
Introdução ao Photoshop
26
O que aprendemos nesta Unidade:
UA 1: Introdução ao Photoshop:
1.1 - Apresentação do Photoshop
1.2 - Abrir documentos
1.3 - Tipos de visualização (Screens)
1.4 - Navegação nos documentos
27
UA 2 - Cores no Photoshop
Você aprenderá:
• O uso de cores no Photoshop
• Os painéis de cores e o seletor de cores
• Criação e uso do Gradiente
Cores – Photoshop
Unidade de Aprendizagem
28
2.1 – Cores no Photoshop
Bloco de Construção do Aprendizado
29
• Determinar um modo de cor: Menu Image < Mode.
• RGB – para WEB e vídeo.
• CMYK – para impressão em grande escala (Off-set por
exemplo).
• Grayscale – tons de cinza descartando as cores.
• Entre outros modos.
Modos de cores: RGB ou CMYK?
Cores – Photoshop
30
2.2 - Color Picker e Panel
Cores – Photoshop
Bloco de Construção do Aprendizado
31
• Na própria Tool Bar (Barra de ferramentas) existe um controle de
cores que chamamos de Color Picker. O Photoshop permite a
criação de duas cores para serem combinadas em várias aplicações
(gradiente, pincéis, etc). Os dois quadradinhos representam o
Foreground (primeiro plano) e o Background (plano de fundo).
Color Picker (na Tool Bar)
Cores – Photoshop
32
Janela do Color Picker
Cores – Photoshop
33
• Quando escolhemos uma cor no quadro, pode haver
advertências, que alertam quando ela não está em CMYK
(para impressão) ou quando a cor não é segura para
Web.
Avisos de cor (Impressão e Web)
Cores – Photoshop
34
• Para Web podemos escolher a opção Only Web Colors
(somente cores seguras para Web).
Only Web Color (cores seguras)
Cores – Photoshop
35
• Muito semelhante ao anterior, o color panel
oferece as mesmas opções e outras ainda em
seu Options.
Color Panel
Cores – Photoshop
36
• É um painel para guardarmos cores para uso constante.
Assim que nós criarmos uma cor, vamos até o Swatches
até aparecer um balde no cursor, ou então, com essa
cor em primeiro plano cliquemos no rodapé do Swatches
Panel no botão
Swatches Panel
Cores – Photoshop
37
• No Options do painel de Swatches, podemos encontrar
as cores Pantones para abrir as “amostras”.
Swatches Panel Options
Cores – Photoshop
38
Color Libraries
Cores – Photoshop
39
Ferramenta Eydedropper / Conta-gotas
Cores – Photoshop
40
• Você realizará um trabalho institucional para um
cliente.
• Ele lhe dá um Manual de Identidade Visual,
determinando o uso das seguintes cores:
R = 234; G= 120; B = 30. (Dar nome= “Cor_1”)
C = 67%; M = 12%; Y = 0%; B = 0%. (Dar nome= “Cor_2”)
Pantone Solid Coated = 210 C. (Dar nome= “Cor_3”)
• Guarde tais cores no Swatches Panel facilitando seu uso
durante a criação. (Só para guardar no Swatches)
EXERCÍCIO FIXAÇÃO:Swatches
Cores – Photoshop
41
2.3 - Gradientes no Photoshop
Cores – Photoshop
Bloco de Construção do Aprendizado
42
• Gradiente é a transição entre duas ou mais cores e no
Photoshop, usamos a ferramenta Gradient para criar.
Assim ficará a Options Bar quando ativarmos Gradient:
• As cores escolhidas para primeiro plano e fundo,
interferem nas opções apresentadas, nesse caso foram
as cores vermelho e preto. Cliquemos no pop-up ao lado
(setinha preta), para vermos outros tipos de fluência.
Ferramenta Gradient / Degradê
Cores – Photoshop
43
• As opções de gradientes já prontos, ficam no pop-up
(setinha preta). A primeira opção é sempre a relação
enter as cores de Fore e Background; a segunda é o Fore
indo para a transparência; a terceira é preto e branco.
Ferramenta Gradient / Degradê
Cores – Photoshop
44
• Fluência de Gradiente é o como ele cria a transição das
cores envolvidas. Suas opções estão na próprio barra de
comando, como vemos abaixo:
Ferramenta Gradient / Degradê
Cores – Photoshop
45
• Para criarmos nosso próprio gradiente, cliquemos sobre
a amostra do gradiente, o que fará abrir o Gradient
Editor.
Ferramenta Gradient
Cores – Photoshop
46
Sliders para
controle de
cores
Sliders para
controle de
opacidade
Cores – Photoshop
47
• Na barra de Opções, quando estamos na ferramenta
Gradient, notamos a presença do Mode (Blending Modes)
para promover a mesclagem do gradiente aplicado na
imagem das layers abaixo. Assim como a Opacity.
Ferramenta Gradient - Mode
Cores – Photoshop
48
• Crie um documento novo com as medidas:
• 800 pixels de largura (Width) por 800 pixels de altura
(Height); com 72 dpi (por “inch”) de resolução; Modo de
cor: RGB; 8 bits e Contents White;
• Ative a ferramenta Gradient e escolha uma combinação
com pelo menos três cores (colorida);
• Aplique esse gradiente na opção de fluência radial, na
camada inteira;
• Altere o Mode no Options Bar para “Difference” e vá
reaplicando o mesmo Gradient várias vezes sobre essa
mesma layer.
EXERCÍCIO FIXAÇÃO:Gradient
Cores – Photoshop
49
O que aprendemos nesta Unidade:
UA 2: Introdução ao Photoshop
2.1 - Cores no Photoshop
2.2 - Color Picker e Panel
2.3 - Gradientes no Photoshop
50 Adjustments – Photoshop
UA 3 - Ajustes nas imagens
(Adjustments)
Unidade de Aprendizagem
Você aprenderá:
• Sobre os ajustes destrutíveis
• Sobre os tipos principais de ajustes
51
3.1 – Ajustes principais
Bloco de Construção do Aprendizado
52
• Menu Image < Adjustments
Ajustes da imagem (Adjustments)
Adjustments – Photoshop
53
• Brightness / Contrast ou Brilho / Contraste - ajusta de
forma bem simples os níveis de brilho e contraste de
uma imagem.
BRIGHTNESS / CONTRAST
Adjustments – Photoshop
54
• Levels / Níveis (Ctrl+L)- ajusta os níveis de intensidade
das shades (sombras), tons médios (midtones) e realces
(Highlights) da imagem. Basta deslizar os três sliders
encontrados na janela de diálogo desse ajuste.
LEVELS
Adjustments – Photoshop
55
LEVELS
Adjustments – Photoshop
56
• Hue / Saturation ou Matiz / Saturação (Ctrl+U)- - ajusta
o matiz das cores globais, a saturação e a luminosidade
de uma imagem. Marcando a opção “Colorize” nessa
janela, toda a imagem receberá somente uma cor para
variar em tonalidades. Escolha que cor será, deslizando
o Hue (Matiz).
HUE / SATURATION
Adjustments – Photoshop
57
HUE / SATURATION
Adjustments – Photoshop
58
• Color Balance / Balanço de cores (Ctrl+B) - ajusta os
valores de cores gerais, aplicando ou reduzindo: cyan
(ciano), red (vermelho), magenta, green (verde), yellow
(amarelo) ou blue (azul escuro). Quando uma foto está
muito carregada no verde, podemos usar o Color
Balance para reduzir o green, deslizando o slider para a
cor oposta, nesse caso, a cor magenta. Outra
possibilidade para esse ajuste é o de colorir áreas
selecionadas, em uma foto preto e branca.
COLOR BALANCE
Adjustments – Photoshop
59
COLOR BALANCE
Adjustments – Photoshop
60
• Vibrance / Vibração - aumenta a saturação das cores
que tinham menor saturação e quase não altera as cores
que já estavam saturadas. Esse ajuste também previne
os tons de pele de se tornarem muito saturados.
VIBRANCE
Adjustments – Photoshop
61
• Black & White - transforma uma foto colorida em tons
de cinza, permitindo o ajuste do espaço de cada antiga
cor e suas tonalidades. Podemos dar um clique nas áreas
da imagem real e, mantendo o clique, deslizar para um
lado e para o outro. O próprio Photoshop detecta a cor
que foi clicada e a ajusta na composição Black & White.
Ainda nesse ajuste é possível usar o campo Tint, para
aplicar uma só cor em toda a obra, criando por exemplo
um sépia.
BLACK & WHITE
Adjustments – Photoshop
62
BLACK & WHITE
Adjustments – Photoshop
63
• Replace Color / Substituir Cor - substitui cores
especificadas em uma imagem por novos valores de cor.
Use o cursor para clicar na imagem real, capturando
essa cor específica. Depois de selecionada controle o
Fuzziness para estabelecer quanto dessa cor será
selecionada para então substituí-la por outra, nos
controles de Hue/Saturation logo abaixo.
REPLACE COLOR
Adjustments – Photoshop
64 Adjustments – Photoshop
65
• Threshold - transforma a foto em uma imagem
realmente preta e branca: somente com essas duas
cores. Isso deixa a foto parecendo um desenho.
THRESHOLD
Adjustments – Photoshop
66
THRESHOLD
Adjustments – Photoshop
67
• Photo Filter – simula os efeitos de colocar um filtro
colorido na frente da câmera fotográfica, para ajustar o
balanço e “temperatura” da cor em uma foto.
PHOTO FILTER
Adjustments – Photoshop
68
O que aprendemos nesta Unidade:
UA 3: Ajustes nas imagens
3.1 – Os Ajustes principais
69 Seleções – Photoshop
UA 4 - Seleções e suas
ferramentas
Unidade de Aprendizagem
Você aprenderá:
• Funções das seleções
• Ferramentas de seleção
70 Seleções – Photoshop
4.1 – Seleções no Photoshop
Bloco de Construção do Aprendizado
71 Seleções – Photoshop
4.2 – Ferramentas de Seleções
Bloco de Construção do Aprendizado
72
Ferramentas de Seleção:
• Marquee (Rectangular e Elliptical) (atalhos – “M”)
• Lasso (Lasso, Polygonal e Magnetic) (atalhos – “L”)
• Magic Wand (atalho – “W”)
FERRAMENTAS DE SELEÇÃO
Seleções – Photoshop
73
• Marquee (Rectangular e Elliptical) (atalhos – “M”):
fazem seleções retangulares e elípticas.
Atalhos de uso:
• SHIFT – durante a feitura de uma seleção, mantém a
proporção criando quadrados ou círculos.
• TECLA ESPAÇO – durante a feitura de uma seleção,
permite que desloquemos sua posição, mexendo com o
mouse.
FERRAMENTAS MARQUEE
Seleções – Photoshop
74
Lasso (Lasso, Polygonal e Magnetic) (atalhos – “L”):
• LASSO: é criada de forma simples, criando um
“pré-desenho” que ao ser solto, gerará uma seleção.
• POLYGONAL LASSO: permite a preparação de uma
seleção, feita de clique em clique, marcando as arestas
desejadas. Quando fechamos o “pré-desenho” a seleção
se forma.
• MAGNETIC LASSO: analisa as áreas de clique, para gerar
o “pré-desenho” de forma automática, de acordo com
os ajustes de Frequency e Contrast, feitos no Options
Bar.
FERRAMENTAS LASSO
Seleções – Photoshop
75
Dicas importantes para a feitura da seleção:
• Crie um zoom adequado para realizar o “pré-desenho”.
• Ao desenhar com a Polygonal Lasso, de clique em clique,
use a tecla DELETE para corrigir clique errados.
• Não dê dois cliques no mesmo lugar, o que geraria o
fechamento automático da seleção.
DICAS PARA USO DA POLYGONAL LASSO
Seleções – Photoshop
76
Magic Wand (atalhos – “W”):
• Ao clicar em uma área qualquer (pixel), a ferramenta
Magic Wand analisa os pixels vizinhos e suas cores. As
áreas com a cor semelhante, serão envolvidas em uma
mesma seleção. O grau de sensibilidade para o
Photoshop analisar a semelhança entre as cores, é
determinada pelo campo Tolerance no Options Bar.
FERRAMENTA MAGIC WAND
Seleções – Photoshop
77
FERRAMENTA MAGIC WAND
Seleções – Photoshop
78
• No Options Bar encontramos a função Contiguous que
promove a seleção dos pixels, por contiguidade: que
tenham contato. Quando a seleção entcontra pixels com
cores distintas, desborda, desvia, até não ter mais áreas
contiguas.
• Desligando essa função, é possível selecionarmos áreas
internas como no exemplo da imagem seguinte:
MAGIC WAND: Contiguous
Seleções – Photoshop
79 Seleções – Photoshop
80 Seleções – Photoshop
4.3 – Operações com as
Seleções
Bloco de Construção do Aprendizado
81
• Essas operações encontram-se no Options Bar de todas
as ferramentas de Seleção, e servem para a edição na
forma das seleções já feitas. São elas:
• New Selection – move a seleção feita e apaga as
anteriores
• Add to Selection – adiciona uma nova seleção às
anteriores.
• Subtract from Selection – apara uma seleção feita, com
uma nova
• Intersect with a Selection – deixa sobrar somente a
área da seleção nova comum também às anteriores.
OPERAÇÕES COM AS SELEÇÕES
Seleções – Photoshop
82
OPERAÇÕES COM AS SELEÇÕES
Seleções – Photoshop
83
• O Quick Mask é uma máscara rápida que revela as áreas
selecionadas, deixando as áreas não selecionadas com
um “campo” colorido ao redor.
• O atalho para essa função é a tecla: “Q”. Mas o botão
encontra-se na parte inferior no Tool Bar.
• Também é possível editar uma seleção nesse modo,
usando as ferramentas de Brush: cores em preto e
branco. Ou também a ferramenta Eraser.
• Dando dois cliques na ferramenta Quick Mask, na Tool
Bar é possível editar as suas cores e sua opacidade.
QUICK MASK
Seleções – Photoshop
84 Seleções – Photoshop
4.4 – Menu Seleção / Select
Bloco de Construção do Aprendizado
85
O Menu Select oferece várias opções de configuração para
as seleções:
• All (Ctrl+A) – Seleciona toda a área da layer ativa.
• Deselect (Ctrl+D) – Retira a seleção.
• Reselect (Ctrl+Shift+D) – retorna com a última seleção.
• Inverse (Ctrl+Shift+I) – Inverte a seleção feita.
• All layer (Ctrl+Alt+A) – Ativa todas as layers no painel.
• Deselect layers – para desativar as layers todas.
• Similar layers – seleciona as layers de um mesmo tipo.
MENU SELECT
Seleções – Photoshop
86
• Color Range: “Alcance da cor”. Abre uma janela para
selecionarmos áreas de cores semelhantes. Com a janela
aberta, vá até a imagem (documento) e clique em
alguma cor.
• Refine Edges (Ctrl+Alt+R) – permite o refinamento de
uma seleção feita através de diversos ajustes.
• Modify – possibilita vários ajustes na estrutura de uma
seleção feita, tais como: criação de uma borda (Border);
suavizar as “pontas” (Smooth); expandí-la e reduzí-la
(Expand e Contract); e esmaecimento da seleção
(Feather).
MENU SELECT
Seleções – Photoshop
87
• Grow: quando criamos alguma seleção com a
ferramenta Magic Wand por exemplo, podemos ampliar
a seleção através do comando Grow.
• Similar: amplia a seleção através da seleção de cores
similares, parecidas.
• Transform Selection: permite a transformação das
dimensões e posições de uma seleção.
• Save e Load Selection: permite salvar (guardar) uma
seleção feita e carregá-la (load) depois no documento
aberto. As seleções salvas ficam guardadas no Channel
Panel.
MENU SELECT
Seleções – Photoshop
88
O que aprendemos nesta Unidade:
UA 4: Seleções
4.1 – Seleções no Photoshop
4.2 – Ferramentas de Seleção
4.3 – Operações com as seleções
4.4 – Menu Seleção / Select
89 Transferência de imagens - Move – Photoshop
UA 5 - Transferência de
Imagens (Move)
Unidade de Aprendizagem
Você aprenderá:
• Transferir uma imagem ou parte dela,
entre arquivos diferentes
90 Transferência de imagens - Move – Photoshop
5.1 – Ferramenta Mover /
Move
Bloco de Construção do Aprendizado
91
• Após selecionarmos uma parte de uma imagem em um
documento aberto, podemos usar a ferramenta Move
(atalho “V”), para deslocá-la para outro documento
aberto no Photoshop.
• Também é possível deslocar toda uma imagem para
outro documento, sem precisar de seleções e mesmo
que a layer seja Background, usando a Move.
Transferências de imagens - Move
Transferência de imagens - Move – Photoshop
92
• Para garantir que uma imagem trazida de outro
documento, fique alinhado rigorosamente alinhada com
o documento de destino, pressione “SHIFT” antes de
soltar.
Transferências de imagens - Move
Transferência de imagens - Move – Photoshop
93
• Entre um documento e outro, use as abas da nova
interface. Arraste até a aba e aguarde alguns segundos
até esse documento de destino se abrir. Após a sua
abertura leve a imagem transportada até o seu interior,
para soltá-la.
Transferências entre abas
Transferência de imagens - Move – Photoshop
94 Transferência de imagens - Move – Photoshop
95 Transferência de imagens - Move – Photoshop
Transferências entre abas
96
O que aprendemos nesta Unidade:
UA 5: Transferência de Imagens
5.1 – Ferramenta Mover / Move
97 Transformação – Photoshop
UA 6 - Transformações
Unidade de Aprendizagem
Você aprenderá:
• Transformações em imagens para
montagens fotográficas
• Dimensionar, girar, inclinar, distorcer e
perspectiva
• Transformações livres
98 Transformação – Photoshop
6.1 – Tipos de transformações
Bloco de Construção do Aprendizado
99
• Para fazer uma montagem fotográfica por exemplo,
precisamos adequar o tamanho de uma imagem para
caber em algum local. Ou então, precisamos rodar uma
imagem recortada para fazer sentido na montagem; ou
ainda propor nova perspectiva.
Tipos de Transformação:
• Scale (Dimensionar), Rotate (Girar), Skew (Inclinar),
Distort (Distorcer) e Perspective (Perspectiva).
TRANSFORMAÇÃO
Transformação – Photoshop
100
• É pelo Menu Edit < Transform que aplicamos as
transformações em uma imagem. Quando ativamos
qualquer uma das transformações desse menu, podemos
ver uma caixa de edição, com suas alças diagonais e
centrais:
Menu Edit < Transform
Transformação – Photoshop
101 Transformação – Photoshop
102
• Scale (dimensionar) - amplia ou reduz o tamanho da
imagem através de qualquer das alças. Usando as alças
diagonais com o Shift pressionado, mantemos a
proporção. Usando Alt em qualquer alça, mantemos
concentricidade (o centro da imagem não muda).
• Quando sobre as alças o cursor fica assim:
Scale (Dimensionar)
Transformação – Photoshop
103
• Rotate (girar) - gira a imagem através das alças. Se
usarmos Shift, o giro fica de 15 em 15 graus. Podemos
deslocar o Eixo (ao centro da imagem) para propor novo
ponto fixo enquanto giramos.
• Quando sobre as alças o cursor fica assim:
Rotate (Girar)
Transformação – Photoshop
104
• Skew (inclinar) - inclina a imagem através das alças
centrais de preferência.
• Quando sobre as alças o cursor fica assim:
Skew (Inclinar)
Transformação – Photoshop
105
• Distort (distorção) - promove distorções permitindo que
movamos cada alça diagonal (de preferência) de forma
independente. Isso gera perspectivas diferentes. Usando
o Shift esse lado fica fixo.
• Quando sobre as alças o cursor fica assim:
Distort (Distorcer)
Transformação – Photoshop
106
• Perspective (perspectiva) - aplica perspectiva usando
uma das alças diagonais, fazendo a ponta oposta
mover-se para o outro lado.
• Quando sobre as alças o cursor fica assim:
Perspective (Perspectiva)
Transformação – Photoshop
107
• Rotate 180º, 90º CW e 90º CCW - gira a imagem nos
ângulos propostos. CW = sentido horário. CCW = sentido
anti-horário.
Rotate 180º, 90º CW e CCW.
Transformação – Photoshop
108
• Flip horizontal / vertical - “espelha” a imagem de forma
horizontal ou vertical.
Flip Horizontal/Vertical
Transformação – Photoshop
109 Transformação – Photoshop
6.2 – Transformações livres
Bloco de Construção do Aprendizado
110
• Mais prático do que usar cada opção do Menu Edit <
Transform, é usar o Free Transform, que apresenta essas
transformações todas juntas, acionadas através de
atalhos como veremos abaixo.
• Usamos o atalho Ctrl+T para ativar o Free Transform (ou
Menu Edit < Free Transform), e quando virmos as alças
de transformação, usamos os atalhos a seguir:
Free Transform (Ctrl+T)
Transformação – Photoshop
111
• Para mover a imagem - basta clicar no interior da
imagem, clicar e arrastá-la. Note o cursor
• Para Scale - não é preciso usar atalho, basta colocar o
cursor sobre as alças até vermos esses cursores . Valem
as mesmas aplicações do Shift (proporção) e Alt
(concentricidade).
• Para Rotate - não é preciso usar atalho, basta afastar
ligeiramente o cursor das alças diagonais, até vermos
essa forma no cursor . Vale a mesma aplicação do Shift
para giros com ângulos de 15º.
Free Transform (Ctrl+T)
Transformação – Photoshop
112
• Para Skew - utilize os atalhos Ctrl+Shift (juntos) nas
alças centrais (de preferência). Cursor
• Para Distort - utilize o atalho Ctrl nas alças diagonais.
Com o Ctrl pressionado também podemos usar as alças
centrais, o que parece ser um Skew (inclinar), só que
sem proporções. Cursor
• Para aplicar o Perspective - utilize os atalhos
Ctrl+Shift+Alt (juntos) nas alças diagonais. Cursor
Free Transform (Ctrl+T)
Transformação – Photoshop
113 Transformação – Photoshop
114
• Para aplicar as transformações feitas, saindo do
Transform ou Free Transform, pressionemos qualquer
ferramenta no Tool Bar. Isso abrirá uma janela onde
escolheremos Apply (aplicar). Também podemos
pressionar a tecla ENTER, o que já aplica a
transformação.
• Também é possível pressionar ESC, para sair da
transformação sem aplicá-la.
• OBS: Sem isso o Photoshop fica paralisado aguardando.
Finalização da transformação
Transformação – Photoshop
115
O que aprendemos nesta Unidade:
UA 6: Transformações
6.1 – Tipos de transformações
6.2 – Transformações livres
116 Layer Panel – Photoshop
UA 7 – Painel de camadas /
Layer Panel
Unidade de Aprendizagem
Você aprenderá:
• Sobre o trabalho em camadas
• Sobre o Painel de Camadas
• Partes componentes do Painel de Camadas
• Operações com o Painel de Camadas
117 Layer Panel – Photoshop
7.1 – O Painel de Camadas /
Layers
Bloco de Construção do Aprendizado
118
LAYER PANEL
Layer Panel – Photoshop
119
• Procure pelo nome Layers entre as paletas ou por esse
ícone .Caso não a encontre vá ao menu Window
< Layers ou pressione seu atalho: a tecla F7.
Ativação do Layer Panel
Layer Panel – Photoshop
120 Layer Panel – Photoshop
7.2 – Componentes do painel
de Camadas
Bloco de Construção do Aprendizado
121 Layer Panel – Photoshop
2
1
3
4
5 6
7
8
9 10 11 12 13 14 15
17
16
Componentes do Layer Panel
122 Layer Panel – Photoshop
7.3 – Operações com Camadas
Bloco de Construção do Aprendizado
123
• É possível fundir as layers usando os comandos de Merge
existentes no options no painel. A fusão diminui o peso
do arquivo.
• Merge Down ou Merge Layers (Ctrl+E) - funde a layer
ativa com a layer imediatamente abaixo dela. Quando as
layers estão selecionadas o comando as funde.
• Merge Visible (Ctrl+Shift+E) - funde as layers visíveis.
• Flatten Image - faz uma fusão total criando um
Background novamente. Não deixa transparências.
Mesclar Layers
Layer Panel – Photoshop
124
• O Blending Mode serve para misturar as cores dos pixels
que são aplicados, com as cores que estavam
anteriormente, ou nas layers abaixo.
• Vários efeitos curiosos são obtidos com tais efeitos.
• Várias ferramentas possuem controle de Blanding Mode
em suas Options Bar (Brush, Pencil, Clone Stamp,
Gradient, etc).
• No Layer Panel está presente o Blending Mode para
efetuar esses efeitos entre as layers abaixo.
Blending Mode
Layer Panel – Photoshop
125
Criação de nova layer vazia (nasce sobre a que estava
ativa):
• No rodapé do Layer Panel.
• Através do atalho Ctrl+Shift+N.
• No Options do Layer Panel.
• No Menu Layer < New < Layer.
Obs.: Clicar sobre o ícone de “Create a new Layer” no
rodapé do Layer Panel, mantendo o ALT permite a
abertura da janela de edição da layer.Então: Alt+
Criação de layers
Layer Panel – Photoshop
126
Ordenação (empilhamento) de layers
Layer Panel – Photoshop
Para ordenar as layers no Layer Panel, clique em uma delas e
arraste-a para cima ou baixo, até notar uma linha
sinalizadora (preta), indicando que já se pode soltar. As
layers Background não podem ser ordenadas.
127
• Podemos selecionar layers que formam uma
determinada idéia, e agruparmos essas layers criando
um folder. Podemos fazer de três maneiras:
• Selecionar as Layers desejadas no Layer Panel e
pressionar o atalho: Ctrl+G.
• Selecionar as Layers desejadas no Layer Panel e ir ao
Menu Layer < New < Group from Layers.
• Usar o ícone Create a new Group no rodapé do Layer
Panel e arrastar as layers desejadas para dentro da
pasta de group criada.
Agrupar Layers
Layer Panel – Photoshop
128
Marcar com cores uma Layers
Layer Panel – Photoshop
Ao criarmos uma layer, podemos adotar uma cor para
marcar as layers, no campo Color da janela de diálogo.
Também é possível clicar com o botão direito no “olhinho”
do View e escolher uma cor.
129
O que aprendemos nesta Unidade:
UA 7: Painel de Camadas / Layers
7.1 – O painel de camadas / layers
7.2 – Componentes do painel
7.3 – Operações com camadas
130 Retoques de Imagens – Photoshop
UA 8 – Retoques de Imagens
Unidade de Aprendizagem
Você aprenderá:
• As principais formas de retocar uma
imagem digital
• Usar as ferramentas de retoque do
Photoshop
131 Retoques de Imagens – Photoshop
8.1 – Ferramentas de retoque
Bloco de Construção do Aprendizado
132
• Produz o desfocamento de área “pintadas”. Note que
essa ferramenta possui Brush (pincel) no Options Bar,
para editarmos como desejamos seu pincel. Também
podemos usar os atalhos “[” ou “]” para o seu tamanho.
• Quando promovemos o recorte de uma imagem para
levar para outra, em uma montagem, pode ser que as
arestas (limites) fiquem muito nítidas. Isso deixa muito
evidente que foi uma montagem, então podemos
desfocar levemente as arestas “pintando” com a Blur.
• Ainda no Options Bar é possível usar a função Strenght
(intensidade) para ajustar a força desse desfoque.
Ferramenta Blur (Desfoque)
Retoques de Imagens – Photoshop
133
• O contrário da anterior. Ideal para ampliar a nitidez de
lábios e olhos. Mas não exageremos para não destruir as
cores dos pixels da área.
Ferramenta Sharpen (Nitidez)
Retoques de Imagens – Photoshop
134
• Serve para criar efeito de borrado ao ser passada nas
áreas da imagem. Se usar a Smudge com a função Finger
Paiting (Pintar com dedo) marcada, ela mancha a área
com a cor que está em primeiro plano.
Ferramenta Smudge (Borrar)
Retoques de Imagens – Photoshop
135
• Aplica mais claridade nas áreas pintadas. A ferramenta
Dodge também possui controle de pincel. A função
Range (alcance) trabalha com o tipo de tom que ela
atuará e a função Exposure (exposição) ajusta a força de
aplicação dessa ferramenta.
• A função Protect Tones (proteger tons), também
encontrada no Options Bar, promove equilíbrio de
saturação nas áreas para melhorar o retoque.
Ferramenta Dodge
Retoques de Imagens – Photoshop
136
• Trabalha de forma contrária a ferramenta Dodge, ou
seja, escurece as áreas por onde o pincel passa.
• A função Protect Tones (proteger tons), também
encontrada no Options Bar, promove equilíbrio de
saturação nas áreas para melhorar o retoque.
Ferramenta Burn
Retoques de Imagens – Photoshop
137
• É usada para retocar a saturação das áreas da imagem.
No Options Bar escolheremos se ela vai tirar a saturação
(Desaturate) ou se ela vai saturar, no campo Mode.
• A função Flow ajusta a força da aplicação. A função
Vibrance quando ligado, melhora o ajuste de saturação
na imagem real, evitando destruições.
Ferramenta Sponge
Retoques de Imagens – Photoshop
138
• Usa uma área determinada da imagem como “tinta”
para pintar outras, por isso seu nome é “clone”. Basta
irmos em uma área da imagem, usar ALT+Clique e
depois, ir pintar em outras áreas.
• Podemos renovar o Alt+Clique várias vezes para melhor
retocarmos uma área com o Clone Stamp.
• Indicado para: recompletar áreas; recompletar cabelos;
duplicar elementos; corrigir rasgos em fotografias;
imperfeições na pele; etc.
Ferramenta Clone Stamp
Retoques de Imagens – Photoshop
139
• Bem similar a ferramenta Clone Stamp, inclusive na
forma de usar (ALT+Clique), a Healing é melhor usada
para corrigir áreas de pele. Ela promove um equilíbrio
de tonalidades antes de “pintar” com a área saudável,
que foi copiada no Alt+Clique.
• Muito útil na remoção de manchas da pele, pintas,
rugas, olheiras, celulite, estrias, espinhas, cicatrizes,
etc. Não é indicada para pintar sobre áreas escuras
como cabelos pretos, sobrancelhas e áreas muito
sombreadas, pois pode gerar áreas borradas.
Ferramenta Healing Brush
Retoques de Imagens – Photoshop
140
• A aplicação é igual a da Healing, poderám essa
ferramenta trabalha com áreas selecionadas, sem a
dinâmica de uma pintura. Não é com Alt+Clique.
• Usemos a própria ferramenta Patch para criar uma área
selecionada. Depois movamos essa área para onde
desejamos aplicar a correção.
• Verifiquemos o tipo de aplicação do Patch que pode ser
Source (Origem) ou Destination (destinação), no Options
Bar.
Ferramenta Patch
Retoques de Imagens – Photoshop
141
• Ideal para tirar manchas (como pintas da pele, espinhas,
cicatrizes), a ferramenta Spot Healing Brush é bem
similar a Ferramenta Healing Brush.
• Com ela não é necessário especificar uma área de
amostra com o Alt+Clique, pois ela analisa as áreas ao
redor para então, pintar quando dermos um simples
clique sobre a mancha.
• Também pode gerar áreas de textura. Para isso ative a
função Create Texture no Options Bar dessa ferramenta.
Ferramenta Spot Healing Brush
Retoques de Imagens – Photoshop
142
• Muito simples de usar, basta clicar sobre os olhos
vermelhos de uma foto, ou então clicar e arrastar sobre
a área de pupila, criando um retângulo de seleção
(conhecido como “letreiro”).
• Podemos fazer ajustes o tamanho da pupila (Pupil) e o
grau de escuridão (Darken Amount), no Options Bar
dessa ferramenta, para obtermos melhores resultados.
Ferramenta Red Eye
Retoques de Imagens – Photoshop
143
O que aprendemos nesta Unidade:
UA 8: Retoques de Imagens
8.1 – Ferramentas de retoque
144 Adjustments Layers – Photoshop
UA 9 – Camadas de ajustes /
Adjustments Layers
Unidade de Aprendizagem
Você aprenderá:
• Funções e usos das camadas de ajuste
• Ajustes não destrutivos
• Painel de Ajustes / Adjustments
145 Adjustments Layers – Photoshop
9.1 – Funções e usos
Bloco de Construção do Aprendizado
146
Adjustments Layers
Adjustments Layers – Photoshop
Já vimos os ajustes destrutivos, que interferem
diretamente nos pixels, através do Menu Image <
Adjustments. Agora veremos as camadas de ajustes que
possuem várias vantagens:
• Não destroem a imagem principal
• Criam uma layer só para esse ajuste
• Permitem a reedição a qualquer momento
• Permitem a aplicação de opacidade
• Permitem a edição de máscara desse ajuste (na Layer)
147 Adjustments Layers – Photoshop
9.2 – Painel de Ajustes /
Adjustments Panel
Bloco de Construção do Aprendizado
148
Adjustments Panel
Adjustments Layers – Photoshop
• O Photoshop ativa esses ajustes não destrutivos via
Menu < Layer < New Adjustment Layer; ou pelo rodapé
da paleta de Layer, através desse botão
• No Photoshop encontramos uma paleta de Adjustments
que facilita bastante a aplicação: basta clicarmos em
um dos ícones ali presentes.
• Vejamos alguns dos ícones:
149
Adjustments Panel
Adjustments Layers – Photoshop
150
Usar as Adjustments Layers
Adjustments Layers – Photoshop
• Basta clicarmos em
qualquer um dos ícones
de ajuste, para criarmos
uma layer de ajuste não
destrutivo sobre a layer
de uma imagem.
• A atuação desse ajuste é
para todas as layers
abaixo, e não somente a
anterior.
151
Reajuste de um Adjustments
Adjustments Layers – Photoshop
• Basta clicarmos nessa Adjustment layer que o painel
Adjustments mostra as opções de reajuste. Basta
controlarmos os sliders novamente.
152
Adjustments para uma só layer
(Clipping Mask)
Adjustments Layers – Photoshop
• Quando aplicamos uma Adjustment layer qualquer, seus
efeitos são sentidos em todas as layers que estão abaixo
dela. Mas é possível aplicar esse ajuste somente em uma
layer, sem ter efeitos sobre as outras abaixo.
• Na própria paleta de Adjustments há, no rodapé de um
ajuste escolhido, um botão que insere esse ajuste
somente na layer imediatamente anterior.
• Quando aplicamos, a Adjustment layer ganha uma seta
para indicar em que layer anterior, ela está inserida:
153 Adjustments Layers – Photoshop
• Somente a Layer 2,
que se apresenta
sublinhada
(recipiente), é que
sofrerá a ação do
ajuste Levels acima.
• Nesse caso a “Layer
1”, não sofrerá o
Levels aplicado acima.
154
Ajuste da Mask de um Adjustment
Adjustments Layers – Photoshop
• O retângulo branco na Adjustment layer é a sua área de
máscara (Mask). Quando criamos uma Adjustment layer
sem ter nada selecionado previamente, a Mask fica toda
branca como vemos.
• Ao usarmos o Brush de cor preta para pintar a imagem,
com essa área de mask devidamente clicada (na layer),
vamos removendo o ajuste nessa específica área.
• Lembre-se: a cor branca revela o conteúdo da layer
mascarada; a cor preta, esconde o conteúdo da layer; e
as outras cores (tons de cinza), deixam transparente.
155
O que aprendemos nesta Unidade:
UA 9: Camadas de ajuste / Adjustments
Layers
9.1 – Funções e usos
9.2 – Painel de Ajustes / Adjustments Panel
156 Aplicação de Fill Layer – Photoshop
UA 10 – Aplicação de Fill
Layer
Unidade de Aprendizagem
Você aprenderá:
• Aplicação de camadas de ajustes
• Configurações dessas camadas
• Tipos de camadas de ajuste
• Vantagens com o trabalho de camadas de
ajuste
157 Aplicação de Fill Layer – Photoshop
10.1 – Apresentação da Fill
Layer
Bloco de Construção do Aprendizado
158
Aplicação de Fill Layer
• Pelo botão , no rodapé do painel Layer, também é
possível aplicar Fill layer. Pode ser com cor sólida;
gradiente ou Pattern (padrão).
Aplicação de Fill Layer – Photoshop
159
Solid Color
• Podemos obtar pela criação de uma layer toda
preenchida com uma só cor: é o que a opção Solid Color
faz.
• Depois de escolhida o Color Picker se abre para
escolhermos a cor desejada.
• Através do símbolo que fica na layer “Color Fill”,
podemos dar dois cliques e escolher uma nova cor a
qualquer momento.
• Podemos utilizar os Blending Modes e a Opacity dessa
layers criando efeitos interessantes nas layers abaixo.
Aplicação de Fill Layer – Photoshop
160 Aplicação de Fill Layer – Photoshop
161
Gradient...
• Depois de escolhido o Gradient uma janela de ajuste de
gradiente se abre para editarmos:
• Através do símbolo que fica na layer “Gradient Fill”,
podemos dar dois cliques e escolher novas cores e
gradientes a qualquer momento.
• Podemos utilizar os Blending Modes e a Opacity dessa
layers criando efeitos interessantes nas layers abaixo.
Aplicação de Fill Layer – Photoshop
162 Aplicação de Fill Layer – Photoshop
163
Pattern...
• Depois de escolhido o Pattern uma janela de ajuste de
padrão se abre para editarmos:
• Através do símbolo que fica na layer “Pattern Fill”,
podemos dar dois cliques e escolher novas imagens como
padrão de preenchimento.
• Podemos utilizar os Blending Modes e a Opacity dessa
layers criando efeitos interessantes nas layers abaixo.
Aplicação de Fill Layer – Photoshop
164
O que aprendemos nesta Unidade:
UA 10: Aplicação de Fill Layers
10.1 – Apresentação da Fill Layer
165 Clipping Mask – Photoshop
UA 11 – Clipping Mask
Unidade de Aprendizagem
Você aprenderá:
• Explicação do Clipping Mask
• Inserção de imagens entre camadas
166 Clipping Mask – Photoshop
11.1 – Apresentação do
Clipping Mask
Bloco de Construção do Aprendizado
167 Clipping Mask – Photoshop
Clipping Mask
• Clipping Mask é uma máscara de inserção, que faz uma
layer ficar inserida em outra abaixo. Por exemplo, se a
layer de baixo tiver uma forma (retângulo ou círculo); e
na de cima colocarmos uma paisagem; alicando o
Clipping Mask a paisagem ficará dentro daquela forma.
• Aplicação: Menu Layer < Create Clipping Mask; o atalho
Ctrl+Alt+G; ou ainda, com o cursor próximo da
“fronteira” entre a layers (Adjustment e a da imagem)
pressionar ALT e clicar.
168 Clipping Mask – Photoshop
Exercício de fixação - Clipping Mask
• Abra o arquivo de uma imagem qualquer.
169 Clipping Mask – Photoshop
• Crie uma elipse em uma nova layer.
Exercício de fixação - Clipping Mask
170 Clipping Mask – Photoshop
• Passe a layer da Shape para baixo.
Exercício de fixação - Clipping Mask
171 Clipping Mask – Photoshop
• Na layer “FLORES” aplique o Clipping Mask.
Exercício de fixação - Clipping Mask
172 Clipping Mask – Photoshop
11.2 – As vantagens
Bloco de Construção do Aprendizado
173 Clipping Mask – Photoshop
Clipping Mask – Vantagens:
• O processo é não destrutivo (a imagem fica mascarada e
não apagada).
• O processo é reversível (basta usar o atalho Ctrl+Alt+G
ou o comando Release Clipping Mask no options do Layer
Panel).
• Podemos ajustar a localização da imagem inserida na
layer abaixo, bastando clicar nessa layer e movê-la ou
transformá-la.
• Lembre-se sempre de deixar o “conteúdo” numa layer
superior, para ser inserida em uma layer abaixo
(recipiente).
174
O que aprendemos nesta Unidade:
UA 11: Clipping Mask
11.1 – Apresentação da Clipping Mask
11.2 – As vantagens
175 Clipping Mask – Photoshop
UA 12 – Ferramenta Crop
Unidade de Aprendizagem
Você aprenderá:
• Aprendendo a recortar uma imagem
• Estabelecer cortes com tamanhos
específicos
176 Clipping Mask – Photoshop
12.1 – Apresentação e funções
Bloco de Construção do Aprendizado
177
Ferramenta CROP
• Algumas vezes pretendemos “cortar” um documento,
em determinadas medidas para uso em meios gráficos,
ou Web.
• A ferramenta Crop promove um corte no documento
inteiro (Canvas), para que seja cortado em formato
necessário para algum projeto.
• A tecla de atalho para o Crop é “C”.
Ferramenta Crop – Photoshop
178
Exercício de Fixação - Crop
• Parte 1: Criamos uma interface de site e precisamos
cortar uma imagem nas medidas seguintes: 700 pixels de
largura(Width), por 150 pixels de altura (Height).
Ferramenta Crop – Photoshop
179
Exercício de Fixação - Crop
• Parte 2: Pressione o atalho “C” ou vá até a ferramenta
Crop, para colocar as medidas no Options Bar.
Ferramenta Crop – Photoshop
180
Exercício de Fixação - Crop
• Parte 3: Crie a área de recorte. Podemos usar a tecla
Espaço para deslocar a área de crop, durante a feitura.
Ferramenta Crop – Photoshop
181
Exercício de Fixação - Crop
• Parte 4: Não importa a área que vamos determinar, ao
pressionarmos Enter, a resultante será o valor que
configuramos no Option Bar.
Ferramenta Crop – Photoshop
182
Exercício de Fixação - Crop
• Parte 5: Se desejarmos configurar essas medidas como
“Preset”, para usarmos em outras oportunidades,
podemos usar o Options Bar < Create New Tool Preset.
• No ícone da Crop que se encontra no Option Bar, clique
no pop-up (“setinha preta”)
Ferramenta Crop – Photoshop
183
Exercício de Fixação - Crop
• Parte 6: Quando a janela se abrir marque a opção
“Current Tool Only” e, em seguida, pressione o botão
Create New Tool Preset. Coloque o nome que você
desejar ou então deixe mesmo as características
adotadas.
Ferramenta Crop – Photoshop
184
O que aprendemos nesta Unidade:
UA 12: Ferramenta Crop
12.1 – Apresentação e funções
185 Ferramentas Shape – Photoshop
UA 13 – Ferramentas Forma /
Shape
Unidade de Aprendizagem
Você aprenderá:
• Conhecer as ferramentas de Forma
• Uso adequado da ferramenta Retangular
• Ajustes nas Formas feitas
• Mudança de cores nas Formas criadas
186 Ferramentas Shape – Photoshop
13.1 – Uso da ferramenta
Forma / Shape
Bloco de Construção do Aprendizado
187
Ferramentas Shape
• São formas simples ou personalizadas que podemos usar,
para vários fins.
• São retângulos, retângulos com cantos arredondados,
elipses, polígonos, linhas e outros desenhos.
Ferramentas Shape – Photoshop
188
Ferramentas Shape
No Option Bar das ferramentas Shape, podemos optar por
três formas de fazê-las:
• Shape Layers:cria uma layer própria para essa forma,
com uma máscara de apoio com determinada cor, que
pode ser alterada. A Shape fica na forma de vetor.
• Paths:cria um esboço ou pré-desenho para ser editado
com as ferramentas Path Selection e Direct Selection, em
conjunto com o Paths Panel. Somente vetor.
• Fill pixels:cria um desenho já em pixels na layer que
estiver ativa no Layer Panel, usando a cor que está no
Foreground Color.
Ferramentas Shape – Photoshop
189
Pré-edições das Shapes
No Option Bar das ferramentas Shape, podemos pré-editar
uma forma, antes de ela ser feita. Essas funções variam
de acordo com cada uma das ferramentas Shape
selecionadas.
Também no Option Bar das ferramentas Shape, podemos
editar detalhes de algumas formas, como por exemplo o
polígono e seus lados; ou a linha e sua espessura.
Ferramentas Shape – Photoshop
190
O que aprendemos nesta Unidade:
UA 13: Ferramenta Forma / Shape
13.1 – Uso da ferramenta Forma / Shape
191 Uso Photoshop para Web
UA 14 – Uso do Photoshop
para Web
Unidade de Aprendizagem
Você aprenderá:
• Pixel como unidade de medida para
imagens
• Sobre resoluções
• Elementos da interface de um site
• Feitura de Wireframe
192 Uso Photoshop para Web
14.1 – Pixel como unidade de
medida
Bloco de Construção do Aprendizado
193
O Pixel como unidade de medida
• No universo da Web (e também no do vídeo) os pixels
são a unidade de medida principal.
• As partes de um site serão organizadas em pixels para
uso na Interface.
• Nos buscadores, as imagens encontradas são mostradas
em pixels:
Uso Photoshop para Web
194
O Pixel como unidade de medida
• No universo da Web (e também no do vídeo) os pixels
são a unidade de medida principal.
• As partes de um site serão organizadas em pixels para
uso na Interface.
• Nos buscadores, as imagens encontradas são mostradas
em pixels:
Uso Photoshop para Web
195 Uso Photoshop para Web
14.2 – Resolução das imagens
digitais
Bloco de Construção do Aprendizado
196
Resoluções (DPI)
• A resolução de uma imagem é medida em pixels por
polegadas (DPI, PPI, ou PPP).
• Quanto mais pixels estiverem em uma polegada, mais
opções de cores serão possíveis, o que afeta a qualidade
da imagem global.
• Além da qualidade da imagem, o tamanho físico de uma
imagem também sofre interferências diretas.
• Para a Web as imagens precisam ser otimizadas para
terem um tamanho reduzido em Kb, e manterem a
máxima qualidade possível.
Uso Photoshop para Web
197
Resoluções (DPI)
Tipos de resoluções:
• 72 dpi: indicada para a Web e para vídeo pela leveza.
• 150 dpi:indicada para impressões de baixa qualidade.
• 300 dpi:indicada para impressões de alta qualidade até
o tamanho relativo de um papel A3.
Uso Photoshop para Web
198 Uso Photoshop para Web
14.3 – Elementos da interface
de um site
Bloco de Construção do Aprendizado
199
Elementos da interface
Nos próximos capítulos, vamos mostrar exemplos de como
podemos usar os softwares, para criar cada uma das
principais partes de um site.
Sendo assim, precisamos falar um pouco sobre cada parte
dessas:
• Background
• Logotipo
• Topo
• Menu
• Botões
Uso Photoshop para Web
• Ícones
• Banners / Publicidade
• Conteúdo do site
200
Background
• Fundo do site.
• Pode ser com imagens fixas ou animadas (essas menos
comuns).
• Preferência por fundos “clean”.
• Cores dependem do projeto do site.
Uso Photoshop para Web
201
EXERCÍCIO DE FIXAÇÃO: Background
• Abra um documento com 1 (um) pixel de largura (Width) e
1000 pixels de altura (Height); e 72 dpi;
• Escolha um gradiente de duas cores e aplique-o no documento;
• Salve esse documento em JPG no Desktop, batizando-o de
“fundo” ao salvar. A Quality não precisa ultrassar 8 (High);
• Abra o Dreamweaver e um novo site HTML.
• Salve esse documento como “vai” no próprio Desktop também;
• Nesse documento aberto, vá para a função “código” (botão
CODE na Options Bar);
• Na tag de title escreva: <title>Teste de Background</title>;
• Na tag body escreva:<body background="fundo.jpg">.
(escolha a imagem de bakground no desktop – “fundo”)
• Teste o site: pressione a tecla F12 no Dreamweaver.
Uso Photoshop para Web
202
EXERCÍCIO DE FIXAÇÃO: Background
Uso Photoshop para Web
203
Logotipo
• “Assinatura” do site. Geralmente é colocado no canto
superior esquerdo do site.
• Pode ser animado com recursos 3D, criados em 3D Max ou
Sketch Up em parceria com o Flash.
Uso Photoshop para Web
204
Topo
• Geralmente fica na parte superior ou ao lado do logotipo.
• Podem ser fixos ou animados.
• Podem conter banners publicitários.
Uso Photoshop para Web
205
Menu
• Parte responsável pela navegabilidade de um site.
• Merece maior destaque.
• Levar em conta sempre: legibilidade, usabilidade e
acessibilidade.
Uso Photoshop para Web
206
• Navegabilidade e “linkagem” de um site.
• Recebem “programações” para as linkagens.
• Possuem “rollover”: estados do botão.
Partes de um site – Photoshop
Botões
207
Ícones
• São símbolos que em sua maioria são clicáveis.
• Podem ser animados ou fixos.
• Devem deixar seus significados bem evidentes e ajudar na
Usabilidade.
Partes de um site – Photoshop
208
Banners / Publicidade
• Publicidade de clientes que pagam espaços no site.
• Vários tamanhos dependentes da estrutura do site.
• Podem ser fixos ou animados.
Partes de um site – Photoshop
209
EXERCÍCIO DE FIXAÇÃO: Banner
Partes de um site – Photoshop
210
EXERCÍCIO DE FIXAÇÃO: Banner
Partes de um site – Photoshop
• Crie um banner (Medium Rectanle) nas dimensões: 300
por 250 pixels, 72 dpi, fundo branco.
• O cliente será o Infnet (a logo pode ser obtida no site
www.brandsoftheworld.com).
• O briefing descreve que a criação desse banner, NÃO
ANIMADO, é para divulgar os cursos de Web Master da
instituição.
• A limitação é que ele não ultrapasse 50 Kb de peso final.
• O anúncio será postado no UOL. Ao término dê um
Printscreen no site da UOL e em uma nova layer, coloque
seu banner sobre a área demonstrada a seguir:
211
EXERCÍCIO DE FIXAÇÃO: Banner
Partes de um site – Photoshop
212
Conteúdo do site
• Também faz parte da interface o conteúdo do site, ou
seja as partes visuais de cada setor. Aqui são colocados
ilustrações, fotos, montagens, matérias, textos, vídeos,
etc.
Partes de um site – Photoshop
213 Partes de um site – Photoshop
14.4 – Criação de Wireframes
Bloco de Construção do Aprendizado
214
Wireframes
• Wireframe é o esboço esquemático de uma interface de
site, mostrando através de elementos simples
(retângulos, círculos) a disposição dos elementos da
estrutura. “A principal função do wireframe é simular a
disposição destes elementos informacionais, de modo a
dar, para os interessados no desenvolvimento do projeto,
uma clara idéia do peso destes elementos na interface”,
como disse o Carambola Digital.
• Podemos utilizar retângulos criados por Shapes (em
Shapes Layers) para depois usarmos ou não o Clipping
Mask, entre as imagens e esses retângulos criados.
Uso Photoshop para Web
215
Exemplos de Wireframes
Uso Photoshop para Web
216
Exemplos de Wireframes
Uso Photoshop para Web
217
EXERCÍCIO DE FIXAÇÃO: Wireframe
• Você criará um site para festa infantil, com as seguintes
dimensões: 900 pixels de largura por 760 pixels de altura;
• Ele terá um topo com grande imagem em movimento
(Flash) e cinco opções de Menu.
• O logotipo terá mais ou menos o tamanho do topo e
ficará na parte esquerda ao alto do site.
• O site possuirá área dedicada a publicidade com pelo
menos dois banners (tipos de banner a sua escolha).
• Crie um Wireframe desse projeto com as Shapes
retangulares, aproveitando os espaços.
Uso Photoshop para Web
218
O que aprendemos nesta Unidade:
UA 14: Uso do Photoshop na Web
14.1 – Pixel como unidade de medida
14.2 – Resolução das imagens digitais
14.3 – Elementos da interface de um site
14.4 – Criação de Wireframes
219 Uso Photoshop para Web
UA 15 – Ferramenta Fatia /
Slice
Unidade de Aprendizagem
Você aprenderá:
• Importância de trabalhar com o Layout
fatiado
• Trabalho com a ferramenta Fatia / Slice
• Classificação das imagens por tipo de
arquivo (JPEG, GIF e PNG)
220 Uso Photoshop para Web
15.1 – Ferramenta Fatiar /
Slice
Bloco de Construção do Aprendizado
221
Ferramenta Slices
• Ferramentas dedicadas a “fatiar” um layout,
independemente de suas layer, para gerar imagens
otimizadas para uso em um site.
• Em um segundo processo, as slices já criadas podem ser
salvas em JPEG, GIF, PNG (8 e 24) e WBMP
• As slices também podem receber destinações de URL e
outras configurações.
Uso Photoshop para Web
222
Ferramentas Slices e
Slices Select “C”
Uso Photoshop para Web
223
Smart Guides – Menu View
Uso Photoshop para Web
224
Save for Web and Devices: JPEG
Uso Photoshop para Web
225
Save for Web and Devices: GIF
Uso Photoshop para Web
226
Save for Web and Devices: GIF ...
Uso Photoshop para Web
227
Save for Web and Devices: GIF ...
Uso Photoshop para Web
228
O que aprendemos nesta Unidade:
UA 15: Ferramenta Fatia / Slice
15.1 – Ferramentas Slice
229 Atalhos diversos - Photoshop
UA 16 – Coleção de atalhos do
Photoshop
Unidade de Aprendizagem
Você aprenderá:
• Coleção de teclas de atalhos importantes
no trabalho com o Photoshop
230
Atalhos diversos
Atalhos – Photoshop
231
Atalhos diversos
• Menu Select
• Menu Filter
• Menu View
Atalhos – Photoshop
232
Atalhos diversos
• Menu Window
• Menu Help
• Menu View
Atalhos – Photoshop
233
Atalhos diversos
• Ferramentas - Tools
Atalhos – Photoshop
234
• E-mail: info@infnet.com.br
• Site: http://www.infnet.com.br
• Tel: +55 (21) 2122-8800

Mais conteúdo relacionado

Semelhante a apostila_A10_a.ppsx.pdf

Revista PHOTOSHOP em PDF receita trico facil
Revista PHOTOSHOP em PDF receita trico facilRevista PHOTOSHOP em PDF receita trico facil
Revista PHOTOSHOP em PDF receita trico facilTricô Fácil
 
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamadaAlexandre Ernesto
 
Apostila+do+linux+educacional
Apostila+do+linux+educacionalApostila+do+linux+educacional
Apostila+do+linux+educacionalAguinaldo Silva
 
Curso Maquete eletrônica Aula1
Curso Maquete eletrônica Aula1Curso Maquete eletrônica Aula1
Curso Maquete eletrônica Aula1Cleber Gouveia
 
Dicas e truques no photoshop
Dicas e truques no photoshopDicas e truques no photoshop
Dicas e truques no photoshopandre rossiter
 
Macetes e sugestões do photoshop
Macetes e sugestões do photoshopMacetes e sugestões do photoshop
Macetes e sugestões do photoshopJorge Alexandre
 
Photoshop - Ferramentas Essenciais
Photoshop - Ferramentas EssenciaisPhotoshop - Ferramentas Essenciais
Photoshop - Ferramentas EssenciaisREMO Engenharia
 
Apostila dominando ps cs5
Apostila dominando ps cs5Apostila dominando ps cs5
Apostila dominando ps cs5grazielli1993
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Willian Magalhães
 
Efeito de Texto em Neon - GIMP 2.8
Efeito de Texto em Neon - GIMP 2.8Efeito de Texto em Neon - GIMP 2.8
Efeito de Texto em Neon - GIMP 2.8Jean Carlos
 
Como ajustar-imagens-gimp
Como ajustar-imagens-gimpComo ajustar-imagens-gimp
Como ajustar-imagens-gimpAprendiz na web
 

Semelhante a apostila_A10_a.ppsx.pdf (20)

Curso fotoshp
Curso fotoshpCurso fotoshp
Curso fotoshp
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Revista PHOTOSHOP em PDF receita trico facil
Revista PHOTOSHOP em PDF receita trico facilRevista PHOTOSHOP em PDF receita trico facil
Revista PHOTOSHOP em PDF receita trico facil
 
Photoshop cs-6
Photoshop cs-6Photoshop cs-6
Photoshop cs-6
 
2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada2ª prova pós web 1ª chamada
2ª prova pós web 1ª chamada
 
Quadrinhos Livres
Quadrinhos LivresQuadrinhos Livres
Quadrinhos Livres
 
teste 22
teste 22teste 22
teste 22
 
Apostila+do+linux+educacional
Apostila+do+linux+educacionalApostila+do+linux+educacional
Apostila+do+linux+educacional
 
Apostila photoshop 7
Apostila photoshop 7 Apostila photoshop 7
Apostila photoshop 7
 
Curso Maquete eletrônica Aula1
Curso Maquete eletrônica Aula1Curso Maquete eletrônica Aula1
Curso Maquete eletrônica Aula1
 
Dicas e truques no photoshop
Dicas e truques no photoshopDicas e truques no photoshop
Dicas e truques no photoshop
 
Apostila ps
Apostila psApostila ps
Apostila ps
 
Photoshop cs6 basico
Photoshop cs6 basicoPhotoshop cs6 basico
Photoshop cs6 basico
 
Apostila photoshop
Apostila photoshopApostila photoshop
Apostila photoshop
 
Macetes e sugestões do photoshop
Macetes e sugestões do photoshopMacetes e sugestões do photoshop
Macetes e sugestões do photoshop
 
Photoshop - Ferramentas Essenciais
Photoshop - Ferramentas EssenciaisPhotoshop - Ferramentas Essenciais
Photoshop - Ferramentas Essenciais
 
Apostila dominando ps cs5
Apostila dominando ps cs5Apostila dominando ps cs5
Apostila dominando ps cs5
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01
 
Efeito de Texto em Neon - GIMP 2.8
Efeito de Texto em Neon - GIMP 2.8Efeito de Texto em Neon - GIMP 2.8
Efeito de Texto em Neon - GIMP 2.8
 
Como ajustar-imagens-gimp
Como ajustar-imagens-gimpComo ajustar-imagens-gimp
Como ajustar-imagens-gimp
 

apostila_A10_a.ppsx.pdf

  • 1. A10 Um curso Infnet utilizando a metodologia NETLEARN® . Adobe Photoshop para Web
  • 2. 2 APRESENTA ÇÃO NETLEARN® ONE TEORI A MÓDULO DE INTRODUÇÃ O 1a UNIDADE DE APRENDIZAD O INTRODUÇÃ O DA UA BLOCO DE CONSTRUÇÃ O DO APRENDIZA DO U A EXEM PLO EXERCÍ CIOS DESCRI ÇÃO CONCEI TOS BÁSICO S REFERÊNCIA S ESTUDO DE CASOS PROJETO JÚNIOR LAB BLOCO DE CONSTRUÇÃ O DO APRENDIZA DO APRESENTA ÇÃO TEORI A EXEM PLO EXERCÍ CIOS LAB NETLEARN® - INTRODUÇÃO
  • 3. 3 A apostila • Sua apostila é dividida em 2 partes: – os slides, na parte de cima de cada página – as anotações, na parte de baixo • Slides: – São os slides que o professor vai utilizar durante o curso. • Anotações: – Informações complementares, zoom no código de programas e espaço para você escrever Adobe Photoshop
  • 4. 4 Apresentações • Professor – Nome – E-mail – Experiência • Alunos – Nome – Empresa onde trabalha e cargo – Expectativas Adobe Photoshop
  • 5. 5 Todo e qualquer apoio didático fornecido pela Instituição ou pelo professor, seja em papel ou por meios digitais, desde que devidamente aprovados, serão considerados material didático. Ao final de cada curso na avaliação, os alunos podem levar em conta essa informação para avaliar o material didático. Sobre o material didático Adobe Photoshop
  • 6. 6 A Adobe Certified Expert (ACE) O programa Adobe(R) Certified Expert (ACE) (Especialista Certificado da Adobe) destina-se a designers gráficos, designers da Web, integradores de sistemas, revendedores, desenvolvedores e profissionais do comércio que estejam buscando um reconhecimento oficial da sua experiência com produtos da Adobe. Adobe Photoshop
  • 7. 7 Logística • Horários • Computadores e Rede • Banheiros • Cigarro • Telefone Adobe Photoshop
  • 8. 8 Unidades do curso • UA 1: Introdução ao Photoshop • UA 2: Introdução ao Photoshop • UA 3: Ajustes nas imagens • UA 4: Seleções • UA 5: Transferência de Imagens • UA 6: Transformações • UA 7: Painel de Camadas / Layers • UA 8: Retoques de Imagens Adobe Photoshop
  • 9. 9 Unidades do curso • UA 9: Camadas de ajuste • UA 10: Aplicação de Fill Layers • UA 11: Clipping Mask • UA 12: Ferramenta Crop • UA 13: Ferramenta Forma / Shape • UA 14: Uso do Photoshop na Web • UA 15: Ferramenta Fatia / Slice • UA 16: Coleção de atalhos do Photoshop Adobe Photoshop
  • 11. 11 UA 1: Introdução ao Photoshop Você aprenderá: • Apresentação do Photoshop • Abrir documentos • Navegação nos documentos • Atalhos para navegação Introdução ao Photoshop Unidade de Aprendizagem
  • 12. 12 1.1 - Apresentação do Photoshop Introdução ao Photoshop Bloco de Construção do Aprendizado
  • 13. 13 Introdução ao Photoshop Apresentação do Photoshop Pixels
  • 14. 14 1.2 - Abrir documentos (imagens) Introdução ao Photoshop Bloco de Construção do Aprendizado
  • 16. 16 1. Menu File < Open, cujo atalho é Ctrl+O: Essa operação faz abrir uma janela onde escolheremos o arquivo. Formas de Abrir documentos Introdução ao Photoshop
  • 17. 17 2. Duplo-clique: Esse processo é bem rápido para abrir documentos e imagens: basta dar dois cliques no fundo cinza escuro. Esse caminho abre a janela Open. Formas de Abrir documentos Introdução ao Photoshop
  • 18. 18 3. Adobe Bridge: O pacote de programas Adobe vem com um gerenciador de arquivos, que apresenta várias informações importantes sobre os documentos, bem como sua visualização em miniaturas. O nome desse recurso é Adobe Bridge. Formas de Abrir documentos Introdução ao Photoshop
  • 19. 19 Introdução ao Photoshop
  • 20. 20 1.3 - Tipos de visualização (screens) Introdução ao Photoshop Bloco de Construção do Aprendizado
  • 21. 21 • Para variar entre os modos de tela, basta usar a tecla “F” algumas vezes, ou ainda utilizar o ícone de Screen Mode, presente na parte superior. • Para não ver mais o menu, a barra de controle e as paletas do Photoshop, basta usar a tecla TAB. Telas de visualização (screen) Introdução ao Photoshop
  • 22. 22 1.4 - Navegação nos documentos Introdução ao Photoshop Bloco de Construção do Aprendizado
  • 23. 23 • É uma paleta presente no Photoshop, para que possamos ampliar ou reduzir o zoom (através do rodapé) e ainda deslocar a visualização através do retângulo vermelho. Clique no retângulo vermelho e mova-o quando estiver em zoom maior do que 100%. Painel Navigator Introdução ao Photoshop
  • 24. 24 CTRL+ “+” – amplia o zoom CTRL+ “-” – reduz o zoom CTRL+ “0” (zero) - para dar um zoom suficiente para caber na área de trabalho disponível. Fit on Screen. CTRL+ALT + “0” (zero) - para dar um zoom de 100% que é o tamanho real, ou “Actual size”. A Tecla espaço - enquanto estiver pressionada o cursor virará a Hand, possibilitando clicar e deslocar a visualização em zooms maiores do que 100%. Atalhos de navegação Introdução ao Photoshop
  • 25. 25 • Quando temos várias janelas abertas ao mesmo tempo no Photoshop, podemos usar a função Arrange (Menu Window < Arrange). Visualização de vários documentos Introdução ao Photoshop
  • 26. 26 O que aprendemos nesta Unidade: UA 1: Introdução ao Photoshop: 1.1 - Apresentação do Photoshop 1.2 - Abrir documentos 1.3 - Tipos de visualização (Screens) 1.4 - Navegação nos documentos
  • 27. 27 UA 2 - Cores no Photoshop Você aprenderá: • O uso de cores no Photoshop • Os painéis de cores e o seletor de cores • Criação e uso do Gradiente Cores – Photoshop Unidade de Aprendizagem
  • 28. 28 2.1 – Cores no Photoshop Bloco de Construção do Aprendizado
  • 29. 29 • Determinar um modo de cor: Menu Image < Mode. • RGB – para WEB e vídeo. • CMYK – para impressão em grande escala (Off-set por exemplo). • Grayscale – tons de cinza descartando as cores. • Entre outros modos. Modos de cores: RGB ou CMYK? Cores – Photoshop
  • 30. 30 2.2 - Color Picker e Panel Cores – Photoshop Bloco de Construção do Aprendizado
  • 31. 31 • Na própria Tool Bar (Barra de ferramentas) existe um controle de cores que chamamos de Color Picker. O Photoshop permite a criação de duas cores para serem combinadas em várias aplicações (gradiente, pincéis, etc). Os dois quadradinhos representam o Foreground (primeiro plano) e o Background (plano de fundo). Color Picker (na Tool Bar) Cores – Photoshop
  • 32. 32 Janela do Color Picker Cores – Photoshop
  • 33. 33 • Quando escolhemos uma cor no quadro, pode haver advertências, que alertam quando ela não está em CMYK (para impressão) ou quando a cor não é segura para Web. Avisos de cor (Impressão e Web) Cores – Photoshop
  • 34. 34 • Para Web podemos escolher a opção Only Web Colors (somente cores seguras para Web). Only Web Color (cores seguras) Cores – Photoshop
  • 35. 35 • Muito semelhante ao anterior, o color panel oferece as mesmas opções e outras ainda em seu Options. Color Panel Cores – Photoshop
  • 36. 36 • É um painel para guardarmos cores para uso constante. Assim que nós criarmos uma cor, vamos até o Swatches até aparecer um balde no cursor, ou então, com essa cor em primeiro plano cliquemos no rodapé do Swatches Panel no botão Swatches Panel Cores – Photoshop
  • 37. 37 • No Options do painel de Swatches, podemos encontrar as cores Pantones para abrir as “amostras”. Swatches Panel Options Cores – Photoshop
  • 39. 39 Ferramenta Eydedropper / Conta-gotas Cores – Photoshop
  • 40. 40 • Você realizará um trabalho institucional para um cliente. • Ele lhe dá um Manual de Identidade Visual, determinando o uso das seguintes cores: R = 234; G= 120; B = 30. (Dar nome= “Cor_1”) C = 67%; M = 12%; Y = 0%; B = 0%. (Dar nome= “Cor_2”) Pantone Solid Coated = 210 C. (Dar nome= “Cor_3”) • Guarde tais cores no Swatches Panel facilitando seu uso durante a criação. (Só para guardar no Swatches) EXERCÍCIO FIXAÇÃO:Swatches Cores – Photoshop
  • 41. 41 2.3 - Gradientes no Photoshop Cores – Photoshop Bloco de Construção do Aprendizado
  • 42. 42 • Gradiente é a transição entre duas ou mais cores e no Photoshop, usamos a ferramenta Gradient para criar. Assim ficará a Options Bar quando ativarmos Gradient: • As cores escolhidas para primeiro plano e fundo, interferem nas opções apresentadas, nesse caso foram as cores vermelho e preto. Cliquemos no pop-up ao lado (setinha preta), para vermos outros tipos de fluência. Ferramenta Gradient / Degradê Cores – Photoshop
  • 43. 43 • As opções de gradientes já prontos, ficam no pop-up (setinha preta). A primeira opção é sempre a relação enter as cores de Fore e Background; a segunda é o Fore indo para a transparência; a terceira é preto e branco. Ferramenta Gradient / Degradê Cores – Photoshop
  • 44. 44 • Fluência de Gradiente é o como ele cria a transição das cores envolvidas. Suas opções estão na próprio barra de comando, como vemos abaixo: Ferramenta Gradient / Degradê Cores – Photoshop
  • 45. 45 • Para criarmos nosso próprio gradiente, cliquemos sobre a amostra do gradiente, o que fará abrir o Gradient Editor. Ferramenta Gradient Cores – Photoshop
  • 46. 46 Sliders para controle de cores Sliders para controle de opacidade Cores – Photoshop
  • 47. 47 • Na barra de Opções, quando estamos na ferramenta Gradient, notamos a presença do Mode (Blending Modes) para promover a mesclagem do gradiente aplicado na imagem das layers abaixo. Assim como a Opacity. Ferramenta Gradient - Mode Cores – Photoshop
  • 48. 48 • Crie um documento novo com as medidas: • 800 pixels de largura (Width) por 800 pixels de altura (Height); com 72 dpi (por “inch”) de resolução; Modo de cor: RGB; 8 bits e Contents White; • Ative a ferramenta Gradient e escolha uma combinação com pelo menos três cores (colorida); • Aplique esse gradiente na opção de fluência radial, na camada inteira; • Altere o Mode no Options Bar para “Difference” e vá reaplicando o mesmo Gradient várias vezes sobre essa mesma layer. EXERCÍCIO FIXAÇÃO:Gradient Cores – Photoshop
  • 49. 49 O que aprendemos nesta Unidade: UA 2: Introdução ao Photoshop 2.1 - Cores no Photoshop 2.2 - Color Picker e Panel 2.3 - Gradientes no Photoshop
  • 50. 50 Adjustments – Photoshop UA 3 - Ajustes nas imagens (Adjustments) Unidade de Aprendizagem Você aprenderá: • Sobre os ajustes destrutíveis • Sobre os tipos principais de ajustes
  • 51. 51 3.1 – Ajustes principais Bloco de Construção do Aprendizado
  • 52. 52 • Menu Image < Adjustments Ajustes da imagem (Adjustments) Adjustments – Photoshop
  • 53. 53 • Brightness / Contrast ou Brilho / Contraste - ajusta de forma bem simples os níveis de brilho e contraste de uma imagem. BRIGHTNESS / CONTRAST Adjustments – Photoshop
  • 54. 54 • Levels / Níveis (Ctrl+L)- ajusta os níveis de intensidade das shades (sombras), tons médios (midtones) e realces (Highlights) da imagem. Basta deslizar os três sliders encontrados na janela de diálogo desse ajuste. LEVELS Adjustments – Photoshop
  • 56. 56 • Hue / Saturation ou Matiz / Saturação (Ctrl+U)- - ajusta o matiz das cores globais, a saturação e a luminosidade de uma imagem. Marcando a opção “Colorize” nessa janela, toda a imagem receberá somente uma cor para variar em tonalidades. Escolha que cor será, deslizando o Hue (Matiz). HUE / SATURATION Adjustments – Photoshop
  • 58. 58 • Color Balance / Balanço de cores (Ctrl+B) - ajusta os valores de cores gerais, aplicando ou reduzindo: cyan (ciano), red (vermelho), magenta, green (verde), yellow (amarelo) ou blue (azul escuro). Quando uma foto está muito carregada no verde, podemos usar o Color Balance para reduzir o green, deslizando o slider para a cor oposta, nesse caso, a cor magenta. Outra possibilidade para esse ajuste é o de colorir áreas selecionadas, em uma foto preto e branca. COLOR BALANCE Adjustments – Photoshop
  • 60. 60 • Vibrance / Vibração - aumenta a saturação das cores que tinham menor saturação e quase não altera as cores que já estavam saturadas. Esse ajuste também previne os tons de pele de se tornarem muito saturados. VIBRANCE Adjustments – Photoshop
  • 61. 61 • Black & White - transforma uma foto colorida em tons de cinza, permitindo o ajuste do espaço de cada antiga cor e suas tonalidades. Podemos dar um clique nas áreas da imagem real e, mantendo o clique, deslizar para um lado e para o outro. O próprio Photoshop detecta a cor que foi clicada e a ajusta na composição Black & White. Ainda nesse ajuste é possível usar o campo Tint, para aplicar uma só cor em toda a obra, criando por exemplo um sépia. BLACK & WHITE Adjustments – Photoshop
  • 63. 63 • Replace Color / Substituir Cor - substitui cores especificadas em uma imagem por novos valores de cor. Use o cursor para clicar na imagem real, capturando essa cor específica. Depois de selecionada controle o Fuzziness para estabelecer quanto dessa cor será selecionada para então substituí-la por outra, nos controles de Hue/Saturation logo abaixo. REPLACE COLOR Adjustments – Photoshop
  • 64. 64 Adjustments – Photoshop
  • 65. 65 • Threshold - transforma a foto em uma imagem realmente preta e branca: somente com essas duas cores. Isso deixa a foto parecendo um desenho. THRESHOLD Adjustments – Photoshop
  • 67. 67 • Photo Filter – simula os efeitos de colocar um filtro colorido na frente da câmera fotográfica, para ajustar o balanço e “temperatura” da cor em uma foto. PHOTO FILTER Adjustments – Photoshop
  • 68. 68 O que aprendemos nesta Unidade: UA 3: Ajustes nas imagens 3.1 – Os Ajustes principais
  • 69. 69 Seleções – Photoshop UA 4 - Seleções e suas ferramentas Unidade de Aprendizagem Você aprenderá: • Funções das seleções • Ferramentas de seleção
  • 70. 70 Seleções – Photoshop 4.1 – Seleções no Photoshop Bloco de Construção do Aprendizado
  • 71. 71 Seleções – Photoshop 4.2 – Ferramentas de Seleções Bloco de Construção do Aprendizado
  • 72. 72 Ferramentas de Seleção: • Marquee (Rectangular e Elliptical) (atalhos – “M”) • Lasso (Lasso, Polygonal e Magnetic) (atalhos – “L”) • Magic Wand (atalho – “W”) FERRAMENTAS DE SELEÇÃO Seleções – Photoshop
  • 73. 73 • Marquee (Rectangular e Elliptical) (atalhos – “M”): fazem seleções retangulares e elípticas. Atalhos de uso: • SHIFT – durante a feitura de uma seleção, mantém a proporção criando quadrados ou círculos. • TECLA ESPAÇO – durante a feitura de uma seleção, permite que desloquemos sua posição, mexendo com o mouse. FERRAMENTAS MARQUEE Seleções – Photoshop
  • 74. 74 Lasso (Lasso, Polygonal e Magnetic) (atalhos – “L”): • LASSO: é criada de forma simples, criando um “pré-desenho” que ao ser solto, gerará uma seleção. • POLYGONAL LASSO: permite a preparação de uma seleção, feita de clique em clique, marcando as arestas desejadas. Quando fechamos o “pré-desenho” a seleção se forma. • MAGNETIC LASSO: analisa as áreas de clique, para gerar o “pré-desenho” de forma automática, de acordo com os ajustes de Frequency e Contrast, feitos no Options Bar. FERRAMENTAS LASSO Seleções – Photoshop
  • 75. 75 Dicas importantes para a feitura da seleção: • Crie um zoom adequado para realizar o “pré-desenho”. • Ao desenhar com a Polygonal Lasso, de clique em clique, use a tecla DELETE para corrigir clique errados. • Não dê dois cliques no mesmo lugar, o que geraria o fechamento automático da seleção. DICAS PARA USO DA POLYGONAL LASSO Seleções – Photoshop
  • 76. 76 Magic Wand (atalhos – “W”): • Ao clicar em uma área qualquer (pixel), a ferramenta Magic Wand analisa os pixels vizinhos e suas cores. As áreas com a cor semelhante, serão envolvidas em uma mesma seleção. O grau de sensibilidade para o Photoshop analisar a semelhança entre as cores, é determinada pelo campo Tolerance no Options Bar. FERRAMENTA MAGIC WAND Seleções – Photoshop
  • 78. 78 • No Options Bar encontramos a função Contiguous que promove a seleção dos pixels, por contiguidade: que tenham contato. Quando a seleção entcontra pixels com cores distintas, desborda, desvia, até não ter mais áreas contiguas. • Desligando essa função, é possível selecionarmos áreas internas como no exemplo da imagem seguinte: MAGIC WAND: Contiguous Seleções – Photoshop
  • 79. 79 Seleções – Photoshop
  • 80. 80 Seleções – Photoshop 4.3 – Operações com as Seleções Bloco de Construção do Aprendizado
  • 81. 81 • Essas operações encontram-se no Options Bar de todas as ferramentas de Seleção, e servem para a edição na forma das seleções já feitas. São elas: • New Selection – move a seleção feita e apaga as anteriores • Add to Selection – adiciona uma nova seleção às anteriores. • Subtract from Selection – apara uma seleção feita, com uma nova • Intersect with a Selection – deixa sobrar somente a área da seleção nova comum também às anteriores. OPERAÇÕES COM AS SELEÇÕES Seleções – Photoshop
  • 82. 82 OPERAÇÕES COM AS SELEÇÕES Seleções – Photoshop
  • 83. 83 • O Quick Mask é uma máscara rápida que revela as áreas selecionadas, deixando as áreas não selecionadas com um “campo” colorido ao redor. • O atalho para essa função é a tecla: “Q”. Mas o botão encontra-se na parte inferior no Tool Bar. • Também é possível editar uma seleção nesse modo, usando as ferramentas de Brush: cores em preto e branco. Ou também a ferramenta Eraser. • Dando dois cliques na ferramenta Quick Mask, na Tool Bar é possível editar as suas cores e sua opacidade. QUICK MASK Seleções – Photoshop
  • 84. 84 Seleções – Photoshop 4.4 – Menu Seleção / Select Bloco de Construção do Aprendizado
  • 85. 85 O Menu Select oferece várias opções de configuração para as seleções: • All (Ctrl+A) – Seleciona toda a área da layer ativa. • Deselect (Ctrl+D) – Retira a seleção. • Reselect (Ctrl+Shift+D) – retorna com a última seleção. • Inverse (Ctrl+Shift+I) – Inverte a seleção feita. • All layer (Ctrl+Alt+A) – Ativa todas as layers no painel. • Deselect layers – para desativar as layers todas. • Similar layers – seleciona as layers de um mesmo tipo. MENU SELECT Seleções – Photoshop
  • 86. 86 • Color Range: “Alcance da cor”. Abre uma janela para selecionarmos áreas de cores semelhantes. Com a janela aberta, vá até a imagem (documento) e clique em alguma cor. • Refine Edges (Ctrl+Alt+R) – permite o refinamento de uma seleção feita através de diversos ajustes. • Modify – possibilita vários ajustes na estrutura de uma seleção feita, tais como: criação de uma borda (Border); suavizar as “pontas” (Smooth); expandí-la e reduzí-la (Expand e Contract); e esmaecimento da seleção (Feather). MENU SELECT Seleções – Photoshop
  • 87. 87 • Grow: quando criamos alguma seleção com a ferramenta Magic Wand por exemplo, podemos ampliar a seleção através do comando Grow. • Similar: amplia a seleção através da seleção de cores similares, parecidas. • Transform Selection: permite a transformação das dimensões e posições de uma seleção. • Save e Load Selection: permite salvar (guardar) uma seleção feita e carregá-la (load) depois no documento aberto. As seleções salvas ficam guardadas no Channel Panel. MENU SELECT Seleções – Photoshop
  • 88. 88 O que aprendemos nesta Unidade: UA 4: Seleções 4.1 – Seleções no Photoshop 4.2 – Ferramentas de Seleção 4.3 – Operações com as seleções 4.4 – Menu Seleção / Select
  • 89. 89 Transferência de imagens - Move – Photoshop UA 5 - Transferência de Imagens (Move) Unidade de Aprendizagem Você aprenderá: • Transferir uma imagem ou parte dela, entre arquivos diferentes
  • 90. 90 Transferência de imagens - Move – Photoshop 5.1 – Ferramenta Mover / Move Bloco de Construção do Aprendizado
  • 91. 91 • Após selecionarmos uma parte de uma imagem em um documento aberto, podemos usar a ferramenta Move (atalho “V”), para deslocá-la para outro documento aberto no Photoshop. • Também é possível deslocar toda uma imagem para outro documento, sem precisar de seleções e mesmo que a layer seja Background, usando a Move. Transferências de imagens - Move Transferência de imagens - Move – Photoshop
  • 92. 92 • Para garantir que uma imagem trazida de outro documento, fique alinhado rigorosamente alinhada com o documento de destino, pressione “SHIFT” antes de soltar. Transferências de imagens - Move Transferência de imagens - Move – Photoshop
  • 93. 93 • Entre um documento e outro, use as abas da nova interface. Arraste até a aba e aguarde alguns segundos até esse documento de destino se abrir. Após a sua abertura leve a imagem transportada até o seu interior, para soltá-la. Transferências entre abas Transferência de imagens - Move – Photoshop
  • 94. 94 Transferência de imagens - Move – Photoshop
  • 95. 95 Transferência de imagens - Move – Photoshop Transferências entre abas
  • 96. 96 O que aprendemos nesta Unidade: UA 5: Transferência de Imagens 5.1 – Ferramenta Mover / Move
  • 97. 97 Transformação – Photoshop UA 6 - Transformações Unidade de Aprendizagem Você aprenderá: • Transformações em imagens para montagens fotográficas • Dimensionar, girar, inclinar, distorcer e perspectiva • Transformações livres
  • 98. 98 Transformação – Photoshop 6.1 – Tipos de transformações Bloco de Construção do Aprendizado
  • 99. 99 • Para fazer uma montagem fotográfica por exemplo, precisamos adequar o tamanho de uma imagem para caber em algum local. Ou então, precisamos rodar uma imagem recortada para fazer sentido na montagem; ou ainda propor nova perspectiva. Tipos de Transformação: • Scale (Dimensionar), Rotate (Girar), Skew (Inclinar), Distort (Distorcer) e Perspective (Perspectiva). TRANSFORMAÇÃO Transformação – Photoshop
  • 100. 100 • É pelo Menu Edit < Transform que aplicamos as transformações em uma imagem. Quando ativamos qualquer uma das transformações desse menu, podemos ver uma caixa de edição, com suas alças diagonais e centrais: Menu Edit < Transform Transformação – Photoshop
  • 102. 102 • Scale (dimensionar) - amplia ou reduz o tamanho da imagem através de qualquer das alças. Usando as alças diagonais com o Shift pressionado, mantemos a proporção. Usando Alt em qualquer alça, mantemos concentricidade (o centro da imagem não muda). • Quando sobre as alças o cursor fica assim: Scale (Dimensionar) Transformação – Photoshop
  • 103. 103 • Rotate (girar) - gira a imagem através das alças. Se usarmos Shift, o giro fica de 15 em 15 graus. Podemos deslocar o Eixo (ao centro da imagem) para propor novo ponto fixo enquanto giramos. • Quando sobre as alças o cursor fica assim: Rotate (Girar) Transformação – Photoshop
  • 104. 104 • Skew (inclinar) - inclina a imagem através das alças centrais de preferência. • Quando sobre as alças o cursor fica assim: Skew (Inclinar) Transformação – Photoshop
  • 105. 105 • Distort (distorção) - promove distorções permitindo que movamos cada alça diagonal (de preferência) de forma independente. Isso gera perspectivas diferentes. Usando o Shift esse lado fica fixo. • Quando sobre as alças o cursor fica assim: Distort (Distorcer) Transformação – Photoshop
  • 106. 106 • Perspective (perspectiva) - aplica perspectiva usando uma das alças diagonais, fazendo a ponta oposta mover-se para o outro lado. • Quando sobre as alças o cursor fica assim: Perspective (Perspectiva) Transformação – Photoshop
  • 107. 107 • Rotate 180º, 90º CW e 90º CCW - gira a imagem nos ângulos propostos. CW = sentido horário. CCW = sentido anti-horário. Rotate 180º, 90º CW e CCW. Transformação – Photoshop
  • 108. 108 • Flip horizontal / vertical - “espelha” a imagem de forma horizontal ou vertical. Flip Horizontal/Vertical Transformação – Photoshop
  • 109. 109 Transformação – Photoshop 6.2 – Transformações livres Bloco de Construção do Aprendizado
  • 110. 110 • Mais prático do que usar cada opção do Menu Edit < Transform, é usar o Free Transform, que apresenta essas transformações todas juntas, acionadas através de atalhos como veremos abaixo. • Usamos o atalho Ctrl+T para ativar o Free Transform (ou Menu Edit < Free Transform), e quando virmos as alças de transformação, usamos os atalhos a seguir: Free Transform (Ctrl+T) Transformação – Photoshop
  • 111. 111 • Para mover a imagem - basta clicar no interior da imagem, clicar e arrastá-la. Note o cursor • Para Scale - não é preciso usar atalho, basta colocar o cursor sobre as alças até vermos esses cursores . Valem as mesmas aplicações do Shift (proporção) e Alt (concentricidade). • Para Rotate - não é preciso usar atalho, basta afastar ligeiramente o cursor das alças diagonais, até vermos essa forma no cursor . Vale a mesma aplicação do Shift para giros com ângulos de 15º. Free Transform (Ctrl+T) Transformação – Photoshop
  • 112. 112 • Para Skew - utilize os atalhos Ctrl+Shift (juntos) nas alças centrais (de preferência). Cursor • Para Distort - utilize o atalho Ctrl nas alças diagonais. Com o Ctrl pressionado também podemos usar as alças centrais, o que parece ser um Skew (inclinar), só que sem proporções. Cursor • Para aplicar o Perspective - utilize os atalhos Ctrl+Shift+Alt (juntos) nas alças diagonais. Cursor Free Transform (Ctrl+T) Transformação – Photoshop
  • 114. 114 • Para aplicar as transformações feitas, saindo do Transform ou Free Transform, pressionemos qualquer ferramenta no Tool Bar. Isso abrirá uma janela onde escolheremos Apply (aplicar). Também podemos pressionar a tecla ENTER, o que já aplica a transformação. • Também é possível pressionar ESC, para sair da transformação sem aplicá-la. • OBS: Sem isso o Photoshop fica paralisado aguardando. Finalização da transformação Transformação – Photoshop
  • 115. 115 O que aprendemos nesta Unidade: UA 6: Transformações 6.1 – Tipos de transformações 6.2 – Transformações livres
  • 116. 116 Layer Panel – Photoshop UA 7 – Painel de camadas / Layer Panel Unidade de Aprendizagem Você aprenderá: • Sobre o trabalho em camadas • Sobre o Painel de Camadas • Partes componentes do Painel de Camadas • Operações com o Painel de Camadas
  • 117. 117 Layer Panel – Photoshop 7.1 – O Painel de Camadas / Layers Bloco de Construção do Aprendizado
  • 118. 118 LAYER PANEL Layer Panel – Photoshop
  • 119. 119 • Procure pelo nome Layers entre as paletas ou por esse ícone .Caso não a encontre vá ao menu Window < Layers ou pressione seu atalho: a tecla F7. Ativação do Layer Panel Layer Panel – Photoshop
  • 120. 120 Layer Panel – Photoshop 7.2 – Componentes do painel de Camadas Bloco de Construção do Aprendizado
  • 121. 121 Layer Panel – Photoshop 2 1 3 4 5 6 7 8 9 10 11 12 13 14 15 17 16 Componentes do Layer Panel
  • 122. 122 Layer Panel – Photoshop 7.3 – Operações com Camadas Bloco de Construção do Aprendizado
  • 123. 123 • É possível fundir as layers usando os comandos de Merge existentes no options no painel. A fusão diminui o peso do arquivo. • Merge Down ou Merge Layers (Ctrl+E) - funde a layer ativa com a layer imediatamente abaixo dela. Quando as layers estão selecionadas o comando as funde. • Merge Visible (Ctrl+Shift+E) - funde as layers visíveis. • Flatten Image - faz uma fusão total criando um Background novamente. Não deixa transparências. Mesclar Layers Layer Panel – Photoshop
  • 124. 124 • O Blending Mode serve para misturar as cores dos pixels que são aplicados, com as cores que estavam anteriormente, ou nas layers abaixo. • Vários efeitos curiosos são obtidos com tais efeitos. • Várias ferramentas possuem controle de Blanding Mode em suas Options Bar (Brush, Pencil, Clone Stamp, Gradient, etc). • No Layer Panel está presente o Blending Mode para efetuar esses efeitos entre as layers abaixo. Blending Mode Layer Panel – Photoshop
  • 125. 125 Criação de nova layer vazia (nasce sobre a que estava ativa): • No rodapé do Layer Panel. • Através do atalho Ctrl+Shift+N. • No Options do Layer Panel. • No Menu Layer < New < Layer. Obs.: Clicar sobre o ícone de “Create a new Layer” no rodapé do Layer Panel, mantendo o ALT permite a abertura da janela de edição da layer.Então: Alt+ Criação de layers Layer Panel – Photoshop
  • 126. 126 Ordenação (empilhamento) de layers Layer Panel – Photoshop Para ordenar as layers no Layer Panel, clique em uma delas e arraste-a para cima ou baixo, até notar uma linha sinalizadora (preta), indicando que já se pode soltar. As layers Background não podem ser ordenadas.
  • 127. 127 • Podemos selecionar layers que formam uma determinada idéia, e agruparmos essas layers criando um folder. Podemos fazer de três maneiras: • Selecionar as Layers desejadas no Layer Panel e pressionar o atalho: Ctrl+G. • Selecionar as Layers desejadas no Layer Panel e ir ao Menu Layer < New < Group from Layers. • Usar o ícone Create a new Group no rodapé do Layer Panel e arrastar as layers desejadas para dentro da pasta de group criada. Agrupar Layers Layer Panel – Photoshop
  • 128. 128 Marcar com cores uma Layers Layer Panel – Photoshop Ao criarmos uma layer, podemos adotar uma cor para marcar as layers, no campo Color da janela de diálogo. Também é possível clicar com o botão direito no “olhinho” do View e escolher uma cor.
  • 129. 129 O que aprendemos nesta Unidade: UA 7: Painel de Camadas / Layers 7.1 – O painel de camadas / layers 7.2 – Componentes do painel 7.3 – Operações com camadas
  • 130. 130 Retoques de Imagens – Photoshop UA 8 – Retoques de Imagens Unidade de Aprendizagem Você aprenderá: • As principais formas de retocar uma imagem digital • Usar as ferramentas de retoque do Photoshop
  • 131. 131 Retoques de Imagens – Photoshop 8.1 – Ferramentas de retoque Bloco de Construção do Aprendizado
  • 132. 132 • Produz o desfocamento de área “pintadas”. Note que essa ferramenta possui Brush (pincel) no Options Bar, para editarmos como desejamos seu pincel. Também podemos usar os atalhos “[” ou “]” para o seu tamanho. • Quando promovemos o recorte de uma imagem para levar para outra, em uma montagem, pode ser que as arestas (limites) fiquem muito nítidas. Isso deixa muito evidente que foi uma montagem, então podemos desfocar levemente as arestas “pintando” com a Blur. • Ainda no Options Bar é possível usar a função Strenght (intensidade) para ajustar a força desse desfoque. Ferramenta Blur (Desfoque) Retoques de Imagens – Photoshop
  • 133. 133 • O contrário da anterior. Ideal para ampliar a nitidez de lábios e olhos. Mas não exageremos para não destruir as cores dos pixels da área. Ferramenta Sharpen (Nitidez) Retoques de Imagens – Photoshop
  • 134. 134 • Serve para criar efeito de borrado ao ser passada nas áreas da imagem. Se usar a Smudge com a função Finger Paiting (Pintar com dedo) marcada, ela mancha a área com a cor que está em primeiro plano. Ferramenta Smudge (Borrar) Retoques de Imagens – Photoshop
  • 135. 135 • Aplica mais claridade nas áreas pintadas. A ferramenta Dodge também possui controle de pincel. A função Range (alcance) trabalha com o tipo de tom que ela atuará e a função Exposure (exposição) ajusta a força de aplicação dessa ferramenta. • A função Protect Tones (proteger tons), também encontrada no Options Bar, promove equilíbrio de saturação nas áreas para melhorar o retoque. Ferramenta Dodge Retoques de Imagens – Photoshop
  • 136. 136 • Trabalha de forma contrária a ferramenta Dodge, ou seja, escurece as áreas por onde o pincel passa. • A função Protect Tones (proteger tons), também encontrada no Options Bar, promove equilíbrio de saturação nas áreas para melhorar o retoque. Ferramenta Burn Retoques de Imagens – Photoshop
  • 137. 137 • É usada para retocar a saturação das áreas da imagem. No Options Bar escolheremos se ela vai tirar a saturação (Desaturate) ou se ela vai saturar, no campo Mode. • A função Flow ajusta a força da aplicação. A função Vibrance quando ligado, melhora o ajuste de saturação na imagem real, evitando destruições. Ferramenta Sponge Retoques de Imagens – Photoshop
  • 138. 138 • Usa uma área determinada da imagem como “tinta” para pintar outras, por isso seu nome é “clone”. Basta irmos em uma área da imagem, usar ALT+Clique e depois, ir pintar em outras áreas. • Podemos renovar o Alt+Clique várias vezes para melhor retocarmos uma área com o Clone Stamp. • Indicado para: recompletar áreas; recompletar cabelos; duplicar elementos; corrigir rasgos em fotografias; imperfeições na pele; etc. Ferramenta Clone Stamp Retoques de Imagens – Photoshop
  • 139. 139 • Bem similar a ferramenta Clone Stamp, inclusive na forma de usar (ALT+Clique), a Healing é melhor usada para corrigir áreas de pele. Ela promove um equilíbrio de tonalidades antes de “pintar” com a área saudável, que foi copiada no Alt+Clique. • Muito útil na remoção de manchas da pele, pintas, rugas, olheiras, celulite, estrias, espinhas, cicatrizes, etc. Não é indicada para pintar sobre áreas escuras como cabelos pretos, sobrancelhas e áreas muito sombreadas, pois pode gerar áreas borradas. Ferramenta Healing Brush Retoques de Imagens – Photoshop
  • 140. 140 • A aplicação é igual a da Healing, poderám essa ferramenta trabalha com áreas selecionadas, sem a dinâmica de uma pintura. Não é com Alt+Clique. • Usemos a própria ferramenta Patch para criar uma área selecionada. Depois movamos essa área para onde desejamos aplicar a correção. • Verifiquemos o tipo de aplicação do Patch que pode ser Source (Origem) ou Destination (destinação), no Options Bar. Ferramenta Patch Retoques de Imagens – Photoshop
  • 141. 141 • Ideal para tirar manchas (como pintas da pele, espinhas, cicatrizes), a ferramenta Spot Healing Brush é bem similar a Ferramenta Healing Brush. • Com ela não é necessário especificar uma área de amostra com o Alt+Clique, pois ela analisa as áreas ao redor para então, pintar quando dermos um simples clique sobre a mancha. • Também pode gerar áreas de textura. Para isso ative a função Create Texture no Options Bar dessa ferramenta. Ferramenta Spot Healing Brush Retoques de Imagens – Photoshop
  • 142. 142 • Muito simples de usar, basta clicar sobre os olhos vermelhos de uma foto, ou então clicar e arrastar sobre a área de pupila, criando um retângulo de seleção (conhecido como “letreiro”). • Podemos fazer ajustes o tamanho da pupila (Pupil) e o grau de escuridão (Darken Amount), no Options Bar dessa ferramenta, para obtermos melhores resultados. Ferramenta Red Eye Retoques de Imagens – Photoshop
  • 143. 143 O que aprendemos nesta Unidade: UA 8: Retoques de Imagens 8.1 – Ferramentas de retoque
  • 144. 144 Adjustments Layers – Photoshop UA 9 – Camadas de ajustes / Adjustments Layers Unidade de Aprendizagem Você aprenderá: • Funções e usos das camadas de ajuste • Ajustes não destrutivos • Painel de Ajustes / Adjustments
  • 145. 145 Adjustments Layers – Photoshop 9.1 – Funções e usos Bloco de Construção do Aprendizado
  • 146. 146 Adjustments Layers Adjustments Layers – Photoshop Já vimos os ajustes destrutivos, que interferem diretamente nos pixels, através do Menu Image < Adjustments. Agora veremos as camadas de ajustes que possuem várias vantagens: • Não destroem a imagem principal • Criam uma layer só para esse ajuste • Permitem a reedição a qualquer momento • Permitem a aplicação de opacidade • Permitem a edição de máscara desse ajuste (na Layer)
  • 147. 147 Adjustments Layers – Photoshop 9.2 – Painel de Ajustes / Adjustments Panel Bloco de Construção do Aprendizado
  • 148. 148 Adjustments Panel Adjustments Layers – Photoshop • O Photoshop ativa esses ajustes não destrutivos via Menu < Layer < New Adjustment Layer; ou pelo rodapé da paleta de Layer, através desse botão • No Photoshop encontramos uma paleta de Adjustments que facilita bastante a aplicação: basta clicarmos em um dos ícones ali presentes. • Vejamos alguns dos ícones:
  • 150. 150 Usar as Adjustments Layers Adjustments Layers – Photoshop • Basta clicarmos em qualquer um dos ícones de ajuste, para criarmos uma layer de ajuste não destrutivo sobre a layer de uma imagem. • A atuação desse ajuste é para todas as layers abaixo, e não somente a anterior.
  • 151. 151 Reajuste de um Adjustments Adjustments Layers – Photoshop • Basta clicarmos nessa Adjustment layer que o painel Adjustments mostra as opções de reajuste. Basta controlarmos os sliders novamente.
  • 152. 152 Adjustments para uma só layer (Clipping Mask) Adjustments Layers – Photoshop • Quando aplicamos uma Adjustment layer qualquer, seus efeitos são sentidos em todas as layers que estão abaixo dela. Mas é possível aplicar esse ajuste somente em uma layer, sem ter efeitos sobre as outras abaixo. • Na própria paleta de Adjustments há, no rodapé de um ajuste escolhido, um botão que insere esse ajuste somente na layer imediatamente anterior. • Quando aplicamos, a Adjustment layer ganha uma seta para indicar em que layer anterior, ela está inserida:
  • 153. 153 Adjustments Layers – Photoshop • Somente a Layer 2, que se apresenta sublinhada (recipiente), é que sofrerá a ação do ajuste Levels acima. • Nesse caso a “Layer 1”, não sofrerá o Levels aplicado acima.
  • 154. 154 Ajuste da Mask de um Adjustment Adjustments Layers – Photoshop • O retângulo branco na Adjustment layer é a sua área de máscara (Mask). Quando criamos uma Adjustment layer sem ter nada selecionado previamente, a Mask fica toda branca como vemos. • Ao usarmos o Brush de cor preta para pintar a imagem, com essa área de mask devidamente clicada (na layer), vamos removendo o ajuste nessa específica área. • Lembre-se: a cor branca revela o conteúdo da layer mascarada; a cor preta, esconde o conteúdo da layer; e as outras cores (tons de cinza), deixam transparente.
  • 155. 155 O que aprendemos nesta Unidade: UA 9: Camadas de ajuste / Adjustments Layers 9.1 – Funções e usos 9.2 – Painel de Ajustes / Adjustments Panel
  • 156. 156 Aplicação de Fill Layer – Photoshop UA 10 – Aplicação de Fill Layer Unidade de Aprendizagem Você aprenderá: • Aplicação de camadas de ajustes • Configurações dessas camadas • Tipos de camadas de ajuste • Vantagens com o trabalho de camadas de ajuste
  • 157. 157 Aplicação de Fill Layer – Photoshop 10.1 – Apresentação da Fill Layer Bloco de Construção do Aprendizado
  • 158. 158 Aplicação de Fill Layer • Pelo botão , no rodapé do painel Layer, também é possível aplicar Fill layer. Pode ser com cor sólida; gradiente ou Pattern (padrão). Aplicação de Fill Layer – Photoshop
  • 159. 159 Solid Color • Podemos obtar pela criação de uma layer toda preenchida com uma só cor: é o que a opção Solid Color faz. • Depois de escolhida o Color Picker se abre para escolhermos a cor desejada. • Através do símbolo que fica na layer “Color Fill”, podemos dar dois cliques e escolher uma nova cor a qualquer momento. • Podemos utilizar os Blending Modes e a Opacity dessa layers criando efeitos interessantes nas layers abaixo. Aplicação de Fill Layer – Photoshop
  • 160. 160 Aplicação de Fill Layer – Photoshop
  • 161. 161 Gradient... • Depois de escolhido o Gradient uma janela de ajuste de gradiente se abre para editarmos: • Através do símbolo que fica na layer “Gradient Fill”, podemos dar dois cliques e escolher novas cores e gradientes a qualquer momento. • Podemos utilizar os Blending Modes e a Opacity dessa layers criando efeitos interessantes nas layers abaixo. Aplicação de Fill Layer – Photoshop
  • 162. 162 Aplicação de Fill Layer – Photoshop
  • 163. 163 Pattern... • Depois de escolhido o Pattern uma janela de ajuste de padrão se abre para editarmos: • Através do símbolo que fica na layer “Pattern Fill”, podemos dar dois cliques e escolher novas imagens como padrão de preenchimento. • Podemos utilizar os Blending Modes e a Opacity dessa layers criando efeitos interessantes nas layers abaixo. Aplicação de Fill Layer – Photoshop
  • 164. 164 O que aprendemos nesta Unidade: UA 10: Aplicação de Fill Layers 10.1 – Apresentação da Fill Layer
  • 165. 165 Clipping Mask – Photoshop UA 11 – Clipping Mask Unidade de Aprendizagem Você aprenderá: • Explicação do Clipping Mask • Inserção de imagens entre camadas
  • 166. 166 Clipping Mask – Photoshop 11.1 – Apresentação do Clipping Mask Bloco de Construção do Aprendizado
  • 167. 167 Clipping Mask – Photoshop Clipping Mask • Clipping Mask é uma máscara de inserção, que faz uma layer ficar inserida em outra abaixo. Por exemplo, se a layer de baixo tiver uma forma (retângulo ou círculo); e na de cima colocarmos uma paisagem; alicando o Clipping Mask a paisagem ficará dentro daquela forma. • Aplicação: Menu Layer < Create Clipping Mask; o atalho Ctrl+Alt+G; ou ainda, com o cursor próximo da “fronteira” entre a layers (Adjustment e a da imagem) pressionar ALT e clicar.
  • 168. 168 Clipping Mask – Photoshop Exercício de fixação - Clipping Mask • Abra o arquivo de uma imagem qualquer.
  • 169. 169 Clipping Mask – Photoshop • Crie uma elipse em uma nova layer. Exercício de fixação - Clipping Mask
  • 170. 170 Clipping Mask – Photoshop • Passe a layer da Shape para baixo. Exercício de fixação - Clipping Mask
  • 171. 171 Clipping Mask – Photoshop • Na layer “FLORES” aplique o Clipping Mask. Exercício de fixação - Clipping Mask
  • 172. 172 Clipping Mask – Photoshop 11.2 – As vantagens Bloco de Construção do Aprendizado
  • 173. 173 Clipping Mask – Photoshop Clipping Mask – Vantagens: • O processo é não destrutivo (a imagem fica mascarada e não apagada). • O processo é reversível (basta usar o atalho Ctrl+Alt+G ou o comando Release Clipping Mask no options do Layer Panel). • Podemos ajustar a localização da imagem inserida na layer abaixo, bastando clicar nessa layer e movê-la ou transformá-la. • Lembre-se sempre de deixar o “conteúdo” numa layer superior, para ser inserida em uma layer abaixo (recipiente).
  • 174. 174 O que aprendemos nesta Unidade: UA 11: Clipping Mask 11.1 – Apresentação da Clipping Mask 11.2 – As vantagens
  • 175. 175 Clipping Mask – Photoshop UA 12 – Ferramenta Crop Unidade de Aprendizagem Você aprenderá: • Aprendendo a recortar uma imagem • Estabelecer cortes com tamanhos específicos
  • 176. 176 Clipping Mask – Photoshop 12.1 – Apresentação e funções Bloco de Construção do Aprendizado
  • 177. 177 Ferramenta CROP • Algumas vezes pretendemos “cortar” um documento, em determinadas medidas para uso em meios gráficos, ou Web. • A ferramenta Crop promove um corte no documento inteiro (Canvas), para que seja cortado em formato necessário para algum projeto. • A tecla de atalho para o Crop é “C”. Ferramenta Crop – Photoshop
  • 178. 178 Exercício de Fixação - Crop • Parte 1: Criamos uma interface de site e precisamos cortar uma imagem nas medidas seguintes: 700 pixels de largura(Width), por 150 pixels de altura (Height). Ferramenta Crop – Photoshop
  • 179. 179 Exercício de Fixação - Crop • Parte 2: Pressione o atalho “C” ou vá até a ferramenta Crop, para colocar as medidas no Options Bar. Ferramenta Crop – Photoshop
  • 180. 180 Exercício de Fixação - Crop • Parte 3: Crie a área de recorte. Podemos usar a tecla Espaço para deslocar a área de crop, durante a feitura. Ferramenta Crop – Photoshop
  • 181. 181 Exercício de Fixação - Crop • Parte 4: Não importa a área que vamos determinar, ao pressionarmos Enter, a resultante será o valor que configuramos no Option Bar. Ferramenta Crop – Photoshop
  • 182. 182 Exercício de Fixação - Crop • Parte 5: Se desejarmos configurar essas medidas como “Preset”, para usarmos em outras oportunidades, podemos usar o Options Bar < Create New Tool Preset. • No ícone da Crop que se encontra no Option Bar, clique no pop-up (“setinha preta”) Ferramenta Crop – Photoshop
  • 183. 183 Exercício de Fixação - Crop • Parte 6: Quando a janela se abrir marque a opção “Current Tool Only” e, em seguida, pressione o botão Create New Tool Preset. Coloque o nome que você desejar ou então deixe mesmo as características adotadas. Ferramenta Crop – Photoshop
  • 184. 184 O que aprendemos nesta Unidade: UA 12: Ferramenta Crop 12.1 – Apresentação e funções
  • 185. 185 Ferramentas Shape – Photoshop UA 13 – Ferramentas Forma / Shape Unidade de Aprendizagem Você aprenderá: • Conhecer as ferramentas de Forma • Uso adequado da ferramenta Retangular • Ajustes nas Formas feitas • Mudança de cores nas Formas criadas
  • 186. 186 Ferramentas Shape – Photoshop 13.1 – Uso da ferramenta Forma / Shape Bloco de Construção do Aprendizado
  • 187. 187 Ferramentas Shape • São formas simples ou personalizadas que podemos usar, para vários fins. • São retângulos, retângulos com cantos arredondados, elipses, polígonos, linhas e outros desenhos. Ferramentas Shape – Photoshop
  • 188. 188 Ferramentas Shape No Option Bar das ferramentas Shape, podemos optar por três formas de fazê-las: • Shape Layers:cria uma layer própria para essa forma, com uma máscara de apoio com determinada cor, que pode ser alterada. A Shape fica na forma de vetor. • Paths:cria um esboço ou pré-desenho para ser editado com as ferramentas Path Selection e Direct Selection, em conjunto com o Paths Panel. Somente vetor. • Fill pixels:cria um desenho já em pixels na layer que estiver ativa no Layer Panel, usando a cor que está no Foreground Color. Ferramentas Shape – Photoshop
  • 189. 189 Pré-edições das Shapes No Option Bar das ferramentas Shape, podemos pré-editar uma forma, antes de ela ser feita. Essas funções variam de acordo com cada uma das ferramentas Shape selecionadas. Também no Option Bar das ferramentas Shape, podemos editar detalhes de algumas formas, como por exemplo o polígono e seus lados; ou a linha e sua espessura. Ferramentas Shape – Photoshop
  • 190. 190 O que aprendemos nesta Unidade: UA 13: Ferramenta Forma / Shape 13.1 – Uso da ferramenta Forma / Shape
  • 191. 191 Uso Photoshop para Web UA 14 – Uso do Photoshop para Web Unidade de Aprendizagem Você aprenderá: • Pixel como unidade de medida para imagens • Sobre resoluções • Elementos da interface de um site • Feitura de Wireframe
  • 192. 192 Uso Photoshop para Web 14.1 – Pixel como unidade de medida Bloco de Construção do Aprendizado
  • 193. 193 O Pixel como unidade de medida • No universo da Web (e também no do vídeo) os pixels são a unidade de medida principal. • As partes de um site serão organizadas em pixels para uso na Interface. • Nos buscadores, as imagens encontradas são mostradas em pixels: Uso Photoshop para Web
  • 194. 194 O Pixel como unidade de medida • No universo da Web (e também no do vídeo) os pixels são a unidade de medida principal. • As partes de um site serão organizadas em pixels para uso na Interface. • Nos buscadores, as imagens encontradas são mostradas em pixels: Uso Photoshop para Web
  • 195. 195 Uso Photoshop para Web 14.2 – Resolução das imagens digitais Bloco de Construção do Aprendizado
  • 196. 196 Resoluções (DPI) • A resolução de uma imagem é medida em pixels por polegadas (DPI, PPI, ou PPP). • Quanto mais pixels estiverem em uma polegada, mais opções de cores serão possíveis, o que afeta a qualidade da imagem global. • Além da qualidade da imagem, o tamanho físico de uma imagem também sofre interferências diretas. • Para a Web as imagens precisam ser otimizadas para terem um tamanho reduzido em Kb, e manterem a máxima qualidade possível. Uso Photoshop para Web
  • 197. 197 Resoluções (DPI) Tipos de resoluções: • 72 dpi: indicada para a Web e para vídeo pela leveza. • 150 dpi:indicada para impressões de baixa qualidade. • 300 dpi:indicada para impressões de alta qualidade até o tamanho relativo de um papel A3. Uso Photoshop para Web
  • 198. 198 Uso Photoshop para Web 14.3 – Elementos da interface de um site Bloco de Construção do Aprendizado
  • 199. 199 Elementos da interface Nos próximos capítulos, vamos mostrar exemplos de como podemos usar os softwares, para criar cada uma das principais partes de um site. Sendo assim, precisamos falar um pouco sobre cada parte dessas: • Background • Logotipo • Topo • Menu • Botões Uso Photoshop para Web • Ícones • Banners / Publicidade • Conteúdo do site
  • 200. 200 Background • Fundo do site. • Pode ser com imagens fixas ou animadas (essas menos comuns). • Preferência por fundos “clean”. • Cores dependem do projeto do site. Uso Photoshop para Web
  • 201. 201 EXERCÍCIO DE FIXAÇÃO: Background • Abra um documento com 1 (um) pixel de largura (Width) e 1000 pixels de altura (Height); e 72 dpi; • Escolha um gradiente de duas cores e aplique-o no documento; • Salve esse documento em JPG no Desktop, batizando-o de “fundo” ao salvar. A Quality não precisa ultrassar 8 (High); • Abra o Dreamweaver e um novo site HTML. • Salve esse documento como “vai” no próprio Desktop também; • Nesse documento aberto, vá para a função “código” (botão CODE na Options Bar); • Na tag de title escreva: <title>Teste de Background</title>; • Na tag body escreva:<body background="fundo.jpg">. (escolha a imagem de bakground no desktop – “fundo”) • Teste o site: pressione a tecla F12 no Dreamweaver. Uso Photoshop para Web
  • 202. 202 EXERCÍCIO DE FIXAÇÃO: Background Uso Photoshop para Web
  • 203. 203 Logotipo • “Assinatura” do site. Geralmente é colocado no canto superior esquerdo do site. • Pode ser animado com recursos 3D, criados em 3D Max ou Sketch Up em parceria com o Flash. Uso Photoshop para Web
  • 204. 204 Topo • Geralmente fica na parte superior ou ao lado do logotipo. • Podem ser fixos ou animados. • Podem conter banners publicitários. Uso Photoshop para Web
  • 205. 205 Menu • Parte responsável pela navegabilidade de um site. • Merece maior destaque. • Levar em conta sempre: legibilidade, usabilidade e acessibilidade. Uso Photoshop para Web
  • 206. 206 • Navegabilidade e “linkagem” de um site. • Recebem “programações” para as linkagens. • Possuem “rollover”: estados do botão. Partes de um site – Photoshop Botões
  • 207. 207 Ícones • São símbolos que em sua maioria são clicáveis. • Podem ser animados ou fixos. • Devem deixar seus significados bem evidentes e ajudar na Usabilidade. Partes de um site – Photoshop
  • 208. 208 Banners / Publicidade • Publicidade de clientes que pagam espaços no site. • Vários tamanhos dependentes da estrutura do site. • Podem ser fixos ou animados. Partes de um site – Photoshop
  • 209. 209 EXERCÍCIO DE FIXAÇÃO: Banner Partes de um site – Photoshop
  • 210. 210 EXERCÍCIO DE FIXAÇÃO: Banner Partes de um site – Photoshop • Crie um banner (Medium Rectanle) nas dimensões: 300 por 250 pixels, 72 dpi, fundo branco. • O cliente será o Infnet (a logo pode ser obtida no site www.brandsoftheworld.com). • O briefing descreve que a criação desse banner, NÃO ANIMADO, é para divulgar os cursos de Web Master da instituição. • A limitação é que ele não ultrapasse 50 Kb de peso final. • O anúncio será postado no UOL. Ao término dê um Printscreen no site da UOL e em uma nova layer, coloque seu banner sobre a área demonstrada a seguir:
  • 211. 211 EXERCÍCIO DE FIXAÇÃO: Banner Partes de um site – Photoshop
  • 212. 212 Conteúdo do site • Também faz parte da interface o conteúdo do site, ou seja as partes visuais de cada setor. Aqui são colocados ilustrações, fotos, montagens, matérias, textos, vídeos, etc. Partes de um site – Photoshop
  • 213. 213 Partes de um site – Photoshop 14.4 – Criação de Wireframes Bloco de Construção do Aprendizado
  • 214. 214 Wireframes • Wireframe é o esboço esquemático de uma interface de site, mostrando através de elementos simples (retângulos, círculos) a disposição dos elementos da estrutura. “A principal função do wireframe é simular a disposição destes elementos informacionais, de modo a dar, para os interessados no desenvolvimento do projeto, uma clara idéia do peso destes elementos na interface”, como disse o Carambola Digital. • Podemos utilizar retângulos criados por Shapes (em Shapes Layers) para depois usarmos ou não o Clipping Mask, entre as imagens e esses retângulos criados. Uso Photoshop para Web
  • 215. 215 Exemplos de Wireframes Uso Photoshop para Web
  • 216. 216 Exemplos de Wireframes Uso Photoshop para Web
  • 217. 217 EXERCÍCIO DE FIXAÇÃO: Wireframe • Você criará um site para festa infantil, com as seguintes dimensões: 900 pixels de largura por 760 pixels de altura; • Ele terá um topo com grande imagem em movimento (Flash) e cinco opções de Menu. • O logotipo terá mais ou menos o tamanho do topo e ficará na parte esquerda ao alto do site. • O site possuirá área dedicada a publicidade com pelo menos dois banners (tipos de banner a sua escolha). • Crie um Wireframe desse projeto com as Shapes retangulares, aproveitando os espaços. Uso Photoshop para Web
  • 218. 218 O que aprendemos nesta Unidade: UA 14: Uso do Photoshop na Web 14.1 – Pixel como unidade de medida 14.2 – Resolução das imagens digitais 14.3 – Elementos da interface de um site 14.4 – Criação de Wireframes
  • 219. 219 Uso Photoshop para Web UA 15 – Ferramenta Fatia / Slice Unidade de Aprendizagem Você aprenderá: • Importância de trabalhar com o Layout fatiado • Trabalho com a ferramenta Fatia / Slice • Classificação das imagens por tipo de arquivo (JPEG, GIF e PNG)
  • 220. 220 Uso Photoshop para Web 15.1 – Ferramenta Fatiar / Slice Bloco de Construção do Aprendizado
  • 221. 221 Ferramenta Slices • Ferramentas dedicadas a “fatiar” um layout, independemente de suas layer, para gerar imagens otimizadas para uso em um site. • Em um segundo processo, as slices já criadas podem ser salvas em JPEG, GIF, PNG (8 e 24) e WBMP • As slices também podem receber destinações de URL e outras configurações. Uso Photoshop para Web
  • 222. 222 Ferramentas Slices e Slices Select “C” Uso Photoshop para Web
  • 223. 223 Smart Guides – Menu View Uso Photoshop para Web
  • 224. 224 Save for Web and Devices: JPEG Uso Photoshop para Web
  • 225. 225 Save for Web and Devices: GIF Uso Photoshop para Web
  • 226. 226 Save for Web and Devices: GIF ... Uso Photoshop para Web
  • 227. 227 Save for Web and Devices: GIF ... Uso Photoshop para Web
  • 228. 228 O que aprendemos nesta Unidade: UA 15: Ferramenta Fatia / Slice 15.1 – Ferramentas Slice
  • 229. 229 Atalhos diversos - Photoshop UA 16 – Coleção de atalhos do Photoshop Unidade de Aprendizagem Você aprenderá: • Coleção de teclas de atalhos importantes no trabalho com o Photoshop
  • 231. 231 Atalhos diversos • Menu Select • Menu Filter • Menu View Atalhos – Photoshop
  • 232. 232 Atalhos diversos • Menu Window • Menu Help • Menu View Atalhos – Photoshop
  • 233. 233 Atalhos diversos • Ferramentas - Tools Atalhos – Photoshop
  • 234. 234 • E-mail: info@infnet.com.br • Site: http://www.infnet.com.br • Tel: +55 (21) 2122-8800