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:
Open up photoshop and make a document of any size. On this occasion I made mine with these settings:
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:
The document should look like this right now:
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:
This is how my document looks right now:
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:
Right now your document should look somewhat like this:
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:
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.