Welcome to WebmasterWorld Guest from 126.96.36.199
Forum Moderators: not2easy
Looking at your other questions out here on WebmasterWorld, I'll assume you have little experience with your CMS, right ?
Now the good part is that I have no experience at all, so I can ignore that part completely and refer you to our content management [webmasterworld.com] forum instead.
Still converting an image in photoshop to a website is a lot of work, and often far from easy.
The first thing is that usually the image doesn't give a clue what should happen when content gets larger, nor when the viewport (window) get smaller than the content is, nor what happens when the user insists on a bigger font than your image wanted. Etc.
You're basically lacking a lot of detail for making it fit for web use.
Get those details and discuss them with however made the picture and whoever approved it.
Next in many cases it's overly graphic, drop shadows rounded corners, etc. and -most of the time- also often too restrictive by thinking only in terms of rectangular boxes (at least if it comes from somebody used to deal with table based layout)
Basically you try to make it doable with web technology (e.g. a drop shadow under a translucent overlay: all nice but it'll cost you a lot of time to fake such a thing.)
Once you have that, search for difficult parts (e.g. drop down menus) etc and get the mechanics behind it right (plenty of examples around), and finally style them to look right.
As you build more of these components your page will slowly grow into existence.
Now comes the part where you modify your pages (html and CSS) into a template for your CMS ...
[edited by: swa66 at 3:34 pm (utc) on June 6, 2009]
PSD's can be sliced and exported as HTML, but it will be in table format, this can make a CSS version a nightmare as you then have to re-write your TPL code so Drupal/Custom Module divs are inside those table cells (not the point of CSS at all)
or you need to take a basic Drupal template (Zen is a clean starter Theme and Acquia Marina (core theme) has a lot of support on the Drupal forums and is already 2,3 column compatible) and simply fit parts of your image as a background to existing divs
Then you need to visualise where the core parts of your PSD will need to be attached to create your overall image. On the plus side Drupal has many CSS Hooks so once you have decided how best to Cut out the relevant bits of your PSD you should be able to attach them to the relevant elements as they will already have CSS Hooks.
Note I said "Cut Out" this is not the same as slicing, slicing a PSD literally chops it up like a jigsaw where it would have to be a pixel perfect design in order to put it back together again, allowing no room for expansion of content etc. (this would be best done via a table, but tables can and do expand so it's not really a solution for a CMS site)
For a CSS version, you really need to just visualise the parts of the entire picture that you will need to cut out/crop in order to attach to an element, so if e.g. the headers have a rounded corner background, that rounded corner background could be chopped into 1, 2 or more bits depending on whether you want it be expandable (horizontally and/or vertically) easiest is to just cut out the whole heading 1 crop but that means it won't expand.
There a two schools of thought in this field
Slice = table style/pixel perfect jigsaw
Dice = cut out the bits you need and build it up
if you run some Searches you will be able to find some great tutorials on both methods, even if you don't fully understand how they're going to work with your Drupal code they make good viewing for getting the theory behind the idea