Tutorial: What's that?

When I was first introduced to the blogosphere, I was prevented from ordering designs by the fact that I had no idea what the heck any of the items were. So, in case other people are having similar issues, I'm writing a post explaining everything!

Let's start at the top.

Blog Backround
The blog backround is the design you see on the sides (and sometimes the top and bottom) of the blog.

Header
The header is the image that has the title and description of the blog.
(please excuse my lousy circling skills)

Blog Button
A small image, used to advertise a blog. It usually is linked to the blog, so that a simple click will take a person to the blog.

Blog Button Code
Placed below the button itself. Used to link the button directly to the blog itself, and to make adding it to one's sidebar simpler.

Navigation Fleet
A navigation fleet is used to 'navigate' from one post to the next, using three buttons; Older posts, Newer posts, and Home. Clicking on them takes you to a newer post, and older post, or the home page.

Signature
A signature is an image with the blog user's name, and often a bit of decoration. It is merely a signature, a fancy way of signing a post.

Expand/Collapse Menu
A menu, consisting of small, rectangular buttons. When clicked, the menu expands and collapses. Useful for things like biographies, buttons, scrolling buttons, and emails.

Page Links
Page links are simply that; links to different blog pages. Custom page links are images that link to your blog page.

FavIcon
A small icon/image used as a sort of logo of the blog on one's internet browser.

Post Divider
This is a decorative image that goes between each individual post. It is sometimes used as a signature. Ours was horrid, so I got rid of it, so I hope Miss Liz B doesn't mind me using hers as a reference. (I chose her blog because I designed her divider.)

Post Title Icon
A post title icon is an image that is put next to/ under/over the post's title.
Ours is kinda ugly right now. I'm working on a new one.

Well, that wraps up today's tutorial! Any questions about the existing explanations? Want another one? Don't hesitate to ask! Drop a comment below, or email us!

Tutorial: Making a blog backround 1(SIMPLE)

Keep in mind that this tutorial is mostly for GIMP users. Having never used Photoshop or any of those other programs, I'm not sure how they function, so I don't know if these instructions will work for anything other than GIMP. Sorry!


Step 1: Open GIMP, and then open a new image. They measurements need to be 1200x1600. If you click the little arrow where it says Template, near the bottom, you'll see that option.

Step 2: (SIMPLE BACKROUND) Play around a bit. Change the colors, add some brushes.
Here's what I did;


First, I colored the backround a dark greenish blue. Then, I added a floral brush;

After that, I added a new layer, did the same brush on top of the first one, and then flipped it.

Next, I added some more brushes. Remember to put each brush in a new layer. That way, if you don't like what you've done, you can just type 'delete' on your keyboard and get rid of one brush click at a time, instead of starting all over again.

Step 3: Open a new image. For 2 column backround, make it 940x1200px, for double sidebar make it 1200x1200px.


Play around with that. I just put a small floral brush in the corner. Next, go to EDIT, and click 'Copy Visible' (Shift+Ctrl+C)


Go back to your 1600x1200 image. Go to EDIT, and click 'Paste' (Ctrl+V)

Step 4: Upload your image to an image hosting site, such as tinypic or photobucket. Get the DIRECT LINK, and paste it into this code; (courtesy of Ara) 


<style type="text/css">
body {background-image: url("YOUR DIRECT LINK HERE"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>


Having issues? Got a question? Drop a comment below, or e-mail me!