Mary Shaw here again, and I’m going to walk you through making custom blog buttons using Melissa Esplin’s 2-in-1 blog kit. For this tutorial, I am using Adobe Photoshop CS4, but I’m sure the steps will be similar if you use Photoshop Elements.
My first tutorial walked you through making a custom blog header using Melissa’s kit. Now, I’m going to walk you through making matching blog buttons. Melissa’s kit comes with two sets of 4 buttons each: links, archive, categories, and about. But my blog has a feature called “Followers” and there’s no matching buttons. I’m particular about making my web site look consistent, and I don’t have Melissa’s font, so I’m going to make all the buttons I need so the fonts all match. Melissa’s blog kit also includes a blank button, and that’s the one I will use to make my buttons.
I’m using Pea Anna Banana. I also used it in the custom header I made earlier. Now my blog will be all matchy!
First, I open the file in photoshop and then save it as a photoshop file (.psd). One single photoshop file can handle all of the buttons.
Next, I create a new text layer. I simply click on the Text Tool, click inside the button, and start typing “Followers.”
Then, I highlight the text, change the the font to “Pea Anna-Banana,” and change the font size to “24 pt.” I use the Move Tool to center the text nicely, and I have a button!
I also want to make a button called “Archives.” I can use the same .psd file for both buttons using the little “eye” icon in the Layers Palette. If you click they eye and the eye disappears, the layer disappears. Click it again, and the layer reappears. So, I click the “Archives” text layer once to make the layer disappear. Then I create the text layer for “Archives” just like I did for “Followers.” I repeat the process for “About.”
Now that I have three buttons in a .psd file, I have to make 3 buttons for the web. So I use my handy-dandy “Save for Web and Devices” option.
I use the eye hide/show icon to show the first button. Then I go to “File” > Save for Web and Devices.” Just like the header, these buttons need to be saved at the lowest resolution possible for a good icon. They look great as 32-color .gif files so I use that file type.
I repeat the process and hide/show one button at a time until I save every button. Then they are all ready to be uploaded to my blog.
I hope this tutorial helped inspire you to get creative with your blog buttons. Remember, you can get Melissa Esplin’s Psychedelic Circus blog kit in our store. Happy blogging!
Watch for my next tutorial – I’m going to show you how to install your custom graphics onto Blogger (the blogging tool used in Blogspot blogs).
Related posts
Tags: Blogs, Mary Shaw, Melissa Esplin, Photoshop Tutorial, Tutorials
