June 16, 2011

How to create a custom banner

All Typepad Pro plans allow you to create a custom theme and upload a custom banner image using the Theme Builder. There are also some pre-made themes, including Mosaic, where you can upload an image to display in the banner. Additionally, with Pro Unlimited and higher plans, you can use Custom CSS to add custom banner image to any theme.

Tips for creating a custom banner

Most banner images start with a background image or logo which is edited to include a blog's title and catchphrase. You can use a photo that belongs to you, or search for a free stock image.

The next step is to edit your image to the correct size and width. You can use an online image editor, such as Free Online Image Editor, or use image editing software, like Photoshop, that may have come installed on your computer.

Based on the information in choosing a size for a banner article, calculate the width your banner should be. Keep this in mind while creating your banner image. The recommended height of a banner is 200-250px. A height of more than 250px can result in your posts being placed below the fold requiring readers to scroll to see the latest content.

Setting your banner's width

Next,you may want to crop your image to give it a more banner-like appearance.

Cropping your banner

Then, add text to the banner. This can be the blog's title or a catchphrase. In the Online Image Editor, clicking on the "T" in the menu above your image will bring up the Text Editing Bar.

Adding text

You should then save the image to your hard drive in a place you will be able to find it later. The recommended resolution of a banner image is 240ppi. Please note the image should be saved in the JPEG, JPG, GIF, or PNG format.

Saving your banner

Adding the banner image to your blog

To add the banner to a blog using the Theme Builder, go to Design > Theme Builder. Click on the Text or Image header to open the options and select to use an Image. Then, click the Browse button to locate the image on your computer. Finally, click Save Changes at the end of the page to save the new banner image.

For the Mosaic and Chroma themes, go to Design > Banner, click Browse to locate the banner image file on your computer, and click Save Changes.

Pro Unlimited and Business Class plans allow you to use Custom CSS to include a banner image within any theme. We have more details in the adding a banner to a pre-defined theme article.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services