Part 1 : Get the Picture Ready


Here is what I did to get the WordPress Avatar to work..


NOTE: I used a couple of graphic programs here… mostly because I have never had any training on HOW to use the software.
Maybe I need to take some classes, or maybe (Blood Ties – Madonna) can teach me a few tricks! I am sure that I could have done ALL of this with Photoshop, IF I knew what I was doing!
I don’t know how to make either of these tools do a proper CROP so I always use MS Paint when I need to cut out an image.

1. I grabbed HMV Bat from lwildstar’s webpage and saved it.

I brought the image into photoshop and used the magic want tool to highlight the background.. I then turned it white..
2B. I used Photoshop to clean up the background making it all white.
I used the magnifying glass tool to blow up the picture, so that I could tweak individual pixels
2C. I cleaned up the edges of the image and SAVED it as a *.psd file
2D. I made his right eye darker. It looks like camera flash had made some glare on his eye.
Again I used the magnifying glass tool to tweak the individual pixels of his eye.
I don’t know anything about using Photoshop properly, so I didn’t do anything fancy or use any layers.
Saved it AGAIN, so that If I mess it up later, that I can go BACK!
Any time you are messing with a picture… SAVE, SAVE, SAVE, between each thing that you do to the picture …
Can you tell that I have been burned by that one before?
I used the default Photoshop settings for the images.

This is a free program that I found out on the internet a while ago.
I use it ALL the time to SIZE images that I want to put on the web.
I used it to shrink HMV down to size and also to TILT the image so that it would fit in the Avatar window without cutting off his wings!
I downloaded it FREE from CNET
Just so that you all know… the WordPress avatar final size is 32 X 32 Pixels
3A. Start IfranView
3B. open file File –> Open –> HMV_Bat.psd (Photoshop format)
3C. Before I realized that HMV’s poor wings were going to be cut off by the WordPress cropping tool, I had just resized the image and NOT tilted him… poor HMV!
Had I known that, I should have done step 3C FIRST and ROTATED the image

3C . ROTATE the image..
(DO 3D first or you will make extra clean-up work for yourself! Like I did!)
MENU-bar –> IMAGE — Custom/Fine Rotation
I bumped him -45 degrees

3D. After I rotated of the image, I found that this it did NOT have enough room around the edges for the WordPress cropping tool, so I added an Image Border. I probably should have done that BEFORE I rotated him.. funny how you learn this stuff AFTER you have made the changes!

3D. ADD a BORDER around the image so you have room to play with rotation!
Menu-Bar –> Image –> Canvas Add image border (canvas size)
I added 30 Pixels on all sides and changed the border color to WHITE… the default is BLACK!!
Now I had a white border and HMV in a white box surrrounded by black! UG!
I used photoshop to clean it up again! Silly me! Had to remove the black edges.
Note to self — Do the border FIRST, and THEN rotate the image!

SAVE the image! (Now I started saving the current images as *.jpg files)
Be sure to save the images as different names, maybe add a number behind each change, so that you have the option of going back and starting over if you need to.
I used the default JPG settings in IFranView

Be sure to do ALL image enhancements BEFORE you condense the image. Just so you know, when you compress the image, you will LOSE a lot of the original details of the image.
3E. Resize the image — CONDENSE it for the Avatar
IFRANVIEW : MENU-bar –> IMAGE –> Resize/Resample
in the pop-up window play with the WIDTH number.
IfranView will automatically adjust the Height in relation to the Width changes you are making. The resize can condense the image and keep the original image’s proportions intact.

I played with different compression sizes to see how they fit inside the WordPress Avatar cropping tool. I tried several different sizes etc, before I got it JUST RIGHT!

Now your picture is ready.

Let’s make the Avatar

Part 2 : Creating the Avatar


%d bloggers like this: