Website Content box or panel with menu option

September 18th, 2007 · No Comments

How about a new design lesson for your website. This Tutorial will try to explain how you could use photoshop techniques to make a content box or a left panel for your website.

Lets read & understand of the following steps

[1]-First of all open new document of custom size, Height & Width 500×500 pixels, Resolution 72 and Mode RGB Color

[2]-Now fill the Background with any color & creat the following selection with the help of Rectangular Marquee TOol

[3]-Now fill the selection with #431EE3 color and click on ‘f’ which is indicating by Hand sign as shown below

[4]-Now select Bevel & Emboss and apply the following settings

[5]-Now your image will be look as shown below

[6]-Now create the following selection with the help of Rectangular Marquee TOol

[7]-Now fill the selection with # A6F4A2 color & click on ‘f’ for Blending Options & select Pattern Overlay and apply the following settings

[8]-Now your image will be look as shown below

[9]-Now create the following selection with the help of Rectangular Marquee Tool

[10]-Now fill the selection with# F6FDF6 color

[11]-Now go to select>Modify>COntract and apply the following settings

[12]-Now press’Delete’ and your image will be look as shown below

[13]-Now click on ‘f’ which is indicating by Hand sign as shown below

[14]-Now select Stroke and apply the following settings

[15]-Now your image will be look as shown below

[16]-Now create the following selection with the help of Rectangular Marquee Tool

[17]-Now fill the selection with #FDFAF8 color & click on ‘f’ which is indicating by hand sign

[18]-Now select Gradient Overlay and apply the following settings

=
[19]-Now reduced the opacity of this layer as shown below

[20]-Now your image will be look as shown below

[21]-Now create the following selection with the help of Polygonal Lasso Tool and you can create this selection by the Pen Tool as you do better handle

[22]-Now fill the selection with any color & reduce the opacity of this layer as shown below

[23]-Now your image will be look as shown below

[24]-Now select Text Tool and create the any Text as you wish.Finally, all settings have been completed and your FInal image will be look as shown below