Design a Search Button in Photoshop

12-20-07 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 28×28 pixels canvas set at 72dpi, and white background. Then on your tools palette set the foreground color to a dark pink, color code #D7006C.

Step 2:
Choose the Rounded Rectangle Tool from your tools palette and above your screen under the options palette set the radius to 8 px and check anti-aliased.

Step 3:
Create a new layer( Layer > New > Layer) and make a dark pink rounded rectangle.

Step 4:
Go to Layer > Layer Style then add an Inner Shadow and Gradient Overlay blending options to your pink rounded rectangle.

Step 5:
A gradient effect should now be attached to your rounded rectangle layer.

Step 6:
Select the Horizontal Type Tool from the tools palette and above your screen under the options palette set the font family to Bookman Old Style, regular, 14 pt, strong and white for color.

Step 7:
Now type “go” on the middle of your rounded rectangle. A text layer should also appear on your layers palette.

Step 8:
Go to Layer > Layer Style then add a Stroke blending option to your text layer.

Step 9:
And thats it your done, your ‘go’ text layer should blend right in with the rounded rectangle. This button also can be used on dark background websites.

More Amazing Photoshop Tutorials: Netcades.com : Photoshop Crown

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

8 Responses to “Design a Search Button in Photoshop”

1. Origin Maker » Create a Simple Gradient Header in Photoshop Says:
   January 5th, 2008 at 1:16 pm

   [...] Search Button: Read Tutorial | Download PSD File. [...]

2. Origin Maker » Create a Stylish Header in Photoshop Says:
   January 8th, 2008 at 1:59 pm

   [...] Search Button: Read Tutorial | Download PSD File [...]

3. diwebs Says:
   January 18th, 2008 at 2:32 am

   Thanks! That helps alot! Good tutorial!

4. djfjdlokv Says:
   February 4th, 2008 at 5:12 pm

   iyufjnugfd

5. PhotoshopMASTA . com @ Search Button @ basic photoshop tutorials / photoshop cs3 tutorial | basic photoshop tutorials / photoshop cs3 tutorial / effects tutorial / photoshop brushes Says:
   March 9th, 2008 at 8:36 am

   [...] originmaker.com Published in drawing, photoshop, web graphic Tags: basic, button, [...]

6. PhotoshopHome Says:
   March 10th, 2008 at 9:18 am

   another nice, simple tutorial. Thanx!

7. OriginMaker » Design a Gaming Header in Photoshop Says:
   March 12th, 2008 at 3:33 pm

   [...] Button: Read Tutorial | Download PSD [...]

8. Neyaz Ahmad Says:
   March 15th, 2008 at 1:31 am

   It is very stylish and good button which can be used in any website.

Add a Comment

Name (required)

Mail (required)

Website