Solo's Quick and Dirty Guide to Icon Making

Solo's Quick and Dirty Guide to Icon Making

Hi. Welcome. In the week or so I've been here, I've noticed a lot of people haven't been able to get icons made. It took me some wrestling with it, and I've done this kind of thing many, many times before. This page is the result. I'm going to assume you've never really touched Photoshop(tm) or any of its kind. If you have, some of these instructions will be a little basic. You might want to skim them anyway, since pixlr does things…differently.

To make an icon for Calaveras, you really only need four things:

1. The template. Get it here: http://calaveras.wdfiles.com/local--files/pc-icons/caltemplate.pxd

2. A web browser. (Make sure to turn off ad block and allow flash on your browser.)

3. The digital image you want to use for your icon. From here on out we'll call it your photo.

4. A lot of patience. SAVE OFTEN. Pixlr, like a lot of flash software, crashes a lot.

Got all those? Great. Let's get started.

First, log into https://pixlr.com/editorhttps://pixlr.com/editor. Make sure to agree to their terms of service to get that off the top of your browser window.

It should look like figure 1, below.

fig1.png
Figure 1: Main Pixlr Screen. Click to expand.

In figure one, note how the toolbar is to the left, the menubar is above, and the layers window is to the right. Keep these terms in mind. We're going to use them a lot.

Loading the Template

In the menubar, click on File->Open image, and select caltemplate.pxd. This will upload that image from your computer (you downloaded it already, right? If not, go do that, and come back.) It should look like figure 2, below.

fig2.png
Figure 2: caltemplate.pxd.

Ok, let's take a quick orientation on what this template is. If you look in the layers window, you can see that it's made of up a name layer, a text bg layer, and if you scroll in the layers window, you'll see two image layers, and layer 0.

This will become important later.

Loading your Photo

Loading your photo is exactly the same process as loading the template. In the menubar, click on File->Open image, and select your photo. It should look like figure 3, below.
(I'm using an image I ganked from wikimedia and licensed under Creative Commons By-SA 2.5, by André Karwath. Per that license's requirements, this image is licensed under the same terms.)

fig3.png
Figure 3: Opening your Photo. Click to enlarge the cute kitty.

Modifying your Photo

As you can see in figure 3, above, the photo I'm using for my icon is 1920x1280 pixels. The template is 144x216 pixels. Pixlr is lousy at dealing with gross differences in layer sizes, so we need to crop and scale your photo to make it fit before we move forward. First, select the lasso/marquee tool on the toolbar. Remember the toolbar? On the left? Use that to select the part of your photo that you want in the icon. We'll get the cute kitten's face. You can see the selection frame around the kitten's face in figure 4, below.

fig6.png
Figure 4: Marquee selecting the part of the photo we want. Click to enlarge.

Make sure your marquee is about the same proportions as the template. It makes things easier. Now, in the menubar, click Image->Crop. You should get only the part you selected with the marquee tool, something like figure 5, below.

fig8.png
Figure 5: Cropped Photo

If you didn't get the crop you wanted, press ctrl-z to back out and try again.

The pixel count is in the bottom left of the photo window. It's probably still way too big for the icon template, so let's go ahead and scale the image now. (Mine's already scaled in figure 5. Oops.) In the menubar, click on Image->Image Size. You should get an overlay window that looks like figure 6, below.

fig7.png
Figure 6: Scale overlay.

We have to make sure your photo fits in the icon. The easiest way to do this is to fill 216 in the height line of the resize popup, and let the width fall where it's going to. You'll get a really tiny version of your photo. Don't worry. Pixlr is showing the images at different scales. To see your finished photo, in the menubar, click View->Actual Pixels, and you'll see your photo in the same scale as the template. That's actually what's in figure 5.

Putting your Photo In the Template

Click on your photo, and press ctrl-a. On a mac, this might be command-a. Macs gotta be different. Anyway, we want to select the entire cropped, scaled photo.

fig9.png
Figure 8: Entire layer selected.

Now click ctrl-c (Mac, probably command-c) to copy the photo into the clipboard memory. Nothing much will happen on the screen when you do this.

Click on the template window. This is really important, or what we're going to do next won't make any sense.

In the layers window, scroll down to one of the layers marked image layer, and click on it.

Now press ctrl-v. (Yeah, yeah, mac probably uses command-v. You know.) Your photo should now be in the template. For the love of warm furry things, save your file now. Go to the menubar and click File->Save and make sure that the format is PXD (Layered Pixlr Image), like it is in figure 9, below.

fig10.png
Figure 9: Picture layer in, saving.

Whatever file manager your operating system uses should now open, and give you a list of your directories to save the file in. It's probably a good idea to rename the file here, so we don't clobber the template, in case something goes wrong.

Got it saved? Did the name of the template window change to your new filename? Awesome.

Now, in the layers window, scroll up to the layer called Name, and click on it. This is where the text is. It's also where pixlr crashes the most, at least in my experience. Go to the toolbar, click on the type tool (The capital A), then click on your icon. The window called "cat", in my case. Click on the text "Name" in the template. A text window should open. It should look like figure 11, below.

fig11.png
Figure 11: Changing the Name

See where the Text bar is, and it has the word Name? Type your character name there. Don't go crazy. There's not a lot of room for letters. They say to use Maiandra GD. This isn't one of the fonts available in pixlr that I can find, but if you backspace over Name and put your own name, the font doesn't change. Now click ok. You should get something like Figure 11b, below. Note the text tool selected on the toolbar.

fig17.png
Figure 11b: Changing the Name, detail. Click to expand.

Save again. Now. Seriously.

Next, you need to save your icon in a format the wiki (browsers, really) can read. So go to the menubar one more time and click File->Save Image, and select jpg as the type.

Click ok. If pixlr doesn't crash and the file appears on your computer… guess what. You're done with pixlr.

Uploading your icon

To get your icon into the wiki, where it's useful, go here: http://calaveras.wikidot.com/pc-icons (unless they've changed the page name. They can do that.) Scroll to the bottom. Click Files. Scroll to the bottom. Click "Upload a file from your computer." Click Chose File. Click on the jpg version of your file, and hit open, or ok, or whatever your file manager uses. It's very important to name your icon correctly, or the wiki won't pick it up when it's called. In the line that reads "Rename the uploaded file if you want to:" put your character name in lower case, underscore, icon.jpg. Like this: kitty_icon.jpg - or like you can see it in figure 12, below. Hit upload. It should just work. (I didn't actually upload the kitty icon.)

fig14.png
Figure 12: The Upload Page

And that should be it. If it doesn't show up in your logs, check the filename and the file type especially. If they're not right, redo this step.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License