An avatar is a small image that you can use to stand for yourself on a website, such as a forum. Here’s how I made one for a friend.
First step is to find out the particular website’s requirements for avatars. Typical parameters are the image size in pixels, the file size in KB (kilobytes) and the file type, such as .jpg . If the web site isn’t saying what it will accept, try uploading something as an avatar. You won’t get far before it says “This isn’t acceptable because …” and then you’ll know.
For this example, the requirements were:
- Image size; 150 x 150 pixels or less
- File size; 15 KB or less
- File type; .jpg or .gif
Now you’ll need an image of some kind. You could grab one off the web, for example from Microsoft’s clip art site. You could use a simple photo that will look okay after lots of shrinking. Or you might draw something.
Next, have a general idea of what you want to do to the image. If you just want to shrink it, your design is done. In this example, I wanted to make a round avatar because most people’s are square. I wanted it to have a fuzzy border (vignette). And I wanted to put some text into it.
Now the image is in PE 2011 and we’re ready to rock!
My photo is rectangular; I need it to be square to get to the circular avatar I want. So I use the crop tool with the dimensions of a square as constraints to make it square. (The size of the square doesn’t matter, so I made it pretty big.) Centered is boring, so I move the crop area off-center.
Now I reduce the size in pixels to the requirement, 150×150. Image > Resize > Image size.
This is part of my design; you may have other ideas. Here’s a vignette tutorial (it’s not hard). When you draw the marquee selection border, leave some space between it and the edges of your image to allow room for the fuzzy boundary.
Turn on the grid
I’m going to put in the text now (this is another part of my design; you may have other ideas). I want it to be nicely aligned. So I’m going to turn on the grid. I found that the image was so small that the grid only had four squares in it. To get a usable grid, I enlarged the image. I did this in the document size area rather than the pixel dimensions area. I want the image to have width and height in whole inches so I will get a nice symmetrical grid.
Now I’m ready to turn on the grid.
I want to have a letter/number in each corner of the avatar to form an abbreviation of the username. I use the text tool, drawing a workspace for the letter with the crossbar in the middle of the “Insert text” pointer. I adjust the text size in points so it fills a cell of the grid.
I want each letter to be rotated so its base is toward the center of the avatar. I found that the tempting handle on the bottom of the text area stretches/shrinks the letter rather than rotating it like you’d expect. Thank goodness for undo! Mousing over one of the corner handles yields the curved, double-ended arrow pointer that I really want. After the rotation, I go back to the move tool for a little repositioning. While this is the current tool, the arrow keys on the keyboard will move the letter in small increments.
Resize image again
Enlarging the document to get a nice grid increased its pixel dimensions. So I need to shrink my image back down to 150×150 pixels.
Now I save the image as a native Photoshop file, type .psd. It’s not postable on the web, but I don’t want to lose the layers; I might want to work on it some more.
Shrink the file
Then I save the image as a .jpg file that I can upload to the website as an avatar. I go for maximum file size to get a noise-free image. I check the file’s size in Finder; sure enough, it’s too big!
It’s possible to make a smaller file with PE11 by using more data compression for a noisier image, etc. But I’ve never been able to beat it down to 15 KB without very severe surgery. My theory is that the problem is image metadata, or possibly space reserved for metadata by PE11. JPEG is a compound file format; besides the 0’s and 1’s that hold the image pixels, it has optional segments for all sorts of information, such as GPS coordinates.
But an avatar doesn’t need that extra baggage. So I can shrink the file without shrinking the image. Rather than figure out how to shed the metadata inside PE11, I opened the .jpg file with Paintcat, a cheap, simple graphics program.
A side-effect of this program is that it doesn’t seem to include much if any metadata in files it writes. I did a write-as that dramatically shrank the file size without changing the image.