I’m going to walk you through how to create your own social media icons for your blog. You can create icons that match your design, even if just by using the colours in your palette. 🙂
Requirements
- Photoshop: I suppose this isn’t really required but my tutorial will be using Photoshop. However, similar results can always be achieved in different programs. But you may not be able to follow my instructions exactly.
- Internet access: Good news! If you’re reading this, you have it!
Step #1: Collect your icons
The first step is to collect the basic, raw, social media icons. By that I mean only the site logo without any background or design elements.
Decide which sites you want to make icons for, then download the icons. I personally use IconFinder for all my icon searches. You can search for the social media site you want (i.e. “twitter”), set the price to “Free”, and find a raw icon to download.
Example search:
To download the image, find a large copy (maybe 256×256 pixels or 64×64 pixels) and download the PNG version of the icon. It’s always better to start with large icons because you can always make them smaller at the end of the project. But if you start out too small, you can’t make them bigger!
So save the file to your computer, then repeat the process for all the sites you need icons for.
Step #2: Set up your Photoshop document
The next step is to create the background for the icons. I usually like to keep these pretty simple and just match the colours of the site I’m working with, but you can take whatever approach you want.
Open up Photoshop and create a large, new document. The document should be slightly larger than the size of the icons you downloaded. So if you downloaded the 256×256 icon, consider creating a document that’s somewhere between 260×260 and 300×300. Ultimately the size doesn’t matter because you can always make things smaller to fit.
Next, create a new layer so that you’re not working on the “Background” layer.
Step #3: Create a simple background
Next we can start by creating a simple, circular background for the icon to sit on. In the toolbar, switch to the Ellipse Tool. We’re going to use this to create a circle.
After activating the ellipse tool, click on the top colour in the toolbar (in the screenshot to the right, that would be the red colour) to open the colour palette. Select the colour you want your circular background to be. Don’t worry, you can change this later!
Next, look at the top bar in Photoshop and make sure your ellipse tool is set to Shape. By setting it to shape (instead of “path” or “pixels”) you will have a coloured background and be able to resize the circle later.
Then, next to the “Shape” dropdown, click the “Fill” colour and set it to the colour you selected from the palette (it should appear under “Recently used colours”).
Finally, you’re ready!
Creating the circle
Move your cursor into the center of the document. Click and start dragging your cursor outwards. As you do so, hold down “Shift” and “Alt” together. Holding down “Shift” will cause your circle to actually be a circle (instead of an oval). Holding “Alt” will cause the circle to be created from the center of your cursor (I find this easier). When you’re happy with your circle, release the mouse click to set it.
Centering the circle
Sometimes your circle still won’t be perfectly center. To center it automatically, hit CTRL+A (or Apple+A on a Mac) to select all. Then switch to the Move Tool by hitting “V”. Then find the alignment options in the top toolbar. You can click each of the middle icons to align the circle vertically and horizontally.
Progress update
So here’s what my document looks like so far:
Now let’s put an icon in there!
Step #4: Add the icons
Next we’re going to put an icon in there! So grab one of your icons and paste it into the document in a new layer. Then resize it if necessary to fit inside the circle.
If you need to change the colour of the icon, you can easily do that. In the layer panel, make sure you have the icon selected. Then click the “Lock transparent pixels” icon.
Then set the foreground colour to the colour you want to change it to. Then hold the ALT key while you press Delete to apply the colour.
Step #5: Saving your icons
Make sure you repeat the same steps for adding all your other icons. Then you can save them!
First, you want to crop your document so that the circle goes all the way to the edges and that there’s no extra space. To do this, hit “C” on your keyboard to switch to the Crop Tool. Then drag the tool until so that the circle is right up against the edges, as shown below:
Then hit “Enter” to apply the crop.
Next, hide the white background layer so that your icons are transparent. Then go to File » Save for Web to start saving. On this screen you can resize your icons if necessary. I usually pick somewhere between 35 and 45 pixels for each icon, but you can play with it! Then just click “Save” when you’re done.
Rinse and repeat for each icon.
