Bloggy Help:

 photo socialmedia_zps413c1040.png  photo helpdeskbutton_zpsb16b6c42.png  photo instagram_zps73b3c07a.png  photo header_zps97df3d3e.png  photo needamakeover_zps6d19d8a9.png

How To Make A Pretty Button For Your Blog (with code)

PART ONE

Okay my dears...there have been so many requests for a new tutorial I decided it was time to jump back in and create one for you!

Many of you want to know how to make a button for your blog and not pay someone to do it. We wrote a tutorial a while ago using Picnik (whodat?), but we haven't written one in an updated format.

Now your wish is my command!

Get Prepped

I'm going to give you some steps using PicMonkey and Photoshop Elements. If you're a designer reading this you may laugh at me. I am using Elements 6. I tried to update to the latest version 11, but despised it. Blame me for not liking any more change...  If you'd like to try out PS Elements 11, they offer a 30 day free trial. If you'd like to use Elements 6 it is available on Amazon for under $25 (if you decide to purchase, just follow instructions for installing). And then, if you prefer to stay FREE, you can just improvise using PicMonkey. I started using Elements about 5 years ago and it works great for creating bloggy headers and buttons and for using all those lovely free fonts out there!



Finding Cute Elements

When I first started out doing blog design I searched for free graphic elements...they are so much more accessible than they were five years ago. You can search Pinterest or Google and come up with hundreds of freebies. Most are free for personal use, but not for something you're going to resell. I also bought elements of design on Etsy.

What should you look/search for? Good question. When you're doing a search, look for any of the following: graphic elements with transparent backgrounds, png, digital scrapbook elements, photoshop elements, digital art, clip art etc.
It should say - These clip art will come to you as individual png files with transparent backgrounds.
I started off with some very affordable purchases, under $5. If you know exactly what you're looking for then search for that also...especially if you want it to match your blog's design.

Finding Fonts

Tons and tons of fonts are available for FREE. Dafont.com is a great resource. But you can always Google "free fonts" and see what comes up. Pinterest has really fed my font love too!


Using Your Graphic Elements

For ease of use, I save all my design stuff in a special folder on my desktop. As I collect more images I create new folders and put them in the "design" folder. It's best to keep everything organized from the get go so you can find everything quickly.

If you're using PicMonkey to create a button you will have to upload each image as you want to use it. Remember, PM (PicMonkey) doesn't store anything for you...you have to finish your design and save it your computer or you will lose all your work.

If you use PS Elements 6, you just open a new file when you need it and it stays open until you close it.

Anatomy of a Blog Button

A button is simply a small graphic that implements your blog name (or other text) and an eye-catching image. Buttons can come in many sizes. One of the most used sizes is 150x150 pixels. This is as about as small as you want to get. Personally I think size really matters here (ahem!), so I make my buttons bigger, anywhere from 200x200 up to 300x250.
Of course, it's nice to offer a smaller version for those blogs who only accept the 150x150.
Much of your size decisions will come from the width of your sidebar...you want it to fit perfectly.

Color and Fonts - should match your blog theme and design. Or at least complement it. Remember also that you can have more than one button.

Size - Last month I created several "blank" button canvases you can use to get started in PicMonkey or Elements without have to create from scratch.  To get started, I would use the 300x300 and save it to my computer...this will give you a larger surface to work with. You can resize to 150x150 when you are finished.

Getting Started

You should have everything you need to make a glorious button:

  • PicMonkey or Elements
  • Cute Fonts
  • Adorable Graphics (free or purchased)
  • Photos you may want to try to use in your design
  • Blank canvas
Stay Tuned

Now that you've done all your research and gathering of resources, you are prepped to get creative and make your own blog button. My next post will contain the step by step instructions to create a basic button...and you can follow along too!
Click here to jump over to Part Two

9 comments:

  1. HallelujeR!! I've been searching high and low for this. Can't wait! Thank you for sharing.

    ReplyDelete
  2. AAAH CANT WAIT OMG I REALLY NEED A NEW BUTTON FOR MY BLOG UGH

    ReplyDelete
  3. Thank you so much, I need a button! The Blog Guidebook has been listed as a Blog of Inspiration on My Favorite Blogging Resources post. You can view it here: http://kraftycardsetc.blogspot.com/2013/05/my-favorite-blogging-resources.html

    Have a great day!
    Maria

    ReplyDelete
  4. Replies
    1. We're publishing part two this afternoon! If you need info on how to create code, check out this post: http://www.blogguidebook.com/2010/10/how-to-add-button-code-and-code-box-to.html

      Delete
  5. Is there any way that you could possibly give a list of safe sites to download elements and fonts from? That would be awesome. I'm going to start without elements and see how I do. I think this will take me a week, lol, because I want to do a few. I'll be sure to have you check them out when I'm done and tell me what you think!

    ReplyDelete
    Replies
    1. Carmen, I'm working on a list right now! Thanks for the reminder.

      Delete
  6. I did it! I did six of these things. I realized afterwards that I'd like to make them bigger, but doing that will be a breeze because with each new button that I made, I felt like I was getting better and better. Thanks for great posts to guide those of us who have no clue! I learned how to do my header from another site and you have no idea how many times I had to redo it in one night because I would save it after adding everything not realize the color was not matching my blog. Thanks again!

    ReplyDelete

Comments are how we stay connected as bloggers. Let us know how you feel and we'll return the favor...stay calm and blog on!!! And guess what? You'll never find Word Verification on our blog...it gets kind of annoying when you can't read what WV wants you to verify right?

Note: Only a member of this blog may post a comment.

Outbrain