AULA DE PHOTOSHOP - DESIGN PARA WEB

736 views
569 views

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
736
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
87
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

×