Not braggin' or anything...

...but I designed the cutest blogs ever for my friends Brittany and Lauren.  It makes me want to give my own blog a makeover!!  I used a few things from Fonts for Peas and Shabby Princess, and I think that both blogs turned out fabulous!  Go over and check them out!  Both ladies are new to blogging so they don't have many posts yet, but keep an eye on them because I'm sure they will be fantastic reads!  :)

 

I just told Lauren that these pictures make me very happy inside. :) THEY'RE SO CUTE!

Blog Design Tutorial Part 2

After you've created your own blog background (you can find the tutorial here), you can create an awesome header to go with it.  It's really simple, particularly if you've already familiarized yourself with Photoshop or GIMP.  As promised, I wrote a semi-tutorial on how to do it.  So let's get started!

I'll use GIMP because its what I'm most familiar with, although there are tons of tutorials on the web for Photoshop

Create a new document in GIMP.  If you're content area is white, then make the background white.  Otherwse, make it transparent.  Size is up to you.  You don't want to go much wider than 660 or taller than 500 (especially if you have the standard size content area).  My current header is 660 x 500 with a wide content area.  I think my next header wil be shorter, but thats just me.

The idea is to start with the bottom layer and build up - just like you would do if it was paper in front of you. 

I'm doing a blog design for my friend Brittany, so lets just go with that as an example.  Think about your favorite colors and things that make you happy.  For instance, I know that Brittany loves pink, black, and lime green.  She likes gerber daisies and polka dots.  With this in mind, I started with a pink polka dot background.

You can change the size by using the crop tool.* Just make sure you select "Current layer only" before you crop or else your whole header will crop.

Then I decided to tie in the blog background with a strip of the same design.  I also added some cute ribbon folds that I downloaded Shabby Princess.  You have to be careful what you download from there - they have some really great stuff, but the copyright on some of it won't allow you to use it on blogs, so just be mindful of what you download.  You could easily create your own by scanning them into your computer and touching them up in a program like GIMP.

Now we need to add the title - I mean what is the purpose of the header other than looking cute and introducing your blog?  So I added a place to put the header (a tag I also got at Shabby Princess).  You can fancy it up by using a clip, tack, or some other accent.  I found this clip in a download from Amanda's blog.  I also added a gerber daisy, just for kicks and giggles.

Then add the title.  You can use the text tool to do this - its easy to resize, recolor, change the font, etc.  Taa daa!

Now that's cute and all, but I wanted to add a little somethin' somethin', so I added the green swirly things (from Shabby Princess again).

Use your move tool and crop tool to adjust the location and size of layers.  You can also move the layers above or below other layers using the Layers, Channels, Paths window (usually on the right side of the screen).

**Other fun tools you can use: 

The Color Picker tool - after selecting this tool you can click on a color in a layer and it will hold it in your color history.  Then you can use the same color on your font or shapes.  For example, I color picked the dark pink on the bottom layer and used it on the title words.  This way your colors all match precisely.

The Crop tool - like I said, this can either crop you're entire document or just your layers.  Make sure "Current Layer Only" is selected if you want to crop just the active layer.

The Text tool - this allows you to write text on your document.  For this header, I created three text boxes - one for "As told by," one for "-B-," and one for "A blog by Brittany."  Having separate text boxes allows you to use different fonts and sizes of fonts for different words and lines of words.

Another awesome thing to play with is color.  Say that you found a design that you love but it isn't the right color.  No problem!  Open it in GIMP and go to Colors > Colorize.  Play around with it until you get the exact color/shade you want.  Then you can use it - no problem.  In fact, you wouldn't know it but the green swirly things in Brittany's header were actually gray.  And the green clip was actually black and white... (like the one in my header).  And the gray tag was off-white.  You can use any pattern/embellishment you like if you can colorize it to the right color!

Okay.  Once you've got it like you want it - save it as a .xcf (so you can go back and change it if you want), and then save it as a .jpg (so you can upload it onto your blog).

Then go to your blogspot dashboard and click on "Design."  Under the "Page Elements" tab you should see a storyboard layout of your blog.  At the top is a box for "Header."  Click edit.  A window will pop up and you should uncheck "Shrink to fit" (you don't want your awesome design to shrink!) and check "Instead of title and description."  Then upload the .jpg file from your computer.  Save and check out your awesome blog header!

If you have an awkward border around it (I hate that thing), you are not to worry.  Go back to "Design," but this time go to "Edit HTML."  Scroll down to the header section and find this:

#header-wrapper {

width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Change it so it says this:
#header-wrapper {

width:1000px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

Then go down a bit and find this:
#header {

margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Change it to this:
#header {

margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

That should take care of the awkward border around your header.  You can do the same thing for borders around pictures in your post by looking further down in the HTML code at the IMG in the Post section.

Another option is changing the border color.  If you don't want to change the px strength (size?), you can change the color of the border to white.  To do this replace "$bordercolor" with "#FFFFFF".  Do it for both #header-wrapper and #header.

Let me know if you have questions! I know a lot of that was pretty vague, but if you've already done the background, you'll pick it up fast!  Next tutorial will be on post signatures!

Blog Design Tutorial Part I

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?