(Video Tutorial) How to Create a Simple Banner for Your Blog Using Photoshop

BlogHer Original Post

Now that we know how to change our banners in both Wordpress.com and Blogger.com, it would be nice to have something to change it with! This week, I'm going to show you how to create a custom banner for your blog. This technique applies regardless of the blog platform, so feel free to create banners for Movable Type, Wordpress, Typepad... whatever blows your dress up.

For the purpose of this example, I'll be using Photoshop. If you don't have Photoshop, you can use another graphics editor, as the platforms tend to be somewhat similar and hopefully you are able to learn enough here to apply the steps to your software.

I've included this screencast tutorial, in two parts, to walk you through it in case you prefer to see it first hand. But the text how-to below is the same information.

Getting Started

First, we'll need to create a new file. From within Photoshop, click File > New. A pop-up window will appear which allows you to set the paramaters for your file.

  • Name the file something memorable. I used CustomBanner.
  • Then check the Preset. Make sure it's set to Custom.
  • We'll want to set the dimensions of the file. For this tutorial, let's make them the same as Wordpress.com - 740px wide by 192px tall.
  • Make sure the Resolution is set to 72 pixels/inch.
  • The Color settings should be RGB.
  • The Background should be Transparent.
  • Click save.

Now we have our file to work with. At this point, I recommend saving, so click File > Save and save the file with a .psd extension to your desktop or folder of your choice.

So now we have our blank canvas to work with, should we add the background color or an image first? Assuming you have an image you'd like to include, I'd start with image first, as it's colors can set the tone for the rest of your banner design.

  • Choose File > Open and select your photo from your desktop or folder. I've chosen this picture of a Cosmo, because... well, I like vodka, but you can use whatever you want. :)
  • Now that we have the picture open in Photoshop, we'll want to copy it and paste it into our banner file.
  • Click in the photo, then click the dashed box Marquee tool over the left toolbar.
  • Then use CTRL+A to select all (or Command+A if you're on a Mac). You should see your photo with a moving dashed border around it. This indicates you've selected the whole image.
  • Click CTRL+C to copy (or Command+C) and then click back to your banner file.
  • On the right of your Photoshop screen, there should be an area called the Layers palette. If it's collapsed, click the icon that looks like little stacked papers and it should appear. (This is for CS4.) You'll see you already have one layer already for your open document. This is the background layer.
  • Click the little paper icon on the bottom right and add a new layer on top of your original background layer. When you are clicked on this layer, click CTRL+V (or Command+V) to paste the previously copied photo into that layer. Now you should see 2 layers, one on top with a photo in it, one on the bottom, which is empty.

Now we need to position the image where we want. For this particular image, I'd say aligned right would be good and still give us plenty of room to add text.

Clicking on the Arrow tool on the left toolbar, make sure you're in the photo layer, then click the image and drag it where you'd like it displayed on the banner.

You might want to click 'save' here, if you are concerned about losing your work.

Now that we have our image positioned, we can see that this blue color will probably make the most reasonable choice for the background color.

To Add a Background Color

  • Click the background layer and make sure you're not on the photo layer. Then using the eyedropper tool on the left, click on the very, very left edge of the photo, where you'll want your background color to blend in. You don't have to be exact, but as close as you can is good. When you click once, you'll see that the little boxes on the left show the color you selected.
  • Then, ensuring you're still on the background layer, click the paint bucket tool on the left and then click once into the background layer. It should fill the whole background with the blue color.

Now, this should be pretty darn close to the background color on your photo, but if it's not just re-sample using the eyedropper and try again.

When it's as close as you like, stop and if there's still a minor seam where the photo ends and your background begins, click into the Photo layer, select the eraser icon tool on the left and then go to the top and choose a brush with a soft edge. Then, making sure you're on the Photo layer, use the tool to erase the offending seam until it's blended.

I recommend saving here.

Now to add some text!

Going back to the layers box on the right, click the icon to add a new layer. It can be over or under the photo layer, depending on what kind of effect you want. For the purposes of this tutorial, we'll put it over. Then let's choose a font.

  • Click on the new layer you just created, then click the "T" icon (the text tool) on the toolbar on the left.
  • Then go to the top and pick your font. For this, we'll use Chowderhead by Font Diner.
  • Choose your font size and then select your font color. I chose white.
  • Then making sure you're still on the new layer you just created, click into the banner where you want your text to appear.
  • Then start typing, entering the name of your blog or the title of your site.
  • When you're finished, check out the positioning. If it's not where you want it, click the Arrow tool on the top left tool bar. Then click and drag the text where you want it. You can also use the arrows on your keyboard.
  • Once it's where you want, I recommend saving.

Saving the File for the Web

OK! Your banner is basically finished. But now you'll need to save it out as a jpg (or a gif or a png, depending on what your particular platform requires, but both Blogger and Wordpress.com can accept any of those). For this tutorial, we'll save it as a jpg.

  • Click File > Save for Web.
  • A window should appear showing you a bunch of options. I usually choose JPG from the drop down on the top right, then "very high". If you go lower than "Very high", it can look a bit pixelated and if you go higher, the file size might be too big for your blog platform and could take longer to load. So "very high" is usually a safe setting.
  • Then click "Save". Save to your desktop or the folder of your choice.

That's it! Now you can use one of the previous tutorials about adding your new and fabulous banner to your Blogger or Wordpress.com blog template.

This should give you some basic skills in Photoshop to spark your creativity and become a banner-making maniac.

As always, happy blogging... and in this case, happy designing! xo


Joelle Reeder is the brunette half of the blog and website design duo, The Moxie Girls™ of Moxie Design Studios™. She is the co-author of The IT Girl's Guide to Blogging with Moxie and has designed hundreds of blogs since 2003. She also blogs at tenth-muse.com and makes a tasty martini.

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.