apostila_A10_a.ppsx.pdf

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

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
Bloco de Construção do Aprendizado

13 Introdução ao Photoshop
Apresentação do Photoshop
Pixels

14
1.2 - Abrir documentos
(imagens)

15
Documentos PSD

16
1. Menu File < Open, cujo atalho é Ctrl+O: Essa operação
faz abrir uma janela onde escolheremos o arquivo.
Formas de Abrir documentos

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.

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.

20
1.3 - Tipos de visualização
(screens)

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)

22
1.4 - Navegação nos
documentos

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

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

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

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

28
2.1 – Cores no Photoshop

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

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

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.
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:
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
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)
Você aprenderá:
• Sobre os ajustes destrutíveis
• Sobre os tipos principais de ajustes

51
3.1 – Ajustes principais

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

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

55
LEVELS

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

57
HUE / SATURATION

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

59
COLOR BALANCE

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

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

62
BLACK & WHITE

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

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

66
THRESHOLD

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

68
UA 3: Ajustes nas imagens
3.1 – Os Ajustes principais

69 Seleções – Photoshop
UA 4 - Seleções e suas
ferramentas
Você aprenderá:
• Funções das seleções
• Ferramentas de seleção

4.1 – Seleções no Photoshop

4.2 – Ferramentas de Seleções

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

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

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

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

77
FERRAMENTA MAGIC WAND

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

4.3 – Operações com as
Seleções

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

82
OPERAÇÕES COM AS SELEÇÕES

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

4.4 – Menu Seleção / Select

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

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

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

88
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)
Você aprenderá:
• Transferir uma imagem ou parte dela,
entre arquivos diferentes

5.1 – Ferramenta Mover /
Move

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

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ências entre abas

96
UA 5: Transferência de Imagens
5.1 – Ferramenta Mover / Move

97 Transformação – Photoshop
UA 6 - Transformações
Você aprenderá:
• Transformações em imagens para
montagens fotográficas
• Dimensionar, girar, inclinar, distorcer e
perspectiva
• Transformações livres

6.1 – Tipos de transformações

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

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)

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.
Rotate (Girar)

104
• Skew (inclinar) - inclina a imagem através das alças
centrais de preferência.
Skew (Inclinar)

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.
Distort (Distorcer)

106
• Perspective (perspectiva) - aplica perspectiva usando
uma das alças diagonais, fazendo a ponta oposta
mover-se para o outro lado.
Perspective (Perspectiva)

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.

108
• Flip horizontal / vertical - “espelha” a imagem de forma
horizontal ou vertical.
Flip Horizontal/Vertical

6.2 – Transformações livres

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)

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º.

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

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

115
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
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

7.1 – O Painel de Camadas /
Layers

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

7.2 – Componentes do painel
de Camadas

2
1
3
4
5 6
7
8
9 10 11 12 13 14 15
17
16
Componentes do Layer Panel

7.3 – Operações com Camadas

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

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

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

126
Ordenação (empilhamento) de layers
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

128
Marcar com cores uma Layers
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
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
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

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)

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)

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

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

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

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

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

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

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

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

143
UA 8: Retoques de Imagens
8.1 – Ferramentas de retoque

144 Adjustments Layers – Photoshop
UA 9 – Camadas de ajustes /
Adjustments Layers
Você aprenderá:
• Funções e usos das camadas de ajuste
• Ajustes não destrutivos
• Painel de Ajustes / Adjustments

9.1 – Funções e usos

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)

9.2 – Painel de Ajustes /
Adjustments Panel

148
Adjustments Panel
• 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

150
Usar as Adjustments Layers
• 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
• 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)
• 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:

• 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
• 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
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
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

10.1 – Apresentação da Fill
Layer

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.

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.

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.

164
UA 10: Aplicação de Fill Layers
10.1 – Apresentação da Fill Layer

165 Clipping Mask – Photoshop
UA 11 – Clipping Mask
Você aprenderá:
• Explicação do Clipping Mask
• Inserção de imagens entre camadas

11.1 – Apresentação do
Clipping Mask

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.

Exercício de fixação - Clipping Mask
• Abra o arquivo de uma imagem qualquer.

• Crie uma elipse em uma nova layer.

• Passe a layer da Shape para baixo.

• Na layer “FLORES” aplique o Clipping Mask.

11.2 – As vantagens

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
UA 11: Clipping Mask
11.1 – Apresentação da Clipping Mask
11.2 – As vantagens

UA 12 – Ferramenta Crop
Você aprenderá:
• Aprendendo a recortar uma imagem
• Estabelecer cortes com tamanhos
específicos

12.1 – Apresentação e funções

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).

179
• Parte 2: Pressione o atalho “C” ou vá até a ferramenta
Crop, para colocar as medidas no Options Bar.

180
• Parte 3: Crie a área de recorte. Podemos usar a tecla
Espaço para deslocar a área de crop, durante a feitura.

181
• Parte 4: Não importa a área que vamos determinar, ao
pressionarmos Enter, a resultante será o valor que
configuramos no Option Bar.

182
• 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”)

183
• 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.

184
UA 12: Ferramenta Crop
12.1 – Apresentação e funções

185 Ferramentas Shape – Photoshop
UA 13 – Ferramentas Forma /
Shape
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

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.

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.

190
UA 13: Ferramenta Forma / Shape
13.1 – Uso da ferramenta Forma / Shape

191 Uso Photoshop para Web
UA 14 – Uso do Photoshop
para Web
Você aprenderá:
• Pixel como unidade de medida para
imagens
• Sobre resoluções
• Elementos da interface de um site
• Feitura de Wireframe

14.1 – Pixel como unidade de
medida

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:

14.2 – Resolução das imagens
digitais

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.

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.

14.3 – Elementos da interface
de um site

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
• Í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.

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.

202
EXERCÍCIO DE FIXAÇÃO: Background

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.

204
Topo
• Geralmente fica na parte superior ou ao lado do logotipo.
• Podem ser fixos ou animados.
• Podem conter banners publicitários.

205
Menu
• Parte responsável pela navegabilidade de um site.
• Merece maior destaque.
• Levar em conta sempre: legibilidade, usabilidade e
acessibilidade.

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.

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.

209
EXERCÍCIO DE FIXAÇÃO: Banner

210
• 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

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.

213 Partes de um site – Photoshop
14.4 – Criação de Wireframes

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.

215
Exemplos de Wireframes

216
Exemplos de Wireframes

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.

218
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

UA 15 – Ferramenta Fatia /
Slice
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)

15.1 – Ferramenta Fatiar /
Slice

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.

222
Ferramentas Slices e
Slices Select “C”

223
Smart Guides – Menu View

224
Save for Web and Devices: JPEG

225
Save for Web and Devices: GIF

226
Save for Web and Devices: GIF ...

227
Save for Web and Devices: GIF ...

228
UA 15: Ferramenta Fatia / Slice
15.1 – Ferramentas Slice

229 Atalhos diversos - Photoshop
UA 16 – Coleção de atalhos do
Photoshop
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

232
Atalhos diversos
• Menu Window
• Menu Help
• Menu View

233
Atalhos diversos
• Ferramentas - Tools

234
• E-mail: info@infnet.com.br
• Site: http://www.infnet.com.br
• Tel: +55 (21) 2122-8800

apostila_A10_a.ppsx.pdf

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a apostila_A10_a.ppsx.pdf

Semelhante a apostila_A10_a.ppsx.pdf (20)

apostila_A10_a.ppsx.pdf