FTIN - Módulo de WebDesign

1. FTIN - Módulo de WebDesign Prof. Ítalo Araújo

2. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA PHOTOSHOP CS5

3. 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?

4. Conceito de Imagem Digital • As imagens bitmap • Definição: A imagemédivididanospontos de umamatriz. Cadapontoégravado com seu valor particular de luminosidadeecor, formando um mapa (map) dos pontos (bit). Mesmo as áreassemdesenho (fundo) fazem parte do arquivo.

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

6. Conceito de Imagem Digital • As imagens vetoriais • Definição: A palavra "vetor" refere-se a umalinha, mas a representaçãovetorialdescreve um desenho com umasérie de linhaseformas. Possuialgumasregiõespreenchidas com corsólidaousombreada.

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

8. Conceito de Imagem Digital • Imagem Bitmap x Imagem Vetorial

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

10. Conceito de Imagem Digital • Resolução • Para cadasistema de impressão, existeumaresoluçãoideal.Resoluçõesacimadelaresultarãoemarquivosmaioressemganhos de qualidade, menores, resultarãoemperda de definição de detalhesepixelização. • Resolução ideal paramonitores: 72 dpi • Resolução ideal paraimpressãoemaltaqualidade: 300 dpi

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

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

13. 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;

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

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

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

17. Iniciando o Photoshop • Criando um novo Documento

18. Iniciando o Photoshop

19. Iniciando o Photoshop • A interface do photoshop é composta por: • Barra do Aplicativo • Opções • Ferramentas • Painéis

20. Ferramentas de Seleção • Utilizada para selecionar uma área específica da imagem.

21. Ferramentas de Seleção (Lasso) • Utilizada para selecionar uma área específica da imagem com mais precisão.

22. Ferramentas de Seleção (Rápida) • Utilizada para selecionar uma área comum da imagem que possua o mesmo tom de cor.

23. Ferramentas de Preenchimento e Cores • Pode-se aplicar preenchimentos sólidos e Gradientes numa imagem ou em um desenho.

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

25. ATIVIDADE • Quais as diferenças entre imagem bitmap e imagem vetorial? Dê exemplos. • O que é Resolução? • Qual a Resolução indicada para se trabalhar com Web? • Defina, com suas palavras, o que é Cor? • Para que servem os Modos de Cores? • Como é composta a interface do Photoshop CS5? Para que serve cada componente?

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

27. 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:

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

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