Blog Archives

How To Recolor Sprites in Gimp (A Very Simple Guide)

Ever wanted to change the color of a sprite character’s outfit, their eyes or  their hair? It’s very easy and simple to do using an art program (such as Gimp which is free) and even beginners can make nice color changes!  Follow along as I turn Elli’s dress from blue to pink:

1: Open up your sprite in Gimp and zoom in about 800%.  You want the sprite large enough that you can easily see the pixels.

2: Using the Select By Color Tool (it looks like a hand pointing to a bar colored blue, red and yellow and is generally in the top right hand corner of your toolbox) select the lightest color of the object you want to change.  It’s important to start with the lightest color as you can then easily darken the color bit by bit for the shading.

3: Using the Paintbucket tool, fill the selected areas in with the color of your choice.  You can quickly fill in all the areas by holding down Shift while selecting one of the highlighted areas – this will automatically fill them all.  While this is a great time saver, sometimes you will have to select each area individually if the color is used in other areas you want to leave as-is.

4: Using the Select by Color tool, select the next darkest area of the object you’re changing.  Then, using the color selector, pick a color that is darker than your original color.  Make sure it’s the equivalent darkness to the shade you are replacing – if it’s too light or too dark, it will look odd.

5: Repeat the process to fill in all the remaining shades until you have completely replaced the old color scheme with your new one.  The most important thing to remember is to match the shades that you’re replacing, otherwise the shape and shading will look off.

6: Zoom back to normal magnification and see how your sprite looks now.

7: There, she’s looking pretty good! Now I’m going to quickly repeat that whole process to change her bow to a more fitting color to match her dress:

8: Now let’s compare our original Elli next to her new version:

And there you have it! You can use this method to change any color on a sprite, but be aware that the more colors you are replacing, the more attention you have to pay to replacing the shades exactly.  Hair is one of the most difficult things to change because there is generally so many shades to replace and often the color of the hair is used elsewhere on the character, meaning you have to be careful exactly what you replace.  Elli has the same brown color of her hair outlining her face – changing her hair would be quite a project.  The easiest color to change is one that isn’t used elsewhere on the character – for example, Nami:

Her red hair is easy to change because the colors don’t blend into her face or outfit.  So it’s easy to make her, say, a blonde (with purple eyes, no less!):

Finally, remember to save your work often!  If you successfully change the color of a character’s shirt, save your work before you try to tackle another object.  That way if you mess up, you won’t have lost all your recoloring work.


How to quickly and easily crop an image in Gimp

In my many artistic/coding/digital endeavors, I find myself with that same old problem of wanting to use an image for something – but it has that nasty white space behind it! And usually the only method (that most people know) to remove it is to slowly crop it by hand.

I hate cropping pictures.

So I fiddled around in gimp and found a fantastically easy way to cheat at cropping! :D

To start, open your image up in gimp.  The image I’m using is Oracle from the game Harvest Moon: Tale of Two Towns.


1. Go Layer > Transparency > Add Alpha Chanel.  Next, using the Magic Wand tool (circled in red below) select the white space around your image and delete it.  You’ll get rid of most of the white space.


2. Now add a second layer to your project, move it under your image and fill it with black.  Ahhh, see all that nasty white residue still clinging to your character? Not what we want.


3.  Using the Magic Wand tool again, select around your character, then go Select > Invert.  Next, go Select > Shrink and shrink the image by 1 pixel.


4. Now go Select > Invert (again!) and then press delete  and unselect the image so you can get a good look at it.  Hey! All that white is gone from around the character! Pretty neat, huh? Here’s a comparison of before and after:


5. Whoops, okay, so nearly all the white.  There’s a few spots that managed to sneak by:


6. To get rid of these, you’ll have to use the Free Select Tool (looks like a little lasso by the Magic Wand) to select the areas, and then delete them.  Like so:


7. Now remove the colored layer and save your image (make sure to save it as PNG to save the transparency!).  And here she is, all cleaned up and ready to go on any colored background you choose! :)


The Mens Guide To Dating Geek Girls V 1.0

The Mens Guide To Dating Geek Girls V 1.0.

All I can say is LOL.
All true except treating her like a guy sometimes; I always like to be treated like a lady!

(Except of course unless I have to prove I’m somehow better than my male challenger, then I would like to be treated as an equal until I kick his rear)

How to Clean and Tone a Sketch with Gimp

I thought I’d share how I make my little comic doodles using a rough sketch and gimp.  I enjoy making these because they’re quick to do and don’t require any of my fancy drawing tools, meaning I can make these at work to pass the time (I keep card stock on my desk to use instead of an actual sketchbook).  Typically, it will take me under two hours to make one of these from start to finish, depending on how complex the drawing is.  To follow along, you’ll need:

  • paper (a thicker sketchbook paper, or card stock)
  • pencil (you can use your fancy drawing pencils, or a simple every day pencil)
  • Ultra Fine Point Sharpie Marker (the kind you can pick up in any office store)
  • Scanner (and the basic knowledge to use it)
  • Gimp (and the basic knowledge to use it)

Making the Doodle:

To get started, draw your doodle on the paper with the pencil.  Easy, right? (sorry, this isn’t a drawing tutorial, it’s a “make this picture look good and put it in a digital form” tutorial).

Don’t worry about getting your doodle perfect – I usually leave a lot of my sketch lines.  We’ll erase these later so it’s okay.  I also don’t put in the finer details until after the main inking is done.

Using the ultra fine point marker, start slowly going over the lines of your doodle.  *NOTE* This can be tricky to get the hang of at first, so don’t get discouraged!  Even if you make a mistake or decide you don’t like what it looks like, you can fix it with Gimp.  Notice that extra line on Wonder Woman’s right thigh? I decided after I inked it that it made her leg look too straight, so I added the second, softer line.  I’ll remove the first line in the touch up phase.

Continue to ink your lines until you’re happy with them (please excuse the blurry pic).

Once the main inking is done, erase your original sketch lines.  This is where you’ll really see how your doodle looks.  If there is any fine detail to do, sketch it in now and ink once you’re happy with it (I did the W on Wonder Woman’s chest after the other inking was done, and no, still not happy with how it looks but that’s about the best I can do on a little chibi doodle).

Go over your picture one last time and make sure it’s as clean of pencil marks as can be and then scan it, saving it to your computer.

Editing in Gimp:

Now, open the picture in gimp.

Start by creating a new layer. This is the layer we’ll add our clean up touches to.

Working on the new layer, zoom in until the area you wan to fix is large on the screen.  In this case, I’ll be fixing the line on the thigh.

Select the magic lasso tool and select around the blemish you want removed.  Using the paintbrush and white, touch up the area (notice I had to be careful around the lines of the boot as I didn’t want those removed).

Repeat where ever necessary. When you’re satisfied, merge the touch up layer down to the bottom layer.  This is your cleaned up raw.  I like to save my work as a PNG now, usually naming it something like [projectname]_clean.PNG

If you’ve already saved your clean version of your doodle, save a new version of it (something like, [projectname]_1.png).  This is the version you’ll be adding screen tone to.  With the newly saved version, scale it down to the size you want it to be.  Then go image >fit canvas to layer to shrink the canvas to fit the new smaller size.

Now select the area you want to fill with screen tone by selecting it with the magic wand tool.  Next, use the paint bucket and set it to ‘Pattern Fill’ (click the image of the current pattern to be given more choices).  Choose the pattern you want and then click the selected area on your doodle to fill it.  Repeat until you have filled in all the areas you want with screen tone.

Some things to remember when filling in with screen tone:

  • Don’t over do it!  Use the already available white space to your advantage and don’t fill every space with tone.
  • If more than one area is supposed to be the same color, use the same tone to convey this.  I.E, Wonder Woman’s top, boots and star on her crown are all supposed to be red, so I used the same tone for that.
  • Try to use different types of tone to keep things from running together.  I always use a dot tone for the hair (manga influence?) but like to use the noise tones for solid colors in the clothing.  I think it gives a nice contrast.
  • If you’re trying to fill in a space but the magic wand is selecting more than you want, check your lines.  If the space isn’t closed in completely, do touch up with a black paintbrush to close off the area.
  • The patterns I used are default to gimp, but if you want to find more just google “download gimp patterns”.  Deviant art has many good manga/comic screen tones you can use to add more tone to your art.


Looking good! Now make sure to save your work.  Here’s our original, uncleaned raw next to the cleaned and toned finished pieces:

Note that when I cleaned the raw, I removed the smile (decided I didn’t like it) and touched up many areas where the ink had gone over the line.

And that’s all there is to it!  Happy doodling :D

How to quickly fix a Nintendo 64 AV cable with a bad connection

I am waist deep in Harvest Moon N64, having recently just started my first winter.  However my N64 is old and cranky and since I dragged it out of the dark comfort of it’s storage box, it’s been throwing a fit whenever I move it around too much.  The problem is with the AV cable connecting to the console – the connection is shaky because of the old cable and unless the cable is wiggled just right, I don’t get any video or audio on the screen.  First couple of times it went out on me I was able to patiently sit by it, slowly wiggling the cable until the connection was finally made.  But day before yesterday I did a good cleaning of the TV stand (you know, the annual dust bunny hunt) and moved the N64.  The cable lost it’s delicate connection and no matter how much I tried, I couldn’t get it to reconnect.

Enter my ever resourceful dad, who happened to see me trying to get the cable to work.  After I explained the problem, he went to the bathroom, grabbed the can of Vaseline and – after assuring me it wouldn’t hurt my console or cause it to rust – smeared a bit on the inside of the AV cable head (the part that plugs into the N64).  He plugged it back in, turned it on and voila!  The screen was alive with the wonderful sight and sound of Harvest Moon!  And I have yet to have any problems with it.

If you’re wondering how that fixed the problem, the Vaseline acts like an extender to the plug, letting the…prongs…wires, whatever you would call them, connect properly once more.  My dad has assured me it won’t bother my N64 though I’m sure it will probably collect dirt eventually and be hard if not impossible to clean.  But as a quick fix instead of having to hunt down a new cable online, it’s a good solution that seems to be working well.

Crocheted Hello Kitty Hat

This is the hat I made my sister for her birthday, to keep her ears warm up in Alaska :) I used a thick, bulky yarn that worked up quickly and made the entire hat in about 4 hours.  Because the yarn is thick, make sure you keep testing the sizing or else it’s easy for it to turn out too big.

 You will need:

Bulky Yarn in white and red (I used Loops and Threads Charisma Super Bulky yarn – I love this stuff, it’s soft and easy to use but thick so projects work up quickly)

Size H hook

Yarn needle


With white yarn, CH 1

Rnd 1: SC x 8 in ring, join with slipstitch, CH 1, turn

Rnd 2: SC x 2 in each stitch, join with slipstitch, CH 1, turn

Rnd 3: SC x 1, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnd 4 SC x 2, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnd 5: SC x 3, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnd 6: SC in each stitch around, join with slipstitch, CH 1, turn

Rnd 7: SC x 4, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnd 8: SC in each stitch around, join with slipstitch, CH 1, turn

Rnd 9: SC x 5, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnd 10: SC in each stitch around, join with slipstitch, CH 1, turn

Rnd 11: SC x 6, SC x 2 in next stitch, repeat around, join with slipstitch, CH 1, turn

Rnds 12+: SC in each stitch around, join with slipstitch, CH 1, turn.  Repeat row until the hat is the length you want it to be.  You can leave the entire hat white or do the last row in red like I did.


Each ear is made by crocheting two identical ear shapes and then crocheting them together at the sides.

Row 1: with white yarn, CH 8

Rows 2 & 3: SC x 8, turn

Row 4: DEC, SC x 4, DEC

Row 5: SC x 6

Row 6: DEC, SC x 2, DEC

Row 7: SC x 4

Row 8: DEC x 2, tie off

Repeat to make 4 kitty ear shapes.  Lay two ears on top of each other and with white yarn, SC around the edges (making sure to increase the stitches around the tip of the ear to make a rounded shape).  Repeat with remaining two ear shapes.

Once your ears are assembled, sew them to the hat.  It’s helpful to have someone wear the hat first so you can mark where you want the ears to go, I have mine about 1/3 from the front of the hat.


Row 1: with red yarn, CH 8

Rows 2 & 3: SC x 8

Row 4: DEC, SC x 4, DEC

Rows 5 & 6: SC x 6

Row 7: DEC, SC x 2, DEC

Rows 8, 9 & 10: SC x 4

Row 11: INC, SC x 2, INC

Rows 12 & 13: SC x 6

Row 14: INC, SC x 4, INC

Rows 15 & 16: SC x 8, tie off.

Repeat for second bow side.  Place sides on top of one another and SC around the edges with red yarn, making sure to increase around the corners to give them a rounded shape.  Sew bow to ear.

Amigurumi Gameboy Color & Instructions

Way back in 2001 my siblings and I received our first hand held, the wonderful Nintendo Gameboy Color, which was probably used and abused more than it deserved by four eager children.  While our original gameboy is now long gone, I’ve tried my hand at making a cuddly, cutesy version of it, and here’s the end result! ^.^

You will need:

-cotton yarn (I used hot blue because it reminded me of the teal gameboy I used to have, but you can use any color you like)

-size G crochet hook

-yarn needle


-cardboard (I used an old box)

-black, dark gray and light gray felt

-embroidery floss in black, white, red, pink, purple, green, yellow and blue (I picked up a package of 36 skeins for $3.99 that had all the colors I needed)

-embroidery needle

-tacky glue

Crocheting the Gameboy

The gameboy is made of a front and back and one long strip for the sides. The front and back have a squared top and a slightly rounded bottom to replicate the Nintendo Gameboy Color’s shape.

Front & Back:

Row 1. CH 14, SC in first stitch from hook, SC x 13, turn

Row 2. SC x 14, turn

Rows 3 – 20. Repeat row 2

Row 21. Skip first stitch, SC x 12, turn

Row 22. Skip first stitch, SC x 10, slip stitch to next stitch, tie off

Repeat for back piece.

Side piece:

Row 1. CH 3, SC in first stitch from hook, SC 2, turn

Rows 2 – 68. SC x 3, turn

Tie off.

Assembling the Gameboy

1. Starting at one of the squared corners, sew the side piece all the way around either the front or back piece (seeing as they’re the exact same it doesn’t really matter). Sew the ends of the side piece together. You should now have something like a crocheted tray.  Place the second piece on top and sew it like you did the first, WITHOUT sewing closed the top side (the squared side). You need to leave this open so you can stuff the gameboy.  Make sure you’ve sewn both of the pieces with the rounded ends down.

2. Cut two pieces of cardboard roughly the size and shape of the gameboy front piece (see picture).  It doesn’t have to be exact, just enough of the right size and shape to fit inside the gameboy.

3. Slip the two pieces of cardboard inside the gameboy and stuff the stuffing in between, to make a sort of sandwich.  The cardboard gives the gameboy the proper shape and a flat front and back.  Once it’s stuffed to your liking, sew the opening closed and weave in the yarn ends.

Making the Face/Screen and Buttons

1. To make the back piece, cut a piece of black felt that is 3 ¼” x 2 /34”.  Round the corners and gently round the bottom just a bit (see pictures for example)

2. To make the screen, cut a piece of light gray felt that is 1 ¾” x 1 /12”.  Using black floss, stitch on a simple face.  Check out my face examples for ideas. Don’t worry about tying off the thread as you’ll be covering the back in glue next anyway.

3. Using plenty of glue, attach the screen to the back piece.  The felt will quickly adsorb the glue so use a lot! Make sure no threads are sticking out and that the screen is placed closer to the top of the back piece than the bottom (once again, use the example pictures for reference).

4. Using the dark gray felt, cut out two circles for the A and B buttons, the thumb pad and two small rectangles for the Select and Start buttons. Put these pieces aside for the moment.

ALTERNATIVE: You could also draw the face on the screen with a black sharpie or paint it on with acrylic paint, and use sewing/craft buttons for the A and B buttons.

Embroidering the Details

1.  With white floss, embroider GAMEBOY under the screen, making sure to leave enough room to add the rest of the name.  This can be pretty tricky and unless you are a world-class needle worker more likely than not your text may not be perfect, but it’s ok!  I suggest you cut the thread after you finish each letter to your liking.  That way, if you realize you’ve made a mistake on one letter you can carefully tear the thread out without having to undo all your other stitches.  Be careful not to pull or tear the felt while sewing. (picture 1)

2.  Starting with pink floss, start embroidering the COLOR part of the name, switching to purple for the O, green for the L, yellow for the second O and blue for the R.  Unlike the GAMEBOY part of the name, the COLOR is made to look more like scrawl so it’s okay if the letters are misshapen a bit – note that my R is sadly squashed as I was running out of room.  (picture 2)

3.  To make the power light and white arrows on the side of the screen, start with red floss and embroider a small square for the power light (you could also do a knot or other stitch, whatever you think looks best).  Using white floss, make three > in a row after the light.  (picture 3)

ALTERNATIVE: if the idea of all this embroidery is scary, you could either skip it all together (though it really does add to the project).  Or you could carefully paint on the details using acrylic paint.  A small red bead could also be used for the power light.


1. Using plenty of glue, attach the face/screen to the gameboy (make sure the squared edge is right-side up and the rounded edge is the bottom!).  Make sure to spread plenty of glue over the back of the embroidery to keep the thread in place.  Press firmly onto the gameboy.

2.  Using the pictures for reference, glue the buttons, thumb pad and start/select buttons onto the gameboy’s lower half.  Once again, use a LOT of glue, the yarn and felt will absorb it quickly.

Congratulations, you’re done!

Amigurumi Master Yoda Instructions

A few posts ago I shared a little Yoda I had made, and since then I’ve worked out some guides on how to make him. I crocheted him free-hand so I can’t give the exact method I used, but here’s some rough instructions to make your own Yoda: (I’ve also added some new pictures to help at the bottom of the post)

Here are the crochet abbreviations I’ll use when describing how I made Yoda:
CH = Chain
SC = Single Crochet
DEC = Decrease
INC = Increase (2 SC in one stitch)

BODY: You can find the pattern I based my body off of here.  It gives you the same big head/little body I used and is the same size.

EARS: I believe I did the following for the ears:
1. CH 3, SC in first CH from hook, SC x 1, turn (2)
2. SC x 2, turn (2)
3. SC x 2, turn (2)
4. SC x 1, INC, turn (3)
5. SC x 3, turn (3)
6. SC x 1, INC, SC x 1, turn (4)
7. SC x 4, turn (4)
8. SC x 4, turn (4)
9. SC x 1, DEC, SC x 1, turn (3)
10. SC x 1, DEC, turn (2)
11. SC x 2, turn (2)
12. Skip first stitch, SC x 1 (1)
13. Tie off and weave in ends.

ARMS: These are really ‘work as you go’, you can make them as long or short as you want.  Mine were about an inch long.
1. CH 6, join with slip stitch to make a ring
2. SC in rounds until desired height is achieved
3. DEC in each stitch until closed off, tie off and wave in ends

ASSEMBLING THE YODA: (I’m assuming you’ve already attached the head to the body and stuffed it as described in the pattern).  Using the same yarn you used for the body, attach the ears to the head, pinching the bases a bit to give them more of an ear-like look.  Attache the arms at the desired height on the torso.  Using black yarn, stitch simple eyes on the face.

UNDERSHIRT: While it looks like a full shirt, it’s actually more of a bib.
1. CH 27 (or the appropriate amount to go all the way around the base of your doll), join with a slip stitch to make a ring
2. SC in rounds until it reaches just under the arms
3. Turn, SC x 8, turn
4. repeat step 3 for another 3 rows (or until the bib reaches the neck of your doll)
5. Tie off, leaving a long tail.  Use the tail to loop around the back of the neck and attach to the other side of the bib to keep it in place (see my pictures, I also criss-crossed it in the back to keep the back edge from being pulled down).

ROBE: This is the trickiest part to make, and I can only attempt to explain how I made mine.  Just make sure to keep trying it on your doll to get a good fit.  Remember that these are only guidelines, you probably have to modify this to fit your doll properly and get the right look.
1. CH 31, SC in first stitch from hook, SC x 29, turn
2. SC x 30
3. Repeat step 2 for the next 4 rows (or until you reach where you want the armholes to go)
4. SC x 4, CH 6, skip next stitch, SC x 20, CH 6, skip next stitch, SC x 4 (we’re making the armholes now), turn
5. SC x 10, DEC the next 20 stitches, SC x 10, turn
6. SC x 10, DEC the next 10 stitches, SC x 10, turn
7. SC x 10, INC next 5 stitches, SC x 10, turn
8. SC x 10, INC next 10 stitches, SC x 10, turn
9. SC x 40, turn
10.  If it looks how you want, tie it off and weave in the ends.  You may want to modify it more or ad more rows however.  Remember these are only the estimates of how I made my robe :)
11. To make the sleeves, I crocheted them directly to the armholes, SC all around then INC in rounds until they were the length and width I wanted.

There, you should now have something that looks like my Yoda.  I’m sorry I couldn’t give definite instructions on making him, but if you have any questions or need help just ask and I’ll do my best to help you :)

Designing your own blog with & CSS, part 3

Alright, time to start the fun part of actually stylizing!  Below is a screen shot of my test blog I’m using, your own blog should currently look similar.  Now let’s get started, starting from the header and working our way down.

Your blog should currently look something like this.

1. To start off we are going to make a simply stylized header. Replace all the #site-title CSS code with the following code:

#site-title {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    font-family: Courier New, Courier New, monospace;
    margin: 0px;
    padding: 15px;
    background-color: #FFCF48;
    height: 150px;

Your header should now look like this:

2. Let’s break down exactly what that code does and how it works, starting with the top four commands, which all have to do with the font:

font-size: 60px; This code controls how big the site title font is.  Originally the code used ems (which is another unit of measure in coding) but I changed it to px (pixles) because I work better with px and I think it’s easier for most people to understand.  You can change the number to make the font bigger or smaller.

font-weight: bold; This is easy to understand – it simply bolds the font.  You can also set it as Normal to set the font to a normal weight.

text-align: center;This tells the font where to appear in the element. I have the font centered but you can also set it to left or right.

font-family: Courier New, Courier New, monospace; This sets the font style.  Notice that there are three fonts being called; this is to ensure that if the first font (my first pick) isn’t installed on the viewer’s computer, then one of the other two can be used instead.  You have to be careful with fonts when making blogs or websites, because while it’s tempting to use a specially downloaded, fancy font, chances are that most of your readers won’t have it.  And then they won’t be able to see your text!  Check out this page with descriptions of the most common font families and try to stick with those. 

3. Now let’s talk about the last four commands:

margin: 0px; This sets the margin as 0, therefor centering the #site-title element directly in the middle of the #page element. If you set the margin as say, 10px you’ll see that the header is pushed out of place.

padding: 15px; This sets the padding.  Padding is NOT the same as margin: the margin sets the space OUTSIDE of the element, while the padding sets the space INSIDE the element.  If the padding is set to 0, the font will be pushed up aginst the side of the header.  Not what we want.

background-color: #FFCF48; This sets the background color of the #site-title element.  Right now I have it using a lovely yellow.  Check out or  (my favorite page there!) for more color hexes and samples. 

height: 150px; This sets the overall height of the #site-title.  Feel free to play around with it to get the header height you want.

4. Alright, it’s looking good but notice how the font is that typical link color? Let’s change that so it will be more stylized to our blog. Add the following code after the end bracket of #site-title:

#site-title a:link {
    color: #7442C8;
    text-decoration: none;

#site-title a:hover {
    color: #1DACD6;
    text-decoration: underline;

#site-title a:visited {
    color: #1CAC78;

5: Check out your blog, see the changes? Now let’s look at the code we just used:

a:link controls what a link looks like by default and before it’s been visited. The classic style for links in this state is blue with an underline. 

a:hover controls what a link looks like when the cursor is hovered over the link. Typically this is a dark purple.

a:visited controls what a link looks like after it’s been visited.  This is usually purple as well.

Not that you have to write these elements in THIS order, first a:link,. then a:hover and then a:visited.  Otherwise it will not call properly.

6. Now that we know what each element is, let’s look at the commands we’re using with them:

color changes what color the link is by default (in this case to a nice purple). 

text-decoration changes the decoration of the text.  Other options for the text-decoration command include blink, line-through, overline, none and normal.

font-weight can also be added to make the text (in any or all states) bold.

Feel free to mix and match these styles to get your header link looking how you want.  For right now we’re only stylizing the link in the header, later on we’ll stylize the links used on the rest of the blog as well.

7. Our header is looking good! But that plainly colored background isn’t as eye catching as it could be.  So let’s make a header background using a picture to replace it.  This is going to require a few things – a properly-sized header, a new folder in the blog directory to upload images to and a little bit of code. We’ll start with the header.  The image you use will need to be 900px by 180px.  I’m using this image I found on photobucket, which I’ve edited in gimp.

8. Once you have your image, open up the your blog’s root file in your domain server. Create a new directory called images, and then upload the header image to the new directory.  Or you could create a file called images on your computer, put the header image inside and then upload the entire thing to your root.  Either way should work.

9. Now it’s time to add the code that will call the image.  Add the following code to #site-title:

background-image: url(../../../images/your-header-image.jpg);

(Replace ‘your-header-image.jpg’ with the name of your image!)

Update your blog.  You should now see the image were there was once only a flat color.  If not, then you might have made your image directory in a different place than where mine is, and the code isn’t calling it.  Make sure you’re in the root folder of the blog and the code I’ve given you should work.  If, however, you want to have the image file somewhere else, you can still call it, just keep in mind some things – the code works by going OUT from where ever the CSS file is to where the image file is.  Each time the path moves OUT of a folder, you use the two periods and a slash.  Every time you move INTO a folder, you use the folder’s name. Keep that in mind and you should be able to direct your code to find the image properly.

What my blog header currently looks like:

10. Congrats! You’ve officially made a nice header.  But what if you want to get rid of the default text and add your own to the image? You can do that on your dashboard by going to settings > general and clearing the site title text field.  No name will appear in your #site-title once the text boxes are cleared, giving you the ability to add the blog’s name directly to the header image.  You may choose to do this if you want a more decorative font or placement that isn’t available with the default settings.

Now that our header is done, next time we’ll be working on stylizing the background, tagline and access element.

Tools all website designers need – for free!

If you’re interested in website design, you’re in luck.  Nowadays coding and website building is so common you can find resources all over the place, and hundreds of useful and free software to make your HTML building a breeze.  I’ve put together a list of tools, software and resources all website designers should know and have.  And they’re all free!  I’ve ordered the list with essentials at the top and items for more advance users at the bottom, so if you’re a beginner start at the top and work your way down the list.  I’ve also included some alternative (not free) resources if you have some cash to burn.

1. one of the ultimate free learning resources of the coding world, W3Schools has tutorials on HTML, CSS, JavaScript, PHP, SQL and more.  Basically anything you want to know about coding, you can learn it here!  They also give you the code for each lesson and let you edit yourself right on the website so you can get a feel for what it does.  If you’re a beginner looking to learn HTML and the basics of coding, start here.

Alternative: if books are more your style, check out “Build Your Own Website The Right Way Using HTML & CSS ” by Ian Lloyd.  This is the book I first used when learning to code and I have nothing but praises for it, he sets everything out very simply and clearly – you can literally learn in just days. For under $20 that ain’t bad!

2. Notepad++: a nifty little free program for code editing, Notepad++ has a wide variety of features that will help your coding.  The most useful feature is the code highlighting – to activate it, open up Notepad++ once you’ve installed it and select language > H > HTML.  You’ll find your text is color coded and that makes it way easier to work with.  Unfortunately Notepad++ only works on Windows, if you have a Mac try out TextWrangler, which is supposed to work similarly (I haven’t tried it myself as I don’t have a Mac).

Alternative: if you’ve got a few extra hundred dollars lying around, think about getting Dreamweaver.  It’s my default coding program and has some really nice features, is available for both windows and mac, and if you’re a student or teacher you can get a nice discount for the program.  Everyone else, however, has to pay a bundle for it :( I personally don’t think you need to get the latest version for it to work well; my own copy is from back when walkmen were still cool, lol (okay so it’s from 2005, I still had a walkman back then!). So if you can find an older, working copy on eBay for cheap buy it!  And save that $400 for more important things.  Like food. 

3. Gimp: I’m sure you probably already know about this free little gem but I’m adding it anyway.  Gimp can do pretty much everything that other art programs can do without the huge price tag.  Unless you want your website to be dull text and borders, you need a good art and image editing program, and Gimp fits the bill.  I use it to create everything from header images to backgrounds to touching up photos, as well as a bunch of other art projects.  The web is also abound with  free tutorials to do everything with Gimp from touching up photos to making GIFs and siggies.

Alternative: you can also check out Macromedia Fireworks, and depending on the version you get you’ll pay anywhere from $50 to $300.  I do have a copy of Fireworks (like my Dreamweaver it is oooold) and I use it for about a third of my web graphic needs, simply because I sometimes find the interface easier to use than Gimp.  However I don’t think it’s really necessary for making a good website.  Fireworks can also do a bunch of really fancy web graphic stuff like roll-over menus or something (just what I’ve heard, I only use the basic functions of mine) but you can do cool menus using CSS as well. 

4. Once you have an art program you’ll need something to use with it.  Photobucket is an online picture/art/image sharing site and where I go for all my images.  All pictures can be used royalty free for whatever you may want, so it’s a great place to find graphics and pictures to brighten up your site!

5. while we’re still on the subject of graphics, let’s talk about font.  Nothing says “Newbie!” on a website like a nicely done header in an overly done, default font.  It just looks amateurish.  AbstractFonts has hundreds of cool fonts and they’re free! You need to pay attention to the copyright license for each font though – some fonts are free to use even for commercial uses, but others can only be used for personal, non-commercial use.  And remember that unless someone has the font installed already on their computer that they won’t be able to see it, so don’t go making your entire website out of a font you downloaded – use these fonts only for graphics and images.

6. XAMPP:  praise the coding gods for this one, as it will make your life so much easier.  Once you’ve mastered HTML and CSS and want to move on to using something more advanced like PHP (a must for larger, more complex sites) you’ll need to have a personal testing host installed on your computer, and that’s where XAMPP comes in.  XAMPP is actually a bundle of programs including the Apache webserver (it’s how you use your own computer as a host to test out your files on) and MySQL, PHP and Perl.  They’re all bundled and configured together and will save you HOURS of time and plenty of tears.

7. Filezilla:  my default file-transfer program, Filezilla is clean-cut and easy to use. This is what you need this to upload your finished website files to your online host.  You’ll want to download the client version (you won’t need the server just for uploading your files to your host). you probably know this one already, but this is the place to go if you want to add a blog to your site.  Just download the blog files, upload to your domain and you’re good to go!  It’s just like having a blog on your own site, but with WAY more options.

There you go! With these tools and resources you can make a fantastic website without spending a dime ;)

%d bloggers like this: