AULA DE PHOTOSHOP - DESIGN PARA WEB

  • View
    290

  • Download
    2

  • Category

    Design

Preview:

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

DESIGNPARA WEBRENATO MELO - 2014

CORES, MEDIDAS E RESOLUÇÃO

RGB

PADRÃO OFICIAL PARA TVS,

MONITORES, CELULARES E

MÁQUINAS DIGITAIS.

REDGREENBLUE

RGB

72 A 120 DPIPIXELS

GIF:Imagens animadas

- Qualidade

PNG:Fundo

Transparente

Sites

Facebook

+ Qualidade

JPG:Instagram

Sites

+ Leve

COMO FUNCIONA NO FACEBOOK?

QUANDO VOCÊ ABRE O FACE, 300 POSTAGENS

ESTÃO LHE ESPERANDO...

AS FOTOS PRECISAM DE UM TRATAMENTO

ESPECIAL, COM CORES MAIS VIVAS E FOCO MAIS

NÍTIDO.

IMAGENS AMADORAS, REAIS,

COM POUCA PRODUÇÃO E

ESPONTÂNEAS TAMBÉM

CONVERTEM BEM.

VAMOS ABRIR UM ARQUIVO NOVO PARA UM POST PARA UMA

FANPAGE

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

DPI

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

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

IMPORTANTES!

TEXTOS MUITO GRUDADOS FICAM FEIOS. POR ISSO, VAMOS CRIAR

UMA LINHA GUIA PARA NOS HABITUAR VISUALMENTE.

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.

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

MILÍMETROS

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.

DEPOIS DE PRONTO, MANTENHA A RÉGUA EM

MILÍMETROS.

VAMOS USAR UM BANCO DE IMAGENS?

SITE: INMAGINE.COMLOGIN: esamcsantosSENHA: esamcsantos

PARA NÃO ESQUECER!!

LEMBRE-SE DO JOHN LENNON

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

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

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

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

ACRESCENTE 20 OU 30 DE SATURAÇÃO.

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

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

VAMOS AGORA ADICIONAR UMA SOMBRA PARA DESTACAR O TEXTO

MODO DE TRANSPARÊNCIA E OPACIDADE

ÂNGULO DA SOMBRA PROJETADA

A DISTÂNCIA QUE A SOMBRA SERÁ PROJETADA

O NÍVEL DE DESFOQUE DA SOMBRA

O TAMANHO DA SOMBRA

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

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.

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

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

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

SELECIONE A FOTO E VAMOS DEIXAR ELA MAIS NÍTIDA

VAMOS AGORA SELECIONAR A MÁSCARA DE NITIDEZ

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

GRUPObit.ly/gruporenato

FACEBOOK.COM/RENATOMELOMKT

renato@iskadigital.com.br