Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 1)

Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 1)

Today we’re going to be taking the .PSD website template that we made in a previous tutorial, and type up the markup language for it. In a later tutorial we will take the file we make in this tutorial and write the .css for it, finishing up the entire website. Click to tweet this video: octotw.it If you don’t have Dreamweaver, then download the trial from here: www.adobe.com How to Define a Website Folder: www.youtube.com How to Make a Website in Photoshop: www.youtube.com Download the .PSD: octotuts.com Download the markup version: octotuts.com Follow me: twitter.com Be a fan: facebook.com For more tutorials and extras: ‪octotuts.com

Don’t forget to check out our other video tutorials or share this video with a friend.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 3,510 views

18 responses to “Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 1)”

  1. sener40 says:

    @mezvzsu well I took the hard route and spent every dollar i had to learn how to make money online! i would do it all over again because i now have an awesome mentor and making enough to quit my job. if your dedicated anyone can turn this method in an income have a look > bit.ly/Rj2GB1?=zynma

  2. SythaTV says:

    dude you never taught us how to slice so ive had to look at other videos for it

  3. norsegraphix says:

    Nice presentation, clean process and design, that means VERY GOOD AND USEFULL TUTORIAL!!! 😀

  4. DeathlyArts says:

    where has my browse button gone?

  5. deepak yadav says:

    i was looking for slicing ,, this video wasted my time!!

  6. jkd1984 says:

    You are very good my friend, thanks.

  7. RiskyBomberPT says:

    Convert a .PSD to .HTML? This is basically designing the website on the Photoshop, saving the images of the website separatedly, and write the code from 0 on dreamweaver! Seriously? I though it was some faster way, this way is the way that everybody that knows HTML and Photoshop does!

  8. pilapilao says:

    yeah…..i dont know what means UL LI …. i dont know why he put it there… :/

  9. NanzooTV says:

    Can you use this as well for a Soundclick layout ????????????????

  10. NerdzGriefing says:

    Show us how to slice the psd…

  11. StarLiteent25 says:

    can we add the links example. youtube page link later on as in if we dont have one and want to put one in later ?

  12. ItsmeSaltax says:

    Great tutorial, have you made a video covering how to slice images?

  13. musicallyhigth says:

    very good, the best tutorial I’ve seen thus far

  14. Pvsmuntje says:


  15. Ben Reynolds says:

    Looks like century gothic.

  16. Pvsmuntje says:

    What is the font on your computer wallpaper?

  17. iSk8Z says:

    How to do it? I don’t know 🙂

  18. SMDEAN10 says:

    It’s so easy

Leave a Reply

Your email address will not be published. Required fields are marked *