PSD2CSS – Converta seu layout PSD em HTML e CSS

PSD2CSS Online - Converta seu PSD em HTML e CSSÉ exatamente isso que você está pensando! No PSD2CSS você faz o upload do seu layout no formato PSD [PhotoShop Document] e… voila! O site o converte automaticamente para HTM e CSS!!
Ok, ok… o resultado não chega a ser perfeito. Todo o layout é montado com imagens, cada layer é transformada num arquivo PNG. Máscaras não funcionam muito bem e as layers de texto não são reconhecidas, o que é uma pena. O código gerado é parecido com o que se obtém usando a exportação diretamente no Photoshop, mas não igual.

Como disse, o resultado não é ideal, está longe ainda do que se espera de uma página bem estruturada semanticamente e CSS bem escrito. Mas ainda assim, talvez em alguns casos possa ser útil, pra alguém que está começando a aprender a escrever HTML e CSS ou até para layouts bastante simples por exemplo.

8 comentários em “PSD2CSS – Converta seu layout PSD em HTML e CSS”

  1. Jhonatan,

    Infelizmente não existe uma ‘receita’ para isso :-)
    A dica que eu posso dar é, se está começando agora, busque alguns exemplos de layouts css prontos, veja como as coisas foram feitas, utilize sites como o PSD2CSS para fazer um código inicial e trabalhe em cima dessa base pra se acostumar com a estrutura. E estude muuito.

    abraço!

  2. Rpz, tah aí uma grande dificuldade minha. Não sei como seria a melhor forma de trabalhar inicialmente num site, hoje eu começo motando o layout no dream atraves de divs e depois no decorrer do processo vou desenhando o que preciso.

    Acontece que fica dificil dessa forma ter um bom design com harmonia de cores, layout e etc.

    Talvez esteja fazendo da maneira errada, pois mtos web-designers fazem ao contrario: desenham primeiro o layout e dpois fatiam e mandam pro dream, porém quando faço isso tenho a dificuldade de quand esta no dream sentir a nescessidade de mudar o design por ter tido uma nova ideia.

    Isso seria falta de planejamento e definição do projeto antes de fazê-lo.

    Nos da uma força aê Dom. Como vc faz?

  3. Não tem jeito cada um terá a sua forma de produzir os seus projetos. No nosso caso, uso um wireframe, depois de decidida a estrutura, busco o conceito que desejo passar, só então, parto para o Fireworks e inicio o meu projeto. Para montar um layout já pensando na codificação, utilizo o grid 960 como framework css.
    Espero ter ajudado.

  4.  Photoshop is really easy to use software to create best design for every thing which we want. I like to create my web design in Photoshop but I am not able to convert my PSD file into the HTML so I use PSD to HTML services which is offered on very good prices.

  5. Pessoal, hoje existem sites especialistas neste serviço(PSD para HTML). Fazem tudo de forma rápida e profissional. Se for um projeto realmente importante, vale a pena usá-los.

    O kukme.com.br é o melhor na minha opinião, sempre recorro a eles.

    Abraços!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>