FTIN - Módulo de Web Design
Prof. Iran Pontes
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
PHOTOSHOP PARA WEB
O QUE VAMOS APRENDER?
– Imagens Bitmap x vetorial;
– Resolução;
– Cores;
– Psicologia das cores;
– Introdução ao Photoshop
(Ferramentas: Seleção, Preenchimento e Desenho)
CONCEITO DE IMAGEM DIGITAL
• Imagens bitmap ou Raster:
“Bitmaps ou mapas de bits são imagens formadas
pela junção de pequenos pontos coloridos,
chamados "pixels". Em fotografias em preto-ebranco, os pixels, curiosamente, também são
coloridos, mas apenas em tons da escala de cinza.
A composição ordenada dos pixels forma uma
imagem fotográfica.”
Livro Universidade Photoshop - desvende os recursos desta poderosa ferramenta!
CONCEITO DE IMAGEM DIGITAL
Imagens bitmap ou Raster:
• Características importantes:
– Imagem formada por um conjunto de
pontos denominados: “Pixel”;
– Arquivos
pesados dependendo da
resolução;
– O tamanho da imagem, quando aumentada
pode sofrer perda de qualidade;
CONCEITO DE IMAGEM DIGITAL
Imagens bitmap ou Raster:
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais:
• Definição: A palavra "vetor" refere-se a uma
linha, mas a representação vetorial descreve
um “desenho” formado por formas
geométricas que por sua vez foram feitas por
cálculos matemáticos.
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais
• Características importantes:
– São formas geométricas, representadas por um
círculo, retângulo ou um segmento;
– São representadas por fórmulas matemáticas;
– Podem ser aumentadas sem perdas de resolução;
– Tamanho de arquivos muito menores;
– Vetores são ligados em pontos (nós) ordenados
pelas coordenadas X e Y no plano.
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais
CONCEITO DE IMAGEM DIGITAL
Imagem Vetorial x Imagem Bitmap
CONCEITO DE IMAGEM DIGITAL
• Resolução
– Nível de detalhe que uma imagem comporta;
– Resoluções mais altas significam mais detalhes
(qualidade) na imagem;
– A resolução de imagem pode ser medida de várias
formas;
– Medidas: m, cm, mm, polegadas, pixel, etc...
CONCEITO DE IMAGEM DIGITAL
• Resolução
– Resolução ideal para web: 72 – 90 DPI
– Resolução ideal para impressão em alta qualidade:
300 PPI
CORES
• O que é cor?
– A cor é uma percepção visual provocada pela ação
de um feixe de fótons sobre células especializadas
da retina, que transmitem através de informação
pré-processada no nervo óptico, impressões para
o sistema nervoso.
Cor: Fenômeno Ótico. Universidade Federal do Pará (26 de julho de 2009).
CORES
“As cores possuem diferentes significados que variam
entre diferentes culturas. Na cultura ocidental, as cores
estão relacionadas com as emoções do ser humano.”
7Graus
PSICOLOGIA DAS CORES
• Cinza: Elegância, humildade, respeito, reverência, sutileza;
• Vermelho: Paixão, força, energia, amor, liderança,
masculinidade, alegria (China), perigo, fogo, raiva, revolução,
"pare";
• Azul: Harmonia, confidência, conservadorismo, austeridade,
monotonia, dependência, tecnologia, liberdade, saúde;
• Verde: Natureza, primavera, fertilidade, juventude,
desenvolvimento, riqueza, dinheiro, boa sorte, ciúmes,
ganância, esperança.
PSICOLOGIA DAS CORES
• Roxo: Velocidade, concentração, otimismo, alegria, felicidade,
idealismo, riqueza (ouro), fraqueza, dinheiro, sábio, idoso, fé;
• Magenta: Luxúria, sofisticação, sensualidade, feminilidade,
desejo; Violeta: espiritualidade, criatividade, realeza,
sabedoria, resplandecência, dor;
• Laranja: Energia, criatividade, equilíbrio, entusiasmo, ludismo;
• Branco: Pureza, inocência, reverência, paz, simplicidade,
esterilidade, rendição, união;
• Preto: Poder, modernidade, sofisticação, formalidade, morte,
medo, anonimato, raiva, mistério, azar;
MODOS DE CORES
• Necessidade das Indústrias Gráficas
produzirem padrões;
• Matriz da Cor (soma de algumas cores formam outras);
• Descreve as cores numericamente;
• Photoshop usa diversos modos de cores.
de
MODOS DE CORES
• RGB (Red, Green, Blue) = Usado em monitor, Tv
(A soma das cores formam todas as demais)
•
•
•
•
•
•
•
CMYK (Ciano, Magenta, Amarelo e Preto) (Impressos)
LAB (com base no CIE L*a*b*) (Luminosidade)
BITMAP
TONS DE CINZA
DUOTÔNICO
CORES INDEXADAS
MULTICANAL
MODOS DE CORES
• Exemplos de Cores em RGB
–
–
–
–
–
–
–
–
Branco – RGB (255,255,255)
Azul – RGB (0,0,255)
Vermelho – RGB (255,0,0)
Verde – RGB (0,255,0)
Amarelo – RGB (255,255,0)
Magenta – RGB (255,0,255)
Ciano – RGB (0,255,255)
Preto – RGB (0,0,0)
ADOBE PHOTOSHOP CS6
• É o programa de edição de imagens
profissional mais usado do mundo tanto para
Windows quanto para MAC;
• Penúltima versão: CS6;
• Nova Versão: Adobe Creative Cloud (CC)
http://bit.ly/11R3949
ADOBE PHOTOSHOP CS6
• Adobe Creative Cloud (CC)
É um serviço de nuvem que inclui armazenamento
(20 GB de armazenamento em nuvem para pessoas
físicas, 100 GB com a Creative Cloud para equipes),
acesso a ferramentas da empresa [como Photoshop] e
diversos outros recursos que permitem integração dos
produtos para o uso dos clientes da Adobe.
Techtudo
INICIANDO O PHOTOSHOP
INICIANDO O PHOTOSHOP
• Criando um novo Documento
FILE > NEW
ARQUIVO > NOVO
CTRL + N
INICIANDO O PHOTOSHOP
INICIANDO O PHOTOSHOP
• A interface do photoshop é composta por:
– Barra do Aplicativo;
– Opções;
– Barra de Ferramentas;
– Painéis.
FERRAMENTAS DE SELEÇÃO
• Utilizada para selecionar uma área específica
da imagem.
FERRAMENTAS DE SELEÇÃO
• Rectangular Marquee Tool
- Criar seleção de forma quadrada ou
retangular em uma imagem:
Clicar na ferramenta > Segurar o botão do
mouse > Arrastar sobre a área desejada e
selecionar .
(Seleção proporcional, basta pressionar a tecla Shift)
FERRAMENTAS DE SELEÇÃO
FERRAMENTAS DE SELEÇÃO
• Elliptical Marquee Tool
- Criar seleção de forma circular ou elíptica
Clicar na ferramenta > Pressionar o botão do
mouse > Arrastar sobre a área desejada e
selecionar .
(Seleção proporcional, basta pressionar a tecla Shift)
FERRAMENTAS DE SELEÇÃO
FERRAMENTAS DE SELEÇÃO
• Single Row Marquee Tool
Cria uma seleção “linha” com 1px de altura.
• Single Columm Marquee Tool
Cria uma seleção “coluna” com 1px de largura.
FERRAMENTAS DE SELEÇÃO
1
2
3
4
1- New Selection
2- Add to Selection
3- Subtract to Selection
4- Instersection to Selection
FERRAMENTAS DE SELEÇÃO
Qais são as ferramentas de seleção?
2- Add to Selection – Adicionar a seleção ativa em uma nova área de
seleção;
3- Subtract to Selection – Remover da seleção ativa uma área a ser
desenhada;
4- Instersect to Selection – Criar uma nova área de seleção a partir
da interseção de duas seleções existente.
FERRAMENTAS DE SELEÇÃO (LASSO)
Feather: Aplica um efeito de desfoque na área selecionada (borda).
FERRAMENTAS DE SELEÇÃO
• Utilizada para selecionar uma área específica da
imagem com mais precisão.
FERRAMENTAS DE SELEÇÃO
• Lasso – Ferramenta de seleção a “mão livre”;
• Polygon Lasso – Criar uma linha entre dois pontos fazendo
uma seleção. Usando o shift ela fica reta e para deletar um
ponto, basta pressionar o backspace (espaço);
• Magnetic Lasso – A seleção terá uma aderência ao contorno
da área que será selecionada (precisa ter um bom contraste);
FERRAMENTAS DE SELEÇÃO (RÁPIDA)
• Utilizada para selecionar uma área comum da
imagem que possua o mesmo tom de cor.
FERRAMENTAS DE SELEÇÃO (RÁPIDA)
Magic Wand Tool – Ferramentas:
• Tolerance – Aumenta a tolerância de tom da cor selecionada;
(Ex: Toerance 0: Seleciona apenas as áreas de mesma cor)
• Anti-alias – Suaviza a borda;
• Contiguos – Marcada: A ferramenta seleciona apenas as cores próximas
da área clicada. Desmarcada: Selecionará a cor clicada, na imagem inteira.
• Sample All Layers – Seleciona a cor em todas as layers;
FERRAMENTAS DE SELEÇÃO (RÁPIDA)
Quick Selection Tool
• Seleção clicando em uma área, podemos
arrastar para outras partes da imagem a ser
selecionada (seleciona de modo automático);
FERRAMENTAS DE PREENCHIMENTO
E CORES
• Pode-se aplicar preenchimentos sólidos e Gradientes
em uma imagem ou desenho.
FERRAMENTAS DE PREENCHIMENTO
E CORES
Gradiente Tool
FERRAMENTAS DE PREENCHIMENTO
E CORES
Gradiente Tool
Ao clicar no gradiente com duplo clique, será aberta uma janela
para edição manual.
3
1
1- Duplo clique no gradiente
2- Duplo clique no ponto (pincel)
para alterar a cor
3- Selecione a cor
2
FERRAMENTAS DE PREENCHIMENTO
E CORES
Paint Bucket Tool
Pinta toda a área clicada
FERRAMENTAS DE FORMAS
• Pode-se criar Quadrados, Quadrados com Cantos
arredondados, Círculos, Poligonos, Linhas e Simbolos
pré-definidos.
PAINEL HISTORY
Window > History,
• O painel history armazena as últimas ações
realizadas e por padrão pode refazer até 20 ações.
Aumentar mais ações:
• Edite > Prerefences > Performance > History e Cache
basta aumentar o campo History State.
ALTERAR COR
PAINEL HISTORY
ATALHOS BÁSICOS
•
•
•
•
•
•
•
Ctrl + : Zoom In.
Ctrl – : Zoom Out.
Ctrl + 0 (Zero) : Ajusta a imagem à tela.
Ctrl + Z : Desfaz a última alteração.
Ctrl + Alt + Z : Desfaz as alterações continuamente.
Ctrl + Shift + Z : Refaz as alterações desfeitas.
Criar atalho: Ctrl + Alt + Shift + K, escolha o menu e insira seu
atalho
ATIVIDADE
1) Quais são as principais diferenças entre imagens bitmap
e vetorial?
2) O que é Resolução? Qual a Resolução indicada para se
trabalhar com Web e por que?
3) Qual o sistema de cor usado para web?
4) Defina com suas palavras: o que é Cor?
5) Explique a função do painel history.
Cada atividade é uma avaliação, dedique-se.
Faça as atividades com suas palavras, não copie e cole da internet ou colegas.
ATIVIDADE - PESQUISA
6) Faça uma pesquisa referente a outros programas que
podem ser usados para desenvolvem layouts para
web, citando ao menos 03 preenchendo as
especificações abaixo:
Nome Oficial do Programa:
Ano de lançamento:
Empresa fabricante:
Versão atual:
Cada atividade é uma avaliação, dedique-se.
Faça as atividades com suas palavras, não copie e cole da internet ou colegas.
ATIVIDADE
Prazo para postagem:
07/09/2013 até às 23h55
• Evite enviar a postagem de sua atividade no último dia.
Imprevistos podem ocorrer;
• Sua organização e pontualidade também estão sendo avaliadas;
•Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões
Diariamente.
Chat na Terça-Feira 03/09/2013
19h00 as 20h30
FERRAMENTAS DE APOIO
• Apostilas e vídeos do AVASIS;
• Fórum durante o módulo com resposta em até
06 horas úteis;
• Email do professor: [email protected]
POR HOJE É SÓ!
• PRÓXIMA AULA:
– + Photoshop: Ferramenta de formas, Ferramenta de Texto,
trabalhando com Layers, Grid e Régua;
– Primeiros passos para criar Layout.
• SIGA-ME:
– Facebook.com/iranpontes
– Twitter.com/iranpontes
– www.designculture.com.br
POR HOJE É SÓ!
• INSPIRE-SE:
– Livro: Psicodinâmica das cores em comunicação .
Modesto Farina, Clotilde Perez, Dorinho Bastos
– Livro: Design para Quem não é Designer. Primeiros passos para criar
Layout.
Williams, Robin
– Livros, PDFS, Tutoriais ensinando a trabalhar com Photoshop;
– Sites de Design , Front End (Web Design)
POR HOJE É SÓ!
"Qual de vocês, se quiser construir uma torre,
primeiro não se assenta e calcula o preço, para ver se
tem dinheiro suficiente para completá-la?
Pois, se lançar o alicerce e não for capaz de terminála, todos os que a virem rirão dele,
dizendo: ‘Este homem começou a construir e não foi
capaz de terminar”.
Lucas 14:28-30