magento development



Designer search

Find a designer by country:

Related Tutorials



Web Companies

San Diego Web Design Company
san diego web design

Web Tutorials

Submit your tutorial and earn $25 >
Photoshop tutorials Avatar Photoshop Tutorial

Author: Sanja Soltic

Freelance web designer and web programmer (PHP).


Avatar's main character Jake Sully, paraplegic war veteran, is brought to another planet called Pandora. Pandora is inhabited by a primitive race called the Na'vi, and Jake is sent in to learn their ways so that he can help relocate them in order for humans to take over their resources.

3D computer graphic adventure Avatar is the most expensive film in history, it took $500 million and 10 years to make. The James Cameron film, uses pioneering 3-D technology and computer graphics.

With this tutorial you can easily transform yourself into a Na'vi. I used Photoshop CS3 to transform my boyfriend to Jake. I hope you will like this Avatar movie tutorial.

Step 1 - Creating Na'vi's nose

Import a photograph of your choice, just make sure that size is relatively large. Also, make sure that the person on the photograph is well lit (but not over lit) perhaps taken with flash, so that enough sharp details are visible.

First you need to duplicate background layer.

This is one of the most important steps. To do this, we will use Liquify filter. Go to Filter > Liquify > Forward Warp Tool. First, pull from the middle of the nose to the left, then to the right side, as shown in the picture below.

After you fix the nose you have to raise the eyebrows. If you are not precise, and if your hand is not trained, it's suggested that you set the brush pressure to 50. But I used Brush Size 205, Brush Density 50 and Brush Pressure 100. If you make a mistake you can use Reconstruct Tool.

Step 2

After first step, duplicate layer. Use Burn Tool and darken the nose from both sides.

Step 3 – Cleaning eyebrows and enlarging eyes

Use Clone Stamp Tool to remove the excess of the eyebrows. When you are done with that you can make eyes bigger with Bloat Tool. Go to Filter > Liquify and choose Bloat Tool.

Step 4 – Na'vi's Skin color

In this step, we will transform human skin into Navi's. So, for this, we will use Hue/Saturation. Select the following parameters:

Step 5 - Staining of the lips and the nose

Set the opacity of the Brush to 50% and choose #fa7d7d for color and paint the mouth and top of the nose. After all this you have to switch Layer Mode to Hue.

Step 6 – Levels

To darken or lighten a picture (in my case darken) you have to use Levels. Go to Image > Adjustments > Levels and set the best effect for your picture.

Step 7 – Na'vi's Eyes

Na'vi's iris is considerably larger than human one in relation to the size of the whole eye. For the Na'vi's eyes I copied left eye from the Avatar poster picture. The copied eye was smaller so in that case you have to press CTRL+T (transformations) and expand the eye. If something does not fit in place try different types of transformations, for example, Skew. When you finish with one eye just copy it, flip horizontally (Edit >Transform >Flip Horizontally) and move to the other side and again set to match the size of the original eye. Than use Dodge and Burn Tool to have more realistic look. In the end, you have to lower layer opacity to 71% and fill to 89%.

Step 8

For nicer look you can make a new layer and merge all previous layers by pressing CTRL+ALT+SHIFT+E and than change Layer Mode to Soft Light.

Step 9 – Ears

Copy the ears from poster image and paste them on your picture. If it's necessary, increase the ears and rotate them to fit natural. When you finish with Na'vi's ears, make new layer and merge all visible layers (CTRL+ALT+SHIFT+E). In new layer delete human ears from the photo, like on the picture below.

Step 10 – Na`vi's Skin

You may remember from movie, Na'vi have some dark lines on their skin. In this step, we will create those lines, using pattern. You can simply go right click on the picture below and save it on your computer.

After that open this zebra pattern in Photoshop and, while holding Ctrl, just drag and drop to your avatar photo. If you need bigger pattern you can expand it. Then, use Eraser Tool to delete unnecessary pattern from background, eyes and lips, till you have something like this:

The next thing you have to do is to set Layer Mode to Overlay and lower the Opacity to 19% (in my case).

Step 11 – Sparkling dots

The next thing we're going to do is creation of glowing dots on the skin.

First you have to set brush like on picture below and than click on Pen Tool, change to Paths and draw. Then, switch from Layers to Paths, right click on Work Path and choose Stroke Path. On drop down list select Brush and check Simulate Pressure.

Go to Layer > Layer Style> Blending Options > Outer Glow and set it like this:


The last thing remaining is to make new layer, merge all previous layers and set Blending Mode for layer to Overlay and Opacity to 26%.

Finally, we are done with our Avatar movie character. As you can see transforming an image into a Na'vi is not a very difficult task. So, get started and create your own Na'vi images.



Good tutorial Sanjica, Avatar phenomenon must be great inspiration for a lot of people.

Daniel Pintilie



thanks Sanjica!

one of the best tutorials :)

I think I will try this tutorial out on my friends. I appreciate the simplicity and ease of the Tutorial.

sushma words to explain

Nice tutorial
I make an avatar effect tutorial while ago too


Great! one of the easiest tutorial I've ever had .. !


it is realy good done. I loved your tutorial



how simple it is :P


Thanks alot

nice tutorial perf:D


Pretty damn good tutorial

If you don't have that good of photoshop skill, you can still make a basic navi-style avatar. This site show you how:

hey! use your own mind, this is not a creative. the imitate system was very nice. :)




I'm a new-bee to avatars. Want to make this avatar. Can I then import it into another program and make it talk with my voice?

Ok I'm definitely going to give this a shot for one of my friends - hopefully it turns out half as good as the one you came up with.


its so hard! lol i just couldn't understand it at all. very confusing!

Add Your Comment


Processing, please wait ...
Your name:

Your email:

Your URL:


Follow us
on Twitter

13769 Sites

137 Countries

5858 Designers

add your profile

41 users online

CSS Gallery

Top Rated Web Designers

Share this tutorial on: