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

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

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

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!

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;

CONCEITO DE IMAGEM DIGITAL Imagens bitmap ou Raster:

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

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.

CONCEITO DE IMAGEM DIGITAL Imagens vetoriais

CONCEITO DE IMAGEM DIGITAL Imagens vetoriais

CONCEITO DE IMAGEM DIGITAL Imagem Vetorial x Imagem Bitmap

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

CONCEITO DE IMAGEM DIGITAL Resolução – Resolução ideal para web: 72 – 90 DPI – Resolução ideal para impressão em alta qualidade: 300 PPI

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

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

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.

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;

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.

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

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 Creative Cloud (CC)

ADOBE PHOTOSHOP CS6 Adobe Creative Cloud (CC) É um serviço de nuvem que inclui armazenamento (20 GB de armazenamento em nuvem para pessoas físicas, 100 GB com a Creative Cloud 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

INICIANDO O PHOTOSHOP

Criando um novo Documento FILE > NEW ARQUIVO > NOVO CTRL + N

INICIANDO O PHOTOSHOP

A interface do photoshop é composta por: – Barra do Aplicativo; – Opções; – Barra de Ferramentas; – Painéis.

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

FERRAMENTAS DE SELEÇÃO Rectangular Marquee Tool - 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)

FERRAMENTAS DE SELEÇÃO

Elliptical Marquee 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)

FERRAMENTAS DE SELEÇÃO

Single Row Marquee Tool Cria uma seleção “linha” com 1px de altura. Single Columm Marquee Tool Cria uma seleção “coluna” com 1px de largura. (Seleção proporcional, basta pressionar a tecla Shift)

1- New Selection 2- Add to Selection 3- Subtract to Selection 4- Instersection to Selection FERRAMENTAS DE SELEÇÃO

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

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

Utilizada para selecionar uma área específica da imagem com mais precisão. 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); FERRAMENTAS DE SELEÇÃO

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

FERRAMENTAS DE SELEÇÃO (RÁPIDA) Magic Wand Tool – 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. Sample All Layers – Seleciona a cor em todas as layers;

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

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

FERRAMENTAS DE PREENCHIMENTO E CORES Gradiente Tool

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

FERRAMENTAS DE PREENCHIMENTO E CORES Paint Bucket Tool Pinta toda a área clicada

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

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 History State. PAINEL HISTORY

ALTERAR COR

PAINEL HISTORY

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

ATIVIDADE 1) 1)Quais são as principais diferenças entre imagens bitmap e vetorial? 2) 2)O que é Resolução? Qual a Resolução indicada para se trabalhar com Web e por que? 3) 3)Qual o sistema de cor usado para web? 4) 4)Defina com suas palavras: o que é Cor? 5) 5)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.

ATIVIDADE - PESQUISA 6) 6)Faça uma pesquisa referente a outros programas que podem ser usados para desenvolvem layouts para web, citando ao menos 03 preenchendo as especificações abaixo: Nome Oficial do Programa: Ano de lançamento: Empresa fabricante: Versão atual: Cada atividade é uma avaliação, dedique-se. Faça as atividades com suas palavras, não copie e cole da internet ou colegas.

ATIVIDADE Prazo para postagem: 07/09/2013 até às 23h55 Evite enviar a postagem de sua atividade no último dia. Imprevistos podem ocorrer; Sua organização e pontualidade também estão sendo avaliadas; Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).

DÚVIDAS... Acesse o Fórum de dúvidas e discussões Diariamente. Chat na Terça-Feira 03/09/ h00 as 20h30

FERRAMENTAS DE APOIO Apostilas e vídeos do AVASIS; Fórum durante o módulo com resposta em até 06 horas úteis; do professor:

POR HOJE É SÓ! PRÓXIMA AULA: – + Photoshop: Ferramenta de formas, Ferramenta de Texto, trabalhando com Layers, Grid e Régua; – Primeiros passos para criar Layout. SIGA-ME: – Facebook.com/iranpontes – Twitter.com/iranpontes –

POR HOJE É SÓ! INSPIRE-SE: – Livro: Psicodinâmica das cores em comunicação. Modesto Farina, Clotilde Perez, Dorinho Bastos – Livro: Design para Quem não é Designer. Primeiros passos para criar Layout. Williams, Robin – Livros, PDFS, Tutoriais ensinando a trabalhar com Photoshop; – Sites de Design, Front End (Web Design)

POR HOJE É SÓ! "Qual de vocês, se quiser construir uma torre, primeiro não se assenta e calcula o preço, para ver se tem dinheiro suficiente para completá-la? Pois, se lançar o alicerce e não for capaz de terminá- la, todos os que a virem rirão dele, dizendo: ‘Este homem começou a construir e não foi capaz de terminar”. Lucas 14:28-30