BlogWear How-To, Week 1

A How-To on customizing your Blogger/BlogSpot blog from head to toe and impressing all of your friends with your mad blogger skills.

You've seen all of these cool blogs with rockin' headers and matching buttons and headers. WOW - those people must have some mad skills, huh? It's actually not as hard as you might think. It does take a little time, and if you want to get it perfect - it will require working with some HTML. BUT don't let that scare you. You can do this.... even without one of those "for Dummies" books. :)

I've broken down the process into 2 "classes," which is just an attempt to separate the information in some logical form. Class 1 is the BlogWear design phase; Class 2 is when we will upload the BlogWear to the blog.

The first step is to design your blog elements. If you aren't up for designing/creating them yourself, consider having them designed by someone else. There are hundreds of places on the web where you can order custom "blog-wear" (aka: blog designs). If you are up for designing your own blog wear, read on...

DESIGNING YOUR BLOGWEAR

Please note: This tutorial is written for Photoshop users. Photoshop Elements users can mostly likely use these instructions, with a few adaptations. You can use your designs for any type of blog - however, these instructions are written for use with Blogger/BlogSpot.

1. Determine what elements you want to add to your blog. I am assuming that you totally want to pimp out your blog, so this tutorial will cover the design and creation of a header, footer, and buttons.

2. Determine the appropriate size of your blog elements.

-- Header Size: Log in to Blogger, and go to Layout -> Page Elements. Click Edit on the Header element. A pop-up box will appear with options for editing the Header. At the very bottom of the pop-up box, you will see "Image will be shrunk to XXX pixels wide" (in my case, it is 660 pixels wide - but this number will vary, depending on the Blogger template that you are using). [If you do NOT have "Image will be shrunk to XXX pixels wide," uncheck the "Shrink to size" box.] Take note of that XXX number - that is the size for your header and your footer.

-- Button Size: Back to Layout -> Page Elements. On the side of the Page Elements (could be on the left or the right, depending on the blog template you are using), click "Add a Gadget" and select the Image/Picture gadget. A pop-up box will appear, and you are again looking for the pixel dimensions listed at the bottom of the box. In my case, it is 220 pixels wide, but again - this will vary, depending on your Blogger template.

Now that you have your dimensions, you are ready to start designing!

3. Design your elements in Photoshop.

-- Start Photoshop. Go to File -> New. Name your project: blog_header. For width and height, set the drop-down box to "pixels." For width, enter the number of pixels that you wrote down from Blogger for the header. The Height can be whatever you want it to be. (I err on the side of making it taller than I think it needs to be because it's easier to crop it than it is to add to it). Set resolution to at least 200 pixels/inch (higher, if you'd like). Set Color Mode to RGB. Set Background Contents to White. Click OK, and you have the start of your kickin' blog header.

Follow the same process as above to create a footer and buttons - just be sure that you change the width/height to suit the element (ie: buttons are not as nearly as wide as the header).

Save all of your source files (PSD files) so that they can be edited easily. Got that? BE SURE to save your source files!! Also, save each file as a JPG or GIF. Also, remember: SAVE EARLY, SAVE OFTEN.

Where you go from here is completely up to you. The world is your oyst... umm... blog header! So knock yourself out!

Check back soon for Class 2: Uploading your BlogWear to your blog.