PSD Nation

Web 2.0 Search Bar Tutorial

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 450×75px.

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:

• Creating Photoshop Text Effects - Tutorial
  …Photoshop is a powerful tool when it comes to creating spiffy-looking text effects. In this tutorial…
• Creating Stylishly Glossy Web 2.0 Text in Photoshop
  …Ever wanted to create that sleek, glossy text you’ve seen all over the place these days? Well, fire …
• Create a Stylish Web 2.0 Button in Photoshop
  …Web 2.0 style is incredibly popular these days; the clean, gradiented, and glassy look that signifie…