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?


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).


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.