Search Bar

Search Bar – Photoshop Tutorial

29,748
views

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.

[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 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.

  • http://liamwise.wordpress.com/ liamwise_

    Awesome thanks :)

  • Paweł Gruś

    simply cool :)

  • iZeeno

    Very Cool Howard,Keep up the good work.Thanks for that site you give us…

  • NitzanBonneh

    Thank your very much, Howard!Short and simple, yet it also great, amazing and elegant.My result:Search bar with Background – http://tinyurl.com/83o2vrtSearch bar no Background – http://tinyurl.com/6qb4u5aPSD Download (Mediafire): http://tinyurl.com/88jzqgt

  • Thomas Baker

    Nice tutorial