Tutorial Time: On Making Sponsor Buttons

Hey guys! I'm here to give you a quick tutorial on making pretty blog buttons. "Now Annie," you'd be totally qualified to say, "you've only been blogging for a few months, what do you know about that?" Well, I went to a technical high school where I learned a bit about web design over the course of my 3 1/2 year long Internet Technology education and, much more importantly, I coded and designed my own MySpace page. So I know a bit about web design, and I can click my way around Photoshop pretty well.

This is a tutorial for the absolute beginner, just to give you a sense of what you can do with Photoshop and how you can make your buttons the most aesthetically pleasing given whatever size limitations you have. I'll be working with CS5.1.

Each blog has its own designated size for ads, and, unfortunately for you, they won't usually overlap. It's not the bloggers' fault: every layout looks different, and everybody accepts a different number of sponsors into their roundup. It's important to figure out what blogs you'd like to sponsor in the upcoming month and figure out what their dimensions are before the day of - this way you'll have time to plan what you want your button to look like! For the purposes of this tutorial, we're going to start with 250x110 - this is the size of the ads on Katherine's blog Of Corgis & Cocktails, where I currently have an ad running :).

So click File>New, and type in your dimensions. If your Photoshop has it set to inches, just change it to pixels and make your life easier.

Cool. You can make your background transparent if you'd like, but it doesn't matter much for the purposes of a blog button. We can play with transparency later.

Now you have a little white box just waiting to be filled up with a happy smiling photo of you (or, yknow, something else. It's nice to get your smiling mug in there, it gives people an idea of what happy individual they're going to see when they enter your blog!)

Now we're going to click File>Place, and dance on through our photo library.

I'm going to pick a photo from this day I wore a polka dot dress, because it was a sweet outfit and my hair wasn't being blown all around my face that day. I would suggest picking a picture that's very bright and eye-catching. Many of my pictures are because my hair is the color of a fire hydrant, but you may not have this special advantage. Keep this in mind.

So now, the picture is stupid small. It's fine. On your toolbar, click the Move Tool, and make sure the box up at the top that says "Show Transform Clouds" is checked (it usually isn't). I drew you some helpful arrows. Then, you're just going to click a corner of the photo while holding the shift key (this prevents it from distorting) and drag it until it gets to the right size (this can be, as in the case of this picture, bigger than the canvas you're working with - because I only want the button to show from my neck up).

OK, so now we have a rectangle that looks like this:

Progress! Now, I don't like how dull the colors are in this photo, because I haven't really edited it yet. I'm going to tweak it a bit before I move forward. I think I will bump up the contrast to make me stand out more against the trees:

(Annnnd I didn't minimize this window and took a screenshot. Blogception!)

But it's still not colorful enough for me, so I went into the Vibrance tab (still in the Adjustments menu) and cranked up the vibrance and saturation.

Perfect! You could stop traffic with that hair. This might be a little too bright for you, and that's totally OK. I tend to go overboard, because my eyes go straight to the bright colors in others' blogrolls. And um, have you seen my theme? I have a bit of a thing for the bright and obnoxious. But if you're more into the pastels or the vintage-y hues, feel free to turn your saturation down. Saturation cranked down and contrast cranked up kind of looks like the Brannan filter on Instagram, if that's your thing.

But we're going to go back to retina-burning red, because that's where I'm at, ya dig? Now we've got to throw the blog name up on there. This is a nice picture because it follows the rule of thirds, so I have 2/3 of a rectangle's worth of space to put my super long blog name on. It helps to have everything on your blog in one or two signature fonts, so it all looks cohesive. 1001fonts.com and dafont.com are good resources if you're looking for something fun and original. Here, you'll see "Skinny" and "High Fiber." Let's try High Fiber:

That's pretty impossible to read. "Skinny" isn't much better. We have a few solutions here. I could make it a little whimsical by throwing a shape in there:

(We don't need to talk about my Tangled desktop background. I mean, unless you want to)

I decided to channel my inner Bob Ross and put a happy little cloud in there, changing my font from white to black and resizing it a bit so it would show up. If at this point in the tutorial your Photoshop crashes and seizes up your entire Mac, you and I have something in common. Revel in our connection.

A little too cartoony for you? Let's try this:

I inverted the color of the cloud and text, and made the cloud a little transparent-er. Edgy!

In your layer toolbar, when you click on a layer, a box at the top says "opacity." You can change the number of that to whatever suits your needs. You can also double click on the box to the left of the shape to change its color.

Anyway, I like the white cloud best. I bumped it down to 90% opacity. Let's see the finished product!

Neat!

If you aren't much of a fun shapes person, you can try a semi-transparent rectangle like I did for Room 334:

Sometimes colors look better than black & white...it all depends on your aesthetics.

One more thing! When you save your masterpiece, I suggest saving a PSD first, then a PNG. A PSD will save all your layers in case you want to go back and edit or resize something later, and a PNG squashes everything together - but that's what you submit to the blog of your choice.

My apologies if this was a bit basic for you - I saw some bloggers wondering about it and figured I'd share the bit of knowledge I have. I know my explanations can be confusing, too, so if you need clarification, don't hesitate to let me know.

If you end up using something I talked about here, I'd love to see your finished product! Happy crafting.