Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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