Blog design & html tips - How to make a blog button
April 1, 2012
My last html-help post was quite a hit so I am planning to keep doing this series until I run out of ideas. If anyone has any suggestions on things they'd like to see a tutorial for, please leave a comment!
Today i'm going to show you how to make a blog button! Its quite simple and I usually make mine in Photoshop, but i'm aware that not everyone will have it, so after searching the web I found a free alternative. Well, actually, I found Picnik which is shutting down this month...then I found a newer/better tool, woohoo!
♥ Firstly you will need to decide if you want to create your button with a photograph, or if you would prefer a text-only button. If you want to use text only, I created a blank base which you can download here (just right click --> save as, on the blank white image)
♥ Next, go to the website we will use to create the button --> http://www.picmonkey.com
♥ Click on the "edit your photo" banner and choose the photo (or the blank button if you want to use that instead) to upload to their website.
♥ I chose to use a photograph - don't worry if its super big we'll fix that later.
♥ From the menu on the left side of the screen, click the first icon "basic edits". Then we will be choosing the crop option. How much you decide to crop the image depends on how you want your banner to look, some people prefer square buttons but I like mine to be rectangular. Decide on how you are going to crop it and click apply. (if you are using the blank white button, skip this step as I already cropped and resized it to a suitable size!)
♥ Time to add the text! Click the "P" icon on the menu (fourth from the top) Here you are given a list of fonts and an empty box to write your text into. Play around with a couple of different fonts, sizes and colors until you find one that suits. (I apologize that I didn't screen cap this part, but its pretty easy so I didn't think I needed to! The font I used for my button pictured above was Sue Ellen Francisco)
♥ This next step is completely optional, but if you think your button looks a little too minimal, you can add a cute little shape to jazz it up a bit! To add one to your button, click the "overlays" icon which is the fifth one down. Choose your shape, color and adjust the height to suit! I would recommend keeping these to a minimum if your button has a photograph. My button looked a little too bare on the bottom so I added a butterfly in a very light coral color, so it didn't distract the eye too much.
♥ Now you're almost finished! We need to resize the button by clicking the first icon, basic edits, again. Click resize and set your width. I usually keep my blog buttons between 180-220. Today I set mine to 200px wide. Make sure the "keep proportions" box is ticked then click apply.
♥ Congrats, you're all done and have made a button for your blog! Just click the save button at the bottom to save the button to your computer.
♥ To post your button somewhere on the web just upload it to an image host like http://imgur.com. Copy the "direct link" URL and from the following code, replace the IMGURL with the direct link to your image. Also replace BLOGURL with your blog/website URL.
♥ If you want to place your button in your sidebar and include a code for your readers to share it (like I have in my sidebar) then just use the following code, replace IMGURL/BLOGURL as above and remove all *'s from the code.
♥ I hope this wasn't too hard to follow...happy button making!