Attractive Interface

1. Create new document in Photoshop (mine is 300x250),

2. The first thing we should do before designing the actual interface, is organize our thoughts. We need to decide what our interface is going to do, and then place these ideas into an organized format. Here is how I organized mine:

3. You do not need to draw these out like I do, I just find that visualizing always makes things easier. I drew this out on paper before I brought it to the computer. Lets give our interface some actual design. To do this, I am going to make a selection like this:

To make this selection, I used the rounded rectangle tool and made a rectangle cover about 80% of the width of my box. Then I selected the box (Ctrl + left click layer), and inversed the section (select > inverse). After that, I removed all parts of the selection that were unnecessary with my rectangle marquee selection tool set to subtract.

4. Now, use the gradient tool to fill this selection in a new layer. Make the gradient a shade of one color, to a darker shade of the same color.

5. Using your selection tools, fill in the empty part of the bar at the bottom. Fill this with a grey to darker grey gradient:

6. Add a drop shadow with the following settings:

And an inner shadow with the following settings:

And a bevel with these settings:

7. Select this layer (ctrl + left click layer), and create a new layer under it. Merge down the layer selected onto the blank layer. Now inverse the selection, and use your eraser tool to get rid of the drop shadow to the left of the box, and underneath it:

8. Use the pen tool to make the following anchor points on the bottom bar:

Now finish up your shape, select it, and make it transparent:

9. Now, fill this selection in a new layer with a white to transparent gradient:

And get rid of all the stuff above the bar:

And play with opacity settings and your eraser tool until you get a familiar result to this:

10. Now, lets make the lighting appear more realistic by making it bend. Select the layer with the smaller part of your bar:

And copy the light reflection layer with this selection. Now, cut out the light that was there:

And now paste the reflection you just selected. Move it like so:

(NOTE: I REMOVED SOME OF THE REFLECTION, YOU PROBABLY WILL NEED TO AS WELL)

11. Now, lets use the dodge tool to lighten some of the areas in both the grey and purple bars:

12. Well, your basically done with the bottom bar. Use the same techniques to make a Header:

Now, lets make a menu in the main window to select things from:

I made this line by using a white brush, and then erasing the tips with a soft eraser brush. Then I set the layer to overlay.

And that basically sums it all up! Keep working until you get some results you like:

This is obviously the very minimum you could do with your interface. The possibilities are endless!