Web Design Elements – Create a Search Field With a Button in Photoshop

This tutorial will show you how to create a search field with a search button in Photoshop.

01. First lets create a background by picking the Gradient Tool, set the color and then drag in the direction you’d wish the color to set.

02. Take the Rounded Rectangle Tool and drag your first shape which will be the base of your search.

03. Double click on your new shape layer in the layers window (window – layers), a popup opens. There, first choose Stroke. Set it to small size 1 and pick a color that would be a bit darker than your background is. Hit OK.

04. Now create a text area by creating a shape inside your first shape with the Rectangle Tool.

05. Double click on the gray rectangle shape layer and go to Inner Shadow. There set the angle to 90, distance to 1 and size to 3.

06. Next go to Drop shadow and add a small white shadow on the lower part that may seem to be not very noticable but overall giver a good and clean feeling to the shape. For that, set the color to white, blend mode to Normal, ditance to 1 and size to 2. Hit OK.

07. Now it is the button’s time! Select the Rectangle Tool and create a nice rectangle on the other side of your shape.

08. Double click the rectange layer, go to Gradient Overlay and set the Gradient the same color with your background.

09. Then go to Stroke and add a 1 px stroke around the button. Don’t forget to put the Fill Type to Gradient and colors slightly darker shades of your button colors.

10. Then go to Inner Shadow and add a small white shadow on the upper part of the button. For that first set the color to white, then change the blend mode to Normal and then set the angle, disance, choke and size.

11. For the last toutch add some shadow in the Drop Shadow – distance to 2, spread 0 and size 2. Press OK.

12. Optionally, pick the Custom Shape tool and drag a search icon at the start of the text area.

13. Now take the Type tool and type in the Search text so it would be very clear where the text goes to and which is the clickable area.

14. Continue with the type tool by adding on the button some arrows that can be inserted by using certain keys on your keyboard >>. If ready, double click on your text layer and go to Drop Shadow. Add a small shadow under the arrows by setting the blend mode to Overlay, Angle to 90, Distance to 1 and Size to 2. Hit OK when done.

And now you know how a clean and nice searchbar is made!

Leave a Reply