- Share This Post
- 2
- submit
- 7
-
Sparkle (0)
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
