Apr 17, 2007

Stylish search bar.

Adobe Photoshop Tutorial

click on images to see their real size

In this tutorial, you will learn to create a stylish search bar for a website.



Let’s start with creating a new document, with 450px by 200px. As a background I used a gradiend from # 808080 to # 616161.




Select Rounded Rectangle Shape Tool with the following settings, and draw a shape:





Name that layer as “Shape 1”. Duplicate it by pressing Ctrl+J and name duplicated layer “Shape 2”. “Shape 2” layer must be above “Shape 1” layer. Now, apply to “Shape 2” layer following settings:






That is how it must look like:




Now, apply the following settings to the “Shape 1” layer:





Rasterize “Shape 2” layer, select a part of it with a Elliptical Marquee Tool (as it is shown below), press Ctrl+I to invert the selection, press the Delete button and after that – Ctrl+D to deselect:





Select the “Shape 1” layer by Ctrl+Click on it, and with a Rectangular Marquee Tool – cut the bottom of the selection, like this:




Create a new layer (above the “Shape 1” layer), fill our selection with white color and set the layer transparency to 30%. Press Ctrl+D to deselect:


Now, with a Rectangular Shape Tool draw a shape where the input field should be. And with a Arial font 17 pt write a “search” word in a button. Here is the result




Copyright © http://megatutorials.blogspot.com

AddThis Social Bookmark Button