create
counter

Tutorial: How to Design a Social Media Icon

How to Design a Social Media Icon

[dropcap]F[/dropcap]irst, find the high resolution logo of the social media site you want to design. You can usually find this on their web site buried in their development pages.

I’ll be designing a Twitter icon. I found their logos on this page: https://twitter.com/logo It’s also best to read their guidelines before you work with their logo. I downloaded the PNG for light backgrounds. And since we’re doing a visual design for our blog, you are allowed to manipulate the colour of the bird. (Yay!) 

Since, I have Adobe Photoshop CS5 Extended version, my instructions will be catered to that program. If you have GIMP for example, try using the same techniques. They’re all pretty similar, and I hardly use all of Photoshop’s features.

tutorial_design-social-media-icon_screenshot01

(1) Start with a blank canvas. Hit CTRL+N on your keyboard to bring up the New window or File > New. Name your document so you can be organized! I sized up the document to be about 400 pixels in width, and 300 pixels in height. Open up the Twitter icon that you downloaded from their site as well.

 

tutorial_design-social-media-icon_screenshot02

(2) Decide what type of shape you want for your icon. Circles or rounded squares work best for blogs. In this case, I’ll do a circle. Create a new layer. Hit SHIFT+CTRL+ N, or Layer > New > Layer. Name it “Background Icon.”

 

tutorial_design-social-media-icon_screenshot04

(3) On your tool palette, find the tutorial_design-social-media-icon_screenshot03 Ellipse Tool. Pick a colour that matches your blog. Mine is the accent colour pink #ff0084. On your blank file, hold down the mouse and press SHIFT on your keyboard at the same time. By pressing SHIFT, you’re making a perfect circle. (I made the circle big for the tutorial, we can always resize it later)

 

tutorial_design-social-media-icon_screenshot05

(4) On the Twitter PNG, we’re going to make it white. There are several ways to do this in Photoshop, but the fastest and easiest is by using Blending Options. Right-click on the image itself, and choose Blending Options. Click Color Overlay. Change the colour to white, and hit OK.

tutorial_design-social-media-icon_screenshot06

 

(5) Make sure you’re on the Move Tool, or hit V on your keyboard, then drag the white Twitter PNG on to your circle. It might be too large, so let’s re-size it shall we? Hit CTRL+T on your keyboard or Edit > Transform > Scale. Hover over the corners of the image and press SHIFT while doing so. You don’t want to warp the image to be unrecognizable. Click the checkmark that appeared in the upper top toolbar, or hit CTRL+ENTER on your keyboard.

 

Drop Shadow

tutorial_design-social-media-icon_screenshot07

Inner Shadow

tutorial_design-social-media-icon_screenshot08

Bevel and Emboss

tutorial_design-social-media-icon_screenshot09

(6) Then all you have to do is add some more Blending Options. I particularly like using Drop Shadow, Inner Shadow, and Bevel and Emboss. (Tip: If you use Inner Shadow, it gives a “Papercut” look.)

 

(7) Do the same to the Background Icon, and you’re done! Remember to re-size the icon to your liking and save as a PNG.

 

Download the icons here

Right-click and save to your computer.

tutorial_social-media-icon_twitter_32x32
32×32 Twitter Icon

tutorial_social-media-icon_twitter_64x64
64×64 Twitter Icon

13 Comments

  1. Pingback: Book Haul: Stacking the Shelves Book Haul #29 - The Birthday Edition

  2. Jun

    February 23, 2014 at 9:44 AM

    This turial is really helpfull 😀

    I just learn how to use Adobe photoshop, and the menu (a lot of menu) still made me confuse a bit 😳
    Jun recently posted…Hujan AbuMy Profile

  3. bn100

    May 26, 2013 at 11:56 PM

    Didn’t know you could do that. Thanks for sharing.

  4. Bea Tejano

    January 28, 2013 at 3:47 AM

    Thanks for the great tutorial!:)

  5. Brooke B.

    December 1, 2012 at 8:22 AM

    Oh. My. God.

    Thank you!

    I’ve been searching for something like this for awhile. Searching was so frustrating! It started to feel like a conspiracy – everyone else knows how to do it and are swore to secrecy.
    Thanks for sharing this with us noobs.

    • Giselle

      December 14, 2012 at 10:33 AM

      You’re so welcome!

  6. Ana Death Duarte

    November 21, 2012 at 2:01 AM

    This tutorial is so easy and the icons are so beautiful! Thank you for them ^^

    • Giselle

      December 14, 2012 at 10:44 AM

      Oh yes, lots of web design things are super easy. It just looks daunting at first

  7. Jenn@OwlReadIt

    November 18, 2012 at 7:51 PM

    Thanks! I’ve always wondered how yo make these!

  8. Jen

    November 18, 2012 at 6:52 PM

    I love that you are doing tutorials. Great idea!!

  9. Ashley

    November 18, 2012 at 11:03 AM

    Cool guide, Giselle! One thing about step 6:

    (6) Then all you have to do is add some more Blending Options. I particularly like using Drop Shadow, Inner Shadow, and Bevel and Emboss. (Tip: If you use Inner Shadow, it gives a “Papercut” look.)

    I think here you mean “Layer Styles” instead of “Blending Options”! 🙂

    • Giselle

      November 22, 2012 at 4:57 PM

      Actually they are Layer Styles, but when you right-click, it’s called “Blending Options.” Meh same thing lol

  10. Chrystal @ Snowdrop Dreams of Books

    November 18, 2012 at 8:49 AM

    Oh thank you! I always wondered the best way to make these.

  11. Dorothy Reading

    November 18, 2012 at 12:17 AM

    Very nice! I’m not very good just yet, but I’m really into graphics. This was awesome.

Leave a Reply

Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

%d bloggers like this: