Search Box

This tutorial will walk you through the steps of designing a simple search box for your website on Adobe Photoshop. This is what it will look at the end:

Final Look

Step 1

Open up photoshop and make a document of any size. On this occasion I made mine with these settings:

docsettings.jpg

Step 2

Select the following color as your foreground color: #252525. You can either use the Paint Bucket Tool (G) or you can press Alt+Backspace.

Make a new layer called “Box”. Then make a box that’s 354px by 70px with your Rectangular Marquee Tool (M). When you select the Rectangular Marquee Tool, you can select “Style”, then switch to “Fixed Size” and change the width and height. Fill the background of the box with the color: #4f4f4f.

On that layer, put the following Blending Options:

Box Settings

The document should look like this right now:

Step 2 Look


Step 3

Now get your Rounded Rectangle Tool (U), make the “Radius” to 10px. Inside the box, make a bar that will be the text input box for the search box, basically where people will write what they want to search. Make the background of it to this color: #eeeeee.

I put the following Blending Options onto my search bar:


Bar settings

This is how my document looks right now:


Step 3 Look


Step 4

Now select the Rounded Rectangle Tool (U) again. Make the button which people will click on to initialize the search. I tried making mine kind of slick looking.

These are the Blending options I used for my search button:

Button Settings

Right now your document should look somewhat like this:

Step 4 Look


Last Step

Now the last step is to add some text. I added some text in the bar saying: “Search…”. On the button I added text saying: “Go”. You can have different stuff in there. Here is how my final search box looks:

Final Look

Your search box is ready to be coded now! On the next tutorial we will show you how to code this search box into XHTML using CSS.

Leave a comment