The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Professional Home Icon or Button

Professional Home Icon or Button


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.

image 1

2. On a new layer (Alt+Shift+N) use the elliptical marquee tool (M) and hold down Shift to make a circle, about this size:

image 2

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.

image 3

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:

image 4

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.

image 5

6. Now for the fun part. Hit Ctrl+Shift+Alt+T about four times until you get a completed shape like this:

image 6

7. Next select all your newly made layers by holding downing down Shift while selecting the top layer then bottom layer. You may also merge each layer down. Be careful to leave your background layer alone, though.

image 7

8. Next Ctrl+click your object layer so it has the marquee selection. Go to select>modify>contract. Enter a value around 3px.

image 8

9. With the contracted selection still active, create a new layer (Ctrl+Shift+N) and fill the selection in with any color (I chose black).

image 9

10. Now go to blending options and apply a gradient overlay with these settings:

image 10

image 11

11. You will have something similar to this:

image 12

12. Now Ctrl+click the same layer, select the elliptical marquee tool with the 'subtract from selection' option selected.

image 13

13. Now for the 'glossy' effect. Draw any circular shape over the selection. This will subtract from your previous selection. I did something like this:

image 14

14. This is what I got:

image 15

15. Now create a new layer with the selection still active and fill it with white.

image 16

16. Next, you can turn down the opacity as low as you like. I made mine at 20%.

image 17

17. Now lets go back to our original object layer and go into blending options. Apply these settings:

image 18

image 19

image 20

18. You will get something like this:

image 21

19. Now for another fun part! Here is the home icon I used for the logo. The easiest way is for you to copy this image and paste it in your document. Or you may save it to your computer, open it in a new document, and drag it into your current design.

image 22

20. Arrange it like so:

image 23

21. Next make sure that the image layer is active and then change the blend mode to 'screen'.

image 24

22. What this does is make all black pixels transparent with anti aliasing. Pretty nifty huh?

image 25

23. Now just lower the opacity level down to whatever looks best. I used around 50%.

image 26

24. Now for a final touch. Go back to the 'glossy' layer (where you lowered the opacity to ~20%) and select the 'Add layer mask'.

image 27

25. Select the gradient tool (G) and make sure these settings are in effect:

image 28

26. Now draw a straight line (hold Shift) from right to left at an angle similar to how your glossy layer is shaped. That's it! Click the final product link to what I got.

image 29

The final product:

Professional Home Icon or Button Tutorial: Final Result



Author's URL: Nifty Tutorials
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Professional Home Icon or Button"

Only registered users can write comment

No comments yet...