Life Digital

When customizing your Blogger template, you’ll find it useful to have a set of “tools” to hand: reference documents, image resources, and useful applications which will make the process easier to manage.

In this article, I’ll explain the main groups of resources which I find useful as a Blogger template designer, with links to free tools and resources that you can use in your own design projects.

Image by Boolean Split

Create a test blog!

Using a test blog allows you to customize (or create) a Blogger template and see it working as it would in your main blog without any of your changes affecting usability for visitors.

Blogger makes it easy for us to set-up and use a test blog for developing new blogs and themes:

• We can create up to 100 blogs for free and manage these from a single Google account


• We are able to download our existing template, and upload this to a test blog with ease. The same applies when uploading the completed design back to our main blog.


• Using the new “import” tool, we can import posts from our existing blog into the test blog, allowing us to see how customizations will affect the overall design of the blog and current posts.


• By applying settings, we can make our blog private, or make it difficult for the public to access it by preventing search engines from indexing the content and hiding it from the blogs displayed in our Blogger profiles.

For the most part, setting up a test blog is self-explanatory, but if you would like more information regarding possible settings and effective set-up a Blogger test blog, you may like to read this detailed article on Blogger Buster.

Set up image hosting with Picasa

If you plan to use images in your Blogger template design (IE: for backgrounds, icons, visual appeal), you will need to arrange external hosting for these images.

While Blogger hosts images which you upload for your posts, as header banners and in image widgets, Blogger does not supply hosting for images you use in your non-standard templates.

A little known tip is to make use of your free Picasa Web Albums account to store images for your template design.

As you already have a Google account (all Blogger users now sign in using Google accounts), you can simply visit Picasa Web Albums to activate this service if you have not already done so. You will also notice that all of the images you have uploaded for your blog are stored and organized in these albums.

You should have 1GB of storage in total for your Picasa Web Albums account, which generally is more than enough for all your template requirements. It is possible to pay for increased storage if required. As far as I can tell, there are no limitations on bandwidth. So if your blog does happen to hit Digg’s home page, you’re assured that your images will still appear as hoped!

Uploading images to Picasa is pretty simple, simply follow the screen prompts to get your images uploaded to the Google servers. Make sure the folders you create for your template images are publically accessible, otherqise you will be unable to link to these images in your template.

It can be a little more tricky to locate the URLs for your images, so here is a little tip.

Once you have uploaded your images, view each one in your albums individually. You will notice a magnifying glass to enlarge images in the upper right-hand side of the page. Enlarge each image, then right click on the image. One of th eoptions of your right-click menu should be to “Save Background As…” or “View Background Image” (depending on your browser). In either case, you can use this function to copy the URL of your image to your clipboard, and save for later use.

For smaller images, it may be possible to simply right-click and copy the URL of the image. For larger images (typically above 500px wide), you will need to save the “background” image location as explained above.

Color Schemes

When designing new templates, I find it useful to work from a color scheme for backgrounds, fonts and choice of images.

Image by My Aim Is True

Here are some color scheme resources which I personally recommend you try:

• Color Lovers (includes tools for creating tiled backgrounds using color schemes)


• Well Styled Color Scheme Generator (particularly useful for finding complementary/contrasting colors)


• Color Spire (Allows you to see your schemes in action on a live site)

You may also want to check out this post by Antonio Lupetti for more color scheme resources.

Free Image Resources

Very few blog designs are constructed using color alone. Most designs include images of some form: either as backgrounds, headings, icons or other visual appeal.

Image by Moriza

Here are some excellent resources of free images which you can use in your designs. Some may have restrictions for use or distribution, so be sure to check licenses before use!

Background images

Resources for tiled background images and large textures:

• Repeat XY



• Squidfingers Patterns


• BG Patterns (generates background images and allows you to preview in action)


• Free BG (Background patterns for Photoshop)


• Brusheezy (patterns and brushes for photoshop)


• 30 Free fading background images (via BittBox)



• Where to find textures and background images (Via Smashing Magazine)

Icon Sets

Here are my favorite resources for free icons (though there are literally hundreds more if you perform a Google search!):

• Iconlet (I use this icon search engine all the time!)


• Icons from Brushes Download



• 10 Beautiful icon sets for designers and developers (via Woork)


• 40 Beautiful icon sets from Deviant Art (via Noupe)

Free Images and Photography

Here is a list of stock photography and image sites. Do check any restrictions and licensing for these images as many require attribution or have limitations for use:

• Stock Exchng


• Every Stock Photo (a search engine for free images. Highly recommended!)



• Deviant Art (Free photos, vectors, icons and almost every style of image imaginable. Most are free for use on CC license).


• Free Stock Photos (A neat collection)


• Flickr Creative Commons Search

Image editing

If you are using images in your Blogger template, chances are you’ll need to use an image editing application at some point.

Photoshop is an excellent and fully featured tool, so if you already have this installed on your computer, you’re set for enhancing, resizing and optimizing your images for your design. However, if you do not already have a good image editor installed on your computer, purchasing one could prove to be an expensive venture.

Here are some free image editors and online resources you could use instead:

• GiMP (GNU Image Manipulation Program, almost as fully featured as Photoshop and well documented).


• Paint.NET


• Photobie (Free Download, easy for beginners to use)


• SnipShot (edit images online)



• Web Resizer (Crop, edit and optimize for the web)

Inspiration

Browsing through designs and templates built by other bloggers is a great way to understand the possibilities of template design, and gain inspiration for your own Blogger template.

Here are some excellent sites and resources which you could browse to seek inspiration for your blog color scheme, layout, and overall visual design:

• Blogger Showcase (A gallery of Blogger powered designs)


• 54 Inspiring and original Blogger designs (via Blogger Buster)



• Now more than ever: 50 more excellent blog designs (via Smashing Magazine)


• 70 Fresh and modern Blogger templates (via Mashable)


• Design Shack (gallery and web design inspiration)


• CSS Vault (Beautiful gallery of CSS based designs)

Where do we go from here?

In my future posts here on the dh7eworkshop.blogspot.com, I’ll take you through a step by step process of creating a themed template for Blogger. Each article will cover one aspect of the design in great detail: from choosing and designing the perfect layout, to adding color/background images, navigation and much more.

Be sure to bookmark this page for future reference and check out some of the useful resources posted here as we will be using these throughout the series of tutorials!