: What process should I use for converting this Toolbar PSD comp into something I can use on a Web page? I am a programmer and have recently started playing with Photoshop in my spare time.

@Si6392903

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

Vote Up Vote Down

@Nimeshi706

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

Vote Up Vote Down