homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to Convert PSD into CSS?
I looked around, but didn't find threads.

5+ Year Member

Msg#: 3927585 posted 11:51 pm on Jun 5, 2009 (gmt 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! :)



5+ Year Member

Msg#: 3927585 posted 3:53 am on Jun 6, 2009 (gmt 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.


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

Msg#: 3927585 posted 8:51 am on Jun 6, 2009 (gmt 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]


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

Msg#: 3927585 posted 10:05 am on Jun 6, 2009 (gmt 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]


5+ Year Member

Msg#: 3927585 posted 12:21 am on Jun 8, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved