Depiction- Webmaster Resources
Stock Image

Contributors: Advertise Here  |  Advertise Here  |  Advertise Here

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > Photoshop > Clean Web Design Interface Page 3


If the images on this page do not appear, please click here.

10. Next add a title bar to the navigation box. Start off by creating a new layer called Nav titlebar above the Nav box layer. Next create a selection using the Polygon Lasso Tool as shown in the final image below. Fill the selection in with any color of your choice. To make it more interesting, add an Inner Shadow. Finish it off by adding some text to the titlebar.


11. Next create another box for Misc content (Poll, Links, etc..). To save time, copy the layers called Nav box, Nav titlebar, and Navigation (text layer) by going to Layer > Duplicate Layer or simply by dragging each layer to the new layer button. . Then move the layers so that the new box is underneath the navigation box. Finally change the name of the titlebar to Misc. or whatever you want to name it.

12. Finally, create the main content box for all of the page's content. Begin by creating a new layer named Content Box above all other layers. Using the Rectangular Marquee Tool, create a large selection that takes up most of the white space still showing. Fill the selection in with the color #E5E5E5. To make all of the boxes look alike, apply the same blending options to this layer as used on the smaller content boxes. (Please refer to the snapshots from step 9 for the proper settings.)

13. Next add a title bar to the content box. Using the Polygon Lasso Tool create a selection that is the same shape as the previous title bars, but only wider. Fill the selection with the color of your choice; I'm using #B0B67D. To make all of the title bars the same, add the same Inner Shadow that was applied in step 10.

14. Finally, using the Type Tool add a title to the content box title bar. You may choose to add more to the design if you would like to. A larger view of the final product may be viewed by clicking on the image below.


Go back to page 1.



Tutorial Stream Photoshop Tutorials
Tutorial Man Wallpaper Stock  More