1 / 57

FTIN - Módulo de Web Design

FTIN - Módulo de Web Design. Prof. Iran Pontes. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA. PHOTOSHOP PARA WEB. O QUE VAMOS APRENDER?. Imagens Bitmap x vetorial; Resolução; Cores; Psicologia das cores; Introdução ao Photoshop (Ferramentas: Seleção, Preenchimento e Desenho).

michael-middleton
Download Presentation

FTIN - Módulo de Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FTIN - Módulo de Web Design Prof. Iran Pontes

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

  3. O QUE VAMOS APRENDER? • Imagens Bitmap x vetorial; • Resolução; • Cores; • Psicologia das cores; • Introdução ao Photoshop (Ferramentas: Seleção, Preenchimento e Desenho)

  4. CONCEITO DE IMAGEM DIGITAL • Imagens bitmap ou Raster: “Bitmaps ou mapas de bits são imagens formadas pela junção de pequenos pontos coloridos, chamados "pixels". Em fotografias em preto-e-branco, os pixels, curiosamente, também são coloridos, mas apenas em tons da escala de cinza. A composição ordenada dos pixels forma uma imagem fotográfica.” Livro Universidade Photoshop - desvende os recursos desta poderosa ferramenta!

  5. CONCEITO DE IMAGEM DIGITAL Imagens bitmap ou Raster: • Características importantes: • Imagem formada por um conjunto de pontos denominados: “Pixel”; • Arquivos pesados dependendo da resolução; • O tamanho da imagem, quando aumentada pode sofrer perda de qualidade;

  6. CONCEITO DE IMAGEM DIGITAL Imagens bitmap ou Raster:

  7. CONCEITO DE IMAGEM DIGITAL • Imagens vetoriais: • Definição: A palavra "vetor" refere-se a umalinha, mas a representaçãovetorialdescreve um “desenho” formado por formas geométricas que por sua vez foram feitas por cálculos matemáticos.

  8. CONCEITO DE IMAGEM DIGITAL • Imagens vetoriais • Características importantes: • São formas geométricas, representadas por um círculo, retâ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; • Vetores são ligados em pontos (nós) ordenados pelas coordenadas X e Y no plano.

  9. CONCEITO DE IMAGEM DIGITAL • Imagens vetoriais

  10. CONCEITO DE IMAGEM DIGITAL • Imagens vetoriais

  11. CONCEITO DE IMAGEM DIGITAL Imagem Vetorial x Imagem Bitmap

  12. CONCEITO DE IMAGEM DIGITAL • Resolução • Nível de detalhe que uma imagem comporta; • Resoluções mais altas significam maisdetalhes (qualidade)naimagem; • A resolução de imagem pode ser medida de váriasformas; • Medidas: m, cm, mm, polegadas, pixel, etc...

  13. CONCEITO DE IMAGEM DIGITAL • Resolução • Resolução ideal para web: 72 – 90 DPI • Resolução ideal paraimpressãoemaltaqualidade: 300 PPI

  14. CORES • O que é cor? • A cor é uma percepção visual provocada pela ação de um feixe de fótons 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).

  15. CORES “As cores possuem diferentes significados que variam entre diferentes culturas. Na cultura ocidental, as cores estão relacionadas com as emoções do ser humano.” 7Graus

  16. 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; • Verde: Natureza, primavera, fertilidade, juventude, desenvolvimento, riqueza, dinheiro, boa sorte, ciúmes, ganância, esperança.

  17. PSICOLOGIA DAS CORES • Roxo:Velocidade, concentração, otimismo, alegria, felicidade, idealismo, riqueza (ouro), fraqueza, dinheiro, sábio, idoso, fé; • 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;

  18. MODOS DE CORES • Necessidade das Indústrias Gráficas de produzirem padrões; • Matriz da Cor(soma de algumas cores formam outras); • Descreve as cores numericamente; • Photoshop usa diversos modos de cores.

  19. MODOS DE CORES • RGB (Red, Green, Blue) = Usado em monitor, Tv (A soma das cores formam todas as demais) • CMYK (Ciano, Magenta, Amarelo e Preto)(Impressos) • LAB (com base no CIE L*a*b*) (Luminosidade) • BITMAP • TONS DE CINZA • DUOTÔNICO • CORES INDEXADAS • MULTICANAL

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

  21. ADOBE PHOTOSHOP CS6 • É o programa de edição de imagens profissional mais usado do mundo tanto para Windows quanto para MAC; • Penúltima versão: CS6; • Nova Versão: Adobe CreativeCloud (CC) http://bit.ly/11R3949

  22. ADOBE PHOTOSHOP CS6 • AdobeCreativeCloud (CC) É um serviço de nuvem que inclui armazenamento (20 GB de armazenamento em nuvem para pessoas físicas, 100 GB com a CreativeCloud para equipes), acesso a ferramentas da empresa [como Photoshop] e diversos outros recursos que permitem integração dos produtos para o uso dos clientes da Adobe. Techtudo

  23. INICIANDO O PHOTOSHOP

  24. INICIANDO O PHOTOSHOP • Criando um novo Documento FILE > NEW ARQUIVO > NOVO CTRL + N

  25. INICIANDO O PHOTOSHOP

  26. INICIANDO O PHOTOSHOP • A interface do photoshop é composta por: • Barra do Aplicativo; • Opções; • Barra de Ferramentas; • Painéis.

  27. FERRAMENTAS DE SELEÇÃO • Utilizada para selecionar uma área específica da imagem.

  28. FERRAMENTAS DE SELEÇÃO • RectangularMarqueeTool - Criar seleção de forma quadrada ou retangular em uma imagem: Clicar na ferramenta > Segurar o botão do mouse > Arrastar sobre a área desejada e selecionar . (Seleção proporcional, basta pressionar a tecla Shift)

  29. FERRAMENTAS DE SELEÇÃO

  30. FERRAMENTAS DE SELEÇÃO • EllipticalMarquee Tool - Criar seleção de forma circular ou elíptica Clicar na ferramenta > Pressionar o botão do mouse > Arrastar sobre a área desejada e selecionar . (Seleção proporcional, basta pressionar a tecla Shift)

  31. FERRAMENTAS DE SELEÇÃO

  32. FERRAMENTAS DE SELEÇÃO • Single RowMarquee Tool Cria uma seleção “linha” com 1px de altura. • Single ColummMarqueeTool Cria uma seleção “coluna” com 1px de largura. (Seleção proporcional, basta pressionar a tecla Shift)

  33. FERRAMENTAS DE SELEÇÃO 2 3 4 1 1- New Selection 2- AddtoSelection 3- SubtracttoSelection 4- InstersectiontoSelection

  34. FERRAMENTAS DE SELEÇÃO Qais são as ferramentas de seleção? 2- AddtoSelection – Adicionar a seleção ativa em uma nova área de seleção; 3- SubtracttoSelection– Remover da seleção ativa uma área a ser desenhada; 4- InstersecttoSelection– Criar uma nova área de seleção a partir da interseção de duas seleções existente.

  35. FERRAMENTAS DE SELEÇÃO (LASSO) Feather: Aplica um efeito de desfoque na área selecionada (borda).

  36. FERRAMENTAS DE SELEÇÃO • Utilizada para selecionar uma área específica da imagem com mais precisão.

  37. FERRAMENTAS DE SELEÇÃO • Lasso – Ferramenta de seleção a “mão livre”; • Polygon Lasso – Criar uma linha entre dois pontos fazendo uma seleção. Usando o shift ela fica reta e para deletar um ponto, basta pressionar o backspace (espaço); • Magnetic Lasso – A seleção terá uma aderência ao contorno da área que será selecionada (precisa ter um bom contraste);

  38. FERRAMENTAS DE SELEÇÃO (RÁPIDA) • Utilizada para selecionar uma área comum da imagem que possua o mesmo tom de cor.

  39. FERRAMENTAS DE SELEÇÃO (RÁPIDA) Magic WandTool – Ferramentas: • Tolerance – Aumenta a tolerância de tom da cor selecionada; (Ex: Toerance 0: Seleciona apenas as áreas de mesma cor) • Anti-alias– Suaviza a borda; • Contiguos– Marcada: A ferramenta seleciona apenas as cores próximas da área clicada. Desmarcada: Selecionará a cor clicada, na imagem inteira. • SampleAllLayers – Seleciona a cor em todas as layers;

  40. FERRAMENTAS DE SELEÇÃO (RÁPIDA) QuickSelection Tool • Seleção clicando em uma área, podemos arrastar para outras partes da imagem a ser selecionada (seleciona de modo automático);

  41. FERRAMENTAS DE PREENCHIMENTO E CORES • Pode-se aplicar preenchimentos sólidos e Gradientes em uma imagem ou desenho.

  42. FERRAMENTAS DE PREENCHIMENTO E CORES Gradiente Tool

  43. FERRAMENTAS DE PREENCHIMENTO E CORES Gradiente Tool Ao clicar no gradiente com duplo clique, será aberta uma janela para edição manual. 3 1 1- Duplo clique no gradiente 2- Duplo clique no ponto (pincel) para alterar a cor 3- Selecione a cor 2

  44. FERRAMENTAS DE PREENCHIMENTO E CORES PaintBucket Tool Pinta toda a área clicada

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

  46. PAINEL HISTORY Window > History, • O painel history armazena as últimas ações realizadas e por padrão pode refazer até 20 ações. Aumentar mais ações: • Edite > Prerefences > Performance > History e Cache basta aumentar o campo HistoryState.

  47. ALTERAR COR

  48. PAINEL HISTORY

  49. ATALHOS BÁSICOS • Ctrl + : Zoom In. • Ctrl – : Zoom Out. • Ctrl + 0 (Zero) : Ajusta a imagem à tela. • Ctrl + Z : Desfaz a última alteração. • Ctrl+ Alt + Z : Desfaz as alterações continuamente. • Ctrl + Shift + Z : Refaz as alterações desfeitas. • Criar atalho: Ctrl + Alt + Shift + K, escolha o menu e insira seu atalho 

  50. ATIVIDADE • Quais são as principais diferenças entre imagens bitmap e vetorial? • O que é Resolução? Qual a Resolução indicada para se trabalhar com Web e por que? • Qual o sistema de cor usado para web? • Defina com suas palavras: o que é Cor? • Explique a função do painel history. Cada atividade é uma avaliação, dedique-se. Faça as atividades com suas palavras, não copie e cole da internet ou colegas.

More Related