October 9th, 2007 in Photoshop Tutorials by Richard Carpenter
Orb Site Icons Tutorial




4 Votes, Rating: 3.75
About The Author: Richard Carpenter
Richard Carpenter has written 322 posts.
Create a new document 640×480 with a white background, select the elliptical marquee tool and draw out your circle, fill with any color as this will change in a minute.
![]()
Now add these layer styles, im going for a blueish looking icon, just change the colors accordingly in the layer styles to suit your needs.
![]()
![]()
![]()
You should now be left with this.
![]()
Still with the elliptical marquee tool draw another cirlce at the top like this.
![]()
Fill with the color white, then click the “add layer mask button”.
![]()
Now select the gradient tool making sure you have the color black as your forground, and simply drag from the middle of the white circle to the top of the white cirle, set the opacity to about 54% You should then have something like this.
![]()
Do the same as above creating a total of 3 cirlces two at the top making one smaller one and one at the bottom. You should have something like this.
![]()
Now for your actual icon, select the custom shapes tool.
![]()
At the top where it says “shape:” click the little arrow and select your desired shape.
![]()
Drag out your shape onto your orb, once you have done that select the “pen tool” and right click your canvas then goto “fill path” press ok when the dialog box pops up. You should be left with this.
![]()
Now you can leave it as it is OR add these layer styles to you icon image.
![]()
![]()
![]()
![]()
Your icon should now look like this.
![]()
Thats it all done, now resize it to your desired size.
![]()
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
Leave a Reply
Search HV-Designs
Can't find what your looking for??, Try searching.
Write For HV-Designs
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
HV-Design Flickr Group
Submit your photoshop artwork to the hv-designs flickr group. Not a member? Join Now.
Recent Comments
- Richard Carpenter on Personal vCard Pt.2
- Bekey on Personal vCard Pt.2
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on USB Stick Tutorial
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on LG LCD Monitor Icon
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on 3D Mp3 Player
- 60 Excellent Gadget Photoshop and Illustrator Tutorials | Programming Blog on 3D Mp3 Player
- Imon on Personal vCard Pt.2
- Multi-level Drop Down Menus : swapnil on Sliding Jquery Menu
- Ertan on Creative 3D Layout – FREE PSD
- Ertan on Portfolio Layout #6
Other Blogs Ive Written For
On occasions i write tutorials and articles for other blogs/tutorial websites, here are a list of tutorials and articles ive written. Features tutorials written on six revisions and PSD Tuts+.
Six Revisions Submissions
- Illustrative Web Design Layout Pt.1
- Illustrative Web Design Layout Pt.2
- 3D Gallery
- 3D Ribbon Style Layout
- Minimal Portfolio Layout
- Minimal Portfolio Layout PSD Sitebuild




9 Responses to “Orb Site Icons Tutorial”