Headers to envy.

Blogs whose headers I like:

http://hoosierfamily06.blogspot.com/2008/07/how-to-change-your-blogger-header.html - Great family blog header. I found it when searching online how to figure out the blog header business!

http://www.flickr.com/photos/splat/55709143/in/set-981332/ - love this one. So cool, the color, the boy's face, the symbols.

http://www.flickr.com/photos/splat/68420481/in/set-981332/ - this one has always been one of my favorites. I guess i like color.

One of my friends just turned me on to this site: http://lenatoewsdesigns.blogspot.com/ some very cool blog headers. even some for free. must admit, they tend toward the girly side.

Header Fun?

Well, so I learned quite a bit, and it was fun. First I will explain what I did, then I will explain what I had trouble with.

NOTE: I couldn't locate the Header image on my machine to just edit the existing?

The font I selected was Trebuchet MS because it was a websafe font and since this is not an image? (right?) but just text, I picked my favorite for this site out of the web safe fonts.

I looked at the code to determine the best that I could the color and the size of the header (couldn't locate the header to edit). I used Illustatrator to recreate the header with new font and look. However, I was not able to do the following: figure out how to add blends or shadows etc to the font or get the size of the header just right - hence you still see a border around it - I meant for the shapes to go off the border, not get cut off.

Admission of Photoshop

For this first excersize I used Photoshop to first crop the image and then I used the magnetic lasso tool to remove the background. I am very familiar w/ PS and so to catch up I went w/ that. I will use Firefox for the next one.


I have to admit that I quickly tried to find some sites w/ P=Jpg, Pings and Gifs. What I found was that almost all the sites that I went to were using Gifs for their logos. Must be the fastest?

Examples that I found:

Gif: http://www.ymcamidpen.org/elcamino/index.html

Jpg: http://shopping.yahoo.com/articles/yshoppingarticles/145/the-30-hottest-toys-for-babies-kids-and-teens/

Fave Five

Monochromatic:  This blog Lifehacker is monochromatic, and one of technorati's top 100 - so it does quite well.  

This is a nice analogous color scheme and seems popular right now - green and blue.

Here is a good example of using a complimentary color scheme:  Plantilla-blogy-columnas.  It is using orange and blue.

Bright and pretty saturated colors in the flowers found here and called Colibri.

And last, probably my favorite look, the unsaturated colors.  Dark Ritual. 

 

Take 2 - A color experiment

I went with a tetrad color scheme of green, blue, orange and purple but in dark pastel - I chose it by playing around and I liked it.  

I think it is a complementary color scheme.    It looked better on the color wheel then on the blog.  I think it was a good experiment to see that it isn't easy. 

The base color is #E6CFEO, I did use tints and shades.  There are both cool and warm colors used here.  

Color is used to create contrast as I ensured that the text was readable against the colors it was on.  Color is used to create repetition because the titles of all the posts, the text in the posts, and the other common texts (links, dates etc) are always the same color.  If that weren't the case, this thing would really be crazy.

Monochromatic Failure Turned Green

I finally got it.   I had to go into the html and update the color.  I didn't know what I was doing, so it was a surprise to see it worked!

I tried to go w/ a green monochromatic color scheme, and I tried lots of ways to update the template and many templates.  It seemed that every time I changed one, the last one that I changed when back to the original.  

I changed it again...

Ooops, I did it again....

I just wanted to do a bit more experimenting. I have had good success with this one... but might play some more later. However, I prefer this layout....