Subscribe Via RSS

3174 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Share This Icon

March 8th, 2009 in Photoshop Tutorials by Richard Carpenter

Share This Icon

1 Star2 Stars3 Stars4 Stars5 Stars12 Votes, Rating: 3.58
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 322 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.

Subscribe Via RSS Follow Us On Twitter

27 Responses to “Share This Icon”

  1. nice tutorial…

  2. nice tutorial…
    Sorry… forgot to say great post – can’t wait to read your next one!

  3. Marocplus says:

    It’s very good tutorial
    Excellent work
    Thank you very much

  4. Inpakker says:

    Nice done ;)

  5. Predator7 says:

    wow, superb :P great job

  6. zhewar says:

    Nice,thanks

  7. Ben Lind says:

    Very nice effect! Looks like a professional icon.

  8. My Photoshop Custom Shapes didn’t have the armor icon, where did you download it from? Otherwise turned out good with the Icon I used.

  9. ADMIN says:

    if the shield icon is not in your custom shapes libary, click the little black arrow, then goto “all”

  10. Good to know, thanks

  11. lawrence77 says:

    Wow! Fine! :)

  12. Brochures says:

    Thanks, this was a really good tutorial! Your steps were very clear and detailed, very easy to follow. Nice topic too. Keep up the good work!

  13. huwaw69 says:

    wow great tutorial thanks for sharing hahaha

  14. khaled ali says:

    Thank you for this lesson

  15. Thanks Man Your Show Is very Nice ! Be Fine , Bye

  16. mody says:

    Thank you very much You are my idol in PhotoShop and Bstmta explanation with you because you Btsel High and psychological needs of many in one day I am in your level

Leave a Reply