DKC Atlas Forum

[Qyzbud]

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.

[Kowbrainz]

You are awesome.

Still, I'll probably be keeping my squitter avi, lol.

[Simion32]

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.

[Qyzbud]

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.

[Cody]

Thanks, Qyzbud, now I can touch the avatars up myself and let you take care of more important aspects of the website!

[Stone]

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

[Qyzbud]

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.

[cfh]

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...

[Stone]

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 ).
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

EDIT2 (July 24th 08): Already have a new Avatar.

[Kiddy14]

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

[Stone]

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

[BlueTronic]

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.

[Jomingo]

Those are great, but they're supposed to be 96x72.

[BlueTronic]

I think you can resize them at the change avatar page.

[Kiddy14]

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?

[Simion32]

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.

[BlueTronic]

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.

[Qyzbud]

Yes, the Internet supports transparent GIFs. Well spotted.

Besides, I'm pretty sure you lost a lot of the 'vibrant colours' when you removed the background.

[BlueTronic]

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