FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


layout psd para xhtml/css





gueda
Como vocês transformam o layout do photoshop para xhtml/css?
Utilizam dreamweaver ou outro programa? Eu faço os css no notepad++

Eu particularmente não me adaptei ao dreamweaver. Bom, não sou da área de design/coder etc. Tenho Direito e faço sites apenas de uso pessoal. Todavia, tenho enorme dificuldade em codificar meu layout do photohosp para xhtml/css.

O xhtml/css eu faço perfeitamente, o problema que tenho é quais slices cortar do photoshop etc essa parte gera grande dificuldades.
Já li diversos tutoriais, mas nenhum, realmente, me ensinou algo simples corte isso por isso e aquilo por aquilo.

Quais tutoriais/sites/dicas vocês sugerem ou conhecem?
escritor
Se você souber ler textos em inglês, visite o HTML Dog e confira esta de lista de dicas.
gueda
valeu pelas dicas. Pulei para a parte avançada no dog, muito boa as dicas dele de tableless, acho que vai facilitar bastante a enxergar o modo que devo cortar o layout no photoshop para posterior montagem no css

Esse outro que você passou é show! "What Designers must know and learn – PSD into XHTML & CSS", favoritei ele aqui para não perder
Vanilla
Costumo fazer tudo no Photoshop e ir fazendo o CSS quase ao mesmo tempo no Notepad ++. Já deixo o Photoshop aberto porque volta e meia preciso de um ajuste ou outro. Seja pra diminuir um pixel da imagem de topo ou pra pegar uma cor na imagem. Quanto as imagens das quais preciso, não uso muitas. Geralmente só a imagem no topo e o background. Gosto de mexer mais com CSS porque depois se eu quiser mudar um detalhe ou uma cor, é mais fácil que abrir o Photoshop, editar a imagem, subir ela de novo e editar o CSS.

No layout atual, a área de posts e a sidebar são basicamente CSS. Eu só usei uma imagem png como background pra fazer essa graça de layout transparente. Infelizmente as propriedades que fazem isso diretamente no CSS ainda não são reconhecidas, então usei png mesmo. Tudo pra validar o código. Very Happy

Screenshot do layout :: Layout ao vivo
akumashio
Existe um Plugin Para Photoshop CS+ que se chama, SiteGrinder 2!
Ele converte seu site para html/css automaticamente... Porem se seu site no photoshop naum estiver em tabelas ele saira todos deformado. Por tanto, recomendo que fassa seu site todo em tabelas!

Mas você pode usar o famoso Dreamweaver ou o Notpad, Notpad ++
Porem demora mais... Wink

Espero ter ajudado!
escritor
Este plug-in converte arquivos PSD para temas do Wordpress.
gueda
Vanilla wrote:
Costumo fazer tudo no Photoshop e ir fazendo o CSS quase ao mesmo tempo no Notepad ++. Já deixo o Photoshop aberto porque volta e meia preciso de um ajuste ou outro. Seja pra diminuir um pixel da imagem de topo ou pra pegar uma cor na imagem. Quanto as imagens das quais preciso, não uso muitas. Geralmente só a imagem no topo e o background. Gosto de mexer mais com CSS porque depois se eu quiser mudar um detalhe ou uma cor, é mais fácil que abrir o Photoshop, editar a imagem, subir ela de novo e editar o CSS.

No layout atual, a área de posts e a sidebar são basicamente CSS. Eu só usei uma imagem png como background pra fazer essa graça de layout transparente. Infelizmente as propriedades que fazem isso diretamente no CSS ainda não são reconhecidas, então usei png mesmo. Tudo pra validar o código. Very Happy

Screenshot do layout :: Layout ao vivo


bem legal o layout que você deixou para exemplo! Quanto ao blog em si, adorei, super organizado.
Acho que essa dica de ir fazendo o photoshop e estilizando junto no css é melhor mesmo, assim já vai vendo o resultado.

@akumashio
para legal esse sitegrinder, o problema dele é justamente esse, tem que ser feito em tabelas... mas para fins de estudo ele parece ser bom, vou pegar e ver como fica o código nele, qualquer coisa dou uma limpada e deixo bem clean e tableless.

@escritor
não conhecia esse plugin, vou dar uma olhada, parece ser interessante, ainda mais porque estou precisando de um layout para um wordpress e estava procurando por onde começar...

obrigado pelas dicas Very Happy
riccopt
escritor wrote:
Este plug-in converte arquivos PSD para temas do Wordpress.
muito obrigado por este link!!
eu estava procurando por algo nesse estilo para converter meus sites de conteudo adulto para o WP...
caracolbru
Show de bola esse plugin divine.

Alguém tem o serial ou crack?

Quais alternativas além do divine e sitegrinder para converter PSD em sites?

Valeu!!
Related topics
Reply to topic    Frihost Forum Index -> Language Forums -> Portuguese

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.