Sweet User Interface in Photoshop
Feb 25, 2009 Photoshop, Web Graphics, Web Layouts
This tutorial has been viewed: 223 times
We are going to be creating a User Interface like below:
To begin create a new image 500×100 pixels for the Dimensions, fill the background with #3F3F3F
Click on the brush tool, 
and make the settings like so:
Create a new layer and pull out the pen tool 
and make a path like below
Right click in the graphics area and choose ’stroke path’ choose Brush with Simulate Pressure unchecked It should look like below
Where your layers are click on the ‘paths’ tab, click on the Path1 and drag it to the new path icon 
to convert it to an editable path, right click on the path and choose ‘duplicate path’ duplicate it twice like below:
Now deselect all the paths by clicking in the grey area below them, and click the layers tab, select the layer with the black line and it and press ctrl+j to duplicate it, press ctrl+i to change it’s color to white and then use the move tool 
and the arrow keys to move the line down about 2-3 pixels, change that layers blending mode to Overlay.
Now go back to the paths tab, pull out the pen tool and select one of your duplicated paths. Make sure your pen tool is configured like so:
Use the pen tool to make a shape like below:
Right click in the graphic and choose ‘make selection’ deselect the path and go to the layers tab, pull out the gradient tool 
and set the colors to black to transparent
Now create a gradient like so.
Do the exact same thing for the top except pull the gradient too the top.
Now use the text tool 
to type out the text ’sweet’, I used the font Tahoma and the color is #CF7600
Create a new layer above the ’sweet’ layer and press ctrl+g (alt+ctrl+g in CS4) to mask that layer over the text layer below it, ctrl+click on the sweet text to select it, pull out the marquee tool and press alt on the keyboard and select the bottom half of the selection to deselect it.
Fill the remaining selection with white, and set that layer opacity to about 20-30%
Follow the same process for the UI text. You can then add in some links like Home | Portfolio etc.. I used Tahoma 10 pt.
