Favorite Blog Headers

I have always loved blog headers, so this, again was a lot of fun.

One of my all time favorite bloggers is Melody Ross, Founder of Chatterbox scrapbooking supplies. Melody has a unique view of the world, and a unique way of putting disparate things together and making them work. Her blog is here. The reason I like this header is that it is very colorful and yet it is very easy to read the title. The rest of the blog is plain in comparison to the header, so your eye is drawn in.

Another favorite blog belongs to another scrapbooker. Ali Edwards set the world on fire several years ago when she actually put her handwriting onto her pages and dared other scrapbookers to do so. She is a professional designer, and it shows in how she sets up her blog and the headers. If you look at the current header, there is some very faint writing in the background, but the header is very clean, clear, uncluttered, and does not control the blog as Melody's does. Ali's blog is here.

The last blog header I'll share is completely different from the above two. It belongs to Heidi Swapp. Heidi is "out there." She is open and unique. If you can't tell that from her blog design, then you can from her profile photo. She is also a brilliant and very successful scrapbooking Entrepreneur. Her current header and blog reflect new product that she is releasing. What better way than to advertise it on your own blog. It is fresh, bold, and delightful. Heidi's blog is here.

I also found some graphic design blogs that were interesting, but none were as much fun as these headers, except for this one. I am adding it as a fourth because I found it to be thought-provoking, the way the author put the header on the right column.

New Header

I had a great time making this new header. After taking Carolyn's GID 50 and not being allowed to use the special effects for most of the quarter (hee hee!), this felt like being a kid let loose in a candy store!

I spent several hours playing with a multitude of fonts that I have on my computer. I'm a scrapbooker, so I have probably 3,000 to 4,000 fonts in my "collection."

I settled on this casual font, which is called Gabrielle. I have no idea where I got it, unfortunately, but I do know it had to be free, since I don't buy fonts. (No sense buying when there are so many freebies!)

In Fireworks, I created my document at 700 px wide by 150 px tall, and gave it a transparent background because I really wanted the clouds on the template to show. I then found a color that I felt complemented the blog colors, and used that for the text, adding a raised emboss, inner bevel, and drop shadow. I was seeking a monochromatic look, but was unable to change the color of the links in this particular template. I may try again after I submit this, but I don't know if I'll have time.

For the raised emboss, I used width of 6, contrast of 45%, softness of 2, and angle of 135 degrees.

For the inner bevel, I used Smooth, width of 12, contrast of 45%, softness of 4, angle of 135 degrees, and button preset of highlighted.

For the drop shadow, I used a width of 3, contrast of 54%, softness of 3, and angle of 315 degrees.

I also made some modifications to the actual template, because I felt I wanted it to be a little less busy, but I really liked the clouds (for now).

1. I took out the graphic of the lighthouse. I also removed the little lighthouses on each post. I reused the link to the side panel background in place of the background image of the lighthouse. This worked fine except on the right edge, if I opened the page too wide, there's a line.

2. I changed the fonts to Verdana, to coincide better with my new header. I also changed the colors to be a bit more monochromatic, got rid of the red, which felt distracting.

Overall, I'm really happy with how it all came together.

Image Examples From Other Blogs

The image in this post is a jpg. I stumbled on it while surfing around. I think that the clear vivid yellow is very striking against the background colors. (I never knew The White House had a blog!) (You can either click on the photo to go to the blog, or click the link below.)

JPG Blog Example

Example 1: This blog is dedicated to animated gif's. There are a ton to see there. I found it very interesting to look through and browse around. Having said that, it seems like for the 4 hours that I surfed blogs, most are using JPGs or PNGs. No one seems to much use GIFs.
Example 2: This is a striking example of an animated GIF. It made me itchy! Since these are both action GIFs I am not posting a screen capture.

At VMware, where I work, the web designers in the IT group do prefer GIFs over JPGs and PNGs, I have learned. When I questioned this, because I prefer PNGs myself, they told me that GIFs are easier to work with across the different browsers. I don't know if this is accurate.

GIF Blog Example 1
GIF Blog Example 2

The images on this post are png's. They are very vivid and very beautiful. I noticed that the Google bloggers are very good at optimizing. Sometimes they use jpg's, but when there are multiple images in one area, they seem to use PNGs more than any other format. (Again, you can either click on the link or click the photo to go to the blog.)

PNG Blog Example

Great lesson!

Optimized PNG Image

This is an optimized png-8. I love how small the file is, making it versatile for many different uses.

One of my favorite techniques on digital photos is making them look like a real photo, so this has to be the coolest thing I've learned to do so far. I will admit that I wish I had it in pdf format so that I could reuse it over and over without having to watch the video and try to keep writing down all of the steps. Can you make actions in Fireworks?

Optimized GIF

This is an optimized GIF image. It is GIF 32. When I looked at the difference between 32 and 64, there wasn't much because of the colors, so I went with 32.

Usually, you want to choose GIF for images that have large areas of flat colors, such as a log or a simple drawing. GIFs are "lossless", so you don't lose quality when you make them smaller. Instead you lose colors.

On this image, of a handmade clock, another of my photographs, (the clock was a gift to me), I used the crop technique that alows you to mess with the squareness. I had no idea this could be done! Adding yet another tool to my toolbox.

Optimized JPG Image

This is my optimized JPG image. Although JPG is a "lossy"image, it is very commonly used on the web. I chose a photo of a Surf Runner, my favorite drink in Hawai'i. Oh, wait. Web Design.

I chose JPG because I knew that I would not be doing a great deal of editing on this file. JPG is a "lossy" image type. This means that picture info is discarded in order to make an image smaller. Therefore, you sacrifice photo quality for size.

Although JPG is a very popular image format, as a photographer, this is not a format I use much because of the "lossy" effect.

I really enjoyed working with Fireworks, which I've never used before! I found it fairly easy to use and really liked being able to compare the different types of files on the same screen. I'll be using this a LOT in future blog posts!

Learning how to do the object cropping was great too and I'm sure that will be very useful! Yea, I love new tools! :)

Lesson Two: Modifying Template with Colors

I chose this complementary red/green color scheme because I really love pink and green together. I wanted to see what I could do to get away from the brilliant cool shades of these color families that I usually gravitate towards and create a warmer, more inviting space.

As I worked on modifying my template, I did go through and play around with the tints and shades. The color scheme generator has changed since the tutorial was written, so there was some trial and error to figure things out, and that was good. Discovery is important.

I added contrast to my layout by using the darker color (originally red, now mauve?), as the header color, to make the header stand out. I used a bright white background to make everything pop on the page, adding another level of contrast.

For repetition, I took variants of the green and applied them to the text of the post as well as using them for the background of the page and for visited links in the sidebar. I also took the dark mauve from the header and repeated it for the date, post heading, titles in the sidebar, and the unvisited links. Lastly, I made the title text white to tie it in to the post and sidebar backgrounds.

Overall, it was an interesting experiment to go from the color scheme generator directly to a page template. I’ve scrapbooked for years, and have been using color wheels for a long time for my layouts, but I always make something pop using a color outside of the design. I guess I won’t do that anymore, as I really like how unified this blog template is now.

Here are my color scheme examples. Some are blank templates, while others are actual blogs that I found.

Monotone Color Scheme Example
This blog template uses various shades of aqua and white. It is very cool and evoke quiet, calm feelings.
Analogous Color Scheme Example
This blog template uses orange, red, browns, making it warm. It has a strong visual impact.
Complementary Color Scheme Example
The use of blues and oranges in this template is high energy and fun, with a tropical feel.
Saturated Color Scheme Example
Vibrant reds, whites, blacks make this blog very stark and brilliant. It wasn't a page I'd want to stay on for too long, it was almost overdone.
Unsaturated Color Scheme Example
Cool, easy colors. This is a blog where you can "sit and rest a bit" which is exactly the effect that the author wants.
Triad Color Scheme Example
This blog uses browns, blues, and oranges to convey a comfy used look.