Part I: How to Add Flaming Decals to a Modern Car Design

Apr 17th in Photo Effects by Kyle Pero

This tutorial will explain the steps needed to turn this boring Prius into an awesome street racer. This tutorial is aimed at intermediate users of Photoshop, those who know most of its basic tools and how to use them. This is Part I of a two-part series.

Author: Kyle Pero

Kyle Pero has worked in the creative fields for many years now. With a background in photography and graphic design he naturally became a Photoshop whiz. Now he works in advertising doing photographic retouching, but also does freelance design and illustration work.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the full Photoshop file is available via our PSDTUTS Plus membership. I definitely recommend downloading the sample PSD file. Check it our before you get started.

Final Click

Step 1

This is the link to the Prius image we'll be using. Create a new document and load the image. Make a selection around the back wheel. Hit Cmd/Ctrl+J to duplicate the pixels to a new layer. Do the same for the front wheel. Turn off those wheel layers for now.

Step 2

Select the background layer. Then make a selection of the body of the car that includes everything below the windows. Duplicate those pixels. Then transform the body layer by stretching it downwards. Hold Cmd/Ctrl and drag the corner handles to make the edges of the car line up as close as you can.

Step 3

Make a guide where you want the ground to be, just below where the body ends. Turn on your wheel layers and bring the Opacity down to about 75%. This is so you can see what is going on behind them as you transform them. Transform the wheels so they are nice and big. The bottoms should sit right where your guide is. Then turn the opacity back up on the wheels.

Step 4

I know that this looks like a mess now, but if you squint, you can see the basic structure of what our car will look like.

Step 5

Nest both of the wheel layers in its own group. Put a mask on each of the groups. Then roughly paint out everything, except the wheels, and the wheel wells. For now, don't worry about being too neat. We are still just defining the structure of the car.

Step 6

Put a mask on the body layer and paint out the handles and anything else that looks like it shouldn't be there. You should now have something like the image below.

Step 7

The first thing we want to do is draw a path around the boundary of the car. There are some parts around the wheels that you will have to make up". Below is what my path looks like.

Step 8

Notice from the step above, how my path is always inset into the car by a couple of pixels. This is important! Make sure that you do this. Here is how I handled the wheels and the wheel wells.

Step 9

Make a new layer group called "car." Put all of your layers into it, including the wheel groups and the background layer. Load the selection of the path you drew, feather it 0.5px, and apply the selection as a mask on the "car" group. Click on the path again in the Paths Palette. Then click on the Add Layer Mask button again to apply it as a vector mask on the "car" group. While holding Shift, click on the vector mask to turn it off.

I connected the path to the car in a vector mask so if I ever need to scale or move the car, the path will scale and move with it. This way, I can always have the path handy. If I ever need it later, it will still fit the selection.

Create a new Solid Color Adjustment Layer and fill it with white. Move that layer below the car group. It will serve as our white background.

Step 10

Now we need to isolate the basic components of the car. I am going to organize it into wheels, paint, lights, and windows. Let's start with the wheels.

Nest your two wheel groups into a new group called "wheels." Next, draw a path that will represent the edge of the wheel wells. When you are doing this, you don't have to draw a path around anything that you already have. In this case, we have already created a path around the boundaries of the car, so we don't have to do that again. Look at my paths below, for an example.

See how I don't have to make the path along the bottom of the wheels? This is because I already did that before. The "wheels" group is nested inside the "car" group, so the bottom of the wheels are already masked off. After you draw the path for the wheels, load the selection of the path, feather it 0.5px, and apply it as a mask to the "wheels" group. Now apply the path as a vector mask like we did before. Turn off the vector mask by holding Shift and clicking on it.

Step 11

Let's work on the Lights next. Select the "base" layer and the "body" layer and duplicate them. Merge the 2 duplicates into one layer by hitting Cmd/Ctrl+E while they are selected. Name the duplicate "paint." Draw a marquee around the lights and hit Cmd/Ctrl+J to duplicate the selection into its own layer.

Step 12

Put that new layer into a new group called "lights." Go back to the "paint" layer, draw a marquee around the windows, and hit Cmd/Ctrl+J. Put that new layer into a new group, and call it "windows."

Step 13

Now draw paths around the lights, load the selection of the path, feather it 0.5px, and apply it as a mask on the "lights" group. Finally, apply the path as a vector mask on the lights group. Then turn it off.

Do the same for the "windows" group. Below is what my layer palette looks like.

Note that we don't need to make any paths for the "paint" layer because we already did for everything else. The paint falls in the negative space that we created for all the other components.

Step 14

Now that we have isolated everything, we have freedom to concentrate on one component at a time. Lets clean up the "paint" section. We are going to turn this into a 2-door car, so we need to get rid of some lines and one of the handles.

I prefer to work with a clean slate. While holding Option/Alt, click on the eye icon on the "base" layer. This turns off all layers except the one you clicked on. It's handy if you need to work on a specific layer. Make a marquee around the part of the door that is a clean gradient.

Step 15

Option/Alt-click on the eye again to turn off isolation on the layer. With the "base" layer selected, hit Cmd/Ctrl+J to duplicate the pixels. Bring the duplicated layer just above the "paint" layer and call it "grad." Transform the "grad" so that it covers the entire paint section. Gaussian Blur the "grad" layer by 15px. How is that for a clean slate?

Step 16

Now I am going to add a mask to the "grad" layer and make selections with various feathers to mask out the parts where we want it to be see transparent.

Step 17

Here is what my mask for the "grad" layer ended up looking like.

Step 18

I left the handles out because I am going to go in and do those later.

Step 19

Make a marquee that covers the top third of the "paint" section. Feather it by 200px.

Step 20

Just above the grad layer, make a Curves adjustment layer and drag the highlight handle to the left to lighten the image. Hit OK. With the curves layer selected, hit Option/Alt+Cmd/Ctrl+G to make it a clipping mask on the "grad" layer.

Step 21

With the "grad" layer selected, make a new blank layer. It automatically becomes a clipping mask because it's in between the other clipping mask and the "grad" layer. Go Edit>Fill and choose 50% gray and hit OK. Go Filter>Noise>Add Noise and use 40 for the amount. Make sure monochromatic is unchecked, and hit OK. Transform the noise layer and scale it to 125%. Set the layer to Overlay and bring the Opacity down to 10%. This makes the "grad" layer blend with the rest of the photo better because the grad layer was too smooth.

If you go back and look at the "base" layer, you will see a highlight just below the windows. Draw a path that contours the highlight. Make a selection of the path, feather it by 1px, and make another Curves adjustment layer just above the "grad" layer. Then lighten it a little.

Step 22

Click on the vector mask for the "wheels" group. In the Paths Palette, drag the vector mask down to the new path button to make a copy. Select the points that make the back wheel-well. Then scale the back wheel-well up, so that it overlaps the paint.

Step 23

Do the same for the front part of the path. Load the path's selection and feather it 5px. Make a new Curves adjustment layer above the "grad" layer, including all its clipping mask layers. Name the layer "wheel fenders." Below is what the curve should look like.

Stay Tuned for Part II

Part II of this series will be published this week. We'll pick up at Step 24 in the next installment. We don't recommend sitting on the edge of your seat, as you may fall out of your chair.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Aaron Shupp April 17th

    Groovy.


  2. Aloke Pillai April 17th

    Thanks a lot!

    I enjoyed it a lot!


  3. Terry April 17th

    damn. pretty cool.


  4. Aminur Rahman [aka Tom R] April 17th

    nice one, cheers


  5. Spanky April 17th

    Can’t wait to see part II.


  6. Eric April 17th

    This one is starting out good!


  7. Joefrey Mahusay April 17th

    Nice tut, can’t wait on Part II. Thanks for sharing :)


  8. shiva April 17th

    Really starting well! Love the Hot Wheels style :D


  9. Franklin April 17th

    Seems like an awful lot of work for a somewhat minute effect, but I do bow down to the designers here for they are awesome. Looking forward to Part Deux…


  10. Colin April 17th

    nice flames!

    oh wait…..


  11. Corey April 17th

    I would totally buy a Prius if they looked like that (minus the flames hehe). Great tut so far!


  12. goldenthunder April 17th

    sweet! excited for part two! thanks!


  13. KelisJunky April 17th

    LOL @ “We don’t recommend sitting on the edge of your seat, as you may fall out of your chair.”


  14. Kajuah April 17th

    Why not just use a multiply brush and add the flames with the pen tool to draw out the stencils? What am I missing because that’s all i see here.


  15. Gimper April 17th

    ah i hate commercial break :P


  16. arnaud April 17th

    Very usefull ! thx a lot !


  17. D. Carreira April 17th

    I love this tutorial!

    David Carreira


  18. Ben Griffiths April 17th

    Looks good so far - bring on part two! ;)


  19. Constantin Potorac April 17th

    Hey. I love it. It is very clean and the results look nice. Well done!


  20. Daniel April 17th

    very interesting work here !


  21. Johan April 17th

    Cool stuff!

    Strange, last night i was watching photoshoped cars over at 1000 worth (link below) and this tut just pop up from nowhere. Thanks!

    http://www.worth1000.com/galleries.asp?rel=Carnocchio&display=photoshop&id=18805


  22. Shane April 17th

    waiting for part 2 :)


  23. Harry April 17th

    Grooovy tut!


  24. BogDinamita April 17th

    could’ve chosen a way better car for this


  25. Sheldon Levene April 17th

    Woott always want to learn to do this, i wana try out vehicle wrap designs, anybody know how to do them for print as in what dpi, and how you scale the cars in PS to the right size so i can design on them for print ? or does anybody know any site that can give tut or explain about vehicle wraps and designing them to scale thx.

    O nice tut started already cant wait for the next part. wooot!!! :P


  26. Enes Kaya April 17th

    Very COOL :)


  27. Daniel April 17th

    Cool ;-)

    Daniel


  28. LOSWL April 17th

    Great Tutorial!! ;oo

    Sheldon Levene - To do any design for print, the DPI for the document should always be 300dpi, the photos used for the design should also always be 300dpi, this is the optimum dpi for print jobs. The pixels for the images usually rate between 800×600 (multimedia) all the way to about 5616×3744 (Ultra) and higher, the higher the pixels the better the image for print.

    A good rule for images is…never scale an image larger than it’s original size (tempting to do, but it will give you a bad print, (even if it looks good on screen). A good way to test on screen in Photoshop to see if your image will look good when printed is to preview the image at “Actual Pixel” ….View>Actual Pixels….the image will seem a lot larger but, but you will get to see if any of your images are blurred. If you want to see the actual print size just click on > View > Print Size.

    People may ask… can I change a 72dpi image to 300dpi and use it in my artwork for print? The answer is no, it’s never a good thing to add pixels to an image, it is basically the same as resizing, which will lead to a blurred image. You may reduce pixels but do not add pixels. Hope this helps a little :o)


  29. john April 17th

    No one else kinda finds this lame?


  30. Jeff April 17th

    Great Tut! Also thanks LOSWL for explaining a lot to me.


  31. Ali April 18th

    nice stuff


  32. b00m April 18th

    Virtual Tuning begins on PSDTuts? :P


  33. Sheldon Levene April 18th

    LOSWL : cool thx alot , it simpifly things down for me , now for me to idle and come up with a car design concept :P .


  34. Slizzie April 18th

    this is something I’m really going to have to look at


  35. Autocar-Live April 18th

    I have submitted your article to http://www.autocar-live.com which is a social site about cars where users submit articles they like and vote for articles that others submitted and they like.


  36. Katalog Stron April 19th

    Great tut. Waiting for the next part.


  37. Bas April 24th

    nice


  38. FlashRipper April 25th

    cool


  39. puffgirl April 26th

    wow, love this.


  40. Kamel September 2nd

    hi..ummm the psd file of this file can not be downloaded throught the tuts plus, please fix it guys


  41. Hamed November 1st

    I’m new to this and I know this is for intermediate users but I just love cars!
    Although this is not the only place I’ve seen this but, what is Cmd?
    up in the first paragraph it says hit Cmd/ctrl + J… what does it mean?
    e-mail me plz if u can


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name December 5th

Arrow