Wednesday, October 30, 2013

Social Icons Tutorial

I had a link in my credits section to another blogger who had a great tutorial on how to make social icons on your site.  (like the ones on my sidebar)  Unfortunately they have since taken the post down. So, I have decided I will just make a tutorial here.  Since my knowledge of coding is fairly limited I'm confident I can keep it simple enough for anyone to understand.  :)  

Images can be clicked to be enlarged.

Part One-

(you can skip to part two if you have already found or made social icons and just need to know how to do the codes!)

Find social icons!  You can find free social icons on many sites.  I got the ones I used in my sidebar from here.

(Note- Please be sure to credit the people you use social icons from.  It takes a lot of work to make things like this and it's pretty awesome people are willing to offer them for free.)  

If you have the fortitude to make your own social media icons I will give you some quick tips on how to best do that.  I will be using CS5 for the purpose of this demonstration but it should work in a similar fashion with any version of photoshop and probably other similar programs such as Gimp or

1. Locate social network icon pngs.  I found some here.

2. Once you've located them save and extract (in this case they're in a zipped file).  

3. Open with your photo editing program of choice. 

4. Make a new file and go to layer > new > layer 

Then you will have this.

5. Staying on the new layer use the custom shapes tool to make a shape.

6.  Next you want to drag the vector image of the social icon on top of the other image.

7.  This particular set of vectors comes in black only.  If you want to change it to white you can do the following.  While the layer the "f" is on is selected click image > adjustments > brightness/contrast.  

Slide both sliders to "100" and viola, you've got a white "f".

8. Unless you want to do anything else fancy to it like textures, gradients, or embossing you're finished and may proceed to the the next step!  If not here's how you can do those things.

To make gradients, textures, or embossing you need to right click the layer you want to change and click blending options.  Here you can change most anything you like.  Here are some examples.

Using bevel and emboss on both layers separately.

Using a gradient overlay on the heart shape layer only.

Using a pattern overlay on the heart layer only.  Texture from Lost and Taken.

Using stroke on each layer separately.  

The possibilities are pretty endless these are just some suggestions of variations you can try with your own stuff.  :)

Now on to the next step!

9. You want to merge the first two layers together and delete the background.  Right click the top layer and click merge down.  

Once you've done that right click the background and click delete layer.

10.  Save the image as a .png.  This part is important because if you do not save it as a .png it will not have a transparent background and will have a white background when you upload it to another site for use.  

Part Two-

1.  You need to upload your images someplace so you can have a url to use.  Some people use image hosting sites like imageshack.  Personally I just used my tumblr and set the post to private so no one but me could see it. 

2.  Now to the code!

<a href="url of where you want the social icon to lead to goes here"target="_blank" ><img src="url of your image you're using for your social icon goes here" height="48" width="48" /></a>

Height and width determine how many pixels tall and wide your image shows up as.  You will probably want to play with it a bit to find a size that works best for your site.  

To get the url of the image you want to use for the icon you need to go to the site where you uploaded your images and right click the particular image you want to use.  After you right click scroll down and click copy image url.

3. How to use this on blogger- 

Go to the layout tab.  Once you're there you will see this. 

Click add a gadget. 

You will want to use the html/java script gadget.

Now all you have to do is copy and paste the code and add in your site and image urls and pick a title.  Then be sure to click save and click save arrangement in the upper right corner of the layout tab and you're done!  :D  

I have also successfully used this code on tumblr for my "I sell on" badges.  Which can be seen here.  All I did was use the same exact code and put it in the description box.  :)

I have not used this code on any other sites but I assume it will work on any site that allows you to add your own html codes.  

I hope this is helpful and easy to understand.  If it is not please feel free to ask any questions.  


No comments:

Post a Comment