Everything Photoshop Subscribe

Applying a Realistic Tattoo

In Photo Effects by Arik
There are lots of tutorials on the web that claim to achieve a realistic tattoo effect. Usually these tutorials instruct the user to import an image they want to use as a tattoo and to set it to overlay. Out of experience I can say that this does NOT look like a tattoo. It looks like...well...an overlayed image.

In this tutorial I will be demonstrating an advanced technique to achieve a realistic tattoo. We will be using masks, adjustment layers, displacement maps and several brushing skills will be applied.

So the first thing I did was that I went looking for a good stock image. I wanted a face with a lot of detail such as facial hair, expression and most importantly; pores! I tend to get my stock images from www.sxc.hu . Being impoverished and all I can't afford to spend a buck on each picture. Sxc offers images for free. I ended up using this great image by Emiliano Spada.

Next thing we need is a tattoo design. You can create your own but I am not only poor, I am lazy as well. Head over to gomedia.us and get your hands on their Vector Sample Pack (from the Freebie Section).

Step 1

Ok, open up your stock image and duplicate it by clicking on the layer and dragging it to the New Layer icon down the bottom (it's the one to the left of the trash can). Name this layer 'Base', desaturate it (Shortcut: CTRL+SHIFT+U) and duplicate it again. The reason I am doing this is that I like to have multiple stages of my base image, just in case I mess up, so that I can come back at any given time and fix errors.

Step 2

Time to prepare our image. I really want to bring out the detail in the skin, therefor I am going to up the contrast and adjust the tones a little bit. Let's add 3 adjustment layers. First, a levels layer. Then a Brightness/Contrast layer and last a curves layer. You can add each by going to Layer > New Adjustment Layer > Levels/Brightness/Curves depending on which you're adding. Adjustment layers allow you to change the properties of the image below without actually destroying or changing image data.

Step 3

The well known 'S-shape' in the curves layer enhances contrast but may have a downside. As you can see, some parts of the stock are affected heavily by the light. These parts include the forehead and parts of the cheeks. The curves layer can make these parts too light and eliminate their detail. To solve this you need to apply a layer mask to the curves layer and brush up those parts.

You can do this by going to your layers palette, click on the curves layer then down the bottom click on the button third from the left to add a Layer Mask. Once you've added a layer mask you'll see an extra mask clipped on to the layer. Click on that mask and then using a softish brush and black gently paint over the areas where you do not want the curves layer to show through. Remember that when you add a layer mask, white lets the layer show through, black hides it.

Step 4

I was not all too happy with what I had, so I decided to use the Burn Tool (O) and touch up the image manually. I used a large, Soft brush and set the range to Shadows with an exposure of 32% (shown)

Now go to Layer>Flatten Image and save the file as Displacement.PSD . DO NOT CLOSE THE FILE as you will lose everything. Hit Ctrl+Z to undo the 'Flatten Image' command and now go to File > Save As... and save the file as Tattoo.PSD or any other name apart from Displacement.PSD

See, we will be using the Displacement.PSD file as a displacement map. Therefore we shouldn't edit it any further, thus any change we apply to our image from now on will be saved into the Tattoo.PSD file. Ok, on to the fun part...

Step 5

Now that we've finished prepping our image, we can finally start applying the tattoo. Open up your Gomedia free vectors file in Illustrator (preferably, but you can also open it in photoshop). Copy and paste a design of your choice onto the face. Rotate it and adjust it accordingly, so that it fits more or less. Mask out any parts that should not appear to have a tattoo on them, in my case these are the lips. Rename the layer to 'Tattoo' so that you can find it back easier. Close the vector eps file and do not save the changes. Here is how my design (tribals, set 3) looks applied.

I masked out the top part so that it doesn't over the lips and I got rid of the tips that stick out beyond the face.

Step 6

Duplicate the shape layer twice, there now should be a 'tattoo copy' and 'tattoo copy 2'. Set the 'tattoo copy' layer to Overlay at 80% opacity. Set the 'tattoo copy 2' layer to Soft light at 64% opacity. Hide the original 'tattoo' layer.

For organizational purposes I have created several layer sets and dropped my layers into those sets. You can create a layer set by clicking on the icon in your layers palette, that is located between the 'new adjustment layer' icon and the 'new layer' icon. Using layer sets will increase your workflow.

Step 7

Rasterize your 'tattoo copy' layer by right clicking on it in the layers palette and selecting 'rasterize layer'. This process will return the blending mode to Normal so we must set the blending mode back to Overlay and the opacity back to 80%. Now go to Filter > Blur > Gaussian blur... and gaussian blur the layer with a value of about 2.0 pixels.

Next, this is where your creative mind steps in. You will have to mask away parts of both 'copy' layers until you have found a satisfying result, regarding the opacity of the tattoo. I prefer to use a big brush and alter in between 10 and 20 percent opacity while brushing. Here is how my result looks:

Congratulations, you have just gone beyond the part that is covered in any other tutorial. You have created something that looks more or less real. But we are not done yet

Step 8

We are almost there, time to apply our displacement map. Select your 'tattoo copy' layer and go to Filter > Distort > Displace... Leave the default settings and hit ok, a window will come up prompting for a .psd file. Now navigate to your displacement.psd file and select it. Select your 'tattoo copy 2' layer and hit Ctrl+F. This will repeat the filter for this layer, you should now have something similiar to this:

Conclusion

I hope that you have learnt something from this tutorial and I hope that you understand that it takes a lot of time and effort to make something look real. The best way to achieve such an effect is by experimenting and constantly looking at challenges from a different angle. When I first started doing this it ook me about 6-8 hours to get a good balance and to develope this technique.

Please note that sometimes the displace filter can have a negative effect, in such cases either do not use it or play around with the opacities of the layer and the Fade Displace... option under the Image tab. You will truly achieve great results by playing around. Here is my final product that I submitted to a contest:

Sample PSD

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Leave a Comment
  1. Amazing as usual. A great tutorial and this deserves a coffee.

    Cheers

    Purely a 10/10

  2. Great tute! thank you!

    I’d def like to see more tutes from this guy. Good to see some nods to better workflow methods - layer masks, sets etc.

    Keep the quality up, this site is shaping up to be the definitive PS tutes guide on the web.

  3. Thanks for this tut man. I saw something similar the other day and was thinking on how to do it. Guess this explains it all =)

  4. Great Tut, i will try this in my own..Thanks for sharing.!

  5. Awesome!!! Thanks for all the contributions.

    Added PSDTuts to my gallery site as well. Will add all your other great sites soon.

  6. Absolutely better than overlay :)

  7. Hey guys, sorry just fixed up the broken PSD link, if anyone tried to download it earlier it was incorrect, but now all fixed up :-)

  8. Wow nice tut really nice

  9. thanks for introducing and sharing this tut!

    -see-

  10. Nice, as always. The net is flooded with wack tutorials, and it is hard to find ones that you really learn from.
    But at psdtuts I always know I can find something useful, and learn something each time… You are my saviour(s?)!

  11. Another great tutorial… Enjoy the coffee i bought you guys :)

  12. wow this is amazing tnx 4 sharing :)

  13. great job ;)

  14. Gravatar

    Timothy Diokno

    Yup! Another great addition to PSDTuts. And really, I thought it was all in the overlay.

  15. Right you are, there are lots of tuts saying that only overlay will do it realistically. Displacing it is the way, but in order to get a good looking B&W, desaturate isn’t quite the best way…
    Perhaps in the future psdtuts can show us the ultimate B&W tutorial… Desaturate get so much depth info lost, and that’s kinda a downer when you want to use the displacement filter. I saw some non-destructive methods using adjustment layers that can provide much more dramatic contrast without giving up depth information. Anyway just wanted to point out something, nice tut… Beatifull graphic quality… Cheers from Brasil…

  16. Awesome tutorial, but I still think it looks fake, definitely better then the other tutorials though….I think it’s best to just make models get tattoos (I’m kidding of course).

    On a side note, this is by far the best tutorial site by far that I’ve read. I hope in some way these are being archived in an organizes fashion. I’ll b using this site for years to come.

  17. just a suggestion:

    if you don’t want to go through the trouble of opening up illustrator to grab your vector, just use “Place…” (in the File menu). This does pretty much the same thing as copying & pasting from illustrator, but you get to skip a few steps. :)

  18. to clarify–

    * “…just use “Place…” (in the File menu in Photoshop).”

  19. Hey guys!

    Thank you for putting up the tutorial, I am really excited to see it here and the replies it is generating.

    Brandy, thanks for the tip!

    Thank you! :D
    Arik

  20. open up your stock image and duplicate it by clicking on the layer and dragging it to the New Layer icon down the bottom (it’s the one to the left of the trash can)

    -OR- a simple CRL+J would do the same thing without all that effort. If you’re going to put keyboard shortcuts in your tut, try to include all of them.

  21. great tutorial. this site has had some of the most useful and best illustrated PS tutorials I’ve seen. Thanks!

  22. MASTER TUT MAN!! DIG.

  23. awesome, this is the best psd tutorial blog i’ve found, i can’t wait for more

  24. Thank you for uploading and thank you for the kind replies. I hope I will be able to write more tutorials for this website. For me this is really a big step forwards and I was ecstatic today when I found out about this.

    :D
    Thanks,
    Arik

  25. very nice effect.

  26. Coulda helped to distort->spherize the tats you placed on top of the head before you overlayed them. That way they could seem to have dimension within the picture and wouldn’t look quite so flat. Otherwise, very awesome.

  27. Aouch ! Excellent really !

    I have always asked myself how to do a great photoshop tatoo, this way seems to be one of the best !

    Thanks ! :)

  28. Nice tutorial but I’m not sure it looks realistic enough. Maybe if there was a bit more noise added.

  29. Simply amazing! lemme see whether i can edit my pic with a cool tattooo :D

  30. I wish your posts were more frequent. Great job.

  31. i don’t think it’s a great tutorial.

    except a tattoo just below HIS left eyes, everything looks patched n made up artificially, still lot of finishing touch needed.

    Thanks

  32. Wow, really nice! :) Gotta try it when I get some spare time ;)

  33. Gravatar

    Midnightbrewer

    Good tutorial, except that it needs a few edits:

    1. Please explain why you set the tattoo layers to Soft Light and Overlay. Does it help the highlights? The shadows? It just “feels right?” (The last suggestion, by the way, would be an example of a bad explanation.)

    2. Why do you tell the reader to set the layer type and opacity, then to rasterize the layers, then finish by telling them that, because of the rasterization, they’re going to have to go back and set the layer type and opacity again? Why not just rasterize first and then change the layer settings? This would eliminate an entire redundant step out of the tutorial.

  34. Sorry to seem dense but you lost me with the Displacement Map. What does the source file supply to the process?

  35. May I know how the text ads work? I wish to add a function like yours in my blog. I registered in text-link-ads already but your link not look like a referral link. Please give me a guide, can? Thanks!

  36. @lukxiufung:

    Yep they changed the way referral links work I think now it’s a big javascript thing, my link is just the old referral link which I never updated to the new ones. I guess you could write to their support maybe? Good luck!!

  37. you don’t need to rasterize anything. smart objects don’t require it. in fact, smart objects would make this whole process a lot easier.

  38. whoa..

    this is great tutorial..
    i must do this and make my head bald as he does it..

    pretty damn..

  39. Who the heck wants “jason” on his forhead =P
    Great tut! Thx

  40. Good tutorial. And good subject the mickey mouse is quite funny.

  41. Awesome as usual.

  42. Ooohh… means after they sign up then the advertiser/TLA will contact you to put on the links there?

  43. Awesome!

  44. @ MidnightBrewer (no.35)

    1) Yes it just felt good. I played around a while and this was the best combination imo.

    2) Because while I was recreating the result I bumped into that obstacle myself, it’s because I didn’t work one step ahead. My bad, I know.

    @ Daniel (no. 36)

    The source file (displacement.psd) is where Photoshop gets his brightness values from which he in term applies to the displacement effect. Depending on how dark or light the pixels are, photoshop moves them in a different direction.

    @ Will (no. 39)
    True, but somehow AI didn’t give me that option when I pasted in the vector. Usually it does.

    Thanks for the pointers guys.

  45. Amazing tutorial….
    Thanx 4 posting… :)

  46. Hey.. i m a bit disappointed this time.. it was to confusing.. the author was not in command.. plus some of the steps mentioned in the tutorials were not getting performed… in Abobe CS2…

  47. My name is Arik as well. When I saw the author name, I automatically thought, “Hey, I don’t remember doing a PS tutorial…”. lolz.

  48. …. wow! ….awesome tutorial! thinkin of doing a big ass tatt on someones back to try out the techniques! .. or possibly a big fat belly … hmnnn?

    oh…. awesome site too! so many shXte ps tutorial sites out there good to see one which clearly kicks their ass outta the www!

  49. Awesome Man Awesome!!!

    Thx for sharing.

  50. AWESOME!!!!!!
    I m Spechless

    SUPERB!!!!

  51. thanks man . I love your tut

  52. My only problem with this is that it only works in a black and white image. When I tried this and left the subject coloured it looked horribly fake.

    Ive tried playing with it but no luck so far.

  53. even with the black and white photo, it looks very fake. This is not a good tutorial at all.

  54. Awesome. Simple technique - but effective.
    thanks for sharing!
    DM

  55. how come when I right click to rasterize, it’s not selectable. if i go to Layer > Rasterize, the only option available is All Layers.

  56. Wow, very nice. I love this tutorial. Excellent work.

  57. didnt understand it…

  58. Good job. Takes a while but it useful sometimes :), however, it’s a bit fake, I can see the shape of the tattoo not matching the curves of the face.

    I am glad to see nice tutorials like this since I don’t have to much experience with photo editing ;). I have to train a bit so I could blog more about photo editing on my blog. Keep going!

  59. One Word

    Awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  60. i found handy techniques with this tut :) great job!

    but can someone please make a tut for tattoo on colored images? reading through the tut already gave me the impression that this is for b&w pics only. (which someone else already pointed out)

  61. the one on the lips is sweet..! not sure about the ones on the face., but love the burn effect on the original,

    www.andystewart-design.com

  62. you are awsome, thanks!!
    greetings from Argentina
    :D

  63. Nice tutorial, I didn’t see combination of 2 blending modes up to now (for tattoo that is). And it works for color images too - check this out: http://saver43.hit.bg/pages/www.saver.tk_er07121970_1280×960.htm

  64. This was great…but up to a point, when I realized the final image would come out black/white. If you’re doing it in color it’s going to be different. Still, I got some good tips from this. Thanks!

  65. Nice, if you want to submit your PSD to our site would be great.

  66. very smart work……good

  67. very smart work……good

  68. Gravatar

    web fanatic

    great tutorial, thank you

  69. nice!,:D..

  70. Wow!good tutorial! Thanks

  71. Gravatar

    Andrique Sondropogolos

    “Usually these tutorials instruct the user to import an image they want to use as a tattoo and to set it to overlay. ”

    Isn’t this exactly what this tutorial tells us to do?…

  72. Amazing stuff,very cool!…thx…

  73. Something I never would have thought of - the displacement filter. Excellent idea though, makes me want to experiment a little more with it.

  74. is cool bro….but more simply tric maybe

  75. Gravatar

    I love tattoos

    SO COOL, now all my dreams can come true yay!

  76. i cant rasterize the tattoo copy layer

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

 

Trackbacks

Leave a Trackback