Home Directory Services Articles Get Listed Login

How to Design a Clean and Simple Search Form in Photoshop

Are you an E-Commerce Web Designer? Add a Free Listing

In this tutorial, I`m going to show you how to design a clean and simple, yet very eye-catching search form. Along the way, we`ll be using different Photoshop tools and drawing techniques applied in a non-destructive way, in order to keep the final design editable as much as I can.

What we`ll be doing today:

First step, open Photoshop and create a new document of 600×400px. Set Background Contents to Transparent and hit OK. A new layer should be created. Grab the Paint Bucket Tool(G) and paint the canvas with white.

Make the first layer editable by going to Filter->Convert for Smart Filters. This way, you`ll be able to add and modify different layer styles and also, filters. Now double-click the layer and add Color Overlay of #f6f6f6. Then go to Filter->Noise->Add Noise and add an uniform monochromatic noise of 3%.

We`ve just finished the background and the nice part is that we can always come back and modify the color or the amount of noise.

In the next steps, we`re gonna build the search bar, element by element.

Select the Rounded Rectangle Tool(U) and make sure to be in Shape Layers mode in order to create a shape and not a selection. Set the radius of 5px, style to Default Style(None), color to White and draw a rectangle of 360×60px.

A new layer has been created. Double-click the layer and add the Color Overlay style with #dddddd as color. Hit OK and then reduce the layer`s opacity to 50%. This shape will be the search bar background.

Inside this shape we want to create another shape which will serve as the input field of the search bar. The new shape will be 7px smaller on every side. So, grab again the Rounded Rectangle Tool(U) and with the same radius of 5px, draw a shape of 344×44px. If the new shape is not centered inside the first one, center the bar with the background-bar.

Double-click the layer and add a smooth black inner-shadow.

Now our project starts to look like a search-bar.

Next element is the submit button. The button will be created using the same Rounded Rectangle Tool. So, grab again the tool, leave the radius to 5px and draw a shape inside the input field of 82×44px.

Add the next blending options to the button layer:

The button is styled and looks awesome. The search bar looks great too:

Let`s add some final touches, some text to finalize the project. For the search button, I used Yanone Kaffeesatz google font which is free to download and use. You can download the font directly from Google WebFonts.

You can install it into your system by dragging it into your operating system fonts folder.

Select the Horizontal Type Tool(T), choose your font, set font style to Bold and font-size to 24 and type in a suggestive word like “submit”, “search” or “go”.

Stylize the text by adding some blending options:

To finish the search-bar, inside the input field type in something like “Click to Search”. Use a standard font like Arial and a gray color to make the bar as functional as possible.

With this final touches, the search bar design is finished and ready to be coded. If you have any questions/feedback drop us a comment below. Until then, take a look at what we`ve done today:

Related posts:

1. How to Design a Clean and Beautiful Login Form in Photoshop
2. How to Design a Clean and Fancy Chat App in Photoshop
3. How to Design a Clean and Minimal vCard in Photoshop

Source http://www.2expertsdesign.com/?p=8228
Wed, 04 Jan 2012 09:00:22 GMT
Tags: Tutorials,

---

Monkton E-Commerce | Imperial E-Commerce | Perrysburg E-Commerce | Nugegoda E-Commerce | Hickory E-Commerce | Revesby E-Commerce | Linthicum E-Commerce | Palm Harbor E-Commerce | Randolph E-Commerce | Rancho Santa Margarita E-Commerce |

Tutorials

---

---

Need E-commerce Design? Check out our member profiles:

Use DMD Panorama To Create Beautiful Panoramic Images In A Snap [iPhone]

I love taking photographs with my iPhone It has a great camera that is with me all the time It tak

---

Cool Websites and Tools [December 25th 2011]

Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit

---

How Facebook’s New Open Graph Features Impact fCommerce

Facebook announced yesterday regarding its developer platform 8212 namely new features in its Op

---

Cool Websites and Tools [January 20th 2012]

Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit

---

Enter The Twilight Zone With The SCP Foundation

Are you a fan of the unknown Do you tend to investigate strange encounters that have unexplainable

---

Are Your CPCs Out Of Control? 5 Ways To Rein Them In

It 8217 s easy to spend too much money on pay per click The infographic below source breaks down

---

Transformice: An Addictive, Casual Game For Your Browser Or Desktop

It took nearly two months for a friend to convince me to give Transformice a shot The game looked t

---

Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Social Media (66)
iOS (66)
Browser Tips & Tricks (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
troubleshoot (53)
Google (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)

Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers