FTIN - Módulo de Web Design
Prof. Iran Pontes
PHOTOSHOP PARA WEB
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
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-e- branco, 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 de produzirem padrões;
• Matriz da Cor
(soma de algumas cores formam outras);• Descreve as cores numericamente;
• Photoshop usa diversos 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
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.
1- New Selection 2- Add to Selection
3- Subtract to Selection
4- Instersection to Selection
FERRAMENTAS DE SELEÇÃO
1 2 3 4
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
FERRAMENTAS DE SELEÇÃO (LASSO)
Feather: Aplica um efeito de desfoque na área selecionada (borda).
• 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
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.
1- Duplo clique no gradiente 2- Duplo clique no ponto (pincel) para alterar a cor
3- Selecione a cor
1
2
3
FERRAMENTAS DE PREENCHIMENTO E CORES
Paint Bucket Tool
Pinta toda a área clicada
• Pode-se criar Quadrados, Quadrados com Cantos
arredondados, Círculos, Poligonos, Linhas e Simbolos pré-definidos.
FERRAMENTAS DE FORMAS
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.
PAINEL HISTORY
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
