Creating pixel style avatar images with Photoshop
From GMpedia.org Wiki
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: |
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 ... |
|
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: |
|
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.) |
|
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.
|
--Sascha

