FTIN - Módulo de WebDesign

Prof. Ítalo Araújo

PHOTOSHOP CS5FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

Adobe Photoshop CS5

• A ferramenta de edição de imagens mais poderosa e utilizada no mundo.

• Versão CS5: Novos recursos ainda mais inovadores.

• O que podemos fazer com esta ferramenta?

Conceito de Imagem Digital

• As imagens bitmap• Definição: A imagem é dividida nos

pontos de uma matriz. Cada ponto é gravado com seu valor particular de luminosidade e cor, formando um mapa (map) dos pontos (bit). Mesmo as áreas sem desenho (fundo) fazem parte do arquivo.

Conceito de Imagem Digital

• As imagens bitmap• Características: – Imagem formada por um conjunto de

pontos denominados “Pixel”–Arquivos de tamanhos muito grande–O tamanho da imagem, quando alterada,

pode sofrer perda de qualidade.

Conceito de Imagem Digital

• As imagens vetoriais• Definição: A palavra "vetor" refere-se a

uma linha, mas a representação vetorial descreve um desenho com uma série de linhas e formas. Possui algumas regiões preenchidas com cor sólida ou sombreada.

Conceito de Imagem Digital

• As imagens vetoriais• Características:– São entidades geométricas, representada por

um círculo, rectâ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

Conceito de Imagem Digital

• Imagem Bitmap x Imagem Vetorial

Conceito de Imagem Digital

• Resolução– Nível de detalhe que uma imagem comporta– Resoluções mais altas significam mais detalhes na

imagem.– A resolução de imagem pode ser medida de várias

formas.– Medidas: mm, polegadas, pixel, etc...

Conceito de Imagem Digital

• Resolução– Para cada sistema de impressão, existe uma

resolução ideal.Resoluções acima dela resultarão em arquivos maiores sem ganhos de qualidade, menores, resultarão em perda de definição de detalhes e pixelização.

– Resolução ideal para monitores: 72 dpi– Resolução ideal para impressão em alta qualidade:

300 dpi

Cores

• O que é cor?– A cor é uma percepção visual provocada pela ação

de um feixe de fotons 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).

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;

• Ciano: tranquilidade, paz, sossego, limpeza, frescor; • 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;

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

• Matiz da Cor• Descreve as cores numericamente• Photoshop têm como base os modelos de

cores que são úteis para imagens utilizadas na editoração

Modos de Cores

• RGB (vermelho, verde e azul)• CMYK (ciano, magenta, amarelo e preto)• 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)

Iniciando o Photoshop

• Criando um novo Documento

Iniciando o Photoshop

Iniciando o Photoshop

• A interface do photoshop é composta por:– Barra do Aplicativo– Opções– Ferramentas– Painéis

Ferramentas de Seleção

• Utilizada para selecionar uma área específica da imagem.

Ferramentas de Seleção (Lasso)

• Utilizada para selecionar uma área específica da imagem com mais precisão.

Ferramentas de Seleção (Rápida)

• Utilizada para selecionar uma área comum da imagem que possua o mesmo tom de cor.

Ferramentas de Preenchimento e Cores

• Pode-se aplicar preenchimentos sólidos e Gradientes numa imagem ou em um desenho.

Ferramentas de Desenho

• Pode-se criar Quadrados, Quadrados com Cantos arredondados, Círculos, Poligonos, Linhas e Simbolos pré-definidos.

ATIVIDADE

1) Quais as diferenças entre imagem bitmap e imagem vetorial? Dê exemplos.

2) O que é Resolução?3) Qual a Resolução indicada para se trabalhar com Web?4) Defina, com suas palavras, o que é Cor?5) Para que servem os Modos de Cores? 6) Como é composta a interface do Photoshop CS5? Para

que serve cada componente?

Atividade

Prazo para postagem: 30/06/12 até às 23:55h

EVITE DEIXAR A POSTAGEM DE SUA ATIVIDADE PARA O ÚLTIMO DIA.

FAZENDO ISSO, IMPREVISTOS NÃO VÃO LHE PREJUDICAR.

* LEMBRANDO QUE SUA ORGANIZAÇÃO TAMBÉM ESTA

SENDO AVALIADA

FERRAMENTAS DE APOIO

Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta

em até 6 horas úteis; E-mail do professor:

DÚVIDAS...

Acesse o Fórum de dúvidas e discussões Diariamente

Chat na Terça-Feira: dia 26/06/12 no horário: das 19:00 às 20:30 h

Por hoje é só!

• Na próxima aula:– Ferramentas de Desenho a mão– Trabalhando com Layers.

• Siga-me:– Facebook.com/italoj.araujo– Twitter.com/italoj