DIY Custom Blog Design Part 4: Header

This is Part 4 of a series of tutorials, if you need to start at the beginning, click here. 

In this part of the tutorial, we will make a simple header and I will show you how to install it properly.

I am making my header in Photoshop CS5.  If you don't have Photoshop, you can use Paint.net it is similar to Photoshop, and 100% FREE!

Adobe Kuler

I have to kick off color week with Adobe Kuler!  It is amazing, if you have never used it, or another program like it, you are in for a treat.

If you are anything like me, I get stuck on color, for some reason I gravitate back to the same color schemes over and over.  It is not like I mean to either, I think it is just that I know what I like and not meaning to I go back to the same schemes to often (for me it is Brown, Turquoise, and Pink...).  I don't think that all of my clients like want the same colors, so when I get stuck, Adobe Kuler is the best!  It really helps me explore lots of color options with out overdoing the default swatches in Illustrator and Photoshop.

Adobe Kuler is free and super easy, sign up for an account and just play around with it.  I chose one color as my base color (#FF6B7D, the color shown in the center of each scheme), and look at all the fun color schemes that I was able to come up with.  Below each color scheme is the description of the color scheme(the definitions are from Wikipedia).

Which File Types for Web Design???

Because I have learned most everything that I know about web design on a trial and error basis.... I started out with mainly print design, it took me a while to start understanding web file types and what they are for. So here goes my opinion (like I said, I am self taught, so don't take this as the "Design Standard"):

GIF vs. PNG

GIF and PNG files are for web, and ONLY web! Now, at first my confusion with the files was, what is the difference between a gif and a png.... They have some similarities. They both allow you to save with a transparent background. What I have found to be the greatest difference between the 2 is the quality, and size. If you are going for high quality, I use PNG, but if you need a smaller file size, go with GIF. So if I am saving a Header or Button that needs to look really nice, and and have a good clean transparent background, I would go for the PNG, but if I was using some thing very large, like a background, I would go for the GIF (that way, it will load quicker for your viewers).

JPEG

JPEG is really pretty simple..... photos.

**If you have other insights, please comment! I love learning and I know that there is a lot more to file types that is worth mentioning.