Sunday, January 6, 2013

Blog Makeover {Custom Blog Header}

I've had a lot of fun this weekend giving my blog a mini makeover.  I've done quite a few things to tidy up my blog... can you see the difference?  I decided to do a series of posts so you can see the details behind my updates.  I used a bunch of difference sources from all over the web, and I will definitely give credit where credit is due.

The first change I made was to my header.  I had been using headers from other websites, but decided I wanted to create my own.  Most the tutorials I saw for creating custom headers were created using Photoshop.  Since I don't have Photoshop, I decided to make my header using Paint.net - a free photo editing tool that I really like, and I think is a decent substitute for Photoshop if you aren't a major photo editor.

The first thing I did was come up with a design.  I decided I wanted the overall "look" of my blog to be simple and clean, so opted to just use my blog title with a couple pictures to represent my blog.
  • Open Paint.net, and click File > Save As and save your Paint.net project.
  • Click Image > Resize and set the height and width of your image.  I decided on 200 pixels for my height because I wanted something narrow.  I did a width of 900 pixels because that's what worked with my blog layout (this was a little trial and error).
  • Click Layers > Add New Layer.  I did this three times since I wanted to add three pictures in addition to my blog title.
  • Open the pictures that you want to add to your blog by clicking File > Open and selecting the pictures from your computer.  Each picture will display separately across the top of your Paint.net canvas.
  • Resize each picture to fit on your header by clicking Image > Resize and selecting the desired height, making sure the "Maintain aspect ratio" box is checked.  I decided to make my pictures 150 pixels high.
  • Copy the first picture onto Layer 4 by selecting the "Move Selected Pixels" tool from the Tools menu (looks like an arrow) and clicking on the picture.  Once the picture is selected, click CTRL+C to copy the picture, then click back on your header canvas, select Layer 4, and click CTRL+V to paste the picture.  Move the picture to the far right of the canvas and center.
  • Continue to copy the other pictures to the header canvas, putting each picture on a different layer and positioning accordingly.
  • Finally, add the blog title by selecting the Text tool, selecting the text color, font, and size, and then clicking on the Background Layer in the desired spot and typing the title.
  • Once you have your project as you like it, save it as a .jpg.
  • Insert the image as your blog header (I won't go into details about this because there are a lot of tutorials out there - like this one) and you're done!

No comments:

Post a Comment