How to Create A Simple and Elegant Search Box in Photoshop

25th May 2010 | Posted by Eko S. | 6 Comments

In this tutorial, we’re going to learn how to create a search box in photoshop, with simple and elegant design. This design will become a mockup for the search box in WordPress. We will learn how to use this mockup on wordpress search form in the next article (How To Code The Mockup Search Box Design from PSD to WordPress Theme).

[You can subscribe our RSS Feed or follow us : @dynamicwp to get exclusive updates.]

There are six easy steps to complete this tutorial, and shouldn’t take you any longer than 15 minutes to complete. Let’s get started!

You can download the source file, including the .PSD and .PNG files, here :

And this is the final image you will learn to create

Tutorial Details

Step 1
Well start by creating a new file with the name ‘search’ (or what ever name you like) with W (width): 206px and H (height):26px. Then enter.

Step 2
We will remove lock on background layer with double click on that layer and click ok, then hide the layer.

Step 3
Next we will create a square object using ’rounded rectangle tool’ with radius: 10px and color: #fff

An the result like here

Step 4
Reduce the Fill until 10%, then change the style with using mouse-right click on the layer and choose blending options, according to the following image

Please save it! (search.psd)

Step 5
For the magnifying glass image, I use magnify-glass.png which I include the download files, open the file magnify-glass.png in photoshop, then select(ctrl+a) and copy(ctrl+c) the image.

Step 6
We’re pretty much done!
Open again our file “search.psd” then paste(ctrl+v) the magnifying.png image. Finally reduce the size of the layer according to the following image.

Creating More Color Schemes

Here are some color schemes included in download files!

Hope you liked this tutorial! Please let us know what you think, and make sure to either leave a comment below. We’d love to see it in action!

5 Comments to “How to Create A Simple and Elegant Search Box in Photoshop”

Add Comments (+)

1. pharmacy tech says:

   June 9, 2010 at 00:12

   Great site. A lot of useful information here. I’m sending it to some friends!

   Reply
2. nursing schools says:

   June 19, 2010 at 05:08

   My cousin recommended this blog and she was totally right keep up the fantastic work!

   Reply
3. ultrasound technician says:

   June 25, 2010 at 08:02

   nice post. thanks.

   Reply
4. Tandblekning says:

   August 27, 2010 at 02:01

   This is my first time visiting your blog. I do envy you since you seem to get a lot more comments then I do. Do you have any secret tips on how I can get more comments or do I just have to be paitent? Anyway, keep up the good work.

   Reply
5. actron cp9190 says:

   November 3, 2010 at 23:19

   very good resource..

   Reply

Trackbacks/Pingbacks

1. How To Code The Mockup Search Box Design from PSD to WordPress Theme | DynamicWP