Search Bar – Photoshop Tutorial

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

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.

[raw] [/raw]

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

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.

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:

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

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.

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

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.

Now we can add a few Layer Styles.

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

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

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

The main elements are complete:

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.

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,

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

select Web,

then Append.

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

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