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 Paint.net.

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.  

  

The Lies Perfectionism Tells You

I picked up a copy of psychology today a couple weeks ago because it had an article that piqued my interest.  The cover article was titled, When Virtue Becomes Vice (you can read the whole article online).  Initially I thought, okay this is going to be something dumb about how being nice is overrated etc.  I was pleasantly surprised to see that's not what it was about at all.  

One particular part of the article really struck a chord with me.  The flipside of being a perfectionist is nothing will ever be good enough.  You will never be happy with your work.  You will also likely become a huge procrastinator.  

The danger in perfectionism is that it's something we see as a virtue.  "Oh, they're a perfectionist so they will strive harder to better themselves."  When we hear the word perfectionist we typically think things like, hard worker, good work, excellence.  

The truth of the matter is being a perfectionist is essentially shooting yourself in the foot.  This is something I've had to learn the hard way.  I always felt like being a perfectionist when it came to myself and my work was a good thing.  It meant I wanted perfection.  The problem lies in the truth that no one is perfect.  I find myself putting things off and being overwhelmed by them more often than not because I get hung up on being "perfect".  If I can't do it perfectly then I don't want to do it.  If the process doesn't go smoothly then it really upsets me.  

An excellent point brought up in the article is how in the end it does not matter if the process is perfect.  What matters most is the result of the process.
Perfectionism is a trap.  You wind yourself up when the process or result isn't perfect even if it's still wonderful.  

A prime example of this was my initial struggle with figuring out how to do clay transfers.  

Pictured first real success after about ten or so failures

It took me a lot of tries before I got a process down that worked.  It is especially frustrating with limited energy and chronic pain.  When you have a very finite amount of energy it's deeply frustrating to feel like it was wasted.  Learning the lesson that failures lead to understanding and success has been a really important lesson for me.  

Pictured several failures 

I asked the advice of a couple of people and got some answers that were helpful.  I usually have a rough time asking for help or accepting constructive criticism.  I finally set it aside for this project though.  I got some advice that helped me improve my process and finally get some consistent success! 

   

Success!  :D

I learned a lot from this particular project.  That while failure is indeed frustrating I can't let it stop me from trying again.  No one ever starts off perfect with anything.  We start with scribbles an work our way up.  Being kind to others comes easy for me but being kind to myself has always been harder.  My new phrase I repeat to myself whenever I find myself feeling down about my work or wanting to procrastinate is, "Strive for excellence not perfection."  I have also had to learn that if I push myself too hard and get too worn out my quality goes down the drain.  I've had to give myself permission to do things in smaller batches so I don't sacrifice the quality and that's okay.  

Process pics!  -  

     

 

                                                             

                                                                       FINAL!  :D

I still struggle a lot.  There are still times I get very down on myself.  This is an important lesson so I'm going to keep going.  Hope you enjoyed this post!  <3  :D