PSD to HTML Part 2


GFxCube.Net | An easy to follow photoshop/dreamweaver tutorial on coding a site from a PSD to HTML. Part 2 of 6. Earlier videos showed how to design this exact template being coded. Feel free to subscribe. PSD for template can be found at www.GFxCube.Net

25 Comments


  1. minus9176
    May 10, 2011

    Love your videos ! Thx alot.


  2. thedeeceteam
    May 10, 2011

    @fthis123456 this is just an intro to slicing. You can take your creativity along with this tutorial and apply it to more “modern” ways of building a website. E.g: if you set images in tables as background, you can designate large areas for text input in HTML that doesn’t require changing the psd.


  3. GFxCube
    May 10, 2011

    @fthis123456 Gunna have to troll harder bro. These videos were made to help people get a start. Obviously no one should ever to image slicing except to get images out. Troll videos not 3 years old and not designed to help people learn. A lot have gotten a start from these videos.

    Maybe it’s time I make new videos to help people really learn a few things. In the mean time, no room for trolls. Cya :)


  4. fthis123456
    May 10, 2011

    AND…all those table tags are bad for SEO…very bad.


  5. fthis123456
    May 10, 2011

    Heres the reasons as to why this guy’s approach to convert PSD to HTML is just plain UN-PROFESSIONAL:

    1. Everything in the web page will be images…even mono colored backgrounds….
    2. the html generated by photoshop will include tables, tables are becoming
    obsolete..
    3. When a designer wants to change the text or sizes of font’s/images etc, they have
    to redo it in photoshop, and slicing must happen again, very very bad approach.

    and many more reasons…


  6. MastKalundar
    May 10, 2011

    on the last step of this can you just ctrl click on the table layer and see the hight and the width in the info box??


  7. howtocreatewebsite
    May 10, 2011

    Coding vid gold. Even so, not sure I can do it like you. Thanx!


  8. superadry88
    May 10, 2011

    Hello everyone, I’m Italian so excuse me if I do not write very well in English … I am following this tutorial because although it is a different language is very well done! I only have one problem, when I create buttons with the respective link on the home, contacts, etc., forming a blue outline around them …. why?? thank you very much !!!!!


  9. ezekielthemack
    May 10, 2011

    Thank you very much for your tutorials. You have helped me a great deal and I appreciate it. Thanks again.


  10. MySuzukiRider
    May 10, 2011

    How can you see your homepage, it starts in your video at 00.00 untill 00.10?


  11. MySuzukiRider
    May 10, 2011

    @GFxCube – How can you see your homepage, it starts in your video at 00.00 untill 00.10?


  12. MySuzukiRider
    May 10, 2011

    How can you see your homepage, it starts in your video at 00.00 untill 00.10?


  13. dalebednell
    May 10, 2011

    Thanks for a very well made video good tut best i have see yet
    and for the time you spent making this video keep up the good work


  14. cutekezia
    May 10, 2011

    Wow! I’ve been design and developing lots of website manually with dreamweaver and photoshop (not save as web and devices like you) for over 5 years , it’s pain! Now I watch your vid, it’s REALLY SUPER HELP me! My work will soo much fasteeer, and easier! Thanks!


  15. darkshad109
    May 10, 2011

    @Sdfrien I suppose because doing it visually is just common sense, whereas doing it through code requires know-how, also coding will always have a place no matter how visual things get, sometime you just need to get your hands dirty in code to get the job done right.


  16. Sdfrien
    May 10, 2011

    I know that this video is over a year old but I would like to have seen the more visual options for changing properties. I do understand that the actual coding is important but all of the CSS options can be changed without touching any code. Since cs4, dreamweaver is moving to a very visual program. Dreamweaver can take of much of this work with a few button clicks as opposed to so much coding. Very detailed tutorial and it was a big help. thanks.


  17. trulyme1987
    May 10, 2011

    great tuts, thanks alot, just one question.. how the heck did you get yours centered? when i put in my body width like you did, yours centered, mine didn’t. Any help?


  18. Tripx012
    May 10, 2011

    mine dose not look like what you have there’s no example.com it just a bunch of pink blue and green letter


  19. InfoLester
    May 10, 2011

    Down video !!! up reload plis!!!


  20. arcyruel2010
    May 10, 2011

    what dreamweaver are you using? there is no style css are linked to my dreamwevear


  21. imperial1983
    May 10, 2011

    regarding your last point on finding out a certain objects dimensions just select the layer with the object on it and go ctrl+a -> ctrl+c -> ctrl+n

    opens “new document” dialogue with the objects dimensions as filesize. that way you don’t have to click so much ;)


  22. convert2xhtml
    May 10, 2011

    Very good video will share with others too. Highly recommend for beginners…


  23. PrimeDesigning
    May 10, 2011

    Hey, im having a bit of trouble,it’s not centering my site please help…. :)


  24. GotGrafix
    May 10, 2011

    I’ve watches plenty of these tuts. this is by far the best. I’m not really a beginner but the pace was fast enough for me not get bored but slow enough to get everything. Keep up the very good work.


  25. ritchieDonkers92
    May 10, 2011

    you solve that in css search custom link color etc.. on google!

Leave a Reply


Fatal error: Using $this when not in object context in /home/shanq/public_html/blog/wp-includes/default-widgets.php on line 552