45
DESIGN PARA WEB RENATO MELO - 2014

AULA DE PHOTOSHOP - DESIGN PARA WEB

Embed Size (px)

DESCRIPTION

Na Aula de Photoshop - Design para Web você confere como funciona a plataforma de cores RGB, o número de DPI e como configurar uma margem de segurança para o texto. Além disso, conta com um tutorial de como montar uma imagem para o Facebook, realçando a nitidez e as cores.

Citation preview

Page 1: AULA DE PHOTOSHOP - DESIGN PARA WEB

DESIGNPARA WEBRENATO MELO - 2014

Page 2: AULA DE PHOTOSHOP - DESIGN PARA WEB

CORES, MEDIDAS E RESOLUÇÃO

Page 3: AULA DE PHOTOSHOP - DESIGN PARA WEB

RGB

PADRÃO OFICIAL PARA TVS,

MONITORES, CELULARES E

MÁQUINAS DIGITAIS.

REDGREENBLUE

Page 4: AULA DE PHOTOSHOP - DESIGN PARA WEB

RGB

72 A 120 DPIPIXELS

Page 5: AULA DE PHOTOSHOP - DESIGN PARA WEB
Page 6: AULA DE PHOTOSHOP - DESIGN PARA WEB

GIF:Imagens animadas

- Qualidade

PNG:Fundo

Transparente

Sites

Facebook

+ Qualidade

JPG:Instagram

Sites

+ Leve

Page 7: AULA DE PHOTOSHOP - DESIGN PARA WEB

COMO FUNCIONA NO FACEBOOK?

Page 8: AULA DE PHOTOSHOP - DESIGN PARA WEB

QUANDO VOCÊ ABRE O FACE, 300 POSTAGENS

ESTÃO LHE ESPERANDO...

Page 9: AULA DE PHOTOSHOP - DESIGN PARA WEB

AS FOTOS PRECISAM DE UM TRATAMENTO

ESPECIAL, COM CORES MAIS VIVAS E FOCO MAIS

NÍTIDO.

Page 10: AULA DE PHOTOSHOP - DESIGN PARA WEB

IMAGENS AMADORAS, REAIS,

COM POUCA PRODUÇÃO E

ESPONTÂNEAS TAMBÉM

CONVERTEM BEM.

Page 11: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS ABRIR UM ARQUIVO NOVO PARA UM POST PARA UMA

FANPAGE

Page 12: AULA DE PHOTOSHOP - DESIGN PARA WEB

O ARQUIVO DEVE SEGUIR O FORMATO QUADRADO: 600X600 PIXELS E 100

DPI

Page 13: AULA DE PHOTOSHOP - DESIGN PARA WEB

É IMPORTANTE QUE A IMAGEM SEJA QUADRADA! O FACEBOOK PODE GERAR UM THUMBNAIL QUADRADO DA

SUA IMAGEM, DEIXANDO PARA TRÁS INFORMAÇÕES

IMPORTANTES!

Page 14: AULA DE PHOTOSHOP - DESIGN PARA WEB

TEXTOS MUITO GRUDADOS FICAM FEIOS. POR ISSO, VAMOS CRIAR

UMA LINHA GUIA PARA NOS HABITUAR VISUALMENTE.

Page 15: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS FAZER AGORA AS MARCAÇÕES DE MARGEM

DE SEGURANÇA. CASO SUA RÉGUA NÃO ESTEJA VISÍVEL, HABILITE

CONFORME IMAGEM AO LADO.

Page 16: AULA DE PHOTOSHOP - DESIGN PARA WEB

COM O BOTÃO DIREITO DO MOUSE, CLIQUE PARA DEIXAR A RÉGUA EM

MILÍMETROS

Page 17: AULA DE PHOTOSHOP - DESIGN PARA WEB

PARA FAZER AS MARCAÇÕES, BASTA

CLICAR EM CIMA DA RÉGUA, SEGURAR O BOTÃO E

PUXAR COM O MOUSE.

CADA TRAÇO EQUIVALE A 2mm.

POSICIONE ENTRE O 2 E O 3 PARA

OBTERMOS OS 5mm.

FAÇA ISSO PARA OS 4 LADOS DO ARQUIVO.

Page 18: AULA DE PHOTOSHOP - DESIGN PARA WEB

DEPOIS DE PRONTO, MANTENHA A RÉGUA EM

MILÍMETROS.

Page 19: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS USAR UM BANCO DE IMAGENS?

SITE: INMAGINE.COMLOGIN: esamcsantosSENHA: esamcsantos

Page 20: AULA DE PHOTOSHOP - DESIGN PARA WEB

PARA NÃO ESQUECER!!

LEMBRE-SE DO JOHN LENNON

Page 21: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS PROCURAR UMA IMAGEM SOBRE FAMÍLIA (FAMILY). LEMBRE-SE DE MARCAR A ORIENTAÇÃO SQUARE (QUADRADA)!

Page 22: AULA DE PHOTOSHOP - DESIGN PARA WEB

ACHOU UMA IMAGEM?CLIQUE NA SETINHA E ESCOLHA A OPÇÃO DISPONÍVEL PARA EXIBIR A FOTO SEM MARCA D’ÁGUA

Page 23: AULA DE PHOTOSHOP - DESIGN PARA WEB

EM EDIT – FREE TRANSFORM, VAMOS AUMENTAR A IMAGEM DO TAMANHO DO POST

Page 24: AULA DE PHOTOSHOP - DESIGN PARA WEB

EM IMAGEM – AJUSTES VÁ EM HUE E SATURAÇÃO.

Page 25: AULA DE PHOTOSHOP - DESIGN PARA WEB

ACRESCENTE 20 OU 30 DE SATURAÇÃO.

Page 26: AULA DE PHOTOSHOP - DESIGN PARA WEB
Page 27: AULA DE PHOTOSHOP - DESIGN PARA WEB

AGORA VAMOS ESCREVER UM SLOGAN. ESCOLHA A COR E CLIQUE NO TEXTO. PODE TROCAR A FONTE OK?

Page 28: AULA DE PHOTOSHOP - DESIGN PARA WEB

O TEXTO DO SLOGAN DEVERÁ ESTAR DENTRO DA MARGEM DE SEGURANÇA.

Page 29: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS AGORA ADICIONAR UMA SOMBRA PARA DESTACAR O TEXTO

Page 30: AULA DE PHOTOSHOP - DESIGN PARA WEB

MODO DE TRANSPARÊNCIA E OPACIDADE

Page 31: AULA DE PHOTOSHOP - DESIGN PARA WEB

ÂNGULO DA SOMBRA PROJETADA

Page 32: AULA DE PHOTOSHOP - DESIGN PARA WEB

A DISTÂNCIA QUE A SOMBRA SERÁ PROJETADA

Page 33: AULA DE PHOTOSHOP - DESIGN PARA WEB

O NÍVEL DE DESFOQUE DA SOMBRA

Page 34: AULA DE PHOTOSHOP - DESIGN PARA WEB

O TAMANHO DA SOMBRA

Page 35: AULA DE PHOTOSHOP - DESIGN PARA WEB

O IDEAL É CRIAR UMA PLATAFORMA PARA QUE O TEXTO SEJA MELHOR INTERPRETADO

Page 36: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS, DESDE JÁ, APRENDER A DEIXAR O NOSSO ARQUIVO ORGANIZADO. DÊ DOIS CLIQUES NA IMAGEM (NO NOME E NÃO NA MINIATURA) E DÊ UM NOME A ELA.

Page 37: AULA DE PHOTOSHOP - DESIGN PARA WEB

SEGURE O SHIFT E SELECIONE A CAMADA DO TEXTO. COM AS DUAS SELECIONADAS, APERTE CTRL+G PARA AGRUPÁ-LAS.

Page 38: AULA DE PHOTOSHOP - DESIGN PARA WEB

PARA RENOMEAR O GRUPO, O PROCEDIMENTO É O MESMO. CLIQUE DUAS VEZES E DÊ UM NOME.

Page 39: AULA DE PHOTOSHOP - DESIGN PARA WEB

PARA ABRIR OU FECHAR O GRUPO, BASTA CLICAR NA SETINHA.

Page 40: AULA DE PHOTOSHOP - DESIGN PARA WEB

SELECIONE A FOTO E VAMOS DEIXAR ELA MAIS NÍTIDA

Page 41: AULA DE PHOTOSHOP - DESIGN PARA WEB

VAMOS AGORA SELECIONAR A MÁSCARA DE NITIDEZ

Page 42: AULA DE PHOTOSHOP - DESIGN PARA WEB

ATIVE O PREVIEW E DEIXE O THRESHOLD EM ZERO. FEITO ISSO, AUMENTE PRIMEIRO O AMOUNT E VÁ CONTROLANDO O RADIUS.

Page 43: AULA DE PHOTOSHOP - DESIGN PARA WEB
Page 44: AULA DE PHOTOSHOP - DESIGN PARA WEB

GRUPObit.ly/gruporenato

Page 45: AULA DE PHOTOSHOP - DESIGN PARA WEB

FACEBOOK.COM/RENATOMELOMKT

[email protected]