How to Create a Seach Bar in Photoshop

September 28, 2012 · 4 comments

by sanjay

I’ve been thinking to put a search box on my site lately, and while doodling in Photoshop for some design I finally had something. So while I am still waiting to decide on where on my site I should put it – I wanted to show you how I created it in detailed steps.

Again, all of my tutorials are fairly easy to do. No special technique has been used, if you got lost on the steps please do ask me in the comments below.


ElegantThemes
ThemeForest

Advertisement

Final Result

Let’s begin!

How to create a search bar in photoshop

Open your canvas, use width 400px and height 200px.

How to create a search bar in photoshop

Grab your Rounded Rectangle Tool (U) and set the radius to 5px. Draw the same shape like above.

How to create a search bar in photoshop

In Blending Options > Drop Shadow set your foreground to #818181 and Distance 1px and Size 5px.

How to create a search bar in photoshop

Select Inner Glow and set the Foreground to #FFFFF and change the size to 1px.

How to create a search bar in photoshop

On Gradient Overlay, set this colors.

How to create a search bar in photoshop

Follow the Gradient Settings above.

How to create a search bar in photoshop

In Stroke, change the color to #b1b1b1 and set the size to 1px, Opacity to 100%.

How to create a search bar in photoshop

You should have the same box like the one above.

How to create a search bar in photoshop

We will create another one, this will be our input field (when doing HTML). Same as the first step, Rounded Rectangle Tool – radius is set to 5px.

How to create a search bar in photoshop

On Drop Shadow, change the Foreground to #FFFFF and Distance and Size to 2px.

How to create a search bar in photoshop

Now select Inner Shadow, Foreground color #b6b6b6 and Angle to 90, Distance 1px and Size to 5px.

How to create a search bar in photoshop

Inner Glow, Foreground color #FFFFF change the Size to 1px and hit OK.

How to create a search bar in photoshop

Now select Stroke and set the size to 1px. Change your color to #9d9d9d.

How to create a search bar in photoshop

Here is our form field, it’s coming out pretty well.

How to create a search bar in photoshop

Now, we will create the search button. Create a new layer and select Marquee Tool (M), draw a square shape like the one above. Fill it with #5d8f27.

How to create a search bar in photoshop

Now, while still highlighting the search button layer click the input field layer and press CTRL + SHIFT + I and hit delete. Result should be the same above.

How to create a search bar in photoshop

On search button layer, Blending Options > Drop Shadow set the Distance to 1px, Size 2px.

How to create a search bar in photoshop

In Gradient > follow the color settings above and hit OK.

How to create a search bar in photoshop

To create a left border on the button, we will add a line. On Single Row Marquee Tool (M) and fill in the color with #76a934.

How to create a search bar in photoshop

Here is our search button, I also added some text. I use Bebas 16pt #5b8c26.

How to create a search bar in photoshop

Next is to create some detail to our text. Drop Shadow > set the color to #fffff and Distance and Size to 1px also angle to 90.

How to create a search bar in photoshop

In Inner Shadow, Foreground is #538224 and Distance, Size 1px.

Here is the text, someone is looking for a job! :) Font is Bebas 16pt #6f6f6f.

How to create a search bar in photoshop

On text that we just put in, select Blending Options > Drop Shadow and follow the settings above.

How to create a search bar in photoshop

Inner Shadow use #00000, and Distance, Size 1px.

Here it is! Almost done, now to add some background patterns so it’ll look good.

Ta-da! Here it is, finally. As you’ve noticed we didn’t use any new or advance technique to create this search bar UI. What we used a lot is blending options for layers and a few gradients which gives us a greater detail.

The question now is, can you turn this into a working HTML / CSS search bar form? So I can finally use it on my website :P


Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

{ 4 comments… read them below or add one }

Simon Rohde Nielsen October 30, 2013 at 9:33 am

Awesome tutorial, i used it for a project in the school.. :) The teachers loved it!

Reply

Adam April 25, 2012 at 10:23 pm

Nice work, I’ve always wanted to know how to do the background effect with the stroke for buttons etc, thanks!

Reply

Faiza January 19, 2012 at 1:33 pm

Hi i am stuck on the step where green button should be cut out according to the input layer by pressing CRTL+SHIFT+I inverse selection i tried so many times but in vain. :( i selected the button and click on the input layer and press inverse selection but it just select the whole outer file and button did not select the inverse…what should i do?

Reply

Manfred January 11, 2012 at 10:59 am

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics