40 Essential tools for Blogger template design (Blogger Template Design Series) January 14, 2008 /

When designing Blogger templates, it's useful to have a set of "tools" available before you begin. So in this installment of the Blogger Template Design series, I have compiled a list of tools I use often when designing themes, from imaging programs to relevant websites and resources you may like to use when designing your own templates.

A test blog

When building a completely customized template, I would strongly advise you to do this using a test blog. This way, you can always ensure your regular blog is available, features no mistakes and is always presentable!

I always create and test new templates on a test blog, filled with dummy posts and sidebar widgets so I can easily see what needs to be changed, redesigned or altered without affecting my main blogs in any way.

I have written a full article about creating and using a test blog which I would advise you to read before you begin to create a custom template. Then once your design is complete, you can move this over to your main blog seamlessly; your readers will barely be affected by the changeover, and your blog will always be available to read!

An image manipulation program

This is one of the key tools used when designing Blogger templates. In almost all of the themes I've created, I have needed to use an imaging program to create some aspect of the design.

Why you need this

To design a custom header image, backgrounds or perhaps headings for your sidebar. Also handy for editing images in posts.

Resources

If you already have Photoshop, CorelDraw or a similar program installed on your computer, this should be perfect for your needs. MS Paint may be a little too basic for your future needs, so if this is all you currently have available, you may want to try one of these free downloads instead:

• GiMP (the GNU Image Manipulation Program): This is often considered the free version of Photoshop! I have used this open source program extensively, it's excellent and highly recommended.
• Inkscape: a free vector graphics editor similar to Illustrator and CorelDraw.
• ImageMagick: a software suite to create, edit, and compose bitmap images. Can read and write in a variety of formats.

All of the programs mentioned above have a good support system online for tutorials and usage, so if you need to learn a particular aspect of using these programs, you can be assured of answers to your questions!

A basic text editor

Although you can edit your Blogger template from within your dashboard, it can be very useful to have a basic text editor to hand too.

Why you may need this

To copy and paste elements of your template code; to save templates in text format; to write and edit JavaScript; to experiment with CSS.

Resources

I imagine the majority of you will already have a basic text editor such as Notepad already installed on your computer. This is perfectly suitable for creating and editing Blogger templates.

If you're looking for a more fully featured program, you may want to consider downloading Notepad ++ (as recommended by Thomas) which is a more advanced text editor useful for general programming needs.

Online file hosting

Blogger does not allow us to host background images or scripts in our accounts. Therefore you'll find it very useful to have a hosting account online for the images (and possibly JavaScripts) which you'll use in your custom template designs.

Why you may need this

If you want to use background images, use scripts in your template, or link to any external files.

Resources

If you already have some hosting available through your domain provider or other paid service, this will be more than suitable for your needs. You may also be able to use your Google Pages account for some files.

Here are some free hosting services you can use to host your images and files:

• Photobucket: for images only, but highly recommended
• HotlinkFiles: this free service can host almost any type of file, and comes with 8000mb of bandwidth.
• Fileden: comes with 1gb of storage space! More than enough for use with Blogger templates.

More than one internet browser

Or at least the ability to check your designs in other browsers!

Why you need this

Websites can look different when viewed through different browsers. Some aspects of web design are incompatible between Internet Explorer (particularly IE6 and below) and Mozilla based browsers (such as Firefox).

If you can install more than one browser, this would be highly useful to check for incompatibility issues.

I use both Internet Explorer and Firefox to ensure compatibility between these major browsers, and also check for other possible issues using BrowserShots.org.

Resources

I imagine that most of you will already have Internet Explorer or Safari preinstalled on your computer, so here are a couple of Mozilla based browsers you may like to consider downloading:

• Firefox: one of the most popular browsers available.
• Flock: similar to Firefox with an emphasis for social network users

Another way to check for incompatibility issues is to use BrowserShots.org: this is a free service which provides screenshots of your web pages in different browsers. You may have to wait some time for the screenshots to be available, but this is such a good service that it's worth the time and effort!

Copyright-free images, backgrounds and icons

If you're a whiz with the camera and graphic design software, you wouldn;t need to worry about this at all. For may of us though, it's useful to have resources available for copyright-free images and backgrounds!

Why you may need these

For creating a custom header, template backgrounds, header icons, fancy lists and other decorative aspects of your template.

Resources

Here are some of the best resources I have found (and use often!)for resourcing images, backgrounds and icons:

• Stock Exchange: features thousands of professional, copyright-free photographs. You will need to register for this site, but it is well worth it!
• Flickr Creative Commons search: find photographs and other images you can use according to their license. For a great overview of using Flickr images, have a read of Skellie's excellent article.
• Squidfingers patterns: over a hundred high quality tileable web backgrounds (my favorite resource for backgrounds).
• RepeatXY: literally hundreds of backgrounds available, which you can filter by color.
• Iconlet: a search engine for icons to use in your designs. Many sizes available, from 16x16px right up to 256x256px. A wonderful resource and certainly worth a bookmark!
• Icons, buttons and templates (Smashing Magazine Round Up): I often find myself referring to this excellent round up of web design tools. On this page you'll find a plethora of links to other resources, and some of the best icon sets available at this time.

Free fonts

While fonts are not exactly essential, I do find that having a variety of fonts available can help me design better headers and logos for my templates, and think you may find these resources useful too.

Why you may need these

Most particularly for creating your own header images, though also useful for logos and sidebar headings.

Resources

Here is a selection of the sites I visit when looking for free fonts:

• DaFont.com: probably the best free font resource I've discovered to date. You can search by type or keywords, and can also find commercial fonts if these are better suited to your needs.
• SimplyTheBest Fonts: Another great resource for free and shareware True Type fonts.
• Smashing Magazine fonts category: lists articles from the blog regarding free fonts and usage. You'll find loads of quality downloads here!

Final thoughts

I hope you find this a useful resource for when creating your own Blogger templates. If you would like to add any other resources to those listed here, please leave a comment below or send me an email.

In the next few days, I will make both this article and the Cheats' Guide to Customizing Blogger Templates available as PDF downloads for easy accessibility.

Coming soon...

In the next installment of this series, I'll (finally!) get into the nitty-gritty of template design. The next post will focus on creating a three column canvas on which to base your new design. This will be slightly longer and more detailed than my previous "creating a three column template" article, as I will fully explain how to adjust margins, padding and alignment to suit your individual requirements.

Be sure to subscribe to the news feed for updates on the Blogger Template Design series and other blogging news. And as always, please feel free to leave your comments and suggestions below.