What is the best method to convert PSD files to HTML for web development?

Arabicfreelancer86 June 30, 2014
Ads by Google

Hello Friends !
I want to learn how to design a website. I already know Photoshop and now I am learning how to convert psd into html.  Some websites and Photoshop plug-ins, offer this kind of service, but I did read that the best way to convert psd into html is to do it manually.  I am asking, what does it mean “to do it manually?”  Is there a software to use to do it manually? And if so, is Dreamweaver able to do this job because I am planning to learn it.  One friend told me to learn Notepad++ and told me it is better.  I hope my words are clear :) Thanks in advance.

  1. Howard B
    July 1, 2014 at 9:20 pm

    "Does 'Doing it manually' mean that I must deal with each layer as an indepenedent element and put the code for each one ? Thanks Friend ."
    I wouldn't extract images for each layer; that will just make your site more complex and increase the loading time for elements that are on top of other elements.
    It would be better to "flatten" those elements that would always be layered, then clip the sections that you need to be in separate divs (divisions) as images.

    Why not grab a "website theme" from one of the hundreds of sites online, and see how *they* separate the elements of a PSD theme into images and HTML? You can keep or modify the CSS, replace the images with ones from your own PSD file, and make the theme your own.

  2. Chinmay S
    June 30, 2014 at 3:23 pm

    Please see this multi part series at Code TutsPlus. This series will cover everything from creating a warm cheerful design in photoshop and then converting the whole thing to working html.

    • Arabicfreelancer86
      July 1, 2014 at 12:05 pm

      Thank you friend .

  3. Oron J
    June 30, 2014 at 2:22 pm

    On the web, you can display bitmap images in JPG, PNG or GIF formats, and you can choose to save your images in one of those formats in Photoshop (File=>Save for web...).

    Additionally, large images often need to be "sliced" into smaller ones for performance or layout reasons, and this can be done either automatically by using suitable software, or by chopping up the image in Photoshop and saving each of the parts separately. I suspect that is that is meant by "doing it manually".

    • Bruce E
      July 1, 2014 at 1:53 am

      I think what OP is referring to here is doing the layout/design in Photoshop and then taking that design and crafting the actual HTML to produce it on the web, not just image manipulation.

    • Arabicfreelancer86
      July 1, 2014 at 12:06 pm

      Yes , Bruce , I mean that ... thank you! .

  4. Bruce E
    June 30, 2014 at 5:25 am

    Software to do a task is a means of automating that task. To so something manually, you won't be using software. Almost all tools I have used or seen in use for web development put in a ton of extra crap that is unnecessary, especially Dreamweaver. If you want clean, concise code, you need to be doing it all manually with a simple text editor (possibly with highlighting capabilities such as Notepad++). You could also use automated tools to do the initial conversion then use a text editor to clean out the crap, but it is generally more efficient to do it by hand in the first place.

    • Arabicfreelancer86
      July 1, 2014 at 12:04 pm

      Thanks Bruce !
      I installed Notepad++ on my laptop and I am learning the basics now :)
      I found a good lessons for beginners on w3school website ..

      I have a question ..
      Does "Doing it manually " mean that I must deal with each layer as an indepenedent element and put the code for each one ? Thanks Friend .

    • Bruce E
      July 2, 2014 at 3:56 am

      Once you have your desired layout in Photoshop, save another flattened version of the file. That is what you want to work with instead of individual layers.

Ads by Google