Creating Custom Banners for websites and blogs can really add pizzazz to your marketing efforts. Whether you are building a masterfully-consistent image for your business or differentiating yourself from your competition, getting eyeballs on your product and site is what web marketing and blogging are all about.
Daring or conservative, franchise image or independent logo, here is how you can create a custom website or blogsite banner in 3 easy steps.
Step 1: The Shape of Things to Come - You need to know the width and height dimensions, usually in pixels, that your site uses for banners. Most banners are about 900 pixels wide, but this is just a guideline. For example, Google Blogger banners are in the 900 px neighborhood, but Constant Contact uses a 600 pixel template. ActiveRain recommends 960x134 for blogs created on their site, so that is the dimension I’ll use for this 1-2-3 Guide.
Step 2: A Great Picture Is Worth 1,000 Views – In this step, we select and then re-size your image. You don’t have to spend a lot of cha-ching to get a fantastic banner background.
I try to use my own photos where I can, but there are lots of great sites to explore for free and nearly-free images that would be awesome for your Custom Banner. When selecting a photo, keep in mind that the end result will be 960x134…or roughly a rectangle that is 7 times wider than it is tall. Choose an image that “fits” this type of wide shot. We are going to do some stretching and shaping to get the exact size, so photos of faces and “strictly defined” images that don’t lend themselves to stretching, aren’t great choices.
An alternative is to use an image for just a portion of your banner and have a solid color for the remainder. Certainly an option and you could type your messaging and contact information into the sections of the banner that are solid. Go find an image that you love (or at least really like), save it to your computer and come back to learn how to resize it.
Photo sites to check out include: Google’s Picasa, Yahoo’s Flickr, PhotoBucket, PhotoShop Express, and WikiMedia
A word on image licensing: If you don’t own the image or have permission from the owner to use it, move on. On sites like Google’s image search or Flickr, select “Advanced Search” under the standard search box. Select either “Creative Commons licensing” or “labeled for reuse”. Some photo owners will allow non-commercial use of their images at no charge; just provide an attribution for the owner and you’re all set.
Re-sizing the photo: We need a photo image editor for this step. Remember, our image needs to be exactly 960x134. I’ve used different editors, but I’ll use Picnik Photo Editor for this post. You can access Picnik from within Google’s Picassa software or access the site directly at www.picnik.com. Other photo editing sites include: PhotoBucket and PhotoShop Express
Once on the Picnik site, click “Get Started Now” then, “Upload” your photo. Choose the photo that you stored on your computer in Step 1. Click the “Library” tab to see and select your photo.
When you hover over your photo, you’ll see a small “star” icon like in this example. Use the mouse to select the “Edit” option.
Picnik will open the photo in the Edit tab. Select “Resize” and you’ll see the dimensions of the photo pre-populated in the window. In my example, I've set the width to 960 and the height is now 532.
Always start with the largest dimension first when resizing photos. Starting with the largest dimension reduces the overall “skew” of your photo in the end. Leave the check-box for Keep Proportions "on" (checked). Adjust the width to 960. Your image will shift, but the height will still be larger than 134. Now, uncheck the Keep Proportions box and change the height to 134.
Done! You now have a 960x134 Custom Banner Background. If the skew is too much for your taste, repeat this process with another photo until you have the background image you are happy with.
Save your new Custom Banner Image to your computer and let’s move to the last Step.
Step 3 - Personalize Your Custom Banner With Text at BannerFans.com - This is where even more magic happens. By personalizing your banner with a slogan, call to action, logo or phone number, you are reinforcing your brand recognition. And, it is just cool.
In your browser, go over to BannerFans.com. Why not register on this site so that you can save your completed Banners in one place? It is free and takes 3 minutes. I’ll wait while you do that…….
Now, we need to upload your Custom Banner Image to this site so that we can complete your Custom Banner’s personalization…my daughter calls this “Pimping the Banner”.
Click on “I want to use my own image” in the middle of the screen. Look left and you’ll see “Upload your background image”. Click the button and upload the image we created in Step 2. Then click “Update My Banner” to see the photo image in the top of the screen. Here is mine:
You'll see your Banner Background in the upper window with place-holder text in white font on top. Hum…if your banner is nearly all white, you may not see the text because it blended in with the white background.
BannerFans pre-populates 2 lines of text that you can change. Click the tab labeled, “Text & Fonts” to see the text editing options.
Follow the on-screen instructions. You can change lines 1 and 2 and add more lines if you have more info to put on your banner. Explore updating the text color, font type, font size, etc. Just remember to click “Update Banner”, each time you make a change to see the change reflected in the top window.
When you’re done tweeking your Banner, you can save the banner at the BannerFans site (because you registered earlier) and then download the new Custom Banner to your computer.
That’s it! Easy-peasy. Why not create several custom banners while you’re in the groove of doing it. BannerFans even holds your text consistently when you upload a new background image so creating many similar banners is super fast. Here are mine:
I want to see some of your Custom Banners, so upload them to the comments section so we can all take a look!
Cheers!
Caroline
Comments(9)