Note: image not yet created
What do you do behind the scenes when you update your website?
Last updated: Sep 27, 2006
1 A brief history
Before I began actively using the open source program called "GIMP", simple ol' MSPaint was all I had. I became very good at using MSPaint and could create artwork about that of what the more sophisticated programs could. I knew several useful formulas, the color averaging formula being the most commonly used. That formula is used for the last part of lighting, fog, transparency, and a few other things. I have several derrivatives of that formula nowadays and I have more formulas available. From all these formulas, I can do a lot more with art on the computer. All I need is just some numbers and a calculator (calculator for the more advanced stuff that would take too long to work out in my head than it's worth). From the Gamestudio forums around late 2004 or early 2005, I first heard about the GIMP and I tried it out. I was so used to MSPaint at the time and I was often faster. Over several months of time, GIMP became my primary program for making artwork. Today, the only thing I use MSPaint for is capturing screenshots. I can do it far faster and much more reliably than with GIMP as all I need to do is start up the program after snagging the screenshot, paste it, then save it as a BMP file somewhere. From BMP, I save it into PNG if I plan on posting it on my website (JPG in some cases, mainly with video game screenshots). I've even noticed several mathematical accuracy issues in GIMP quite soon after getting it.
2 Creating an image
2.1 Measuring stuff
Because one dream was so well-recalled, and that the scenery was recalled to an extreme degree, I wanted to create a map. Here, I'm making the map, measuring the distance of the pathway. I've noticed mathematical accuracy faults with the pencil tool and the way the measure tool is designed and I've found the best way to measure things is by the rectangular select tool as it's the most accurate. In this case, I'm measuring 80x80 pixels. It took a while to get the distance correct because of the accuracy faults of the pencil tool. It says I have a line 5 pixels long, but it's actually 6. I have Windows Task Manager in the background with GIMP shown at the very top. The reason for this is because GIMP, at the time, is very unstable when it comes to using the menus. At random times when using the menus, GIMP will suddenly use 100% of the CPU causing everything to get so slow and the only way to get it to stop is by terminating it by Windows Task Manager. Another reason is that GIMP produces so many page faults, far more than any other program does, that it amazes me. Page faults are not harmful, unless invalid, which is quite rare. GIMP's priority is set to "below normal" because of it's instability. This way, other programs take priority over it. You shouldn't do this unless you know what you're doing. The program may behave weird or even stall at times when some other program running in the background uses the CPU.
2.2 Making curves
At the start, I had square edges on the path, but in the dream, they were curved. To get curves, I use circles. The path's width is always the same so I get the two circles, of the same size but double the size of the "block" removed and create a square with a circle cut out of it. In my case, it's a 6x6 pixel "block" being cut out so I need a circle of 12x12. I see it as having a 6 and a 2 which leads to a 12. I stash these temporary items off the side of the main area and use them by copying and pasting from them.
2.3 Adding transparency effects
Having added the "boat" in the dream, the boat would normally hide the path. Because I wanted users to know where the path started from and how it went in the dream, I wanted to make it at least somewhat visible. I couldn't just make the whole layer transparent nor the boat only, so I decided I should use my well-known color-averaging formula I've known since 2002:
All it is is weighted averages meant for colors. This formula is infinitely precise, more precise than any computer could do, even if 1024 bits was used per color channel. Normally, I choose colors as a multiple of 16 (with the exception of 255, the highest it goes). The only time they aren't is when there's too big of a difference between two colors and I need higher precision (of which I use multiples of 8 instead), or if a calculation says otherwise. The red and green colors in the above screenshot have been calculated and I just typed in the blue value which is also shown on the calculator. Because I can't use fractions, I round to the nearest integer. I didn't have to here because it came out exact. In my case, I'm mixing 3 parts of the color of the "boat" with 1 part the color of the path. I add labels as needed at the end.
2.4 Save as GIF or PNG?
Which will it be? GIF or PNG? I never know which file format would have the smallest file size as it seems to almost be break even. Before even saving as GIF or PNG, I first save the XCF file as a BMP file. This merges all the layers together keeping the colors in tact. I then save as PNG because it's lossless and there's no risk of color loss no matter how many colors I have. I then save the PNG file as a GIF file since the number of colors is well within the limits of GIF (256 and under). By avoiding anti-aliasing effects as much as possible, I can help save on the file size. Try saving a random mess as PNG then save something with four colors in a 2x2 grid covering the entire image. The file size of the same-sized image has a huge difference. I have a good idea on how compression works so I can get the highest quality, the smallest file size, and the greatest accuracy. By now, GIMP has just under 20 million page faults when it had just over 10 million in the screenshot above this one. In this case, PNG had the smaller file size so I used the PNG file.
2.5 Explaining the image
Having saved the image and checked the file size to see whether I use the GIF version or the PNG version, I then begin to explain the image and what the markings mean. You can see this when I'm most of the way through it. I look at the image and what letter I need. I identify it like a student would reading a map and identifying a place for a geography test. I need to see what "K" is on the map and upon seeing it, the area where employees were working behind some food (if I recall correctly from the dream), I put this in the document then look at the map again for the next letter, "L", the point where I get out of the boat and where I head for the area where the natives are in the "south" part of the map. Because I don't know whether or not a direction is north or south, I draw the map based on my favorite angle and where it would be easy to draw the map getting the straight lines (which helps with compression). In almost any map, north is up and that's how I describe things where north is up.
On the next page, we'll see how I process the daily entries on the blog.
Editting the headlines of the blog
Editting the dream journal
Adding the daily blog entries
Final touchups before uploading
Uploading and testing