aula de photoshop - design para web
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.TRANSCRIPT
![Page 1: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/1.jpg)
DESIGNPARA WEBRENATO MELO - 2014
![Page 2: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/2.jpg)
CORES, MEDIDAS E RESOLUÇÃO
![Page 3: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/3.jpg)
RGB
PADRÃO OFICIAL PARA TVS,
MONITORES, CELULARES E
MÁQUINAS DIGITAIS.
REDGREENBLUE
![Page 4: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/4.jpg)
RGB
72 A 120 DPIPIXELS
![Page 5: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/5.jpg)
![Page 6: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/6.jpg)
GIF:Imagens animadas
- Qualidade
PNG:Fundo
Transparente
Sites
+ Qualidade
JPG:Instagram
Sites
+ Leve
![Page 7: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/7.jpg)
COMO FUNCIONA NO FACEBOOK?
![Page 8: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/8.jpg)
QUANDO VOCÊ ABRE O FACE, 300 POSTAGENS
ESTÃO LHE ESPERANDO...
![Page 9: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/9.jpg)
AS FOTOS PRECISAM DE UM TRATAMENTO
ESPECIAL, COM CORES MAIS VIVAS E FOCO MAIS
NÍTIDO.
![Page 10: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/10.jpg)
IMAGENS AMADORAS, REAIS,
COM POUCA PRODUÇÃO E
ESPONTÂNEAS TAMBÉM
CONVERTEM BEM.
![Page 11: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/11.jpg)
VAMOS ABRIR UM ARQUIVO NOVO PARA UM POST PARA UMA
FANPAGE
![Page 12: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/12.jpg)
O ARQUIVO DEVE SEGUIR O FORMATO QUADRADO: 600X600 PIXELS E 100
DPI
![Page 13: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/13.jpg)
É 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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/14.jpg)
TEXTOS MUITO GRUDADOS FICAM FEIOS. POR ISSO, VAMOS CRIAR
UMA LINHA GUIA PARA NOS HABITUAR VISUALMENTE.
![Page 15: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/16.jpg)
COM O BOTÃO DIREITO DO MOUSE, CLIQUE PARA DEIXAR A RÉGUA EM
MILÍMETROS
![Page 17: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/18.jpg)
DEPOIS DE PRONTO, MANTENHA A RÉGUA EM
MILÍMETROS.
![Page 19: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/19.jpg)
VAMOS USAR UM BANCO DE IMAGENS?
SITE: INMAGINE.COMLOGIN: esamcsantosSENHA: esamcsantos
![Page 20: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/20.jpg)
PARA NÃO ESQUECER!!
LEMBRE-SE DO JOHN LENNON
![Page 21: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/23.jpg)
EM EDIT – FREE TRANSFORM, VAMOS AUMENTAR A IMAGEM DO TAMANHO DO POST
![Page 24: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/24.jpg)
EM IMAGEM – AJUSTES VÁ EM HUE E SATURAÇÃO.
![Page 25: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/25.jpg)
ACRESCENTE 20 OU 30 DE SATURAÇÃO.
![Page 26: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/26.jpg)
![Page 27: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/28.jpg)
O TEXTO DO SLOGAN DEVERÁ ESTAR DENTRO DA MARGEM DE SEGURANÇA.
![Page 29: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/29.jpg)
VAMOS AGORA ADICIONAR UMA SOMBRA PARA DESTACAR O TEXTO
![Page 30: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/30.jpg)
MODO DE TRANSPARÊNCIA E OPACIDADE
![Page 31: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/31.jpg)
ÂNGULO DA SOMBRA PROJETADA
![Page 32: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/32.jpg)
A DISTÂNCIA QUE A SOMBRA SERÁ PROJETADA
![Page 33: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/33.jpg)
O NÍVEL DE DESFOQUE DA SOMBRA
![Page 34: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/34.jpg)
O TAMANHO DA SOMBRA
![Page 35: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/35.jpg)
O IDEAL É CRIAR UMA PLATAFORMA PARA QUE O TEXTO SEJA MELHOR INTERPRETADO
![Page 36: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/36.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/37.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/38.jpg)
PARA RENOMEAR O GRUPO, O PROCEDIMENTO É O MESMO. CLIQUE DUAS VEZES E DÊ UM NOME.
![Page 39: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/39.jpg)
PARA ABRIR OU FECHAR O GRUPO, BASTA CLICAR NA SETINHA.
![Page 40: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/40.jpg)
SELECIONE A FOTO E VAMOS DEIXAR ELA MAIS NÍTIDA
![Page 41: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/41.jpg)
VAMOS AGORA SELECIONAR A MÁSCARA DE NITIDEZ
![Page 42: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/42.jpg)
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](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/43.jpg)
![Page 44: AULA DE PHOTOSHOP - DESIGN PARA WEB](https://reader030.vdocuments.com.br/reader030/viewer/2022020723/54b4b8ea4a7959381b8b4603/html5/thumbnails/44.jpg)
GRUPObit.ly/gruporenato