PSD2CSS – Converta seu layout PSD em HTML e CSS

Publicado em CSS, Desenvolvimento, Design, Tools, Web, por

É 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 [...]

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.

Você gostou deste post?

admin

Siga o autor no Twitter!  

Posts relacionados

Posts Populares


  • http://www.maker-big.site40.net jhonatan

    queria saber como fas pra passa o meu site de psd para html.

    meu msn é jhonatan_w.m@hotmail.com
    sou novato, tenham paciencia =]

    mi ajudem, só isso que quero.

  • http://www.toprated.com.br Dom

    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!

  • Neemias Jr

    E qual o melhor programa pra fatiar o layout:
    Photoshop ou Fireworks?

  • http://www.zfoliosite.com Luiz Zamboni

    Pra fazer assim e com tabelas de imagens recortadas dá no mesmo…rs

  • http://www.portalfolha.com Gustavo

    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?

  • http://www.miltonandrade.com Milton Andrade

    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.

  • michal rock

     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.