7.16.2013

{Revamp Your Blog} Custom Social Media Buttons


If you are new here- welcome! If you are returning you may have noticed that things are a little different around here. I gave the blog a facelift and redesigned the look of things. Today I am starting a new blog series called- Revamp your blog. I will be giving tips and trips to make your blog better than it's ever been- and for free! To start things off I will show you how to make custom social media buttons- like the ones that I made.


All you are going to need is your computer and any photo editing software- I used Photoshop for this tutorial




To start things off open Photoshop and select under the file menu- new. Under preset open the drop down box and find photo. Chose the 4x6 photo selection and press OK.


Once you have a new blank white photo decide what you want your button to look like- I will be making a water color button in this tutorial. Start by downloading watercolor brushes for Photoshop they can be found here. When you download your brushes open Photoshop and select the brush tool- click on the triangle that inside the circle and choose- load brushes and then just choose the water color brush file and you can now use then to make your media buttons!


Choose a watercolor brush that you like and then change the color to want is desired. Try and create a circle shape by alternating different brushes and different colors to get how you want it to look like.


I went online and search for social media icons and found one I liked here and in Photoshop I cropped out every icon except the one I was making (facebook) then using the magic wand tool I selected the "f" and then selected the select inverse option and deleted it. I ten just moved it over the water color spot and made it bigger using the free transform option under edit. Save.*** Must save as a PNG file! Very Important ***

Then I repeated that step for all of the other social media icons (all on a new photo sheet).  

Now you are going to want to upload all of the photos you saved up to a picture viewing site. I use Photobucket and totally recommend it because it really easy to navigate through.

  
If you want to you can crop some of the excess white that shows up on the buttons- it doesn't make a difference.

Now comes the important stuff!

In blogger go to the layout tab of your blog and in the side bar click on add a gadget. Scroll down until you find the HTML/Javascript selection. You can add a title if you want or just leave it blank. In the body of the text you want to use the following codes- 

For Email-

<center><a href="mailto:YOUR EMAIL ADDRESS"><img src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" alt="Email Me" /></a>

The direct URL of the button is located in Photobucket 


If you just right click in that rectangle it will copy it automatically. Then just paste it where the direct URL goes.


For Every Other Button-

<a title="Follow Me On Facebook" href="URL TO FACEBOOK PAGE"><img alt="Follow Me On Facebook" src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" border="0" /></a>

Use this formula for every other media button like facebook, twitter, instagram, etc. Get the URL the same way as above. **Where it says "Follow Me On Facebook" twice in the formula switch it out with the name of the program- "Follow Me On Twitter" "Follow Me On Instagram" whenever you make those button codes.

Also you can change the size of the buttons! Whether you want them to be really large or really small you can change it by typing in the size that you ant it to be here.

 height="50" width="50" border="0" /></a>

***For circle icons you want to make sure that the numbers are the same for both height and width so that it does not throw off the look of the number. Depending on the way you want it to look, you may want to play around with sizes. 

For my social media buttons- I used 60 for the height but 300 for the width because mine are rectangle shape. (flag) Like I said just play around to see what you like.

Also if you want the buttons to be centered you can put <center> at the beginning of the code and </center> at the end like this-

<center><a title="Follow Me On Facebook" href="URL TO FACEBOOK PAGE"><img alt="Follow Me On Facebook" src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" border="0" /></a></center>


If you don't have the time to make custom one you can download all of the different buttons that I make on this post (As I make more I will update the post!)


Pink Water Colors



bloglovin' || Email || tumblr || pinterest || twitter || Etsy || instagram|| Google+|| You Tube || facebook



Steel Grey Flags




tumblr || twitter || email || bloglovin' || pinterest || instagram || youtube || facebook || google+ || etsy




Black Circles




bloglovin' || etsy || facebook || google+ || instagram || email || pinterest || tumblr || twitter || youtube



Arrows



















To Change Button Color


If you want a custom color for any of the buttons above just download what shape you want to your computer and open picmonkey. Select edit a photo and upload a blank white photo- no color (unless you want the color of the icons to change). Then select overlays and click your own. Open the downloaded button and move the color sliders until you have the color of your choice- then just save the file and do the same for the rest of the icons you need.
                                                                                                                                                        

Well that's all that I have. Hopefully you found this tutorial helpful to revamp your blog! Feel Free to use the ones I have already made! Also if you don't have time to create your own but would really like custom ones just email me and tell me want you want and I can see what I can do! If you have any questions don't hesitate to comment or email.

7.15.2013

Cereal Box Letters

In my last post you saw that I made these letters out of cereal boxes that I found in my pantry- here's a simple tutorial to make these by yourself!





You'll Need
  • A Cereal Box
  • Hot Glue Gun
  • Scissors 
  • Paint
  • Painters Tape (for the chevron)
  • Toothpick (for the dotted sides)



1. Print out a guide- that you will use to trace on to your cereal box. Make it a desired font and size- I used Century Gothic in size 800- but its up to you if you want the letter to be larger or smaller. Then just cut it out when its printed.

2. Cut your cereal box- so that it is completely flat and make sure that the sides of the cereal box are still in tack. 




3. Trace your cut out letter- onto the OUTSIDE of the cereal box (where its printed with words). Make sure that when you do this you are tracing the letter backwards or you will run into trouble later- you want to do this twice- I did not take a picture of this step but the way you trace it should look something like this-

{You need one K going the right way and one K going backwards}
4. Cut out the letters

5. Using the leftover cereal box- cut equal height cardboard pieces that match up with the sides of letter.  After you make all of the sides you can hot glue them into the right places.





6. Once all pieces are glued on you can carefully glue on the top part of the letter- but be sure to work quickly.



7. Paint your letter however you want. I of course did mine with a chevron pattern on the front using painters tape and on the sides I used three different colors to create a almost paint splattered effect using different sized dots made by toothpicks!


{To show off the sides}

Additional Comments-

  • Since I had two letters - I glued the 8 to the K at a slant 
  • I left the back white and wrote a happy birthday note to the birthday girl!
  • The 8 has a flat bottom so that it stands on its own- just flatten any curved lines on the bottom- U, S, C, B, etc.
  • You can use this it really make anything- letters, shapes, etc. Perfect for a large number for a birthday party decoration
  • Originally I was going to tie balloons to this- but never got a chance to pick balloons up from the store.

Well that's about it- I tried to make this easy to follow but I know it may sound a little confusing- if you have any questions you can just comment of shoot me an email!
Pin It button on image hover