I love that I’m able to give my website a little boost by learning to design social media icons!
Ok, so do you ever have those moments when you can’t seem to get motivated and just need a change? Even something super small?
I used to feel that way and I would either get my hair dyed or go on Pinterest and spend hours looking through cute ways I could organize my desk. (Actually, I still do this!)
I was having one of those procrastination moments where I really wasn’t in the mood to write, so I went on what seemed like an endless search to update my website. I wanted to add some color and just make a few minor changes to give me a little boost of motivation.
I decided changing up my social media icons to match my website would make up for the little pop of color I was lacking.
I came across some great free downloads but they were never quite perfect- either the color was off slightly, they weren’t the right shape, or the downloadable set was missing one of the icons I wanted.
Finally after spending literally HOURS looking, I decided I would design my own social media icons- and I’m so glad I did! It was fast, easy, and completely customizeable for my website.
I promise it’s super easy to design your own social media icons, especially after you finish your first one since you can continue using the same template! You can use any color you want and combine it with cool effects to make them even more unique.
I used Adobe Photoshop Elements to do mine, but you can also use Canva. The only issue with using Canva is that you can’t make the background transparent, so it may be visible depending on where the social media icons are being used. The work around for this is to change the background on your social media icons to match the background of where it’s being placed- most times it works perfectly!
For this tutorial, I’m only going to cover creating your own social media icons in Adobe. And trust me, I’m NO expert (I didn’t even know I had Adobe until a few months ago!). I am just using the free version that came pre-installed with Windows 8 when I bought my laptop.
The main part of this process is finding the right icons for your social media platforms, and for this, you’ll want to use Iconfinder. They have tons of social media and share icons available for free and you can pick and choose from a huge range of sizes.
This was the biggest discovery for me during the process!
So, let’s get started!
Design Social Media Icons Using Adobe Photoshop
1. Get your icon
Head over to Iconfinder and download your image (I’m using Facebook as the example).
I use the 64 x 64 icons but you could also download the ones that are a little larger. Just make sure you’re not getting them too small and enlarging them, because this will mess up the image!
Don’t worry about what color it is- we will change this later.
2. Create your template
When you create a new file in Adobe, be sure to make it slightly larger (about 30% larger) than the icon you downloaded to be sure you have enough room for the entire image. For the 64 x 64 icons, I create a file that’s 100 x 100.
3. Make your base layer
In the bottom right hand corner click “create a new layer”. You want to make sure you’re not working on the background layer so later you can make your background transparent. After this, you’re ready to start designing!
Now, the fun part begins! You can have your icon on a circle or square- whatever you prefer. I personally like the look of a circle icon. On the left hand side, click “elliptical marquee tool” and, starting in the top left corner of your background, draw a circle from edge to edge.
Just a note- make sure “Layer 1” is highlighted. You don’t want to be working on your background layer for this step.
My favorite part! This is where you can have fun and experiment. See if you can come up with a nice color on your own, or add in a color code to match your website branding.
Use the paint can icon on the left side to color in your circle.
7. Add your icon
Now that you’ve finished the background for your icon to sit, we need to import the icon. Go to “File” and “Place”. Find where you saved your icon and click “Place”.
Now your icon will be centered on your background. From here, select the color you want it to be using the paint can icon again.
Just a note, the icon will now be on it’s own “Layer”. Make sure this layer is selected before using to the paint can or else you will end up coloring your background.
8. Add cool effects
This is totally optional but Adobe allows you to add some neat effects to your icons. Look through them on the right hand side and if you see something you want to try, click and drag it over to your background.
Make sure your background layer is highlighted for this!
I liked using the “smudge stick” effect on mine. It gives the icon a hand drawn look.
9. Make it transparent
This is the most important step when you create your own social media icons because you want them to work on any background!
It’s super simple to do- just click the eye symbol next to the “Background Layer” at the bottom right. This makes the white background no longer visible and your icon will be sitting on a transparent background.
Now you’re all done! Go to “File” and “Save As”. You’ll want to save as a PNG file.
There you have it! A completely customized social media icon. Once you get the hang of it, it will only take you a few seconds to make them.
Here is our beautiful Facebook icon:
If you want to make your entire set of icons identical, all you have to do is delete the icon and do the process of “placing” again.
You colors will all save so just color the new icon, make sure the background is still transparent and save!
Continue doing this as many times as you want for every icon you need and you’ll be done in no time.
I hope you found this mini tutorial on how to design social media icons simple and helpful! Leave your comments below 🙂