Creating your own blog design
can be a quick and easy task... but it can also be daunting and complicated. However, you are not to worry because I've already gone through the trial and error of it all, and here it is in all its amateur glory for you to use if you wish!
First you need to use an image editting program like Photoshop or GIMP. This tutorial uses GIMP because a) its what I use, b) its a free download, and c) there are many tutorials for Photoshop already on the web. You can download GIMP
here.
Then you need to pick a color scheme for your blog. Do you like pink and green? Yellow? Blue? Once you decide, you can do one of two things - find a background online that you can manipulate
OR scan the actual hard copy of paper/fabric/etc. that you want to use and save it to your computer. You could use scrapbook paper or a scarf or a drawing... whatever floats your boat. :)
Amanda at Fonts for Peas has created some free downloads that are pretty awesome, and I'm sure you can find other sites that have some also.
Once you find something you like, create a new document in GIMP by clicking File > New. You will be prompted to choose an image size. Make the width 1600 and the height 1100. Expand Advanced Options and select Transparency as the Fill color. It should look like this:
Then you'll need to set up guides to mark the margins. If you want a standard content area (Blogger's default) make your guides at 400 and 1200. If you want a wider content area (like mine, good for larger pictures), make your guides at 285 and 1315. To do this, click Image > Guides > New Guide. Make sure your guides are vertical, not horizontal.
If you can't see your guides, go to View > Show Guides. While you're at it, make sure View > Snap to Guides is checked too.
Then you'll need to make a background for the content area. Here's the thing - while you may choose to use a color, it is (in my opinion) best to use white. This is because a) it's easier to read text with a white background, b) if you choose to make a signature for the end of your posts, white is the easiest to work with, and b) white matches just about all color schemes and themes. So, to make the content area background, click Layer > New Layer. It will prompt you to pick a size and fill color - it should be the same size as your document (1600 x 1100), but change the layer fill color to White.
Now, you should see a big white rectangle with guides evenly spaced from the left and right sides. To make just the content area white, you'll need to crop the white rectangle so that it is confined within the guides. To do this, select the crop tool and check Current Layer Only on the Toolbox window. Like this:
Once you've done that, use the Crop Tool to select the white area between the guides. (It shouldn't be hard to get exactly on the guides if you checked the Snap to Guides earlier.) Click enter when it is selected to "cut"/crop it. Your document should look like this:
There are other ways to do that, but that's the quickest and easiest in my opinion.
Now comes the fun part. Go to File > Open. Open the picture of the background you scanned/saved/downloaded. When it opens, right click on it and go to Image > Scale Image.
A screen will pop up and you should change the width to 1600. That should automatically change the height, but make sure the height is at least 1100 before clicking Scale. Then, copy the image (you can do Ctrl + C or Edit > Copy) and go to your main document and paste it (Ctrl + V or Edit > Paste).
At this point you may see all, a small part, or none of your image. To make it a layer, go over to your Layers, Channels, Paths window and right click on "Floating Selection (Pasted Layer)" and click New Layer.
Then you'll need to move your pasted layer down so that the white content area is on top of the design. You can do this by clicking the pasted layer and dragging it so that it is underneath the white block. (So from top to bottom, it should read New Layer, Pasted Layer, Background)
It should look like this (with your background, not mine of course):
This is the most basic way to create a design. Of course you can add embellishments and other layers by going through a similar process. Just find the embellishment(s) you want to use, open it in GIMP, resize it if you wish, copy and paste it into the main document, and make it a new layer. You can move it around by using the Move Tool (up one and to the right four from the Crop Tool). You can hover your mouse over a tool to see what it is. For example, a fancier version of this blog design could look like this:
Once you get it like you want it, it's time to save (if you haven't done so already). Go to File > Save As. You'll want to save it twice - once with the GIMP extension and once as a JPEG (or an other uploadable extension). Save it as Background.xcf (This is so you can go back and change it using the layers if you want). Then go to File > Save As and save it as Background.jpg (This is so you can upload it on the web). It'll prompt you to flatten the image, click Export. Then it'll prompt you to choose a quality. Go with whatever it suggests (usually around 85-100) and click Save.
The final step is uploading it to your blog. To do this you'll need an online host like Photobucket. So go to Photobucket (or whatever you choose to use). Before you upload, click More Options and select One Megabyte file size (this is so it'll cover the whole computer screen). Once it uploads, copy the Direct Link. It should be something like this (Except your username and file name):
http://i696.photobucket.com/albums/vv329/gracelikerain-laura-ann/Background-1.jpg
Okay, now go to your Blogger Dashboard and click the Layout tab. Select Edit HTML. In all that jumble, find where it says something like this, it should be towards the top:
body {
background:$bgcolor;
Change it so it looks like this:
body {
background: url(PASTE YOUR DIRECT LINK HERE) no-repeat center fixed #FFFFFF;
For example, mine would say:
body {
background: url(http://i696.photobucket.com/albums/vv329/gracelikerain-laura-ann/Background-1.jpg) no-repeat center fixed #FFFFFF;
And taa-daa! There's your new background.
----------
Some hiccups that you might encounter:
If your template wasn't Minima, the background might not display correctly. To make it Minima, go to Layout > Pick New Template > Minima.
If you made your design with a wider content area like mine, but your HTML coding for the content area hasn't been changed from the default, you will need to change it. To do this go to Layout > Edit HTML
Find this:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
And make the change in green:
#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Then find this:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
And make the change in green:
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Then, find this:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
And make the change in green:
#main-wrapper {
width: 750px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Finally, find this:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
And make the change in green:
#footer {
width:1000px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Shew! Did you get all that? Well it's all I have for you now. Blog Design Tutorial Part II will come
eventually soon and will be about designing headers and post signatures. Is there anything else y'all would like to learn how to do?
