Total Followers 132,503
Nowadays, there are so many graphic designers who have their own style of making icons and buttons. I have my own style too. Take your time to read on my Adobe Photoshop tutorial on making cool icons for your social media buttons. Actually, it can be applied on so many things, not only social media buttons, but I believe this effect could be the best one to be applied on your social media buttons.
I have also made 25 social media icons for 1stwebdesigner readers. But take a look at the tutorial first, then you may download those icons for free.
The size and the color of the rounded rectangle is completely up to you. In this tutorial, I am using 10px radius for the rounded rectangle.
In this example, I am using Futura for “SUBSCRIBE” word and Verdana for the rest. Once again, you may choose your own fonts and elements to be added on the rounded rectangle. I used Futura & Verdana simply because they are my favorite fonts.
Please note that I am using RSS logo from Iconspedia, which can be downloaded for free here. Feel free to download it as it is free to be used on personal and commercial project.
Do you notice that there is difference on the subscribe logo? This is optional one, you may apply this effect if you want.
Remember to remove background layer before saving your file as .png format. You must save this as .png format if you want to place your button on colored background.
I believe some of you want to apply this effect. I am providing psd file for all of you who wants to apply this effect instantly, without following steps that I’ve explained. I have also provided Futura & Verdana to be downloaded for free.
These are some of the buttons that I have made using this cool effect. If you want to see where I used them, just visit my blog. I placed RSS and Twitter button at top sidebar. I have also used Stumble Upon button at the end of every article.
Actually, not all of them are social media icons. I add some icons like friendster, blogger & skype just for fun only.
License: This icons are licensed under GPL v2. You are free to do anything with them. The only requirement is to keep them free for users. There is no attribution link needed and you are allowed to use them in your personal and commercial projects for free.
Get The Only Freelancer crash course you will ever need to read!
Albert Lie is a 24 years old graphic designer from Indonesia, and also owner & main writer of AlbertLie.com | Currently specializing in graphic design and adobe photoshop. Follow Albert Lie's twitter here
Thursday, November 3rd, 2011 09:18
simple tutorial, easy to follow. thanks for sharing.
Monday, July 18th, 2011 18:07
Brilliant tutorial! Thanks very much for sharing.
Friday, July 8th, 2011 20:08
is it possible to make mouse cursor icon using same method? thanx for sharing
Tuesday, September 14th, 2010 21:38
Wow, what a great tutorial and great links to other resources. I am so happy I ran into this because this is exactly what I was looking for.
I love having unique stuff esp. if I make it myself :) so this is going to help me so much do my own cool icons.
Monday, March 15th, 2010 22:13
thanks for sharing.very simple and nice!
Monday, March 15th, 2010 13:00
Thanks for a great tip! I really like the icons you’ve made. They look really good and useful!
Sunday, March 14th, 2010 23:37
Nice looking icon set! Thank you.
Sunday, March 14th, 2010 13:36
great easy to follow tutorial guys.. thanks for sharing the icon set.. awesome!
Sunday, March 14th, 2010 12:47
Hey Lie thanks for the tutorial and the collection. the icon set looks great :D
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
sriganesh
Sunday, March 14th, 2010 12:47
Hey Lie thanks for the tutorial and the collection. the icon set looks great :D
murah
Monday, March 15th, 2010 14:21
simple tutorial, easy to follow. thanks for sharing.
Daniel
Monday, March 15th, 2010 22:13
thanks for sharing.very simple and nice!
Lily
Monday, March 15th, 2010 13:00
Thanks for a great tip! I really like the icons you’ve made. They look really good and useful!
Natalie
Sunday, March 14th, 2010 23:37
Nice looking icon set! Thank you.
Steve
Sunday, March 14th, 2010 13:36
great easy to follow tutorial guys.. thanks for sharing the icon set.. awesome!
Richie
Sunday, March 14th, 2010 20:23
Nice tutorial. Awesome icons set. Thanks man!
Allen kharbosh
Thursday, April 8th, 2010 09:09
Very nice thanks ..
Nicholas
Monday, July 18th, 2011 18:07
Brilliant tutorial! Thanks very much for sharing.
Han
Thursday, November 3rd, 2011 09:18
simple tutorial, easy to follow. thanks for sharing.
Tech Frill
Friday, July 8th, 2011 20:08
is it possible to make mouse cursor icon using same method? thanx for sharing
Brett Widmann
Saturday, November 6th, 2010 01:31
Really awesome tutorial! I learned a lot.
arun
Tuesday, June 1st, 2010 11:10
Thanks for the nice tutorial.
psddude
Thursday, June 3rd, 2010 13:48
Thanks for sharing … it looks really nice !
Brankica
Tuesday, September 14th, 2010 21:38
Wow, what a great tutorial and great links to other resources. I am so happy I ran into this because this is exactly what I was looking for.
I love having unique stuff esp. if I make it myself :) so this is going to help me so much do my own cool icons.