Custom Web Search Box

This tutorial will show you how to create a custom web based search box for use on a website. For this tutorial we will apply a few simple techniques using Adobe Photoshop.

Start off with a new document 540×125 pixels with a white background.
Photoshop Web Search Box Tutorial

Create a new layer. Using the rounded rectangle tool with a 10px radius, create a selection similar to the one below and fill it with black #00000.
Photoshop Web Search Box Tutorial

Now create a new layer and add a circle. Hold down the control key to make a perfect circle, and then drag from the top of the box to the bottom, then side ways. I will use red for this so that it is easy to see.
Photoshop Web Search Box Tutorial

Now select the move tool and nudge the layer left using the arrow keys until you get something that looks like this.
Photoshop Web Search Box Tutorial

Now you need to merge the layer with the rounded rectangle layer. To do this, simply select the layer with the circle and press ctrl+ e. You should end up with 2 layers, the background and the shape you created.
Photoshop Web Search Box Tutorial

Now we need to apply some blending options to give the shape some style. Right click on the Layer with the shape and select blending options.
Photoshop Web Search Box Tutorial

Now apply the following blending options to your shape.

Gradient Overlay:
Photoshop Web Search Box Tutorial

Here is the gradient we used:
Photoshop Web Search Box Tutorial

Drop Shadow:
Photoshop Web Search Box Tutorial

and Stroke:
Photoshop Web Search Box Tutorial

When you are finished with all the effects click the ok button to apply them. Your image should look something like this.
Photoshop Web Search Box Tutorial

Now we will have to add our search box. Create a new layer. Use the rounded rectangle tool with white as your foreground color and a radius of 6px to create a shape like below.
Photoshop Web Search Box Tutorial

Apply the following blending options to your search box.

Inner shadow:
Photoshop Web Search Box Tutorial

Click ok to apply the effect. Your image should look like this now.
Photoshop Web Search Box Tutorial

Next we will add the search button. Create a new layer. Using the same rectangle tool (radius 6px, color #ffffff) make a selection like below.
Photoshop Web Search Box Tutorial

Apply the following blending options to the search button:

Gradient Overlay:
Photoshop Web Search Box Tutorial

Here are the gradient settings:
Photoshop Web Search Box Tutorial

Inner Glow:
Photoshop Web Search Box Tutorial

Apply the changes. Your image should now look like this.
Photoshop Web Search Box Tutorial

Now we need to make the button look glossy. Ctrl + click on the layer to select the button. Then using the rectangle marquee tool, press and hold alt then drag the shape over the bottom of the rectangle to select only the bottom of the button.
Photoshop Web Search Box Tutorial

On the Photoshop Menu, go to Select > Modify > Contract. Contract the selection by 2px and press ok. Create a new layer then fill the shape with white #ffffff by pressing alt + backspace. Your button should now look like this.
Photoshop Web Search Box Tutorial

Now adjust the opacity of the white layer to 55%.
Photoshop Web Search Box Tutorial

Your button should look like this
Photoshop Web Search Box Tutorial

Type the word search on top of the box using the text tool with Arial Black 18pt white as your font. Apply a stroke to the text layer.
Photoshop Web Search Box Tutorial

Apply the effect and you should have something like this.
Photoshop Web Search Box Tutorial

Now we need to add a logo. Create a new layer and make a selection with the elliptical marquee tool. Fill it in with any color.
Photoshop Web Search Box Tutorial

Now apply the following blending options that you did for the search button. The easy way to do this is to right click on the search button layer and select blending options. Then click styles at the top and click new style. Name your style and then exit.
Photoshop Web Search Box Tutorial

Now right click the circle layer and select blending options. Click the style button and again and select the style we just saved. Apply the style and your image should look like this.
Photoshop Web Search Box Tutorial

We use the same technique that we did for the search button to apply a glossy layer to our circle. Ctrl + Click the layer to select it. Contract the selection by 2 pixels. Create a new layer then fill the circle with white. Reduce the opacity to 55px. Refer to the previous steps if you need more help. You should have something like this.
Photoshop Web Search Box Tutorial

Now make a selection with the elliptical marquee tool over top your circle and delete it to so that it will look like this.
Photoshop Web Search Box Tutorial

Now create a new layer and add your logo. I will use a rabbit because my search engine is speedy like that. You can find the rabbit in the custom shape tool if you want to add it. Then I added a 2px border like the search text. Then you can add your tag line and you are finished.
Photoshop Web Search Box Tutorial

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • Great tutorial. I was looking for something like this.

  • arbination

    This tutorial was very simple, yet effective. It looks kinda familiar though. I think I have seen a search box like this somewhere.

  • I like it. Maybe it’s not new looking, yet – nice and simple 🙂

  • arnie

    great!
    you guys make life so much easier 🙂

    -a photoshop newbie…

  • Miguel

    Thats great but how do we make this functional? The Slice tool? Thanks for any help i can get.

  • Yes, you will have to slice the images and code them. I will try to write a tutorial on how to slice and code with CSS in the near future.

  • Miguel

    I apologize for being such a noob. But i was wondering if i could add a drop down ontop of a photoshop image? I am making a Navigation box, i have two search boxes and i would like to put a drop down below the search boxes. Thanks

  • woooooooooooooooooooooooooooooooow good work i love it that 🙂

  • great tutorial found it really easy (and im 13)

    i decided to add a little animation to mine

    http://i189.photobucket.com/albums/z75/mattyt94/search-bar.gif

  • zAiNaB

    great listen I made it and it went perfectly same! 😀
    Thanks

  • Very neat! I love this tutorial.
    I am trying to do the same thing over at http://ilovephim.com/phim/

    however, how do i generate the html for this?

  • ik

    wtf? rabbit with 1 B 😀

  • seo

    a great tutorial, i’ll use this for my new directory, thanks

  • Looks great was looking for this just as I had imagined, good stuff!!

  • i understand how to make this already, but ive been trying to figure out how to make the text box so a user can actually type in it. also so the submit button worls off the text. im pretty new to photoshop but a fast learner

  • Guys you will want to remove the text box and submit button. Slice the image and use a background fill. Then in html you will add the text box and style it with css and do the same for the button.

  • Maybe is a rabbit that ate a “B” 😀
    Nice ideea i like the rabit 🙂 but i dont like the buton very much!

  • gr8 gr8 tutuorial
    very very nice………………..

    This tutorial helps me a lot

  • bul

    Hey John, I am stuck and need your help. Where you able to do the slicing?

  • nice tutorial thanks for sharing

  • I simply couldn’t go away your site before suggesting that I extremely enjoyed the usual info an individual provide for your visitors? Is going to be back frequently in order to inspect new posts