Professional Home Icon or Button

May 7th, 2007 · 1 Comment

professional-home-icon-00.jpg
This tutorial will go over how to create a unique looking web 2.0 home icon or button. In following this tutorial you will learn some basic and advanced Photoshop techniques.

1. Begin with a square - any size will do. Use the rectangular marquee tool (M) & hold down shift to constrain the dimensions. I filled it with #ff0000.
professional-home-icon-01.jpg

2. On a new layer (ALT+SHIT+N) use the elliptical marquee tool (M) and hold down SHIFT to make a circle, about this size:
professional-home-icon-02.jpg

3. After filling the circle in with the same color as the square, move the circle over the top right corner of the square. Move it so that it looks something like what I have here. This will serve as all four rounded corners for your button, so make sure it looks good :wink:
professional-home-icon-03.jpg

4. Next, select the circle layer and merge it down with the square (CTRL+E). Now go to free transform mode (CTRL+T) and move the crosshair dot to the bottom left like so:
professional-home-icon-04.jpg

5. Now rotate the object 90 degrees counter-clock wise like so. You will notice the crosshair dot acts as a pivot point. Apply the transformation.
professional-home-icon-05.jpg

6. Now for the fun part. Hit CTRL+SHIFT+ALT+T about four times until you get a completed shape like this:
professional-home-icon-06.jpg

Tutorial Pages: 1 2 3 4

Tags: Buttons · Graphics

Subscribe by email!

Add to Google Reader or Homepage

Subscribe in NewsGator Online

Add to netvibes

Subscribe in Bloglines