Criando temas em PSD pensando no Front-end e Back-end

25,793 views

Published on

Apresentação inspirado na oficina do amigo Bernard de Luna sobre fatiamentos de layout, onde ele fez uma oficina junto do Victor Montalvão no 15º EDTED da Arteccom.
(http://www.slideshare.net/bernarddeluna/oficina-de-planejamento-corte-seu-layout-virando-cdigo-15-edted)

Essa apresentação foi dada no 2º WPMeetupRJ no Espaço de Coworking BeesOffice, organizado pelo @castroalves @GugaAlves e @duquebilly.

O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.

2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
25,793
On SlideShare
0
From Embeds
0
Number of Embeds
22,445
Actions
Shares
0
Downloads
53
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

Criando temas em PSD pensando no Front-end e Back-end

  1. 1. • Trabalhei na Editora Gráfica do colégio e curso GPI como designer gráfico e como supervisor da equipe de criação/diagramação;• Formado em Webdesigner pelo SENAC-RJ;• Sou freelancer há 4 anos e tenho 8 clientes fixos;• Participei da criação de mais 70 projetos web;
  2. 2. • E desde o final de 2009 todos os meus projetos são focados em negócio utilizando o CMS WordPress;• À partir daí, eu criei mais de 10 temas exclusivos; (Nesse momento tenho 3 temas em desenvolvimento)• E personalizei um pouco mais de 15 temas Premium editando XHTML/CSS de acordo com o projeto.
  3. 3. • Meus PSD’s tinham muitos efeitos desnecessários;• Nenhum elemento era renomeado;• Estrutura de elementos era desorganizada e pouco intuitiva;• E depois do site finalizado, fazer atualização no documento era muito difícil e pouco produtiva.
  4. 4. Equipe GPI(2002/2007)
  5. 5. AgenteComunicação(2007)
  6. 6. • Linha de produção por Henry Ford;• Troca de experiência entre setores;
  7. 7. • Renomeie TODAS as camadas (layers) e pastas (folders);• Use nomes que façam sentido para as sessões do layout;
  8. 8. • Crie pastas para as sessões do layout;• Organize as pastas de cima para baixo acompanhando o layout;• Separe as pastas por cores. Isso ajuda a identificação das sessões;
  9. 9. • Nunca redimensione o tamanho dos ícones;• Se for usar banco de ícones, faça a busca no tamanho exato necessário;
  10. 10. 1. Mesclar elementos para evitar manipulação dos efeitos;2. Documente os estilos do layout;3. Recomendo o uso do Dropbox para a troca de arquivos;4. Revise tudo antes de passar os arquivos ao desenvolvedor né!? ;-)
  11. 11. 1. Mesclar elementos para evitar manipulação dos efeitos;
  12. 12. 2. Documente os estilos do layout;
  13. 13. 3. Recomendo o uso do Dropbox para a troca de arquivos;
  14. 14. • Meu artigo sobre o tema http://www.minim.in/1vS• Slide do @Bernarddeluna e @victormontalvao no 15º EDTED da Arteccom http://www.minim.in/1Pr• Icon Finder http://www.minim.in/1Pt• Pencil Sketching http://www.minim.in/II• 960 Grid System http://www.minim.in/1Ps

×