Home » Tutorials

Web 2.0 Search Bar Tutorial

14 August 2008 35,524 views 5 Comments

In this tutorial, I’ll outline the steps required to create a stylish, web 2.0 search bar. Photoshop is a powerful tool in web graphic design and is often used to create user interface elements such as a search bar. Check out the final product below:

Step 1 – Creating the Background and Base Shape

Use the Gradient Tool to fill the background layer with a gradient ranging from (#abbc6f) to white, (#FFFFFF). Use the Rounded Rectangle tool with a radius of 5px to create a bar with the dimensions of 450x75px.

In order for the bar you just created to have a styled, web 2.0 look, you need to make the following layer style adjustments:

Please note there is a color overly effect not depicted. To add this effect, create a color overly of the color (#252525) and set the blend mode to “Overlay”. This effect is optional, it is used to darken the overall appearance of the bar.

The gradient ranges from black (#000000), to dark grey (#303030), and then back to black.

Stroke Color – (#232323)

Step 2 – Adding the Text Field

Next, we will create another, smaller rounded rectangle and style it to look like the image below:

How large you want the text field to be is entirely up to you. Customize it to suit your needs. Select the text field layer and make the following adjustments:

This gradient ranges from grey (#d6dbbf) to a cream color (#feffe8). This is an important gradient, we will use it again shortly for the text.

Step 3 – Adding the Text

The final step of creating this search bar is adding some text. Using a font of your choice add text to your search bar as depicted in the image below and then make some layer style changes:

This gradient is the same one used for the text field: grey (#d6dbbf) to a cream color (#feffe8).

Congratulations! You have now created a stylish, web 2.0 search bar. Make sure to experiment with different colors, shapes, and sizes; the techniques outlined in this tutorial can be applied to a multiplicty of designs.

You might also like:

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...


  • admin (author) said:

    Make sure to let us know what you thought of the tutorial and give us suggestions for future tutorials!

  • JanaSnow said:

    Simple, good looking. Thanks

  • brian adams said:

    nice tutorial thanks for sharing

  • adnan said:

    would u plz tell me how to code it???

  • mentor designer said:

    very nice search bar thank you

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

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

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.