FTIN - Módulo de Web Design

FTIN - Módulo de Web Design

Prof. Iran Pontes

PHOTOSHOP PARA WEBFTIN – 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

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)

http://bit.ly/11R3949

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

INICIANDO O PHOTOSHOP

• Criando um novo Documento

FILE > NEW

ARQUIVO > NOVO

CTRL + N

INICIANDO O PHOTOSHOP

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

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

FERRAMENTAS DE SELEÇÃO

• Single Row Marquee ToolCria uma seleção “linha” com 1px de altura.

• Single Columm Marquee ToolCria uma seleção “coluna” com 1px de largura.

(Seleção proporcional, basta pressionar a tecla Shift)

1- New Selection2- Add to Selection3- Subtract to Selection4- Instersection to Selection

FERRAMENTAS DE SELEÇÃO

1 2 3 4

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 ToolAo clicar no gradiente com duplo clique, será aberta uma janela para edição manual.

1- Duplo clique no gradiente2- Duplo clique no ponto (pincel)para alterar a cor3- Selecione a cor

1

2

3

FERRAMENTAS DE PREENCHIMENTO E CORES

Paint Bucket ToolPinta 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) Quais são as principais diferenças entre imagens bitmap e vetorial?

2) O que é Resolução? Qual a Resolução indicada para se trabalhar com Web e por que?

3) Qual o sistema de cor usado para web? 4) Defina com suas palavras: o que é Cor?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) 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/201319h00 as 20h30

FERRAMENTAS DE APOIO

• Apostilas e vídeos do AVASIS;

• Fórum durante o módulo com resposta em até

06 horas úteis;

• Email do professor: iranpontes@hotmail.com

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– www.designculture.com.br

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