What we'll be doing today:
First step, open Photoshop and create a new document of 600x400px. 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 360x60px.
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 344x44px. 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 82x44px.
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:
