Giant Icon Making Tutorial

[lierdumoa]

People lately have been asking me how I do the crap I do when I make icons.

So that I shall never have to answer such questions ever again, I've written a giant assed tutorial thingie. So...yeah. It's all here (mostly):



Some rules of thumb, first off. Make sure any text you put in your icon is easy to read. use a color that is visible in front of your background. If your background has drastic color changes, outline your letters in another color. Elaborate fonts are difficult to read. Try not to use elaborate fonts to write anything longer than three words. Always save your still-image icons as PNG files. PNG files have the color versatility and picture integrity of BMP files, but are compressed to the approximate size of JPEG images. Also, livejournal allows for the upload of PNG icons. JPEG files often have reduced picture integrity. The difference is hardly noticeable in photograph images, but becomes increasingly more visible in cartoon images. Being that I am a perfectionst, I always save my still-image icons as PNG files regardless of whether or not the difference is very noticeable. Photobucket is an image loading service that allows for the upload of PNG images and allows for remote linking. It's also free.

Below I have explained how I make animated icons. All of the software I use in making them is free software, just like my image loading service.

Because I'm ghetto and I don't pay for shit.



I. Animating your icons.

You can use various programs to make GIF animations. Photoshop is the more popular application. I, myself use GIMP. It has virtually all the same capabilities as Photoshop. It was originally designed as a Photoshop-like application for Mac users, since Photoshop was not compatible with the Macintosh operating system. It is and has always been free -- legitimately so. You don't have to worry about trying to download Photoshop on kazaa and risking copyright infringement.

Step 1: Downloading the GIMP.

Download GIMP for Windows, Unix, Mac, etc. here. Make sure to follow instructions carefully. You will have to first download and install an installer, then download and install the GIMP, and then download and install a plug-in which enables you to save GIF files using the GIMP.

Step 2: Manipulating your pictures.

If you are working with screen captures, chances are they were taken from an MPEG. They probably don't have very good resolution. They are probably very dark. As to resolution, there's not much you can do. If you're doing somebody's face, then try to use a frame in which their face features largely, so you can minimize a lot. The more you shrink a picture, the better the resolution becomes. As to the darkness/dullness of screen captures, remember that the "Brightness/Contrast" function is your friend. Don't be afraid to use it -- a lot, if necessary.

Hue manipulation I'll leave to the icon-maker's discretion. If you want to give your images a blue tint, then have a party.

GIMP tutorials are available here. I, myself, have not consulted any tutorials. I prefer to learn by doing. However, if you're in a hurry to get something done, trial and error probably isn't the best approach.

Step 3: Animating images.

Again, this is something you might want to use a tutorial for. Adding frames to a moving image is equivalent to adding layers when using GIMP. Just right click on an image and go to "Layers" --> "Layers, Channels, Paths." You'll find animation information under "Filters" when you right click on an image. You can see what your animation looks like. You can change the timing for each frame, but first you must go to "Filters" and click on "animation optimize" --- then you will be able to manipulate timing in "Layers, Channels, Paths."

Make sure you optimize an image before saving it as a GIF file. The file size limit for icons is 40KB. It's easy to go over that limit. 40KB can fit about 5 100x100 frames. If there is a lot of color similarity, optimizing an animation allows for transparent areas when a color is repeated. Transparent areas mean you are make your image file smaller, so you can fit more frames in.

Video clips need to be considerably smaller than 100x100 pixels, depending on their length. One can have a still background of 100x100 pixels with a smaller area animated. The Alias icons I made in this post contained a still 100x100 backdrop with a 50x50 animated area. I was able to fit in 17 frames. For the Everwood icons I made in this post, I made the animated section 40x40 instead of 50x50, and I was able to fit in 20 to 25 frames. The less color information per frame and the more colors shared between frames, the more frames you can put in.

Of course, none of these instructions will make any sense unless you are using GIMP and can see what I am describing.

I strongly believe in taking time to gain some familiarity with the GIMP. Play around before you start on a serious project. After all, GIMP is essentially a toy. Toys are to be played with.

---

II. Inserting video clips into your icons.

Step 1: You must get video files.

Method 1: Download them.

1. Download and install Bit Torrent.

2. Go to Suprnova. You'll find everything from tv shows to movies to televised concerts. Just click on the links, and they will download using the Bit Torrent software.

Note: You must have DSL, cable, or broadband connection in order to use Bit Torrent, otherwise you will have to make do with kazaa.

Method 2: DVD rip.

If you have a DVD of episodes from an earlier season, you can use DVD-ripping software to make video files (AVI, MPEG, etc.). I, personally, have never used this method. If you are looking for DVD-ripping software, I suggest going to newfreeware.com. They have tons of free software available.

Method 3

For those without highspeed connections, this is the easiest method, but the least versatile. Go to thewb.com. From there you can download episode trailers as RM (Real Media) files. If the scene you want to animate is in the episode trailer, then there's no need to download the entire episode. It's much less hassle to just get the trailer from the WB website.

Note: If you are going to use this method, than skip to Step 2--B.

Step 2--A: Get screen captures.

1. Download Capture Solution. This is free software. If you want, you can pay for a registered version of this program, but for our purposes you won't need to. Once you've downloaded, installed, etc., open the program and click on an icon that says 'movie player run' or something to that effect, when you hover over it. A window will open up in which you will be able to select video files, play them, and extract images/sound from them.

2--A. For AVI or ASF (aka WMV) video files.

Open your video file of the episode. You will then be able to select a section of the film and convert all the frames in that section to BMP or JPEG files.

2--B. For MPEG video files.

Your video file must be in AVI or ASF (aka WMV) format in order for Capture Solution to get screencaptures. If your file is an MPEG, you can use Capture Solution to convert the file to ASF (aka WMV) format, and the program will create a new file of the movie/episode in this format. Then proceed with the instructions in 2--A.

I suggest in using this program that you just play around with the features until you get the hang of them.

Step 2--B: Get screen captures.

When you open an episode trailer in RealPlayer, click on the pause button and press the "print screen" key on your keyboard. Open Paint or some other picture program and paste the screenshot you just took into the picture window. Taking screenshots using this method works with Real Player and with Quicktime as well. It does not work with Windows Media Player, Divx, etc. In Real Player, just press the foreward button that, instead of re-starting the movie, just takes you to the next frame. Repeat as necessary. As you can see, this method gets tedious. However, in an episode trailer, scenes aren't likely to be longer than ten frames, so it shouldn't be too much of a hassle.

Step 3: Animating screen captures.

Refer back to I. Step 2.



Also, lunakornkid has saved a bunch of icon tutorials to her memories. Find them here.



And in other news -- what is it with the Chinese people at my college and their obsession with bubble tea? That shit is nasty. Black marble sized tapioca balls are not appealing. Especially sitting at the bottom of a glass of black tea looking suspiciously like exceptionally large caviar.

They taste kind of sweetish -- not great. Their texture is on the slimy side. I just don't get the appeal. I'm not feeling the love here, people. I'm just not.

So I went to the night cafe in my dorm last night and asked for some iced coffee. They asked me if I wanted "bubbles" in it. It was one of those moments where "No thankyou" was what came out of my mouth, but "Oh, fuck no!" was what was going on in my head.

Blech!



Seven more days of class! Then finals! And I get to tell my parents that I flunked everything.

*sigh* I won't flunk everything. I'll just go crazy studying. I've done so before. I'll revert to uber-nerd state, in which I do nothing but bury myself in books and practice problems and mumble about partial derivatives in my sleep.

Multi-variable calculus is a bitch, I tell you. A nasty bitch.

Comments

[evenstarjuliet.livejournal.com]

Yes, multivariable calculus is a nasty stinking bastard. thank god I'm almost done with it. never again!!!!

The tapioca balls in the bubble tea here SUCK. I, unknowingly, got some in my drink when I went to LSC one time. 50 cents extra for things that reminded me of dead slugs and had no taste. I couldn't even stomach them, and they took up room where the mango juice could have been!! The ones at Lollicup are really good, I think there's a lollicup up here, but I know there's one in Orlando because Matt and I get stuff there. Their tapioca balls (they call them "boba" lol) are sweeter and not as big. Plus they're not black. That's a major plus.

Anyway, there was my $.02 about Bubble tea.