FTIN - Módulo de WebDesign
description
Transcript of FTIN - Módulo de WebDesign
![Page 1: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/1.jpg)
FTIN - Módulo de WebDesign
Prof. Ítalo Araújo
![Page 2: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/2.jpg)
PHOTOSHOP CS5FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
![Page 3: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/3.jpg)
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?
![Page 4: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/4.jpg)
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.
![Page 5: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/5.jpg)
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.
![Page 6: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/6.jpg)
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.
![Page 7: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/7.jpg)
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
![Page 8: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/8.jpg)
Conceito de Imagem Digital
• Imagem Bitmap x Imagem Vetorial
![Page 9: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/9.jpg)
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...
![Page 10: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/10.jpg)
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
![Page 11: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/11.jpg)
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).
![Page 12: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/12.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;
• Ciano: tranquilidade, paz, sossego, limpeza, frescor; • Verde: natureza, primavera, fertilidade, juventude,
desenvolvimento, riqueza, dinheiro, boa sorte, ciúmes, ganância, esperança
![Page 13: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/13.jpg)
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;
![Page 14: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/14.jpg)
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
![Page 15: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/15.jpg)
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
![Page 16: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/16.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 17: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/17.jpg)
Iniciando o Photoshop
• Criando um novo Documento
![Page 18: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/18.jpg)
Iniciando o Photoshop
![Page 19: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/19.jpg)
Iniciando o Photoshop
• A interface do photoshop é composta por:– Barra do Aplicativo– Opções– Ferramentas– Painéis
![Page 20: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/20.jpg)
Ferramentas de Seleção
• Utilizada para selecionar uma área específica da imagem.
![Page 21: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/21.jpg)
Ferramentas de Seleção (Lasso)
• Utilizada para selecionar uma área específica da imagem com mais precisão.
![Page 22: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/22.jpg)
Ferramentas de Seleção (Rápida)
• Utilizada para selecionar uma área comum da imagem que possua o mesmo tom de cor.
![Page 23: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/23.jpg)
Ferramentas de Preenchimento e Cores
• Pode-se aplicar preenchimentos sólidos e Gradientes numa imagem ou em um desenho.
![Page 24: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/24.jpg)
Ferramentas de Desenho
• Pode-se criar Quadrados, Quadrados com Cantos arredondados, Círculos, Poligonos, Linhas e Simbolos pré-definidos.
![Page 25: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/25.jpg)
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?
![Page 26: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/26.jpg)
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
![Page 27: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/27.jpg)
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:
![Page 28: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/28.jpg)
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
![Page 29: FTIN - Módulo de WebDesign](https://reader035.fdocument.pub/reader035/viewer/2022062517/568139a6550346895da144b0/html5/thumbnails/29.jpg)
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