Today we're going over....
Are you pumped?
Let's do this.
**You can use any photo editing program but I believe Photoshop is the easiest - as well as the most convenient - tool when trying to make more than one blog button in the same format.
STEP 1: Getting Started
Open a new document in Photoshop.
I made the dimensions 500 px x 500 px with a transparent background.
We will change the image size before posting the image but this size is much easier to work with.
STEP 2: Create an Ellipse
Click on the ellipse tool and create an ellipse by pulling from the top corner to the bottom corner, forming a perfect circle. Be sure to hold down the Shift button while creating the circle for perfect measurements on all sides.
STEP 3 : Place an Image
File > Place
Choose the main image you would like to use for your button.
STEP 4 : Size / Adjust the Image
STEP 5 : Grab & Pull
Grab and pull the ellipse shape into the same layer as the placed image.
STEP 6 : Pioneer Woman Action
I use the "Seventies" action from the Pioneer Woman to add some vintage love on my blog button images. You can download her incredible group of Photoshop Actions here.
If your actions window doesn't appear, click Window > Actions. After you download the actions, click the action you'd like to use and hit the Play button.
STEP 7 : Erase Background
Click on the Background Eraser Tool.
Select the Shape layer (unlike the screenshot below - whoops!).
Erase AWAY!!
STEP 9 : Or Delete the Shape Entirely
I feel ridiculous after doing that step. You can delete the shape entirely and have the same outcome.
But erasing is just so much fun...
STEP 9 : Add Banner
Find a banner image online and download (or you can make your own).
File > Place the banner.
STEP 10 : Color Overlay
Pull up your color scheme in a different window so that you can still see the file you're working on AND the color palette.
Double click on your banner layer.
Click on Color Overlay.
Click on the color block to change the color of the banner.
STEP 11 : Change Banner Color
Click on the eyedropper tool.
Click a color of choice from your color palette with the eyedropper tool.
Click OK.
There's no need to copy the number. I'm not really sure why I put that there.
STEP 12 : Add Text
Click on the Type Tool.
Add text, change the size and have fun with font options.
STEP 13 : Align Layers
Maybe I don't know my way around PicMonkey enough yet, but this is a big reason I choose Photoshop over other photo editing programs.
Select the text and banner layers (hold down Command while clicking on the layers).
Click Align Horizontal Centers.
Boom.
No eyeballin' here.
**Now is the best time to save this document. We will use this document as our Blog Button Template.
File > Save As > "Blog Button Template"
Save as a Photoshop (.psd) file.
STEP 14 : Resize Image
Let's make this image the perfect size for your blog.
I like 200 px x 200 px for a toolbar size. You may want to go smaller though. Just make sure that the width and height are the same sizes.
Click OK.
File > Save As > "Blog Button {Image Name}"
For example, I saved my image as "Blog Button France".
Save as a .png file.
STEP 15 : Create More Buttons
Guess what!?
You don't have to start a new document in order to make more buttons.
Open your Blog Button Template again.
File > Place a new button image.
This image should be a layer in between the first image and action. Your Layers box should look a little something like this:
Pull the circle shape into the new image layer. Click the eye on the first image layer so that you won't be able to see that image any longer.
Hopefully you have the image sitting perfectly in the circle now.
Change the text in the banner.
File > Save As > "Blog Button {New Image Name}"
For example, I saved my image as "Blog Button Bungalow".
Save as a .png file.
Voila!
You just made two blog buttons.
Whoop whoop!
Now you have the ability to make as many as you'd like!!
Come back tomorrow to see how we will place the buttons onto our blog.
We hope you enjoyed this tutorial - and that is was super thorough and helpful!
We aren't professional designers by any means but I love playing around with our blog's appearance on a frequent basis. Please let us know if you have any questions and we will try our best to help!
