Headers from the Web

http://zenhabits.net/
I like the simplicity of it. It fits the theme of the site. It's uncluttered and it's perfect.

http://www.boingboing.net/
The header for Boing Boing is bright red on a black background. It's not huge on the page but it stands out. It's playful and makes a statement. It doesn't take itself seriously but manages to be elegant.

http://www.physorg.com/
I like the header on this page but I wish it was a little bigger. I don't remember the site being so cluttered last time I visited but the header seems a little lost in all that text. Still, it's a good header with a strong identity.

Header Design

For this header, I used the font Rosewood Std which came with my Mac. I made it grey and gave it an inner bevel and an inner shadow. The blend mode is normal, since the other ones made the text either hard to read, not as sharp or invisible. I exported it as a PNG as that was the sharpest looking and had the smallest file size.

A GIF, a PNG, and a JPEG

This GIF comes from http://chameleon.simplebits.com/. It's a GIF but it really could have been a PNG, although I suspect there's more than 8 colors in that logo. The simplicity of the design means that either a GIF or a PNG would be best when it came down to optimizing.




This PNG is from http://powazek.com/
Since it's just a line drawing, a PNG is capable of preserving the right amount of detail. If it was in color using a PNG might depend on how many colors the original file uses. This was used as part of the welcome screen.



http://borski.pl/

This JPEG has a lot of color and detail that would be lost in the other file formats yet it remains a rather small 41.31 kb. It's eye catching and fits the color scheme of the site.

Japantown

Even though this photo is very detailed, I made this one a GIF to see if it would look alright. It lost a lot of detail and it doesn't look great in comparison to the original. I would probably do this one again as a JPEG High Quality.

Stop Sign

This one I cropped close and made it a GIF. I dropped the colors low because after cropping it, it was a lot of solid colors. Even though it has less colors, it still looks good.

Black and White - Abandoned Shop

This is what I did to this image. It's was a fairly big one, so I used the JPEG smaller file setting. Didn't crop this one too much because I wanted to keep it the way it was.

Color Scheme Samples

Media Decoder
Monochromatic - This blog is very simple, it's mostly white with some black. If there's any color, it comes from the photos in the posts. It's a New York Times blog, so it's not surprising that the color scheme is so simple. The content, in this case, the writing, is the star.

Charcoal Template for Blogger
Analogous - The colors in this blog are close to each other in value while remaining different enough to provide contrast. It's a very dark template and the colors are, in my opinion, too close to each other. The colors seems very unsaturated.

Cuteoverload
Saturated - Considering this is a site about cute animals, it's no surprise the colors are saturated. "Cute" things usually revolve around bright colors. It matches the content well, all the posts feature brightly colored photos.

Integral Template
Complementary - It uses blue and green to good effect. They work well together and do not distract from the content.

Forum Template: Salsa
Unsaturated - This one uses lighter shades of red and yellow. Both colors, fully saturated, would be too much for one page to deal with. They probably could have desaturated the colors a little more as it's still a bit much.