O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes Altere suas preferências de anúncios quando desejar.

Psd to html

540 visualizações

Publicada em

Um bate papo com designers, mostrando boas práticas para organização de seus arquivos PSD e conceitos básicos em HTML, CSS.

Publicada em: Design
  • Seja o primeiro a comentar

Psd to html

  1. 1. VOCÊ NÃO ESTÁSOZINHO NO MUNDOSua tarefa é facilitar a vida das pessoas.
  2. 2. QUEM?Sua organização pode facilitar a vida do desenvolvedor.
  3. 3. PROJETO x EGONão pense somente em "pixels" ou "efeitos", pense nasfuncionalidades.
  4. 4. SEJA ORGANIZADOKeep calm and "organize suas layers"
  5. 5. RENOMEIE TODAS ASLAYERSCrie nomes significativos, referentes ao layout.
  6. 6. PASTAS = DIVSagrupe as layers seguindo o mesmo padrão de divs noHTML, separe as pastas por cores de acordo com assessões.
  7. 7. NÃO FAÇA ISSO!
  8. 8. FAÇA ISSO!
  9. 9. ÍCONES SÃO SERESSENSÍVEIS.ícones são separados por famílias e tamanhos, portantonão os redimensione.
  10. 10. www.iconfinder.com
  11. 11. MESCLE OSELEMENTOSEvite manipulação dos efeitos...
  12. 12. DOCUMENTE O LAYOUTCrie um manual para informar ao desenvolvedor ospadrões do layout, tipografias, corpo dos textos, cores,links e seus estados...
  13. 13. HTML, E AGORA?Linguagem de marcação, usa-se tags para darsignificado ao conteúdo. ex: <p>conteúdo comoparágrafo</p>
  14. 14. ESTRUTURA DE BASE<html><head> <title>Título da Página</title></head><body> Seu conteúdo aqui...</body></html>
  15. 15. EXEMPLOS TAGS<p>Parágrafo</p><h1>Título de maior importância</h1><div>Divisão no conteúdo</div><img>
  16. 16. WEB STANDARDSWeb Standards é um conjunto de normas, diretrizes,recomendações, notas, artigos, tutoriais e afins decaráter técnico, produzidos pela W3C.É destinado a orientar fabricantes, desenvolvedores eprojetistas para o uso de práticas que possibilitem acriação de uma Web acessível a todos.
  17. 17. DIVISÃO EM CAMADAS● HTML - Conteúdo● CSS - Formatação● JAVASCRIPT - Comportamento
  18. 18. JAVASCRIPTHTML CSS (SCREEN) CSS (PRINT) CSS (MOBILE)
  19. 19. CSS?Designer de web precisa saber CSS.
  20. 20. SINTAXE CSSseletor { propriedade:valor; }seletor - elemento html - identificadores (class, id)propriedade - o que será alteradovalor - valor de alteraçãobody{ background-color:#cccccc; font-family: Arial;}
  21. 21. EXEMPLOSwidth: 960px;height: 300px;background-color:#CCC;background-image: url(images/bg-body.png);background: #CCC url(images/bg-body.png);margin-left; 15px;margin:10px 5px 5px 10px;padding-top: 5px;padding: 5px 10px 10px 5px;float: left;clear:both;
  22. 22. EXEMPLOSposition: absolute;top:10px;left:20px;color: #CC9900;font-size: 12px;font-family: Verdana;font-weight: bold;line-height: 1.5em;
  23. 23. POR HOJE É SÓPESSOALPERGUNTAS?
  24. 24. THANKS!@abel_ribeirowww.ribeirart.com

×