DESIGN
PARA WEB
RENATO MELO - 2014
CORES,
MEDIDAS E
RESOLUÇÃO
RGB

RED
GREEN
BLUE

PADRÃO OFICIAL PARA
TVS, MONITORES,
CELULARES E MÁQUINAS
DIGITAIS.
RGB

72 A 120 DPI
PIXELS
PNG:
GIF:
Imagens
animadas

- Qualidade

JPG:

Fundo
Transparente

Instagram

Sites

Sites

Facebook

+ Leve

+ Qualidade
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
INF...
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
CADA TRAÇO EQUIVALE
A 2mm. POSICIONE
ENTRE O 2 E O 3 PARA
OBTERMOS OS 5mm.
PARA FAZER AS MARCAÇÕES,
BASTA CLICAR EM CIMA D...
DEPOIS DE PRONTO, MANTENHA
A RÉGUA EM MILÍMETROS.
VAMOS USAR UM BANCO DE
IMAGENS?
SITE: INMAGINE.COM
LOGIN: esamcsantos
SENHA: 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Ê...
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.
GRUPO
bit.ly/gruporenato
FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br
AULA DE PHOTOSHOP - DESIGN PARA WEB
AULA DE PHOTOSHOP - DESIGN PARA WEB
AULA DE PHOTOSHOP - DESIGN PARA WEB
Upcoming SlideShare
Loading in...5
×

AULA DE PHOTOSHOP - DESIGN PARA WEB

429

Published on

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.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
429
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

AULA DE PHOTOSHOP - DESIGN PARA WEB

  1. 1. DESIGN PARA WEB RENATO MELO - 2014
  2. 2. CORES, MEDIDAS E RESOLUÇÃO
  3. 3. RGB RED GREEN BLUE PADRÃO OFICIAL PARA TVS, MONITORES, CELULARES E MÁQUINAS DIGITAIS.
  4. 4. RGB 72 A 120 DPI PIXELS
  5. 5. PNG: GIF: Imagens animadas - Qualidade JPG: Fundo Transparente Instagram Sites Sites Facebook + Leve + Qualidade
  6. 6. COMO FUNCIONA NO FACEBOOK?
  7. 7. QUANDO VOCÊ ABRE O FACE, 300 POSTAGENS ESTÃO LHE ESPERANDO...
  8. 8. AS FOTOS PRECISAM DE UM TRATAMENTO ESPECIAL, COM CORES MAIS VIVAS E FOCO MAIS NÍTIDO.
  9. 9. IMAGENS AMADORAS, REAIS, COM POUCA PRODUÇÃO E ESPONTÂNEAS TAMBÉM CONVERTEM BEM.
  10. 10. VAMOS ABRIR UM ARQUIVO NOVO PARA UM POST PARA UMA FANPAGE
  11. 11. O ARQUIVO DEVE SEGUIR O FORMATO QUADRADO: 600X600 PIXELS E 100 DPI
  12. 12. É IMPORTANTE QUE A IMAGEM SEJA QUADRADA! O FACEBOOK PODE GERAR UM THUMBNAIL QUADRADO DA SUA IMAGEM, DEIXANDO PARA TRÁS INFORMAÇÕES IMPORTANTES!
  13. 13. TEXTOS MUITO GRUDADOS FICAM FEIOS. POR ISSO, VAMOS CRIAR UMA LINHA GUIA PARA NOS HABITUAR VISUALMENTE.
  14. 14. 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.
  15. 15. COM O BOTÃO DIREITO DO MOUSE, CLIQUE PARA DEIXAR A RÉGUA EM MILÍMETROS
  16. 16. CADA TRAÇO EQUIVALE A 2mm. POSICIONE ENTRE O 2 E O 3 PARA OBTERMOS OS 5mm. PARA FAZER AS MARCAÇÕES, BASTA CLICAR EM CIMA DA RÉGUA, SEGURAR O BOTÃO E PUXAR COM O MOUSE. FAÇA ISSO PARA OS 4 LADOS DO ARQUIVO.
  17. 17. DEPOIS DE PRONTO, MANTENHA A RÉGUA EM MILÍMETROS.
  18. 18. VAMOS USAR UM BANCO DE IMAGENS? SITE: INMAGINE.COM LOGIN: esamcsantos SENHA: esamcsantos
  19. 19. PARA NÃO ESQUECER!! LEMBRE-SE DO JOHN LENNON
  20. 20. VAMOS PROCURAR UMA IMAGEM SOBRE FAMÍLIA (FAMILY). LEMBRE-SE DE MARCAR A ORIENTAÇÃO SQUARE (QUADRADA)!
  21. 21. ACHOU UMA IMAGEM? CLIQUE NA SETINHA E ESCOLHA A OPÇÃO DISPONÍVEL PARA EXIBIR A FOTO SEM MARCA D’ÁGUA
  22. 22. EM EDIT – FREE TRANSFORM, VAMOS AUMENTAR A IMAGEM DO TAMANHO DO POST
  23. 23. EM IMAGEM – AJUSTES VÁ EM HUE E SATURAÇÃO.
  24. 24. ACRESCENTE 20 OU 30 DE SATURAÇÃO.
  25. 25. AGORA VAMOS ESCREVER UM SLOGAN. ESCOLHA A COR E CLIQUE NO TEXTO. PODE TROCAR A FONTE OK?
  26. 26. O TEXTO DO SLOGAN DEVERÁ ESTAR DENTRO DA MARGEM DE SEGURANÇA.
  27. 27. VAMOS AGORA ADICIONAR UMA SOMBRA PARA DESTACAR O TEXTO
  28. 28. MODO DE TRANSPARÊNCIA E OPACIDADE
  29. 29. ÂNGULO DA SOMBRA PROJETADA
  30. 30. A DISTÂNCIA QUE A SOMBRA SERÁ PROJETADA
  31. 31. O NÍVEL DE DESFOQUE DA SOMBRA
  32. 32. O TAMANHO DA SOMBRA
  33. 33. O IDEAL É CRIAR UMA PLATAFORMA PARA QUE O TEXTO SEJA MELHOR INTERPRETADO
  34. 34. 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.
  35. 35. SEGURE O SHIFT E SELECIONE A CAMADA DO TEXTO. COM AS DUAS SELECIONADAS, APERTE CTRL+G PARA AGRUPÁ-LAS.
  36. 36. PARA RENOMEAR O GRUPO, O PROCEDIMENTO É O MESMO. CLIQUE DUAS VEZES E DÊ UM NOME.
  37. 37. PARA ABRIR OU FECHAR O GRUPO, BASTA CLICAR NA SETINHA.
  38. 38. SELECIONE A FOTO E VAMOS DEIXAR ELA MAIS NÍTIDA
  39. 39. VAMOS AGORA SELECIONAR A MÁSCARA DE NITIDEZ
  40. 40. ATIVE O PREVIEW E DEIXE O THRESHOLD EM ZERO. FEITO ISSO, AUMENTE PRIMEIRO O AMOUNT E VÁ CONTROLANDO O RADIUS.
  41. 41. GRUPO bit.ly/gruporenato
  42. 42. FACEBOOK.COM/ RENATOMELOMKT renato@iskadigital.com.br
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×