Edit your photos using the tutorials from this section that deal with a wide range of tasks, from correction to effects and filters.  Home Photoshop Photo Editing Na'vi Avatar Photo Manipulation (Exclusive Tutorial)

Na'vi Avatar Photo Manipulation (Exclusive Tutorial)


This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into a Na'vi (based on the characters in James Cameron's movie "Avatar"). I used Photoshop CS2 in order to create this, but newer and older versions should do the same, as I used basic Photoshop tools only. I hope you will find this helpful.

Step 1

Import a photograph of your choice, but make sure its size is relatively large, as it gives more room to play with. Also, make sure that the person on the photograph is well lit - but not overlit - perhaps taken with a flash, so that enough sharp details are visible.

image 1

Step 2

Choose a "hard" brush from the"Tools" window (I tend to use a "Chalk" brush) and set its "Mode" to "Color", and its "Opacity" to 50%. Now pick a shade of blue from your Color Palette and brush over the entire skin area, leaving out the hair, eyes, and clothing. Now repeat this a couple of times using different shades of blue. In order to get the kind of blue I wanted, I did this four times in total using these colours: #5d7a99 - #32576a - #3c6986 - #54809b. However, every photograph is different, so you may prefer different shades of blue for your image.


And finally, pick a shade of purple, I used #472a50, with a small brush and its Opacity set to 10%, paint the lips with it, and then randomly brush all over the face with it, as this breaks everything up a bit, thus making it more "natural" looking.

image 2

Step 3

Now in my case, I was working on a picture of Tom Cruise with facial stubble. The Na'vi, however, don't seem to have facial hair, apart from the eyebrows - but only if they are a human hybrid (those hybrids also have smaller eyes, and five fingers on each hand instead of four). So I removed the stubble with the "Clone Stamp Tool". You have to zoom right in and press "alt" on your keyboard to select the source area, click once, then let go and paint as normal. Always make sure you pick a source area that looks most similar to the area you want to copy to, and if something doesn't look right, try a different source.

image 3

Step 4

Now remove the ears! In my case this was very easy, as I simply had to paint them black / match the background. The person on your picture may have long hair, in which case you could just hide the ears by using the "Clone Stamp Tool" and copy hair over. However if you have short hair this step could be tricky, for the Na'vi (and the hybrids) have their ears set higher up than human ears. In any case, I would probably use the Clone Stamp Tool again.

Now either you can paint the Na'vi ears yourself, do as I did - import a screenshot I found on the Internet. There are many movie screenshots you can find on the Internet. Save the image onto your computer and go to "File" then "Open..." and select the image.

You can also download the ears I've prepared to make your life easier.

Now select the "Polygonal Lasso Tool" in the Tools window, and create a mask around the ear you wish to import. Once you have done this, either drag the image over into your project, or you can go to "Edit" and "Copy" the ear and "Paste" it onto your image. It will now be on a new layer - which you can see in your "Layers" window. Now place the imported ear wherever you want it to be - you may need to resize it, so click on the "Move Tool", then click on one of the corners of your selection and click on "Maintain aspect ratio" which is the little "chain" icon in the menu (you don't have to do this if you don't wish). Now drag on one of the corners of your selection until the ear has the right size you want.

image 4

Step 5

If it's a frontal face shot you're working on, you simply need right-click with your mouse on the layer with the ear, and select "Duplicate Layer". Then right-click on one of the corners around the selection and choose "Flip Horizontally", and move the second ear to where you want it to be. As you can see, the image of the ear that I had originally imported had the tip of the ear missing. I fixed this by painting the rest in, using the Clone Stamp Tool, and the Brush Tool set to "Normal" (use the "Eyedropper Tool" to select colours from the actual ear itself).

image 5

Step 6

Now we're going to enlarge the eyes. Normally you can try and do this by eye, but because Mr Cruise is looking directly at the camera in my picture, both eyes had to be enlarged identically. First of all, duplicate the overall main image you have so far, so that you have two identical copies lying on top of each other as layers. Then use the "Polygonal Lasso Tool", with "Add to selection" selected from the menu (that way you can select several areas at the same time). Create two masks, one around each eye, including eyelids and eyebrows. Click on "Move Tool" from the Tool bar, then enlarge the selection until the eyes have the size you want. Now click on "Move Tool" again and select "Apply" on the pop-up window. Now "Copy" and Paste" from the Edit Menu. The eyes should now be on a new layer. Duplicate that layer. Then use the Eraser Tool to erase the left eye on one "eye layer", and the right eye on the other eye layer. Basically this means that you now have one layer for each eye, though both enlarged, their proportions to each other are still correct. Press "ctrl" on your keyboard and select both "eye layers" and use the arrow keys on your keyboard to move the eyes up and down, then select each individual eye to move it left and right, once again by using the arrow keys.

image 6

Step 7

You can now use the "Eraser Tool" and brush around the eyes with it to remove what is overlapping and the border lines. Doing this will reveal the layer underneath, so don't erase too much.

image 7

Step 8

This is the most difficult part - the nose! This could potentially take quite some time, so don't get frustrated, just try your best.

Use the "Rectangular Marquee Tool" and generously select the nose along with its surrounding area. Select "Filter" from the main menu and go to "Liquify...". A new window opens and you may want to zoom in a little. Select the "Forward Warp Tool" - with the "Brush Density" and "Brush Pressure" set to 100. And now "shape" the nose into that of a Na'vi's. If you make a mistake you can use the "Reconstruct Tool". It will probably look a little strange, but that's ok, just click "OK" when it looks remotely like the one in my picture. If yours looks better, excellent!

image 8

Step 9

This is still fairly difficult. You will now be using the "Burn" and "Dodge" tools from the Tools window a lot. Use both tools, with their "Range" set to "Midtones", and the "Exposure" set to 5% and continue to "shape" the nose by carefully adding definition. "Burn" darkens, while "Dodge" highlights, so make sure you figure out where the light on your picture is coming from. Because this step is so tricky, it is okay to carry on with the next steps and return to the nose from time to time.

I also used the "Dodge" tool, set to "Midtones" and "Highlights" in order to brighten the irises of the eyes. And finally I dyed the tip of my nose pink, with the Brush tool set to "Color", and the colour itself taken from the ears by using the "Eyedropper Tool".

image 9

Step 10

I continued to use the "Burn" tool - a combination of both "Midtones" and "Shadows", to further add definition all around the face. Check out the differences between images 9 and 10. You may choose not to do this on your photograph. However, you might have noticed that I went back to "Liquify" the nose a little more....

image 10

Step 11

My overall image had turned a little too dark in my opinion, so I went to my Layers window, and at the bottom I clicked on the "black and white" symbol that has the name "Create new fill or adjustment layer", and selected "Levels..." from the menu. Now a new window opens up and and all I did was click on "Auto" and "OK". However that option doesn't always turn out a good image, so you may want to play around with the sliders. Alternatively, if your image is too light or pale, you can change this here too, using the sliders.

image 11

Step 12

For the pattern and sparkles on the face, use the "Burn" tool - Midtones and Shadows, as well as the "Brush tool" - this time a circle shape - with its Hardness 50%, Opacity around 10%, so there's room to build up colour depth, the "Mode" set to "Normal". You'll need to play around with this, as it can take a while to get it right.

image 12

Step 13

Now it's time to enlarge the irises of the eyes! Basically we're repeating Step 6 here. So follow every single step, just apply them to the irises alone. Once you're happy with their position, use the "Eraser Tool" to bring back the eyelids from the layer underneath.

And finally I did some additional lighting effects, by using the "Burn Tool" set to "Shadows" and the "Dodge Tool" set to "Highlights". Check out the differences between Image 12 and 13. However this may not be relevant to your image. All done, I hope you are pleased with your results.

image 13

Step 14

Now let's compare the final result with the original image:

image 13

Good luck!


angelina jolie as a na'vi

About the Author:

Den Simcott

I'm a freelance illustrator, currently based in England UK. I'm mainly interested in natural themes and earthy, organic styles and designs, but I'm always ready to learn, as it feels like I've only just begun my journey as an artist, and still I hope there are some things I can share too.

Author's URL: SolarShine
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Edit your photos using the tutorials from this section that deal with a wide range of tasks, from correction to effects and filters. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments returning visitor March 18, 2010 says:
webdesign.org editors did a great job on collecting the best Na'Vi related Photoshop tutorials! hopefully they would give away a tutorial on how to make a Navi with a body not just face. something like th07.deviantart.net/fs71/300W/f/2010/077/d/0/Avatar_Nu_by_photoexpert.jpg
Reply
comments m8iska March 14, 2010 says:
why does it seem like 99% of these comments are from 12 year olds?? geez
Reply
comments need help March 12, 2010 says:
hay, look, im really bad at paint shop pro and i would really love a pic of me and my twin sister as avatars. can any one help me??? plz! e-mail me elletwin2@msn.com would be really amazing if anyone could help. :L x
Reply
comments Shit cent March 11, 2010 says:
Man your work was fucken shit :P jks lol gj its aight
Reply
comments kennel March 09, 2010 says:
i a good
Reply
comments PrupleSoul March 06, 2010 says:
The nose is ugly, you see a white line that doesnt fit to the face..
Reply
comments Renee Roberts March 05, 2010 says:
oh my god...can you tell me how i can make my picture like this...???
Reply
comments Name March 05, 2010 says:
I have been trying everything to download a version of adobe but seriously i cant! any body got a good link?(A)
Reply
comments Baz March 05, 2010 says:
Fantastic, been looking for a good Avatar tutorial , and this is the best!
Reply
comments nazmul March 02, 2010 says:
excellent......
Reply
comments miguel angel quevedo March 02, 2010 says:
me gusto muy bueno gracias
Reply
comments Mercedes Grazzini March 02, 2010 says:
whoa!!! thanks! I love this! is all very well explained :) I'll do this with a picture of myself, and of my boyfriend who ask me to do one for him ^^
I'll post a link to the results here when I'm done :D

Reply
comments Aniejay March 02, 2010 says:
This is an outstanding tutorial. Better than all the others on the same topic. Thanks so much!
Reply
comments tommy March 01, 2010 says:
this sis an awesome tutorial im doing this for art at school!!!!!
Reply
comments herckcaj March 01, 2010 says:
Here is mine, tell me what you guys think.

www.flickr.com/photos/47966758@N02/4398741494

Reply
comments Timo March 06, 2010 says:
Damn! That is the BEST man. I wish I was that good
Reply
comments Avava March 08, 2010 says:
How did you do a full body? NICE JOB
Reply
comments linlin March 01, 2010 says:
avatar only fun
Reply
comments Hey yo March 01, 2010 says:
Wow this is really cool im doing an assignment for school and your tutorial is amazing thankyou so much keep up with your artistic flair
Reply
comments roel February 28, 2010 says:
Bravoooo.....
Reply
comments Tawni February 28, 2010 says:
By far the most stunning results in a tutorial by far. Others have done Avatar tutorials, but yours THE most amazing. I congratulate and applaud your skills; I can't wait to try this out for myself. Thank you. :D
Reply
comments Eli February 28, 2010 says:
This was really well done! Neato!
Reply
comments petros20 February 27, 2010 says:
Fantastic!, I will try this.
Reply
comments wasker23 February 27, 2010 says:
Cool Bravooooooo
Reply
comments Arun Mano February 26, 2010 says:
hey whoever u r. U r the only one of ur kind. Great job. I m ur fan.. arun - india (arun dot mano at gmail)
Reply
comments Drago February 26, 2010 says:
Very Nice tut, i really like it and made a pic for my self :D
its on my DA profile ddrago.deviantart.com
thanks, :D
Drago

Reply
comments Vijith February 25, 2010 says:
Nice Creativity, I will try this.
Reply
comments Frank February 25, 2010 says:
Wow man! you are great!. You are not a begginer for sure, haha. I'm finding it a little bit difficult when I get to the stripes step -would appreciate if you can give more details about it-. However you did a great job. Thanks alot!
Reply
comments cool February 25, 2010 says:
bien mais ou trouve-t-on photoshop (gratiut)?
Reply
comments ER February 24, 2010 says:
DEFINATELY need to explain the stripes in more detail! lol been trying for aaages to get the same effect as you but no luck so far. How do you get it to taper off at the end ? & it almost looks like you use a different shade of blue with lower opacity rather than the burn tool. I'm sure it wuold be widely appreciated if you explained that step in fuirther depth as apart from that, this is a really cool effect !!
Reply
comments Alex February 24, 2010 says:
cool
Reply
comments raven February 23, 2010 says:
that is so cool
Reply
comments a fan February 23, 2010 says:
bye the way the work is great but where u get the tato in the face ??
Reply
comments Today February 23, 2010 says:
NICE! Respect!
Not for beginners really. I enjoyed so much!
THANK YOU! :)

Reply
comments Alucard February 22, 2010 says:
Wonderful tutorial, not for beginners, but really good.
As a new photoshop user I followed your instructions "on my way" and the results are not as awesome as yours, but still very good for a clumsy guy like me.
Thank you very much ^__^

Reply
comments evilkitty75 February 22, 2010 says:
what is it with tom cruise n make overs LOL
nice 1 lol

Reply
comments ToX February 20, 2010 says:
Im having some problems with step 12 :/
im not very good at that

Reply
comments blue February 20, 2010 says:
how can i make the nose? its really difficult
Reply
comments Ana February 18, 2010 says:
THANK YOU! I made my Na'vi, and it looks perfect. <3 The only problem was, I was unable to download the ears. Tholomew (My PC) flipped out when I tried. :( It's whatever, I used a different pair. Danke schon!
Reply
comments spunknown February 18, 2010 says:
this is amazing!!! i cant believe you did this all on your own! im definitely gonna do it as soon as i get photoshop!
Reply
comments Lindsay February 18, 2010 says:
Someone can do it for me ? Please
Reply
comments Henrik February 23, 2010 says:
Why dont u do it for yourself?????? Theres no fun doing with someone else....
Reply
comments Bunny Girl February 18, 2010 says:
Whooohoooo!!!! I did it!!!!!!!!!!!!!!!!!! YES!!!!!!!!!!!!!!!! AFTER 2 WHOLE DAYS AND 3 REDOS, I'M DONE!!!!! THANK YOU SOOO MUCH! Both your tutorials were the best help ever~ And, guess what, I have never used photoshop before in my life, so you must either be an awesome teacher, or I'm a genius! Or both.

Read more: http://www.webdesign.org/photoshop/photo-editing/na-vi-avatar-photo-manipulation-exclusive-tutorial.18015.html#c_853#ixzz0ftdcbC2U

Reply
comments Stef February 17, 2010 says:
The na'vi don't have eyebrows...
Reply
comments Lola February 22, 2010 says:
The Na'vi don't have eyebrows, but the Avatars do. It depends on the look you're going for, I guess.
Reply
comments Linda February 17, 2010 says:
Hey.. :D
This is really amazing! You're so good at this :D
I have tried to do it myself, but it didnt work x'D
Maybe you could make me one of me?? ;D

Reply
comments Solidgold February 17, 2010 says:
That's just awsome, but I was a bit confused about the stripes, could you explain it a little more please?
Reply
comments Bunny girl February 17, 2010 says:
Whoooaaaa....That's purty darn good! I want one really bad, but I don't have photoshop!!!
Reply
comments Marty February 16, 2010 says:
Stumbled... good work. looking forward to more :)
Reply
comments Meghannn February 16, 2010 says:
sorryy email is bumsmack_09@hotmail.com i was wanting to do it for my bday cause i am obsessed! talk sooon!
Reply
comments Meghannn February 16, 2010 says:
Hi there, u do great work! i cant figure out how to photoshop myself into a na'vi avatar and i want to do it sooooo bad!!! can u please get in touch with me and help me? it would mean alot! thanks! hopefully talk soon ! :)
Reply
comments the jackass February 15, 2010 says:
hi author.. this is a really nice tutorial ... i especially liked the nose part .. at first i thought it was a nose imported form a scrnshot ... although making a nose by ur method is gonna get challenging from an angled shot .. thanx for the ears .. saved me a lot of time :)
Reply
comments Einherjar22nd February 13, 2010 says:
filip i novus u r such a n00bs.
Reply
comments HomoNovus February 13, 2010 says:
hey! this is so.......... LAME
Reply
comments Filip February 13, 2010 says:
whatta bullplop
Reply
comments anoop February 13, 2010 says:
Fantastic!, I will try this.
Reply
comments Thaiane Netto February 12, 2010 says:
muito legal !
Reply
comments WebDesignCheltenham February 09, 2010 says:
This is awesome fun - Think I'll do the whole office staff! I too though had trouble with the stripes - any chance of some more info?
Reply
comments maruchi February 07, 2010 says:
Thanks so much! I turned my 11 year-old into a Na'vi. She looks great except for the stripes. I just couldn't do it so I told her Na'vis don't get their stripes until they're older. Maybe you can explain to us newbies in more detail?
Reply
comments juanmrl February 05, 2010 says:
Hey I admire your work so much! You have a real talent so I was wondering... I'm very new at this so I don't know much yet. Could you create that effect in this picture ()? You could take my glasses off and make me my teeth a bit sharp it would be great! I'd like to suprise my friends with this pic. It would be so cool for us to be Na' vi's so if you can tell me something ;) Thank you so much!
Reply
comments sheriffdude January 31, 2010 says:
like it great work have not used cs2 for a while so had to look to find a few tool ..i used the bloat tool in liquify tool for the eyes as not used to layers after 3 gos it was getting better no whare as good as urs .do you use a sketch pad as i found it verry hard on the laptop ..but you can see my pics on

Reply
Add comments to "Na'vi Avatar Photo Manipulation (Exclusive Tutorial)"

Captcha