How to Create a Seach Bar in Photoshop

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.[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Final Result

Let’s begin!

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

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

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

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

On Gradient Overlay, set this colors.

Follow the Gradient Settings above.

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

You should have the same box like the one above.

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.

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

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

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

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

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

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.

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.

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

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

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.

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

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.

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.

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

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 😛

[wp-like-locker]

Thanks for liking this freebie. To be updated whenever we release new freebies please like our Facebook page now. You can find the like button on top in the right side. We appreciate your support!

Click here to download the Freebie[/wp-like-locker]

[wp-like-locker]

alexnaz

Alex Naz is a professional writer with a proven track record. He is a creative blogger who is passionate about web design, SEO and web development. He is also a family man and has a passion for the outdoors.