Tutorial: Create your own Avatar with the GIMP!

Any comments or suggestions regarding the DKC Atlas Forum can be posted here.

Tutorial: Create your own Avatar with the GIMP!

Postby Qyzbud » March 1st, 2008, 4:08 pm

So, you want to make your own DKC Atlas Forum avatar using the GIMP?

Here is a tutorial to help you do just that.

A pictorial guide will be added when time permits.

Avatar Design Guidelines:
  • Currently, DKC Atlas Forum avatars are to be 96 pixels wide and 72 pixels tall.
  • They are to be based on a screenshot from any of the three Donkey Kong Country games on Super Nintendo.
  • A single character is recommended as the subject of each avatar, but this is just a recommendation.


Step 1: Download and install the GIMP software

The program to use when following this tutorial is GIMP (also known as the GNU Image Manipulation Program)

Download from this page: http://www.gimp.org/downloads/


Step 2: Obtain and open your screenshot

You can either use a pre-existing screen shot that you like, or create your own using an emulator. I'll leave this part up to your own resourcefulness.

Load GIMP, and click File > Open, find your screenshot, and open it. (Or just drag-n-drop it into GIMP from the file explorer)


Step 3: Crop your chosen section

Choose the Rectangle Select Tool from the toolbar.

Below the toolbar are the tool settings. Click to tick the Fixed: checkbox, then click the selector box next to 'Fixed:' and choose Size.
Type 96x72 in the box just below 'Fixed:'

Now click on your open screenshot. A 96px by 72px border will be visible, and this indicates where your selection is.
You can click and drag to shift the position of your selection until you like the way it is framed.
When you are satisfied with the positioning, click Image > Crop to Selection.

You should be left with a 96 x 72 image.


Step 4: Adding a 'scanlines' effect

The first few part of this step is only necessary once. You won't need to recreate the pattern for future avatars.

Part A: Create the scanlines pattern

Click File > New and create a new document of 2 pixels wide and 2 pixels high.
Click View > Zoom > 16:1 (1600%) to zoom in real close.
Choose the Pencil Tool, and select the Brush: setting of Circle (01) (the smallest brush).
Now draw two black pixels along the top of the new canvas.

It should look like a half black, half white square.

Copy this to the clipboard (Edit > Copy), then click Edit > Paste as > New Pattern...
Name the pattern and the filename scanlines.

Part B: Apply the scanlines pattern

Return to your cropped screenshot window and click Edit > Fill with Pattern.
Your image will be completely covered with black and white lines.
Now click Edit > Fade Fill with Pattern, change the value in the Opacity box to 7.0, and click Fade.

Your screenshot now has scanlines!


Step 4: Add a simple black border

Click Select > All, then Select > Shrink and set Shrink selection by: to 1, then click Okay.
Click Edit > Stroke Selection and set Line width to 2.0, then click Stroke

* Your DKC Atlas avatar is now complete! *


Step 5: Optimise and save finished avatar

Click Image > Mode > Indexed..., ensure Generate Optimum Palette is selected, set Maximum number of colors to 256 and click Convert.
Click File > Save As, click Select File Type (By Extension), scroll down until you see PNG Image or png, select that option (PNG), then choose a filename and folder to save it to, and click Save.
Click Save again.

...you're done!


Final Step: Using your new avatar on DKC Atlas Forum

DKC Atlas Forum currently allows you to upload your avatars to our server, so head on over to your User Control Panel > Profile > Edit avatar and click Browse..., then just find your saved avatar (remember, it's in PNG format), click Open, then click Submit to assign your new avatar.


Note: Your avatar may be removed if deemed inappropriate, offensive or... crappy. So, don't make crappy avatars. ;)
Atlas Author
Bananas received 671
Posts: 3228
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Kowbrainz » March 1st, 2008, 5:05 pm

You are awesome. :P

Still, I'll probably be keeping my squitter avi, lol.
Treasure Hunter
Bananas received 1
Posts: 490
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Simion32 » March 2nd, 2008, 9:56 am

Qyzbud wrote:They are to be based on a screenshot from any of the three Donkey Kong Country games on Super Nintendo.

So would that make my DKJB DK avatar inappropriate? I'll have to make a different one.
Sage of Discovery
Bananas received 250
Posts: 2652
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Qyzbud » March 2nd, 2008, 12:06 pm

I'm happy to allow reasonable exceptions, I just wanted the guidelines to be there for people to have an idea of what to aim for.

Yours is fine. At least for now. :)
Atlas Author
Bananas received 671
Posts: 3228
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Cody » March 3rd, 2008, 9:54 am

Thanks, Qyzbud, now I can touch the avatars up myself and let you take care of more important aspects of the website!
Treasure Hunter
Bananas received 55
Posts: 491
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Stone » March 7th, 2008, 7:59 pm

Oh, nice to see this tutorial.
My first avatar was made with Photoshop and it was awful. The jpeg I made was 25kB large with the best settings in 128x64.
Then i tried the worst setting, it was 13kB large (also 128X64, i love widescreen) and then even the preview of this picture looked better than the picture itself.
Gif eventually solved my problems, maybe I try to make a tiny jpeg with GIMP today :roll:
Treasure Hunter
Bananas received 47
Posts: 468
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Qyzbud » March 8th, 2008, 11:13 am

Stone, why not use PNG format? It compresses limited colour and patterned graphics (as seen in retro games) really well, and it doesn't have to lose quality like JPEG compression. Should be perfect for avatars...

I'm a widescreen fan, too. ;)
Atlas Author
Bananas received 671
Posts: 3228
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby cfh » March 8th, 2008, 2:47 pm

Yeah, widescreen is cool. You can show someone talking while also showing a better view of the setting. Also, much better for over-the-shoulder shots.

I'm also a PNG fan. ;) I don't understand why people use JPG anymore when PNG is so much better... like IE vs. Firefox...
User avatar
cfh
Veteran Venturer
Bananas received 5
Posts: 617
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Stone » March 9th, 2008, 2:08 am

Hehe, Photoshop wasn't able to make the png file of my avatar small enough for this board (6kB isn't that much, you know 8-) ).
But first tests with GIMP looked very promising.
Today, with those giant HDD, many software-deleloper don't try to optimize their software to use less HDD-space.
Look at those tiny SNES-games, especially DKC. They aren't bigger than 4MB, but they are full of fun.
Other example: Resident Evil 2 on PSX. The game was sold on 2 CD's, but it was possible to get all the stuff into an 64MB N64 cartridge.
Of course, with nice compression routines and not-that-beauty FMV's. But the gameplay was as nice as on the original version.

EDIT: I have to get used with GIMP, i've done this picture with Photoshop and converted it with GIMP. Scanlines resulted in an filesize of 8.5kB first, but it worked the second time. I don't know why the filesize of the same picture can be so different depending on the way you create it. Also, my picture is brighter than Qyzbud's. Maybe I did something wrong implementing the scanlines? I hope you'll like it nonetheless :D

EDIT2 (July 24th 08): Already have a new Avatar.
Treasure Hunter
Bananas received 47
Posts: 468
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Kiddy14 » July 24th, 2008, 3:31 pm

I can't apply the scanlines effect.
I fade it but if the opacity is set from 0.0 to 49.9 it looks normal, but if it is from 50.0 to 100.0 it is covered with white and black lines no matter what =/
It's not a problem with the Gimp's preview since the finished file does not show any scanline effect :|
Expedition Leader
Bananas received 25
Posts: 1134
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Stone » July 24th, 2008, 11:41 pm

Scanlines are a waste of filespace (but nice looking), it almost doubles the amount of different colors which almost doubles the kb...

But I'm not in the position to grumble about oversized Avatars ;)
Treasure Hunter
Bananas received 47
Posts: 468
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby BlueTronic » July 26th, 2008, 6:36 am

I was messing around with GIMP and made a few avatars out of some glitch snapshots I had and added some special effects. The Rambi avatar has too big of a file size to use, so if anyone wants it I can get a jpg of it compressed to 6 KBs.
Attachments
Neon Rattly.png
Neon Rattly.png (4.21 KiB) Viewed 13078 times
Stone Rambi.png
Stone Rambi.png (17.81 KiB) Viewed 13077 times
Blue Dixie.png
Blue Dixie.png (25.23 KiB) Viewed 13077 times
Previously "Kong-Fu"
Bananas received 103
Posts: 1392
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Jomingo » July 26th, 2008, 7:07 am

Those are great, but they're supposed to be 96x72.
Sage of Discovery
Bananas received 7
Posts: 2312
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby BlueTronic » July 26th, 2008, 7:27 am

I think you can resize them at the change avatar page.
Previously "Kong-Fu"
Bananas received 103
Posts: 1392
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Kiddy14 » July 26th, 2008, 9:38 am

I have resized them to the forum's conventions, but sadly, they're too big to be used (except the Neon Snake), maybe somebody can compress them without loosing quality?
Attachments
neonsnake.png
neonsnake.png (3.04 KiB) Viewed 13029 times
stonerambi.png
stonerambi.png (12.59 KiB) Viewed 13028 times
bluedixie.png
bluedixie.png (15.59 KiB) Viewed 13034 times
Expedition Leader
Bananas received 25
Posts: 1134
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Simion32 » July 26th, 2008, 10:08 am

If there aren't too many colors, It may be possible to get them into GIF's. That's usually the case with SNES images, as they don't have more than 256 colors. However the images Kong-Fu created have effects which cause there to be tons more colors than a GIF can manage, and do not compress very well. The 96x72 stone Rambi got 6.93KB as a GIF.

JPG's can be quite high-quality if you've got the right program. Try Ken ward's Makeup, it can convert an image (PNG's won't work, you have to import via BMP) to JPG and allows you to vary the quality/compression of the resulting JPG image. It has a preview, so you can keep re-adjusting the quality until the file is below 6KB. The 96x72 stone Rambi got 5.69KB as a 95% quality JPG.
Sage of Discovery
Bananas received 250
Posts: 2652
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby BlueTronic » August 13th, 2008, 12:12 pm

JPEGs still lose quality, which make the colors less vibrant. No matter how close you get to 6 kbs JPEGs will still come out losing quality. It turns out, DKCAtlas supports transparent GIFs. I tried removing the background and uploading a transparent gif of my avatar, and it was only 1.30 kbs without losing any quality.
Previously "Kong-Fu"
Bananas received 103
Posts: 1392
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby Qyzbud » August 13th, 2008, 12:46 pm

Yes, the Internet supports transparent GIFs. Well spotted. :P

Besides, I'm pretty sure you lost a lot of the 'vibrant colours' when you removed the background. :lol:
Atlas Author
Bananas received 671
Posts: 3228
Joined: 2008

Re: Tutorial: Create your own Avatar with the GIMP!

Postby BlueTronic » October 27th, 2008, 7:00 am

Qyzbud wrote:
Spoiler!
Part A: Create the scanlines pattern

Click File > New and create a new document of 2 pixels wide and 2 pixels high.
Click View > Zoom > 16:1 (1600%) to zoom in real close.
Choose the Pencil Tool, and select the Brush: setting of Circle (01) (the smallest brush).
Now draw two black pixels along the top of the new canvas.

It should look like a half black, half white square.

Copy this to the clipboard (Edit > Copy), then click Edit > Paste as > New Pattern...
Name the pattern and the filename scanlines.

Part B: Apply the scanlines pattern

Return to your cropped screenshot window and click Edit > Fill with Pattern.
Your image will be completely covered with black and white lines.
Now click Edit > Fade Fill with Pattern, change the value in the Opacity box to 7.0, and click Fade.

Your screenshot now has scanlines!


Step 4: Add a simple black border

Click Select > All, then Select > Shrink and set Shrink selection by: to 1, then click Okay.
Click Edit > Stroke Selection and set Line width to 2.0, then click Stroke

I used a much easier way to get scanlines and a border:

Scanlines:
1. Set BG the to the desired color of the scanlines - In the Gimp main window, click the white box under all the tools and set it to the color you want the scanlines to be.

2. Apply the "Erase Every Other Row" filter - In the image window, go to Filters->Distorts->Erase Every Other Row. In the "Erase/Fill:" drop down menu, select "Fill with BG" and press OK to apply the effect.

Border:
1. Go to Filters->Decor->Add Border in the image window.

Also, here an animated .gif avatar of the "DK humps himself" glitch
Attachments
dk_hump2.gif
dk_hump2.gif (10.64 KiB) Viewed 12828 times
Previously "Kong-Fu"
Bananas received 103
Posts: 1392
Joined: 2008


Return to DKC Atlas Forum Discussion

Who is online

Users browsing this forum: No registered users and 1 guest