Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How to Convert PSD into CSS?

I looked around, but didn't find threads.

11:51 pm on Jun 5, 2009 (gmt 0)

New User

5+ Year Member

joined:Apr 9, 2009
posts: 11
votes: 0

I've created a PSD file for a drupal template, and now I need some help converting it into CSS. Are there any good threads or tutorials that can help me?

Thanks, and I'm sorry if I've missed a good thread already on here. Thanks for your help! :)

3:53 am on June 6, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 9, 2008
votes: 0

No easy way to do this.
You can use the build in functionality to create a css/xhtml export from your PSD (try Googling PSD into CSS).

Or use a paid service to convert your PSD.

Sorry, no better help.

8:51 am on June 6, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0


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]

10:05 am on June 6, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

I do have some experience both of chopping PSDs and of Drupal and I can tell you that there is definitely no easy way in this case unless you know CSS and/or Drupal very well, and you're sure your Drupal tpl files are properly coded to your liking i.e. the site functions how you need it to.

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

Slice and Dice PSD tutorials [google.co.uk]
PSD to CSS tutorials [google.co.uk]

12:21 am on June 8, 2009 (gmt 0)

New User

5+ Year Member

joined:Apr 9, 2009
votes: 0

Thank you so much, especially Suzy. Yes, I'm floundering a bit, but I'll get there eventually. Thanks for the help!

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members