Creating pixel style avatar images with Photoshop

From GMpedia.org Wiki

Jump to: navigation, search

Most of todays game media aims to be of highest possible quality and realism but sometimes you want to have this pixel style look of games from the classic 16bit game era. Maybe you want your game to look oldschool with intention or you are not very good at hand drawing you own images and nothings sucks more than using photographs in a video game! In that case this tutorial might be of interest for you.

I'm going to create a pixel style character avatar image from a photo and before all pixel artists now start yelling at me and call me a delinquent, think about what I said that not everyone has the skills or time to hand pixel their own artworks. Besides the style I'm going to create looks good in its own, otherwise I wouldn't write a tutorial about it.

Here is a preview of how the image looks before and after being finished with this tutorial:

Image:pixel_avatars01_01.png


Requirements:

  • Photoshop (preferably CS)
  • A suitable image of a persons face. The person should look straight at the viewer and it is of advantage if the image hasn't many small details but large homogenous areas.


If you got all the stuff together let's begin:


1. Load your image into Photoshop and crop/change it to the size you need. A small image size is usually preferred for this purpose. I choosed 80x100 pixels for my avatar. Optionally if the image hasn't much contrast it is a good idea to increase it now with Image/Adjustments/Brightness/Contrast. Here is the source image I've used ...

Image:pixel_avatars01_02.jpg

2. Duplicate the layer with your image and name the duplicated layer Pixel Layer 1. Then delete the original layer (probably named Background) and add a new layer, name it Solid Layer and drag it under the Pixel Layer 1. Fill the Solid Layer with a medium gray color, I used #888888. This is how your layer structure should look now:

Image:pixel_avatars01_03.png

3. Select the Pixel Layer 1 and set it's blend mode to Vivid Light, if your Photoshop doesn't have Vivid Light, use Linear Light. Now choose Filter/Pixelate/Mosaic... Enter a cell size of 2 and hit Ok. Choose Filter/Sharpen/Sharpen two times.

4. Duplicate the Pixel Layer 1 and name the duplicate Pixel Layer 2. Sharpen this layer once more and set it's opacity to around 30% depending on how much sharpness you want. (If you are lazy like me you might want to create an Action with the preceding steps.)
You can change the color of this layer to give your image some more unusual color. I used Image/Adjustments/Hue/Saturation with Hue -35 and Saturation +100. This is how the layers and image looks now:

Image:pixel_avatars01_04.png

5. Now comes the magic: Select the Solid Layer and choose the Burn Tool from the Tools palette with a size 13 soft brush, set Exposure to 100% and start painting the areas on the images where you want to have more depth. With this you can make one side of the face darker or accentuate lines. Where you should paint depends strongly on the image and varies alot from image to image. You will notice that the image becomes much deeper and doesn't look like a photo anymore.

6. Almost finished! If you want you can now optionally use the Dodge and Sponge Tool from the tools palette. The Dodge tool is the opposite from the Burn tool and brightens areas while the Sponge tool is used to saturate and desaturate areas. If you use the Sponge tool you have to switch to the Pixel Layer 1 because it will have no effect on the Solid Layer.


7. Finished! Depending on the source image the whole process can vary a little and you have to improvise here and there. However this tutorial showed the right direction to achieve a classic pixel bitmap look with few efforts. You can change the image mode to indexed color (Image/Mode/Indexed Color) if you like. Choose Palette: Local (Perceptual) and set the amount of colors to 256 or lower. Some images still look ok with 16 or even 8 colors. This also decreases your image file size which is a good thing since we want to keep file size low with Flash and memory footprint is lower with 8bit images.

The final image in resized version to make the pixel effect obvious.
The final image in resized version to make the pixel effect obvious.

--Sascha

Personal tools