10

I'm learning web dev and I am already stucked at some point..

How do I convert a PSD template to a html/css website ?

I've cropped all part of the image and saved them in .gif separately, but then ? Do I have to manually place them in a dreamweaver empty template ? I thought there was an automated way to do so..

Also, I've tried "Save for web and devices.." but when saving, it creates a .html file and a single image which contains every element ?! I expected several images so that I could rearrange them in dreamweaver.

user251356
  • 111
  • 1
  • 5
  • Photoshop is not an appropriate tool for creating a web design. It assumes things about print that no longer work for web. – Joel Coehoorn Jan 28 '10 at 21:10
  • 1
    Oh, and by the way: using `gif` nowadays is just a really bad idea. Use `png` instead. (Some restrictions apply – but in most cases, `png` is the way to go.) – Konrad Rudolph Jan 28 '10 at 21:11
  • According to the Stack Overflow FAQ (http://stackoverflow.com/faq) you should ask things like this in Doctype (http://doctype.com/). – Tae Jan 28 '10 at 21:12
  • 1
    @Joel: Its fine for creating the composite to serve as the basis for the graphics - and when most people who arent already in the industry think "web design" they think of the graphic design side more than the code side. Photoshop is the industry standard tool for the graphics side of it - much to my chigrin as i much prefer fireworks for making composites. In my opinion Photoshop is and always will be a "photo editor" not suited for layout whether print or web. It should always be used in conjunction with InDesign/Quark, Illustrator or Fireworks - but never as the acutal layout application. – prodigitalson Jan 28 '10 at 21:16

5 Answers5

12
  1. While certain applications advertise/provide automation of the "conversion" process from composite graphic to web layout you want to avoid using those features. They will cause you more trouble than they are worth. Especially if you are going to use CSS for layout (which I strongly encourage). Thats not to say those features dont have some limited valid usages (more on this in point 2) it just that they arent going to magically generate your site from a graphic.
  2. In order to use "Save for Web..." you need to use the Slice tool to slice down the image into the different images you need for layout. Then when you do save for web and deices with html it will export the html/css and the images. Again this isnt magic and chances are youre going to have to completely redo most of what its done for you - making it useless for anything more than slicing a certain area of the layout (say a single menu).

There isnt a fully automated way to do this, generally speaking because depending on what you need the layout to do you have to go about laying things out in different ways and while its theoretcially possible to account for all the possible potential requirements in a nice little export GUI its not really feasible.

The bottom line is to do this you have to learn HTML/CSS. And the more you learn the more you will hate Dreamweaver (at least in "layout view"). Garaunteed.

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
prodigitalson
  • 60,050
  • 10
  • 100
  • 114
9

Yea, web design doesn't work by magic. The proper way to do is to manually write the actual code that positions the elements, not just smack them in place in Dreamweaver. There's plenty of good tutorials out there, check these out for example:

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • Thank you, i'm gonna watch these links. – user251356 Jan 28 '10 at 21:11
  • +1: Thank you; I was going to post a question about "How can I convert a PSD, sliced-up or otherwise, to an idiomatic webpage that is not table-smell-centric and doesn't use e.g. "display: table-cell" to simulate tables with DIV's. I might still ask a question, but I think the second link provides a top link that answers my question. – Christos Hayward Sep 25 '12 at 20:39
8

Welcome to reality.

You'll have to slice and dice yourself (well, slice and dice the image yourself, but don't slice yourself no matter how much you want to), and then place each individual part in your HTML or template.

SuperMagic
  • 1,398
  • 8
  • 9
6

This may help you, it walks you through the process.

stefanobaghino
  • 11,253
  • 4
  • 35
  • 63
James Campbell
  • 5,057
  • 2
  • 35
  • 54
6

There are a number of automated services that convert PSDs for you:

However, you might also want to consider a service-based approach as well. There is a thriving community of professional slicers out there (just google "psd to html" and you'll see what I mean).

You might also try to redesign from a program or framework such as:

It really depends on your budget, your timelines and your skillset.

I'm a big proponent of understanding something really well before trying to automate it. So, like the other posters have said, slicing by scratch (handcoding) is very valuable, especially if you don't already understand it well. However, you might just not care to invest the time needed to achieve a good understanding of the subject. And, that's perfectly okay too.

I think that ad the end of the day, there is no "correct" solution. Different people have different requirements which will change the choice.

Homer6
  • 15,034
  • 11
  • 61
  • 81