Design Web 2.0 Interface in Photoshop
Understanding the tutorial below is understanding it’s technique, with it you can draw yourself some graphical user interface for a website. Side navigation, buttons, headers, for instance. All Web 2.0 style.
Launch a new canvas; any size. Something bigger than 450x300px would be good. Select the Rounded Rectangular Tool and draw a rectangular as big as shown in the image above.
Double click on the layer of the Rounded Rectangular to launch the Blending Options. Alter the settings for the following styles.
Drop Shadow
Opacity:31% Distance:1px Spread:0% Size:5px
Bevel and Emboss
Depth:100% Size:0px Soften:0px
Gradiant Overlay
Double click Gradiant and set the following stop points. Location:0%, #1378cd Location:100% #4da5f0
Stroke
Size:5px Position:Inside Color:#54abf6
Let’s insert some text, a tagline, URL or something. Have it middle and align right so logo can reside on the left side later. Let’s style the text. I’m using Lucida Sans Unicode; 55pt; smooth; -120 for character tracking (letter spacing). Double click on text layer and set the following in Blending Options.
Gradient Overlay
Double click Gradiant and set the following stop points. Location:0%, #9ec7eb Location:100% ecf6ff
You will then need to insert the logo on the left side of the text. I’ll use a rounded rectangular with radius 5px to represent the logo. Here’s the Blending Option settings for the rounded rectangular.
Inner Shadow
Opacity:45% Distance:0px Size:43px;
Bevel and Emboss
Depth:100% Size:0px Soften:0px Highlight Mode Opacity:50% ShadowMode Opacity:100%
Gradiant Overlay
Double click Gradiant and set the following stop points. Location:0% #0e2f4a Location:47% #001a31 Location:48% #002545 Location:100% #0f4b7f
Stroke
Size:5px Double click Gradiant and set the following stop points. Location:0% #1468af Location:100% #50abf8
Let’s give it a little glossy effect. Hold CTRL and left click on rounded rectangular Layer Thumbnail. When the entire rounded rectangular is selected, changed to Rectangular Marquee tool, hold ALT and draws-out the second half of the selected area; just like the image above.
Create a new layer; Drag it up so it sits on top of all layers; fill the selected part with white [#ffffff]; change the opacity to 15%.
The tutorial will end here. How you going to make use of this design is entirely up to you. By slightly changing it’s size and colors, it can be used as a web header or buttons. Here’s some example.
Website Header
Website Buttons
