What process should I use for converting this Toolbar PSD comp into something I can use on a Web page?

Question

I am a programmer and have recently started playing with Photoshop in my spare time.

Ideally, I prefer to create components using HTML/CSS only, but there are times when it is not possible.

In this Toolbar PSD Comp, many of the effects are convertible to CSS3, but there are a couple of Bevel/Emboss effects as well as an Outer Glow that cannot be converted to CSS3.

In such cases, usually the PSD is sliced into smaller pieces that can be combined back together in HTML/CSS to create the component.

How would you slice this comp?

Answer 1

This could be done with CSS3 rounded corners, gradients, and shadows which you would have to read up on. The icon images could be a second background on top of the gradient, but this may be a bit complex and time-consuming to do.

I agree to use a png sprite, as it is crossbrowser and you're likely already familiar with photoshop and not so familiar with coding since you're asking this question.

search "CSS sprite positioning" for more info

Answer 2

If I had to slice up images.... 3 slices, 2 end caps and a middle for backgrounds, then png overlays for the icons/symbols.

But ideally I'd just use one image as a sprite and position it for end caps and middle backgrounds, then if needed png images for the icons. If you know the entire size of the image you just need the solid image with states. Check out the coding for the navbar at apple.com... it's one image with CSS positioning (unless they've changed it since last I looked).