How to Convert a Slick PSD Design to XHTML/CSS

What we want from the PSD.

There is really only 4 very essential things we need from the PSD. We are going to want to grab the featured section background, the footer background, the welcome text heading, and the slider frame (transparent white inset border). The rest of the site we can either create in CSS or is just placeholder images that you can easily replace/produce yourself, but feel free to take these too.

The image below shows a red border around the images we want. You need to deselect all other groups but the group name bg inside of the section name. So for example if I wanted the footer background I would deselect all groups but footer/bg.

Photography PSD Slices

The outlined frame you would obviously remove the palce holder photo.

Slicing it

So for the header background we are going to open up the second PSD in the package you downloaded in the beginning named psd-to-slice.psd (Scroll to bottom of page to download). The only reason we want to slice this version instead of the other version is because of the increased width of each background making it fluid on larger scale monitors.

You will want to slice all of the outlined areas or just use the pre sliced images available in the folder slices in the downloaded package (Scroll to bottom of page, located in Photography Site/style/layout).

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Live demo View it online Download Take the source files

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

    Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

    Very good tutorial, It covered a lot of things, thanks

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

    i’m going to have to take time on this one.thanks for sharing

    Reply to this comment