Computer Graphics

September 13, 2009

You may have noticed a fancy new background and header on this blog. :) The header was made with a scan of one of my drawings, and was edited with Paint Shop. I am going to give instructions on how to make your own...

Header: (that things up on the top with my blog's name).

  1. Using Paint Shop, Photoshop, gimp, picknik, or even the Paint that comes for free on Windows, create an image in a 1:2 ratio.(I used Paint Shop Pro, layering a scan of my drawing, background textures, and text. I got the font from this site)
  2. Save as .jpg
  3. Open up Blogger Dashboard. Click your blog. Click Layout. On the top there should be a Header option. Click Edit. Upload your photo, choose "instead of title and description" and "shrink to fit". Save.
Tah-dah! You have made your very own header for your blog!

Background: (the fancy design you see in... you guessed it... the background).
  1.  Check out The Custest Blog on the Block's Backgrounds. They have a wide selection and easy instructions.
  2. Or, create your own (as I did). Follow these instructions. Please note: For this blog, I did not use the Minima template, but the Scribe template. If you are well versed in HTML, you should be able to to tweak the code on any template. For beginners, I would suggest simply using Minima.
  3. Or, use one of mine. So far I only have one. :( I hope to make more soon.
To use mine: 

  1. Right-click above image (or the image of any background I post for use). Click "view image". Right-click on full-size image. Click "copy image location".

  2.  Next go to ‚customize, layout‚ pick a new template‚ then choose a Minima template.Then click on edit HTML‚ You will see a big, long, crazy code (that is HTML). Scroll to where you see this:

body {
margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

Change that part of the code to say this:

body {
background:$bgcolor;background-image:url('/direct link');background-position: center; background-repeat:no-repeat; background-attachment: fixed;
margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; 

3. Insert the image location where it says "direct link".
4. Preview, then save

Hooray! You did it!!!

You Might Also Like


Like us on Facebook


Flickr Images