I’m going to show you how to make social media icons for your blog using Adobe Photoshop. Even though you can find free icons online or use a plugin, creating your own icons is fun and easy and they will always match your blog’s design.
What you need:
- Adobe Photoshop/Illustrator (or any free alternative)
- transparent background icons
You can download the icons from social media sites, draw them yourself, or find them on sites such as Iconfinder. Either download the vector (.eps) or large PNG. Please make sure to read the copyright information before using them.
How to make the background
I usually create 50x50px icons, but you can also make them bigger and re-size them later. Open a new document, choose the size you want, 72ppi resolution, and RBG color mode.
Now create a new layer and using the shape tools, create the shape you want. If you want to make the icons square, just change the color of the background layer. For other shapes, use the Ellipse or Rounded Rectangle Tool.
In Photoshop CS6 or CC you can set the width and height to be the same size as your canvas and click on the center of the canvas. This way the circle will be centered and it will fill the area.
If you are using Photoshop CS5 or an older version, you might not be able to do this. So to make sure the circle is the size you want, select Path from the drop-down menu and draw the vector shape.
Press Shift (to make sure the circle is a circle) and Alt (to start from the center) while you draw it. You can re-size the vector without loosing quality by pressing Ctrl+T or going to Edit/Transform and drag the edges until they align with the edges of your canvas and there is no extra space. Then go to Paths, right click on the shape layer and select fill shape (it will fill it with the foreground color), then right click again and delete the path.
How to add the icons
Find the icons you want and save them on your computer. When the background is ready, drag and drop your icon while holding the Alt key. If the icon is larger, press Ctrl+T or go to Edit/Transform and resize your icon.
If you want to change the color of the background, or of the icon, select the layer, set the foreground color to the color you want to change it to, and press Shift+Alt+Del.
How to save your icons
Hide or delete the white background, then go to File/Save for web. For smaller icons, you can change the size of the image. Now save them in PNG file format.
You can also save your file as a PSD and use it in the future to make more icons. Just drag and drop them into the document, change colors, and save them.
Do you know how to install them? Read this tutorial. It’s for Blogger, but you can add the same code into a text widget on WordPress.