Search Bar – Photoshop Tutorial

Posted by | February 16, 2012 | Articles, content, Designing, Photoshop, Tutorials, Web Elements
Search Bar

Over the next few weeks, Nathaniel from Tutvid.com and I will be releasing tutorials related to web design elements, like the ones you can download, for free, at 365PSD.com.

Search Bar Photoshop Tutorial

Every Monday, Wednesday, Friday and Saturday, we’ll be releasing a new Photoshop tutorial on our own sites, and each other’s sites, so make sure you’re following both IceflowStudios and Tutvid to be kept up to date.

For today’s tutorial, we’re going to be creating the search bar you see above, which again can be downloaded for free at 365PSD.com

When designing elements like this, I always like to map out the design first, and worry about the Layer Styles after. There are three Rounded Rectangles that make up this design. The radius that you choose to use is up to you, but to match this design closely, a radius of 5px will work just fine.

Radius Search Bar   Photoshop Tutorial

FirstRectangle Search Bar   Photoshop Tutorial

In order to visually separate each element from one another, it’s a good idea to change the color of the new shape before you draw it out. Once one shape is created, make sure that the Create new shape layer button is selected on your Options Bar, then choose a new color. Repeat this process for each shape of the design. At any point you create a shape that’s either too big or too small, you can either undo and try again, or resize the shape later on. Once you have all three Rounded Rectangles in place, your design should be looking similar to this:

MappedOut Search Bar   Photoshop Tutorial
Now that the main elements are in place, let’s start with the Layer Styles, starting with the main rectangle in the back.

BarGradient Search Bar   Photoshop Tutorial

Gradient colors: The color on the left, which will be the bottom color, is going to be a very light blue. e9f3f5. The color on the right, the top color, will be almost a pure white, with a slight touch of blue. f8fcfd.

BarInnerShadow Search Bar   Photoshop Tutorial

BarDropShadow Search Bar   Photoshop Tutorial

Once the Layer Styles have been applied, you should have something similar to this:

BarStyles Search Bar   Photoshop Tutorial

The next shape we’re going to work on will be the search field. For this shape, we’re not going to worry too much about a gradient. A solid color should work well. In your Layers Panel, double-click on the color box beside this layer, and set the color to a light blue. deebf1.

FieldBlue Search Bar   Photoshop Tutorial
Now we can add a few Layer Styles.

FieldInnerShadow Search Bar   Photoshop Tutorial

FieldDropShadow Search Bar   Photoshop Tutorial

These Layer Styles will give a nice, soft indented feel to your search field:

FieldStyles Search Bar   Photoshop Tutorial

The last rectangle we’re going to edit, will be the search button, starting with the Gradient Overlay.

ButtonGradient Search Bar   Photoshop Tutorial

Gradient colors: The left color will be 88cae4. The left, bbe0f0.

ButtonInnerShadow Search Bar   Photoshop Tutorial

ButtonStroke Search Bar   Photoshop Tutorial

The main elements are complete:

ButtonStyles Search Bar   Photoshop Tutorial

Now that the main elements are complete, let’s take a look at the text. The font and size you choose to use is completely up to you, but the main focus on the text, is the slight white Drop Shadow below the text. This will give the text an indented feel to it.

TextBar Search Bar   Photoshop Tutorial

TextDropShadow Search Bar   Photoshop Tutorial

The last element we’re going to add, will be a magnify glass. If you want to make things quite simple, Photoshop includes one as a shape! Select your Custom Shape Tool,

ShapeOptions Search Bar   Photoshop Tutorial

click the arrow at the top right of the Shape Picker,

ShapePicker Search Bar   Photoshop Tutorial

select Web,

Web Search Bar   Photoshop Tutorial

then Append.

Append Search Bar   Photoshop Tutorial

This will give you access to the Magnify Glass, allowing you to drag out your shape.

SearchBar Search Bar   Photoshop Tutorial

And that’s that! a simple, yet elegant search bar in Photoshop! If you’re looking to download free PSDs like this, check out 365PSD.com, and remember to keep an eye on IceflowStudios.com and Tutvid.com for upcoming tutorials, every Monday, Wednesday, Friday and Saturday.

PHOTOSHOP TRAINING
OVER 400 FREE TUTORIALS

400
free videos
80
million video views
1
million followers

120 HD Photoshop Tutorials: $10! Buy Now!




Share Your Thoughts!

Loading Facebook Comments ...
Loading Disqus Comments ...
28,630