Free Photoshop cs3 suite tutorials

Beginners Photoshop cs3 tutorials

Design a search field for free website template layout

December 11th, 2007 · No Comments

If you need a free search box designed for a free website layout template project, take a look at this photoshop tutorial

[1]-First of all open new document of custom size y

ou may choose any size, I am gonna take Height & width 500×500 pixels and Resolution 72 and Mode RGB Color

pun180-website-search-bar1.gif

[2]-Now fill the Background with any color by the Alt+Backspace & after that create the following selection with the help of Rectangular Marquee Tool

pun180-website-search-bar2.gif

[3]-Now fill the selection with any color & then click on ‘f’which is indicating by Hand sign as shown below

pun180-website-search-bar3.gif

[4]-Now select Bevel & Emboss ad use the following settings

pun180-website-search-bar4.gif

[5]-Now select Gradient Overlay and use the following settings

pun180-website-search-bar5.gif
pun180-website-search-bar6.gif

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

pun180-website-search-bar7.gif

[7]-Now create the following selection with the help of Rectangular Marquee Tool & then press “Delete”

pun180-website-search-bar8.gif

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

pun180-website-search-bar9.gif

[9]-Now fill the selection with # FFFFFA Color and click on ‘f’ which is indicating by Hand sign as shown below

pun180-website-search-bar10.gif

[10]-Now select Inner Shadow and use the following settings

pun180-website-search-bar11.gif

[11]-Now reduce the opacity of this layer as shown below

pun180-website-search-bar12.gif

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

pun180-website-search-bar13.gif

[13]-Now create Text with the Help of Text Tool.Finally, all settings have been completed & your final image will be look as shown below

pun180-website-search-bar14.gif

I hope you like this photoshop handson training at my webite, Please
bookmark.

Design a search field for free website template layout

photoshop button tutorial

design photoshop tutorial web

Tags: website graphics photoshop tutorial

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.