FTIN - Módulo de WebDesign Prof. Iran Pontes. ACI FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.
FTIN - Módulo de WebDesign
description
Transcript of FTIN - Módulo de WebDesign
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