Hello, friends! You’ve seen them on your favorite blogs; those beautiful, custom social media icons that web designers make for their clients. Maybe you’ve even thought about paying someone to make them for you (don’t do it! I believe in you). It’s no secret that custom social media icons can really make a blog design pop. Now, what if I told you they were a snap to make? Really! I can show you how to make pretty social media icons using Adobe Photoshop. They are SUPER easy to make. In fact, while making the graphic for this blog post I TOTALLY forgot to save my work and had to remake it from scratch. So I know that once you go through the tutorial a couple times you can make a new social media icon in only a couple of minutes. 🙂
This post contains affiliate links. For more information, see my disclosure here.
Adobe Photoshop has been my favorite graphics editing program since forever. It is a really robust platform, and although it can be a little intimidating to learn I believe it is totally worth it. I actually learned how to use Photoshop little by little, doing tutorials like this whenever I needed to make a certain type of graphic. 🙂 Over time, taking baby steps and following the tutorials builds a deeper understanding of the program. Now I use it for multiple things; my blog, my printables, photo touch-ups, you name it! Full disclosure, I even used it to whiten my teeth on my About page. Lol. We are all about honesty on my blog. 😉
If you are new to Photoshop, Adobe has a nifty product called Adobe Creative Cloud, which will allow you to choose which products you want and pay a monthly subscription fee rather than having to pay hundreds of dollars at a time. The Photography plan, which I use, includes Photoshop and Lightroom. Adobe also allows you to try their products before you buy them, which is really nice if you are on the fence and want to give Photoshop a spin before you commit. For me, the Creative Cloud has been great because it allows me to use products I love without having to spend hundreds of dollars at a time. Plus, it keeps them updated for me!
How to make pretty social media icons using Adobe Photoshop
1. Download Your Default Icons
This tutorial assumes you’re using a plugin that allows you to use customized social media icons. I use Ultimate Social Media Icons by Ultimately Social. This is an impressive plugin and I highly recommend it. I love it so much that I’m considering upgrading to the paid version! While I use Ultimate Social Media Icons, this tutorial should work for other plugins, provided they allow you to customize your icons.
Whatever plugin you use, you’ll want to have it configured so you can see the basic social media icons on your website. Then, right click on the icons you want to edit, and “Save Image As.” Save these in a folder on your desktop or somewhere you’ll remember.
2. Open Your Icon And Change Your Units to Pixels
Open up one of the icons you downloaded in Adobe Photoshop. Pretty boring, right? Thankfully, it’s very easy to swap out the boring standard templates for a pretty background color that better matches our blog. But first, you’ll need to change the units in Photoshop from inches to pixels. We work in pixels on this tutorial, and as you use Photoshop more and more you’ll realize that using pixels as a unit of measurement is far superior than trying to use inches.
To accomplish this, follow the path Edit -> Preferences -> Units & Rulers. Change units to “Pixels” on the first screen and you are all set!
3. Open The File You’re Using For The New Icon Background
Do you have a background in mind for your new, improved social media icons? Great! Open up that image in Photoshop. If you haven’t decided on a color theme for your icons (or even your blog), now is the time to do so. There are many free, great resources on the Internet to get pretty backgrounds from. Freepik is a great place to start. As the name implies, they offer free images and backgrounds that can be used on your blog.
Alternatively, Shutterstock has a great selection of backgrounds. However, the images can be costly and out of the reach of a newer blogger.
For my blog, and this tutorial, I found a really gorgeous purple and pink themed watercolor background to use on my social media icons.
4. Copy And Paste The Background Over The Default Icon
With Ultimate Social Media Icons, the icons are all 100 x 100 pixel circles. As you can see the image below, I used the circular marquis tool to select a section that was 100 x 100 pixels wide. Your selection should be the same size as the icon itself! If you are using a different social media plugin, simply adjust your dimensions accordingly.
Now copy and paste the selection over your icon. At this point, your icon will look something like the image below.
5. Promote Layer 0 To The Top
See that section called “Layers” on the right-hand side of Photoshop? When the background layer was pasted in, it was automatically pasted over the first layer. In Photoshop, layers essentially represent a hierarchy of images. The layer on the very top sits on top of the layers beneath it. At this point, left-click and hold on Layer 0 and drag it so it is on top of Layer 1.
Now your basic social media icon should be on the top again.
6. Use The Magic Wand Tool To Remove The Old Icon’s Color
We are almost done! See, wasn’t this easy? The last step in the process is to remove all the old color on the original icon (in this case, the yellow) so we are left with only the white RSS feed icon. The Magic Wand Tool is an AWESOME little feature in Photoshop. What the Magic Wand Tool does is select all the pixels of a specific color. In this case, all I had to do was click on the yellow on the icon. As you can see in the image below, the Magic Wand Tool selected all the yellow but left the white alone.
Can you guess what the last step is? Now that everything is selected, either hit Ctrl-X or go to Edit -> Cut. Boom! All the default color should be totally gone, and your gorgeous background will show through. If you were using default icons that had more complexity than my example, you may need to use the Magic Wand Tool in a few places to cut off all the stuff you want to get rid of.
Now you can either keep playing around with your icons (I added drop shadows and outlines to some of mine) or you can save, repeat the process for the rest of them, and upload them to your website. I hope you enjoyed this tutorial and that it gives you the confidence to make your own pretty social media icons. Happy Photoshopping! 🙂