Not So Tricky: Creating Basic Social Media Icons with a Border

November 24, 2013 Not So Tricky 2 Comments

Not So Tricky: Creating Basic Social Media Icons with a Border

I struggled finding an easy (for me) to understand tutorial on creating basic social media icons even though there were masses of more complicated tutorials. Unfortunately many of the existing free sets didn’t include the icons I needed as a book blogger such as Goodreads and Bloglovin’. I also wanted icons that matched the colour scheme of the site [this is where you go and look at my simple ones on the right hand side]. 

I’m going to show you how to create a set of basic social media icons which are matte finished with a border:

twitter_sample_64

 

Step 1 Sourcing the images

Go to IconFinder or IconsDB and type in the name of the icon you want i.e. Twitter. I used IconFinder and downloaded a free vector 256×256 version because it is easier to reduce the resolution but upscaling looks really dodgy. You should be able to find just about all the icons you want there except for specialist ones like Goodreads.

For the icons that don’t appear on this site, you will need to Google them via Google Images e.g. Goodreads icon.

Step 2: Getting started

I have Photoshop CS6 so my background might look a little different to yours. If you don’t have Photoshop, you might like to try PicMonkey or GIMP which are free.

Create a new document by File > New (the shortcut for this is Ctrl+N). You need to make your background transparent so when we are finished we only see a circle and not a circle within a box. I made the size 200 x 200 because it is easier to play with larger images.

Step 3: Choosing the border colour

I just picked a colour I thought would look nice but you might want to pick a colour from your banner. The button for colour is on the left hand side near the bottom and has one square overlapping another.

Step 4: Selecting a brush

Pick a standard circular brush, make the size 198 pixels (just a little smaller than the size of our canvas) and ensure that the hardness and roundness are both at 100% – we want a perfect circle to be formed. You can go into shapes and drag out a circle shape if you want but I find this just as easy.

 

Step 5: Making that outer circle

Centre your brush on the middle of the canvas and click to place. Make sure that all of your dot is inside the canvas.

Step 6: Adding layers

I strongly advise you to use layers when you work in Photoshop as it makes it easier to change one aspect rather than starting from scratch. Select Layer > New > Layer (the shortcut for this is Shift+Ctrl+N). Go ahead and add two new layers.

I’m going to label my layers so that if I come back later, it is really easy to see what each layer is. At the moment I have nothing in the Inner Circle or Icon layer.

Step 7: Adding the Inner Circle

Click on the Inner Circle layer so that any changes you make are independent of the Outer Circle.

Change the thickness of your brush so that when you place the dot, it is smaller than the outer circle. I chose 178 px but if you want a wider border, then pick something smaller.

Change the colour (same process as you did before) so that you can see the dot when you place it. I selected 8e3e8b. Centre the brush on the middle of the canvas and place your dot.

Step 5a-7a: Alternate method of creating border

Centre your brush on the middle of the canvas and click to place. Make sure that all of your dot is inside the canvas.

Select Layer > Layer Style > Stroke. It will probably default to black so you need to change the fill colour to #470545.

You will also need to change the size of the border to the width you are comfortable with. You can have the border positioned outside of your circle or inside (if there isn’t much space left). I picked a width of 10 but you might want something different.

5a

6a

7a

Step 8:  Preparing the icon

Open up one of your icons by selecting File > Open and selecting the document. I suggest you resize it by selecting Image > Image Size and making the dimensions of the icon smaller than your Inner Circle. I chose 160 x 160 but don’t stress if it isn’t perfect as you can adjust it later.

Press W to select the Quick Selection tool, click on the middle of the Twitter bird to select it and then press Ctrl+C to copy it.

Step 9:  Placing the icon

Now you have copied the Twitter icon, you need to place it. Select the document we have been working on and click on the layer labelled Icon. Press Ctrl+V to place the Twitter icon. If it looks too big, press Ctrl+T to access the Transform tool. You can then drag the edges in until you get the size you want. If it isn’t placed where you want, then use your cursor to move it into place.

Step 10: Getting the right colour

As you can see our bird is black but we want it to match the colour of the border. Select Layer > Layer Style > Color Overlay and change the colour. You want the Opacity to be 100% so the black doesn’t bleed through.

Step 11: Saving

At this point, save your Photoshop document as a psd! Seriously, I’m not kidding. You don’t want to have to go through all of this drama again from scratch in order to do your other icons. Done? Phew. Okay, now you can save your document again – this time as a png so the background remains transparent.

Step 12: Rinse and repeat

Click the eye button next to the Icon layer and this will make it invisible. You can see in the image that I have renamed the Icon layer as Twitter Icon because I am going to do all of my icons in the one Photoshop document. This leaves you with the Outer and Inner Circle layers visible which you need to make all of your other icons. Add a new layer and name it Facebook (or whatever other icon you want). Follow steps 8-11 again. Don’t forget to save your document.

Step 13: Resizing your social media icons

Your social media icons are now almost ready but they are still way too big for your site. Open up each one and resize it by selecting Image > Image Size. I chose 32 x 32 for my site but you might want them a little larger. Don’t forget to make sure they are saved as png.

Step 14: Individual icons or grouped?

If you intend to upload your icons individually then you are pretty much done. I’d host the images on your own website and not a third-party one such as Photobucket as if that site goes down, you temporarily lose all your pretty icons.

If you want to group your icons on one big canvas, then open a new document and make the width of the document slightly smaller than the width of your sidebar (or wherever you are going to place it). I’d still keep the background as transparent though. Copy and paste all your icons onto the canvas and arrange them neatly. Save the document as a png.

Now you need to map your image so that when people click on the icon, they actually go somewhere. You might like to try Image-Maps.

You need to type in the base URL of your image and then click Start Mapping Your Image.

On the right-hand size, select the Rectangle button which will allow you to drag a rectangle shape around your first icon. You need to enter the link (this is where you want people to end up when they click somewhere within the rectangle shape). You can also add a title if you want. Do this for all images.

You also need to enter the Image URL (where you want your edited image to be kept). When you are done, click Get Your Code. Just remember that you cannot host your image on the servers of Image-Maps.

Tags:

2 responses to “Not So Tricky: Creating Basic Social Media Icons with a Border

    • I think if I had come across GIMP before I ever encountered Photoshop then the way it is organised would feel natural but as it is, everything just is in the wrong place 😉 I suspect more and more people will be switching to it now that Photoshop has gone for the monthly subscription.

Leave a Reply

CommentLuv badge