FTIN - Módulo de WebDesign

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

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

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

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

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; 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: Siga-me: Ferramentas de Desenho a mão
Trabalhando com Layers. Siga-me: Facebook.com/italoj.araujo Twitter.com/italoj