Just thought I'd make a post on what can be done to jazz up the average message bar or UI element.  In this example I'll be doing it by way of a Photoshop tutorial I hope everyone can follow.  As always, leave me a note in the commenst section below if this leaves any questions unansered.  It's a bit lengthy but I hope that is because I'm including enough detail.

Step 1: Start with a new image that will be the size of the UI piece you need.  In this case 500 pixels wide by 25 pixels high:

Step 2: Select the gradient tool (Keyboard Shortcut: G) and customize as follows (things to click on are highlighted in Red on the sample screen below):

• Choose the Reflected Gradient mode from the toolbar
• Drop down the Gradient picker and choose the Foreground to Background gradient

Sample screen:

Step 3:  Make a background

Select a background and foreground colour in the toolbox that match the look you are going for.  Today I am going for light gray and dark gray because as everyone known things that are made out of "technology" are gray! 

Notice the lighter colour is above the darker colour - you can swap the foreground and background colour with the X key on the keyboard

Now click and drag your mouse from top of your image to the bottom.  You will want to hold the Shift key down - this makes sure your gradient is painted straight with regard to the edge of the image.  You may want to have a couple of tries at it to find something you like - remembering that you can start your drag from the canvas outside your image.

Mine now looks like this:

Step 4:  Adding a highlight

An image in Photoshop is made up of layers.  A discussion on layers is worth a whole book, but just do as I say you will be OK   I'm saying this now because it is from here on dowm that layers come into play for our example.

Duplicate the layer that we made our gradient on by pressing Ctrl-J on the keyboard.  Watch the Layers window inside Photoshop when you do this and you will see a new layer being created.  Change the blend mode of this layer to be Differnece.  Don't worry if your gradient turns black - we'll sort that out in a second.

The Layers window will look like this:

Now:

1. Invert the new layer by pressing Ctrl-I.  This should again change the look of your image but don't worry - few more steps to go yet.
2. Press D on your keyboard to reset your toolbox colours to Black and White.
3. Click the Add Layer Mask button on the Layers window to add a Layer Mask to our new top layer
4. Press Ctrl-Backspace on your keyboard to fill the layer mask with the background colour - Black.  This has the effect of making our new later not show at all.

So what is the point of making a new layer and then hiding it?  Well, we don't want to hide all of it - now we will make a small piece show through the Layer Mask that is hiding the Inverted copy of our gradient.  I am choosing to show a circle but you can play with different shapes.  To do this:

1. Select the Elliptical Marquee tool from the tool box.  This one is hiding behind the rectangular marquee tool.  Press Shift-M to switch between the available types of marquee until you find the one with the circle icon in the toolbox.
2. Hold down the shift key to force the Elliptical Marquee to make only circles, not an oval or ellipse, then click and drag over the left side of yoru top layer to make a circle.
3. Press the X key again to swap the Foreground and Background colours agian - now White should be the background colour.
4. Press Ctrl-Backspace again on your keyboard to fill our little circle with White.  You should now be seeing the inverted gradient only in the circle.  That is what the layer mask is doing for us - Where pixels are White on the layer mask, the layer it is hiding will shine through.  While pixels are Black on the Layer Mask the associated layer will not be seen.
5. Right-click our top layer on the Layers window and choose Blending Options.  Choose Bevel and Emboss and then tweak the sliders to taste.  Here's what values are working for me today:

By now our graphic will look something like this:

Step 5:  Adding Modes

Here I'd like to use the same graphic for Error, Information and OK messages.  I'll use System.Drawing to actually paint the message text onto the image on a form, but for now I just want three states for the message that I can choose from.

Press the T key on the keyboard to choose the Text tool on the toolbox.  I'm now going to set the foreground colour to a nice blue, click above our new circle and press type a question mark: ?

You will need to change the font face and font size on the toolbar to suit.  Once you have what you like click the Tick button on the toolbar to save this question mark as a new text layer.  NB:  Using the text tool you can always come back to this layer and change it.  I have also added a Drop Shadow to my text layer using the Blending Options menu item again, but this is just down to personal taste.  Try it and see what you think.

Now my screen looks like this:

Notice that all the layers have an Eye icon in the first column.  This is so you can show or hide whole layers at a time.  This will become important shortly!

Now hide the Question Mark text layer and add two more:  one for the famous Red X and another for a Green Tick.  Hint:  There is a tick symbol in the Marlett font under the lower case b key.

Step 6:  Create final images

Remember what we said about showing and hiding individual layers?  Here's where it becomes useful.  We are going to save this image three times.  Each time we save it we will make a different combination of laters visible before saving. 

So first make sure your two gradient background images are showing plus only one of the text layers.  Start with showing the Question Mark text layer and not the Red X layer or the Green Tick later, then choose Save For Web from the File menu.  Choose a file name like InformationBar_Question.jpg.

Your choices for GIF vs. JPEG vs PNG, compression etc are all for the purposes of this exercise personal taste.  Depending on if the image will end up on a web form or a windows form your choices here could matter a lot!

Now repeat the process showing only one other text layer at a time and naming accordingly.

Here are my three final images:

InformationBar_Error.gif:
InformationBar_OK.gif:
InformationBar_Question.gif:

Advanced Class:  A few extra things to try

• Make a new Gradient out of as many colours as you want.  Ninja skills in making a gradient is the art of being able to make something look like is concave or convex on the page.  Most important in this is making sure all UI elements on a page cast the same shadown (direction, colour and spread) and apear to be lit from the same direction.
• To keep things on-brand, grab existing on-brand grapics and CSS sheets and stealresearch colour information on them. 
• Use the sRGB colour space when targeting the web.
• Save your master image as a PSD file to preserve the layers and make it easy to maintain if things change in the future. 

Listening to:  Perry Farrell - Song yet to be sung