Stunning Dragons Attack in Photoshop with 3D FeaturesListThumbs

Stunning Dragons Attack in Photoshop with 3D Features

January 12, 2009

Last year I was learning how to use the 3D features in Photoshop and I did an image mixing a 3D robot with a photography and some dragons in vector. After quite sometime I was checking my images and found it, so I decided to write a tutorial showing how I did that. And, also play a bit more with the new 3D features in Adobe CS4.

In this tutorial I will show you how to create an sort of video-game style image with dragons, fire, smoke, robots and other crazy things.

Step 1

Create a new document in Photoshop and place a photo in the document. I used an image from sxh.hu, you can download it at http://www.sxc.hu/photo/946956

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 2

Duplicate the photo layer and press "Q" to switch to Quick Mask. Select the Gradient Tool (G) with black and white for the colors then paint a gradient. The black will become red and the white transparent, that means the red won't be affected and while the transparent will. Press "Q" again to transform the Quick Mask to selection and go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius and change the layer Blend Mode to Lighten.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 3

Here you will need some dragons. I used some vector dragons I have but you can find tons of dragons on the web. Apply Motion Blur in some dragons to give a nice impression, as if they are flying pretty fast.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 4

Now lets add some fire. Select the brush tool and go to the Brush Engine, Window>Brush. For the Brush Tip Shape, select a rounded brush and leave the default settings. Select Scattering and use 120% for the Scatter, 5 for the Count and 100% for the Count Jitter. Now the Texture is very important. Select the Clouds texture and change the Scale to 100%, make sure the mode is Color Burn. Also if you increase or reduce the size of the brush too much you will have to do the same with the texture scale. After that the last setting is Other Dynamics. Use 50% Opacity Jitter and 20% Flow Jitter. Save the brush as fire.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 5

Using the brush you just created paint some fire. Use yellow and white for the colors and for the more distant ones use a dark orange or red and white. Also duplicate the fire layers and change the blend mode to screen adding some blur just to create a nice glow.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 6

Now that we have fire lets illuminate the dragons. Use the clipping mask to paint just over the dragons. To do that create a new layer right on top of the dragon layer and go to Layer>Create Clipping Mask. Then with the Brush Tool (B) and yellow paint the area close to the dragons mouth. Also depending the angle try to illuminate the areas with the light coming from the fire in mind, ie 1, 2, and 3.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 7

Here lets add some smoke from the fires. It's simple let's just create another brush, use pretty much the same settings as the first one we created but this time use a much bigger size. For the Brush use 300 and for the Texture Scale use 400%. After that save the brush, that's very important :)

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 8

Now add a new layer and apply some Layer Styles. Use first Inner Shadow, then Gradient Overlay. Use the image below for reference.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 9

Start painting the smoke. Use the "[" and "]" to chang the size of the brush and the numbers keys to play with the opacity. Also use black for the color but at the bottom of the smoke change to white, the you will get some nice flames. Use the image below for reference.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 10

Last year I wrote a tutorial for Digital Arts Magazine where I showed how to create some fireballs. You can check that out at: http://www.digitalartsonline.co.uk/tutorials/index.cfm?featureID=1740

Basically the technique is pretty much the same we did to create the smoke, but you can use motion blur to add some movement to the object.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 11

Add more smokes and fireballs to the image .

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 12

To create the cracks on the road let's use a photo, the one I used you can download it at: http://www.sxc.hu/photo/995884. After that go to Edit>Transform>Distort. Then try to apply the same perspective of the road to the image. After that select the Eraser Tool (E) and delete parts of the image to make it fit in the road area.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 13

After you erased some areas of the photo, change the layer's blend mode to multiply. You can duplicate the layer if you want to make it darker. Right after that duplicate the layer again and go to Image>Adjustments>Invert. Change the Blend Mode to Screen and go to Image>Adjustment>Hue and Saturation. Select the Colorize option and move the sliders until you get a nice red.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 14

Duplicate the layer you just applied the Hue and Saturation and change the Blend Mode to Color Dodge. After that go to Filter>Blur>Motion Blur. Use -90 Angle and 10 pixels for the Distance.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 15

Here let's add some more smoke and also paint the sea in red. To do the red sea, with the Pen Tool (P) create a shape with the exactly same area of the sea. Use red for the color and Color Burn for the Blend Mode. Duplicate the layer and change the Blend Mode to Color Dodge.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 16

Here let's play with the new 3D features in Photoshop. You will need Photoshop CS3 to import and rotate 3D objects, and the CS4 for the light features. Go to 3D>New Layer from 3D File. Then choose the 3D file you want to import. I used one I found at http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=487&ad=08military_weapons.php&count=count

To rotate end scale the 3D object use the 3D tools (K). Place the Robot on the road, use the image below for reference.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 17

Go to Window>3D to open the 3D settings. You can Add, delete, and edit lights, the 3D hierarchy, and much more. Let's add a Spot lightt first. Use 1 for the intensity, white for the color, select the Create Shadows option, and use 31.5º for the Hotspot Angle and 45º for the Fallof. For the Infinite Light 1, chang the color to yellow, and for the Infinite Light 2 change the color to 50% grey. Also add a new layer beneath the robot layer then with the Brush Tool (B) and a regular brush with black color paint the robot's shadow.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 18

Duplicate the Robot's layer and rasterize it. Go to Layer>Rasterize>3D. Then go to Filter>Blur>Gaussian Blur. Use 14 pixels for the Radius. After that change the Blend Mode to Screen and the opacity to 70%, it will add a nice glowing effect. Also with the Brush Tool (B), select the fire brush and paint some fire coming from the robot's gun, in a new layer too.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 19

Select the Robot layer and go to Filter>Noise>Add Noise. Use 10% for the Amount and Uniform for the Distribution. After that add a new layer and fill it with black. Change the layer's Blend Mode to Color Dodge and with the Brush Tool (B) use a regular brush with white and paint the floor being illuminated by the machine gun fire.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 20

Let's add some textures to our design. I used a photo of a concrete wall, I really don't remember where I got that image, but you can find good ones at sxc.hu, dezignus and bittbox.com as well. Place the texture on top of the other layer and change the Blend Mode to Overlay with 20% Opacity. Duplicate the texture layer and change the Blend Mode to Color Burn with 10% opacity.

Stunning Dragons Attack in Photoshop - Playing with 3D

Step 21

Go to Layer>New Adjustment Layer>Photo Filter. Use Deep Yellow for the Filter and 60% Density.

Stunning Dragons Attack in Photoshop - Playing with 3D

Conclusion

You can add more textures or another Gradient Fill over the layers if you want to make it darker too. The idea of this image was just an exercise to understand how the 3D layer works in Photoshop. Also we mix a few other techniques from other tutorials and that makes everything easier. That's for me is the best thing about tutorials, not the end result but the effects we learn so we can apply then pretty quickly on other designs.

Stunning Dragons Attack in Photoshop - Playing with 3D
Click here for Full Preview

Conclusion

Click here to download the Photoshop File used for this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

35 Comments

starlight8601/12/2009

wow..this is so cool.thx again fabio..gonna try this one

moih6001/12/2009

thanx ..great tutorial fabio

TTC01/12/2009

uha ... I don't know! The resault is a little bit wired.
The Mech-Robot looks very unrealistic in the lightning an modelling way.

The tutorial is good explained but the resault is awfull in my opinion.

fabiano01/12/2009

You're crazy man! heheh
Great effects!

iArts01/12/2009

Yeah...I'm sorry to say that...
But i'm solid with TTC here...The explanation is great...The result is not attractive at all...

dan01/12/2009

Really sorry, I have to agree.

The techniques/skills used are obviously top - but the end result is horrible.

Salmen01/12/2009

WWWWWOOOOOWWWW
Great effect....bravo

Chris01/12/2009

This is honestly terrible. You didn't even make the water on the right side of the image into lava. I'm sorry but it's really bad.

Nikki - Logo Design Guru01/12/2009

Thanks for the tut. Those effects are pretty cool and I love how we can see it step by step.

abduzeedo01/12/2009

Hey guys, I understand that some of you think the end result terrible but the whole idea of this and the other tutorials, at least for me is to share experiences and techniques. For this tutorial I played with some 3D features and that was the idea but now to make it look awesome it will depend on what point of view ;)

I like the end result and maybe try to check the full version, because the small image really makes it look a bit weird.

Thanks for the comments, they are always helpful.

Torey01/12/2009

Hey, I don't care what you guys think - I like it. As for the effects, thank you. I'm 'abducting' this one too, because I can see LOTS of pieces I would like to have in my repertoire.

Thank you for writing this up.

Codie01/12/2009

Like most others have said, the end result isn't terribly great, but really its not terribly bad either... it's Purgatory XD

However its the process in how you made this that we are all thankful for, those techniques are really great

BTW love the clashing of times, medieval dragons mixed with futuristic robot warriors

SBL Clipping path services01/13/2009

Super cool tutorial... Thanks for sharing.

Regards,
SBL Graphics
http://www.saibposervices.co.uk/background_removal-clipping_path.aspx

E-maniacs01/13/2009

Apocalyptic scene.

It is nice, i like the techniques.

Thanks

hsmcy01/13/2009

wow! its really so nice! u really rocks on photoshop! ^_^!

Ahmet01/13/2009

This is amazing photomanipilaion !

Onedinkenedi01/14/2009

I don't quite like the color of the flames coming out of the cracks. Nice job btw.

Photo filter really makes the whole image blend in together.

Marius01/14/2009

Youre just stunning me :O Youre sooooo good :D And hey , thats in norway that bridge ! :D Im from Norway ^^ And i have family up there in the country were that bridge is^^,

SL05NED01/18/2009

umm...
i dont quite get the point of step 20.

Anonymous01/23/2009

Love what you did. I had a great time going through all the steps. Taking Graphic Design and my brother is doing 3D, I learned a lot.

thanks

El Critico01/24/2009

the 3D robot thingy sucks

Sandro01/24/2009

You're skiping some steps like: on step 5 you have the dragon on the hill and on step 6...BAM!!! it has shadow! :|

psaddict01/25/2009

Added to www.psaddict.com

Brandon01/31/2009

Great helped a lot I wanted to check on something in the PSD file; but; *looks around <_< >_>* can't find the clickable link.

Bigfans02/03/2009

wooow...........very stunning !!

toodee3d02/18/2009

Hah! I've had CS3 for ages, and have been using CS4 too.. and have been modelling with 3dsmax and other software too for some years and NOW I realize that I can import models to photoshop. HAHA thanks for this eye-opener! Gotta test the "new" features. Not that I expect much from the 3d "tools" but it may come handy in composition phase.

Nice tutorials overall here. You explain things pretty well, and give tips/examples too.

And the final image indeed looks better in high res. Nice crunchy feel and nice color scheme. IMO it has some retro poster feeling to it. And how could one fail with robots AND dragons!! ;)

photoshop image clipping path services03/21/2009

Absolutely fantastic tutorial. Thanks for sharing.

Regards,
Background removal

Business Cards04/03/2009

This is way cool! Your work is really something else, very imaginative and inspiring. I wish I could do the same! Will certainly try with this tutorial. Thanks so much!

CgBaran Tuts04/15/2009

Excellent work and tutorial thanks

afrozenminute04/28/2009

wot this is nice hope we get a free stocks too :)

ilazarte05/15/2009

I just came looking for this image based on the Photoshop mag I saw it in, and I agree it's looking a scrappy. I think what happened is classicmade on Mac -> view on PC. What happens sometimes is that it washes out looking bland and or unfinished. In the mag it looks great, and I think it would with the contrast readjusted.

PSDDude12/10/2009

Good Tut! Nice colors !

Don Gamble01/22/2010

Fabio this sucks. You need to quit cause you have no life. My shit is better and I will make a website better than yours you loser.

Don Gamble01/22/2010

And another thing you can contact me if youre not a pussy!

Ron Arts Web Design01/26/2010

Those techniques are amazing. Cool stuff!!!

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?