First of all start with a new document about 150w x 50h,

» select a color and then using the rounded rectangle function create a rectangular box leaving about 5 pixels per side,

» Add text then ratersize the text layer and the rectangle layer ,

» merge the two layers together(Ctrl + E),

» duplicate the merged layer,

» On the duplicated layer click image > adjustments > hue and saturation then tick colorise,

» Move the hue and saturation bars until satisfied with color ,

» Delete all other layers such as background leaving just the rectangle and the duplicated layer,

» Move to imageready (Shift + Ctrl + M).

************************ONCE IN IMAGEREADY*************************

» make the top layer (duplicated) invisible.

» Using the slice tool slice carefully around the rectangle (make sure the the bottom layer is selected)

»Once the slice has been made , in the web content window (Window > Web content) click the little icon next to the trash can (create rollover state)

» select the over state then make the top layer visible

Do this as many times as you want for different slices then click save optimised as

How useful was this tut please reply

Which one is better for web design...i´ve used fireworks...but a friend uses photoshop...both works are cool, what do you think? ...more

The past few years of my designing experience have been accomplished mainly by using a copy of my friend's father's Adobe Photoshop CS 8.0 CD. But my computer had been bugging me lately and i had no choice but to reformat it, at the same time wiping away any trace of the program. Unfortunate ...more

Info: Did you ever wonder, while working in Photoshop: what does this tool do? Then this brief tutorial is for you. You will learn what are the most used tools in Photoshop, their names, what to do with chosen tool, and for what purpose. [img]http://img225.ima ...more