FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM...
-
Upload
bernardo-alcaide-vasques -
Category
Documents
-
view
213 -
download
0
Transcript of FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM...
![Page 1: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/1.jpg)
FTIN - Módulo de Web Design
Prof. Iran Pontes
![Page 2: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/2.jpg)
PHOTOSHOP PARA WEBFTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
![Page 3: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/3.jpg)
O QUE VAMOS APRENDER?
– Imagens Bitmap x vetorial;–Resolução;–Cores;–Psicologia das cores;– Introdução ao Photoshop (Ferramentas: Seleção, Preenchimento e Desenho)
![Page 4: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/4.jpg)
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!
![Page 5: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/5.jpg)
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;
![Page 6: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/6.jpg)
CONCEITO DE IMAGEM DIGITAL
Imagens bitmap ou Raster:
![Page 7: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/7.jpg)
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.
![Page 8: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/8.jpg)
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.
![Page 9: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/9.jpg)
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais
![Page 10: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/10.jpg)
CONCEITO DE IMAGEM DIGITAL
• Imagens vetoriais
![Page 11: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/11.jpg)
CONCEITO DE IMAGEM DIGITAL
Imagem Vetorial x Imagem Bitmap
![Page 12: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/12.jpg)
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...
![Page 13: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/13.jpg)
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
![Page 14: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/14.jpg)
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).
![Page 15: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/15.jpg)
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
![Page 16: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/16.jpg)
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.
![Page 17: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/17.jpg)
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;
![Page 18: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/18.jpg)
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.
![Page 19: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/19.jpg)
• 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
![Page 20: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/20.jpg)
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)
![Page 21: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/21.jpg)
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
![Page 22: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/22.jpg)
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
![Page 23: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/23.jpg)
INICIANDO O PHOTOSHOP
![Page 24: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/24.jpg)
INICIANDO O PHOTOSHOP
• Criando um novo Documento
FILE > NEW
ARQUIVO > NOVO
CTRL + N
![Page 25: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/25.jpg)
INICIANDO O PHOTOSHOP
![Page 26: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/26.jpg)
INICIANDO O PHOTOSHOP
• A interface do photoshop é composta por:
– Barra do Aplicativo;– Opções;– Barra de Ferramentas;– Painéis.
![Page 27: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/27.jpg)
FERRAMENTAS DE SELEÇÃO
• Utilizada para selecionar uma área específica da imagem.
![Page 28: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/28.jpg)
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)
![Page 29: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/29.jpg)
FERRAMENTAS DE SELEÇÃO
![Page 30: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/30.jpg)
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)
![Page 31: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/31.jpg)
FERRAMENTAS DE SELEÇÃO
![Page 32: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/32.jpg)
FERRAMENTAS DE SELEÇÃO
• Single Row Marquee ToolCria uma seleção “linha” com 1px de altura.
• Single Columm Marquee ToolCria uma seleção “coluna” com 1px de largura.
(Seleção proporcional, basta pressionar a tecla Shift)
![Page 33: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/33.jpg)
1- New Selection2- Add to Selection3- Subtract to Selection4- Instersection to Selection
FERRAMENTAS DE SELEÇÃO
1 2 3 4
![Page 34: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/34.jpg)
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
![Page 35: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/35.jpg)
FERRAMENTAS DE SELEÇÃO (LASSO)
Feather: Aplica um efeito de desfoque na área selecionada (borda).
![Page 36: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/36.jpg)
• Utilizada para selecionar uma área específica da imagem com mais precisão.
FERRAMENTAS DE SELEÇÃO
![Page 37: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/37.jpg)
• 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
![Page 38: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/38.jpg)
FERRAMENTAS DE SELEÇÃO (RÁPIDA)
• Utilizada para selecionar uma área comum da imagem que possua o mesmo tom de cor.
![Page 39: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/39.jpg)
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;
![Page 40: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/40.jpg)
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);
![Page 41: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/41.jpg)
FERRAMENTAS DE PREENCHIMENTO E CORES
• Pode-se aplicar preenchimentos sólidos e Gradientes em uma imagem ou desenho.
![Page 42: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/42.jpg)
FERRAMENTAS DE PREENCHIMENTO E CORES
Gradiente Tool
![Page 43: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/43.jpg)
FERRAMENTAS DE PREENCHIMENTO E CORES
Gradiente ToolAo clicar no gradiente com duplo clique, será aberta uma janela para edição manual.
1- Duplo clique no gradiente2- Duplo clique no ponto (pincel)para alterar a cor3- Selecione a cor
1
2
3
![Page 44: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/44.jpg)
FERRAMENTAS DE PREENCHIMENTO E CORES
Paint Bucket ToolPinta toda a área clicada
![Page 45: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/45.jpg)
• Pode-se criar Quadrados, Quadrados com Cantos arredondados, Círculos, Poligonos, Linhas e Simbolos pré-definidos.
FERRAMENTAS DE FORMAS
![Page 46: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/46.jpg)
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
![Page 47: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/47.jpg)
ALTERAR COR
![Page 48: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/48.jpg)
PAINEL HISTORY
![Page 49: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/49.jpg)
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
![Page 50: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/50.jpg)
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.
![Page 51: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/51.jpg)
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.
![Page 52: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/52.jpg)
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).
![Page 53: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/53.jpg)
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões Diariamente.
Chat na Terça-Feira 03/09/201319h00 as 20h30
![Page 54: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/54.jpg)
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]
![Page 55: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/55.jpg)
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
![Page 56: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/56.jpg)
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)
![Page 57: FTIN - Módulo de Web Design Prof. Iran Pontes. PHOTOSHOP PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.](https://reader036.fdocument.pub/reader036/viewer/2022062819/5706385f1a28abb8238ff2af/html5/thumbnails/57.jpg)
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