View Single Post
01-03-2008, 08:52 AM
#3
George the Flea is offline George the Flea
Status: Junior Member
Join date: Dec 2007
Location: Seattle, WA
Expertise:
Software:
 
Posts: 52
iTrader: 0 / 0%
 

George the Flea is on a distinguished road

  Old

Honestly, the key to doing this is knowing what CSS can do and what it can't. When I'm designing a mockup in Photoshop, I think about what's going to be CSS and what's going to be image as I'm going.

Once the client approves the mockup, I use the slice tool to designate the image resources, and export them with "save to web". I then set up an HTML file with the layout skeleton and some example content, and use CSSEdit to style it into congruence with the PSD in live time.

This works for me because I have a good idea of exactly what CSS can and can't do, which is something that came with experience. I've never found a really good tutorial on the subject.

Basically, you want as little of the PSD to be image as possible. Look for the following things that you'll need to slice and export:

- Rounded borders/corners
- Images
- Gradients
- Non-web text

These things are easily styled with CSS:

- Straight borders
- Solid background colors
- Most text

Remember that CSS sucks at filling vertical space. If your design has a sidebar that runs all the way down the page, you're going to have to get tricky. Similarly, positioning text in the vertical middle of a navbar is going to be a potential headache (particularly if you're sizing accessibly so that it can be easily resized).

Hope that helps! Good luck finding a good tutorial!