Before I started designing blogs, I had never so much as designed a simple button. I had never designed ANYTHING! Really, mine is the story of an unlikely designer; I should write a post about that sometime!
But designing a button is pretty simple to do if you have a graphics program. I use Adobe Illustrator for just about everything, but I know most people don’t own Illustrator, and even fewer know how to use it. If you have Photoshop or Photoshop Elements, those will work just fine, and there are free programs such as Gimp, if you want to learn but don’t care to shell out the big bucks. (Or any bucks.)
1. Create Your Canvas
Start a new document. A typical size is 150×150 pixels, but you can make it whatever size you like.
2. Add Text
Decide what you want it to say, and keep it short and sweet so that it is legible. Create a text box and type your text inside.
Choose a pretty font. Then select a color. Or you may wait to do that until you have your graphic and know what colors you’re using. In my case, I’m matching it to my blog.
3. Pretty It Up
Select or create an image. Use a photo or an illustration; it doesn’t matter. Of course it can be all text, but I usually use an image of some sort. Place the image in the box. Then fool with the words and the image until you like the way it looks.
4. Give It the Finishing Touch
If you desire, you can create a border around the button and give it a background color. I created a dotted border and used a gradient as the background, to add dimension and give it a softer look. Then you can just reorder your layers so that everything shows the way you want it to. So here’s my final product:
1. Work with good quality graphics so they don’t get fuzzy or pixelated. I prefer to work with vector graphics because they never get fuzzy.
2. Don’t go crazy with fonts; use 2 at the most. If you use 2, there should be some contrast. You don’t want two similar fonts. Make one scripty and one typed; make one thick and bold and one more delicate; make one italicized and the other plain — you get the idea. I subscribe to the KISS philosophy of design — Keep It Simple, Silly! 🙂
3. You can buy images at iStockphoto.com. That is where I buy 99.9% of my images for DCR Design.
Feel free to ask questions in the comments! I’ll do my best to answer them.
UPDATE: To link your button to your site, you just need to use a code like this:
<a href=”http://www.jolynneshane.com”><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/SMB.gif”></a>
Or here is a generic example:
<a href=”YOUR BLOG URL”><img src=”YOUR IMAGE URL”></a>
To create the box under the button with the code, see my post How To Create A Blog Button Code.