How To Create a Blog Button the Easy Way: A Picnik Alternative!

Woot, woot! Hands up and holler for Pic Monkey!

They stepped in and stepped up to fill the void that Picnik is leaving us with and I am psyched about what I've seen so far. Plus they are kinda sassy which is a lot of fun. They just might outshine their predecessor!

So to celebrate my 1 year Blogiversary (yes today it's been 1 year here with you, my lovely friends) I'm giving you a gift- a tutorial: How to Make a Blog Button the Easy-Peasy Way- with PicMonkey!

PicMonkey is easy to use and very intuitive. Let's get started.

Part I:
1. You need a blank jpeg file to upload to PicMonkey. You can download a blank file here.

2. Go to www.picmonkey.com and click on the box that says "Edit Your Photo."

3. Choose your blank jpeg file and upload it to PicMonkey.

4. On the left hand side, click on the overlays icon. It's the fifth icon down on the side.

5. Here's where you get a chance to play a bit. Scroll through the overlays and choose a sticker that you like to put on your white jpeg.

Let's go through some options.

Adding Graphics: 

• To add color, add a Geometric: Choose a square and stretch the shape to completely cover the white square. 

• Now change the color to suit your taste. 

• Add an Icon Graphic: take a stroll through all of the graphic options such as hearts, stars, sunglasses and butterflies. Click on one you like, then change the size and color until you are satisfied. 

• Keep in mind, if you are going to place text over the picture, you want to fade the picture and keep it light so you can easily read the words. 

• Add a Picture Overlay: at this time, you cannot add your own graphics or pictures as an overlay.  You could however, use your own picture instead of the white jpeg, as the background for your button. If so, I recommend fading your picture so the text is easier to read. See my example. 

If you simply added a Geometric shape and changed the color and are confident about your choices, click on the merge button (bottom left corner, next to the word SAVE, that has two squares and a down arrow.) This will merge the overlay to your jpeg so it won't move. Keep in mind, you can't change this unless you start over completely. It is super handy though when adding text and other overlays.  I definitely recommend it. 

At this point you can layer shapes or add text.  If you choose to add another shape, change the color and fade it into the background using the slider on the pop up window. Then merge the overlays using the button on the bottom left corner. 

This button has a circle overlay on top of the square overlay. The circle has been faded . 

If you opted to keep the white background of the original jpeg, follow the same steps as above to add a shape or graphic to your blog button. Keep in mind that you are placing text around or over your overlay.  

Once satisfied with the icon, merge the overlays again.

Add Text: 

Click on the P (text) icon on the left hand side of the screen. Type your text in the box, choose a font and click ADD. Using the pop up box on the right, resize, change the color, and position your text on your button.  Audition and play around with the fonts until you find one you like. 

I've found it adds more interest to combine fonts when making a blog button- it adds some zip. 

I do not recommend merging text as you go along. When you go to save your blog button some text will appear blurry if you have merged it. 

Add Borders: 

To add a border, click on the last icon on the left side of the screen. Choose Simple Edge. Play with the inner and outer border colors and widths until you are satisfied and click Apply. Note, once applied, it cannot be undone. 

Resize: 

• Click on the Basic Edit icon (top of the list on the left) and choose Resize. I like to have a 175 x 175 size for blog posts and a 125 x 125 for the sidebar.   125 x 125 is a standard blog button size. You can certainly change yours to anything you like. 
• Keep in mind the amount of text you place on your button.  The more text you add, the harder it is to read. 

Save: 

• To save, simply click on the word save at the bottom of the screen and save your new button to your computer. 
• At this time you cannot save to other applications such as Flickr, Photobucket or anything else. I hope this changes! 

Part II: Adding HTML Code Tutorial Right Here! 

Have fun creating and a big THANKS to the folks at PicMonkey. Overall I am really happy with what I see with PicMonkey, and I am thrilled to have an easy, intuitive, online editing program to use to replace Picnik. 

If you make a blog button with this tutorial, I would love to see it. You ought to upload it to my Flickr Group! 

xo, 

Jennifer