March 8th, 2009 in Photoshop Tutorials by Richard Carpenter
Share This Icon




13 Votes, Rating: 3.62
About The Author: Richard Carpenter
Richard Carpenter has written 331 posts.
Hello welcome to another tutorial by hv-designs, in this tutorial il show you how to make a simple stylish “share this icon” you mainly see icons like this on blogs to promote posts and stuff. Now you can add one to your blog.
Lets get started create a new document 496 x 496 pixels. Use your prefered background color, ive choses a nice light blue gradient background.
![]()
Select the custom shapes tool from the sidebar menu.
![]()
Select the sheild shape from the custom shapes libary, change to “shape layers” (see image below).
![]()
Using “shape layers” will retain the shapes quality when needed to resize your document at a later stage. Drag your sheild onto your canvas then add these layer styles.
![]()
![]()
![]()
![]()
![]()
You should have something like this.
![]()
Select the pen tool, change from “shape layers” to “paths”, create a path like this.
![]()
Right click in the middle of your canvas and goto “fill path”, make sure you have the color white selected and that you’ve create a new layer. Select the new layer (so the layer turns blue) then holding the CTRL key on the keyboard click your sheild layer. You should have loaded a selection, now goto “select > inverse” then press the delete key on the keyboard. Set the new layers opacity to about 23%, label your layer as “sheild shine”.
![]()
Head back into the custom shapes libary and select the heart shape, draw out your heart shape in the middle of you sheild, fill with any color then add these layer styles.
![]()
![]()
You should have something like this.
![]()
Using the pen tool once more make two selections (one at a time) like the image below. Use the same method as when we create the shine for the sheild.
![]()
Fill the selections with the color white then set layer opacity to 20%.
![]()
Select the type tool and simple add a plus sign to the heart.
![]()
Thats it all done, now just merge your layers (bar the background layer) and resize as you wish. Thanks for reading…. dont forget to subscrive to our RSS feeds and TWITTER. Till next time, have a good day.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
Leave a Reply
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
PSD Tuts+ Submissions
HV-Design Flickr Group
Submit your photoshop artwork to the hv-designs flickr group. Not a member? Join Now.
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




27 Responses to “Share This Icon”