How to Render Hot Rods Photoshop Tutorial!!

Car Rendering Tutorial by Scott Paterson aka joe deertay

Introduction

This is an easy to follow guide to the basics of car rendering in Photoshop. I don’t think art should be treated as magic with artists refusing to tell all on how it’s done. I think techniques should be shared so that we can learn from those who have learnt from us. I truly believe you have to share to get back because it’s the kids sitting in their rooms doodling away who’ll be teaching us the “new“ techniques in years to come!

I’m no expert on Photoshop as it’s a huge program that does a hell of a lot of stuff, but in recent years I have developed my own technique and style and this is a tutorial on how to do it “my way”. I’ve no doubt that there will be people who’ll read this and have better ways or shortcuts and that’s cool. I’d love to hear them as I’m always learning myself so if you feel you have some positive feedback, then take the time and send me an email! What is important to understand is that this is merely a basic guide. There are so many tips and tricks that I couldn’t possibly write them all here, but I hope it’s a useful tool for beginners and skilled artists alike.

I’ve been as thorough as possible with my explanations and tried to write it so that it’s easy enough for a novice with little to no Photoshop experience to follow. I apologise to more advanced artists but you guys can just skip to the bits your interested in!

Check List

Before attempting this tutorial please ensure you have the following equipment otherwise it’ll be a waste of your time! Anything marked * is not totally essential.

Pens & Pencils
Sharpener
Eraser
Ruler*
Compass*
French curves*
Ellipse Templates*
Paper A4 or A3 (dictated by your scanner size!)
Light box*
Sticky tape or Blu Tack*
Scanner
Printer
A copy of Photoshop
A Tablet (light pen)

Choosing Your Vehicle

The choice of vehicle is obviously infinite and will depend on personal taste and style. Once I’ve decided upon my choice I then search out some reference pictures of that vehicle. I have a mountain of books and magazines (I never throw any away!) but the internet is a huge resource and probably the easiest for most people. For this exercise I’m going to use this picture of a 1950 Plymouth as an example. If you’re using Google or similar to search for photos try to find the biggest pictures you can in as high a resolution as possible. A good site I use is http://www.seriouswheels.com



Line Work

There are various ways of generating your initial outlines but I’m sticking with the traditional pencil and ink formula. A handy tip here for those that lack confidence is to use a light box or a window to trace your vehicles outline rather than just copying by eye. This not only saves time but will help you gain more confidence and control. If you have found your picture on the web it’s handy as you can simply print yourself out a copy to trace. If not you’ll have to scan the book or magazine image and then print it back out.

Light box

You can buy light boxes from various hobby stores etc but you can make your own quite simply if you have the time and skills. A light box is essentially a box construction with a light fitting inside and is covered with a Perspex or glass top. Once the light box is switched on it makes the paper (placed on the glass) become transparent so you can trace what’s underneath (your chosen picture/photo). They are popular with animation artists as it makes it easier to trace through multiple layers quickly when producing cells.



I built my own light box last year but when I moved house I purchased a glass topped desk and I have bendy spotlights directed upwards underneath it turning my whole desk into one giant light box!

The Budget Method

Ok, so you have neither the time or inclination to start knocking up a light box but you’re still not feeling confident enough to copy the picture you have chosen… what do you do? Well the simplest cheapest method is to use a window in your house. Find a window that you can get close to and use some tape or Blu Tack to stick your paper and picture to the glass. If it’s a good bright day it should act the same as the light box and allow your image to show through onto your paper so you can trace your vehicles outlines! The only downfall to this method is that it’s useless at night! lol



Creative Drawing

So you have your basic outline and now come’s the fun part of using your imagination and creating something unique. In this picture you can see my initial outline drawn from the reference photo.



Next you can start to see how I went about altering the vehicles lines. I planned on turning it into a coupe 2dr and chopping and re-shaping the roofline. I also laid back the a posts (screen posts) to help give the car a sleeker look. I was planning on adding peaks to the front fenders to shroud the headlamps but decided against it.



Once I had a general idea I moved onto a second sheet of paper and copied my new design out. The next step is to prepare for ink so I started to tidy up my lines and make some decisions on wheel placement. I re-worked the wheel arches slightly to fit the shape of the wheels and also put the trim pieces back on. Obviously the trim was modified from 4dr to 2dr and the fender trims were tapered and pointed to the rear edges to make the car look like it’s moving faster and replicate the radical new roof.





I’m lazy and at times and I can’t be bothered to rub out so I use multiple sheets and simply re-draw until I’m satisfied. Once you have a good solid idea of how you want it you can start to ink out the lines.

Most scanners will pick up pencil lines so it is possible to be neat and just scan the pencil work but I like to be messy with the pencil and tighten it all up with ink then erase the pencil lines after. How much time you spend on this step is up to you, some computer renderings are based on extremely crisp lines and others are based on fairly rough ink work. The choice is yours and both can look amazing if finished off well in Photoshop.

Scanning

Ok so you’ve worked your Foose like magic and now you should have a nice finished outline drawing. Time to get it onto your computer! I’m in the fortunate position of having an A3 scanner now so I can work on larger paper to begin with but I worked for years on A4 and there’s nothing wrong with that at all.

A lot of scanners should have a control panel in the software to allow changes to the scanning process. I generally keep mine set at an even brightness and contrast, in full colour mode, and set at a minimum of 300dpi resolution.

 

Photoshop

Before we go too far ahead let’s take a little look at Photoshop. I’m currently running the CS2 version but most of the older versions are still more than capable of producing good results. If something looks different in my screen shots it’s probably just a different version than your using but don’t worry as most of the commands and menus are the same. Photoshop is a complex program and should be installed and setup correctly. Things such as scratch disks and memory allocation should be addressed before attempting to use it. If you find Photoshop runs slow or freezes check the performance settings. The instructions for these are found in the manual or via the internet if you have a “hot copy” lol.

Layout

This is a very brief overview of this massive program, but this should hopefully be enough to get you going if you’re a total Photoshop virgin. All your menus and extras are located on the top bar via File, Edit, Image, Layer, Select, Filter, View, Window, and Help.



Most are pretty self explanatory and if not just have a nose around and see for yourself. Don’t be afraid to press buttons and explore! You’ll find the Help section to be very comprehensive if you’re stuck. The main pallets (mini windows) I use for this sort of thing are:

Tool Pallet

As you’d expect contains all your tools including paintbrushes airbrushes etc.



Layers Pallet

Once you get further into this tutorial you’ll start to use and understand layers. It is important to be able to see these layers at all times so best to keep this pallet open.



Navigation Pallet

This pallet allows you to move around your page and zoom in and out of your work. Again it’s handy to have visible at all times.



Swatches Pallet

Again pretty obvious but contains all your colours just like your paint box!



If you can’t see any of your pallets go to Window and click on whatever you’re looking for from the drop down menu…. If you close a pallet by accident this is where they are located.

Photoshop rendering

You can import your scanned image straight into Photoshop go to File, Import and selecting your scanner from the list. This saves time and once the image has finished scanning close the scanner window. (note not the scanned image window)

Save Warning

Here’s a little hint….I find sometimes my computer freezes at will, so it’s good practice to save regularly because you can lose all your unsaved work if your pc crashes and you’ll have to start all over again or work from your last ancient save point. This is extremely annoying and frustrating….trust me I learnt the hard way!

So to start on a good note, save your freshly scanned image go to File, Save As…Remember where you saved it to, I usually create an artwork folder and keep all my stuff in one place!

Let’s Begin

First off we need to tidy up the scanned image. First is the image central and straight?



You’ll note how my A4 sheet leaves loads of blank area in my A3 scanner and is sitting all cock-eyed. I did this on purpose to show you how to fix it…honest!

First off I want to trim the picture down. Using the tool pallet select the Marquee Tool and left click and hold it down to drag a square marquee over the picture. You’re aiming to frame it so you’re happy with the amount of picture you want to keep. If you mess up simply click outside the marquee box and do it again until you’re happy. Once you have your selection go to Image, Crop from the drop down menu.

 

Voila, you made it smaller.

Undo Warning

Here’s a hint…. if you make a mistake or press something you shouldn’t go to Edit, Undo and this will undo your last action. If that doesn’t work try Edit, Step backward to undo the action before. This is extremely handy if you mess up but be aware you only have so many Undo’s at your disposal. (This number can be edited go to Edit, Preferences)

Next I want to sort out the tilted angle so we’ll go to Image, Rotate Canvas, Arbitrary…




Here you’ll be able to rotate the image by degrees clockwise or anti clockwise. Type in the amount and play with it until your satisfied it’s straight then click ok. You’ll notice my page is now straight but there’s some excess still showing now we have rotated it. I’m not worried about this for now so my next step is to adjust the Brightness and Contrast of my line work.

Depending on how your scanner is set you may have to do this as well, if not simply move on. Go to Image, Adjustments, Brightness and Contrast, adjust the sliders until you’re happy with the image. I generally adjust the brightness upwards and the contrast the same. Don’t go too high with the contrast as it pixelates the line work!



Now that I’m happy with my lines I’ll tackle the odd bit of red on the screen. The easiest way for me is to use the Eye Dropper Tool in the tools pallet and simply click on a section of the white background. This tool sets your colour to whatever colour it touches on the screen. It’s handy as I’ve mixed up a colour and not added it to my swatches then moved on and needed it again so you can select it right off the car or whatever you’re drawing at the time. Since I’ve chosen the exact colour of my background (white) I can simply use my air brush tool with a decent size tip (around 300) to white out any extra.



Brushes

For painting in Photoshop I mainly use the Brush Tool.
If yours isn’t showing click the small black triangle to the right of the tool button to see the other types of painting tools available. Like most tool when you click on one it opens the tool properties bar across the top of the screen. Here you’ll be able to select the size and type of brush/tip you require.

Setting up the Line work

I use a technique that I learnt from a Manga tutorial of being able to render behind your original line work. There are two ways of doing this. The first means copying your picture and pasting a duplicate copy on top. You can then set the highest layer as a multiply layer and when you start adding colours the lines will not be affected. This is ok for quick sketches but my method gives you a little more control so here’s how you do it.

First you need to adjust the image to greyscale so you are only dealing with one channel. Go to Image, Mode, Greyscale. This converts your image to black & white tones only.

 

If you like to ink up in blue pen or similar don’t worry as it can be rectified later. Once you have converted to greyscale you need to make a duplicate layer of your picture. To do this Go to Select, All… you will notice a dashed outline around your image.

Then Go to Edit, Copy….then Edit, Paste. You will notice in your layers pallet that you have created a second copy of your outlines on top of your original. Next we need to separate the outlines from the background.



Go to Window, Channels… In the channels pallet that has opened click the dashed circle icon (bottom left). This will add a dashed outline mask to all your inked outlines. Now press the delete key on your keyboard.



You will now notice in your layers pallet that the new top layer you created has no white background in the preview window. Whilst in the layers pallet make sure the top layer is selected by clicking on it (turns grey) and click the white & grey check box above next to the word “lock”.



By doing this you have locked the line work for now so it cannot be tampered with. Next Go to Select, Deselect and the dashed outline mask should disappear. Now you have two layers and you need the bottom layer to be a blank canvas for the colour. In the layers pallet select the bottom layer by clicking on it. There are various ways to blank the page but I use the airbrush tool with say a 300 size nib and simply paint the bottom layer white really quick to get rid of the outlines on that layer.



So now you have a blank bottom layer and a layer above with the ink outlines on. This means when we start to paint on the bottom layer it will leave the ink on top as a guide.
In written form like this it may seem daunting and a long process but in reality it takes a few minuets if that.

Getting colourful

Before we start actually airbrushing the car we have to set the image back to colour. Go to Image, Mode, RGB Colour… Also at this point if you wish to work against blue inked outlines select the top layer in the layers pallet and simply airbrush the outlines to blue or whatever colour you fancy. As the layer is locked you will only paint the outlines leaving your blank layer underneath untouched. I prefer to work to black lines so I’ll be keeping mine as they are.

Don’t forget to save!

For the meantime we’ll be mainly using the swatches pallet and the brush tool. Up until now I’ve been mainly using my mouse but obviously as we start to render properly it’s best to use a Tablet or Light-pen.



Here’s a Hint… buy a good quality Tablet. I’ve used cheaper ones and the feel is rubbish. The pen reacts slower than you and feels very odd indeed. I use a Wacom and can personally recommend them.

To start ensure your on the bottom background layer by clicking on it and highlighting it. I start by adding two colours regardless of the final colour I’m using. I always lay down some pale blue and cream. I run the cream over the main body and the pale blue over the areas reflected by the sky, for example the roof and tops of the fenders (wings). You don’t have to be neat at this point.



Now decide on the colour you’d like the car, in my case I’m using a series of orange and gold tones. Photoshop’s preset swatches are pretty good but like all things as you get better you’ll start to tailor things to suit you. You can add colours to the swatches and create your own unique colours plus you can also set brush tips etc. I have a whole pallet of colours and a set of brushes that I created but I’ll let you guys figure out those little details for yourselves!

Using a set range of tones from the swatch pallet I start to lay down some colour. In the tool preset bar set the pressure of the airbrush down to around 20%. This means you can build the colours gradually and not go too thick. Experiment with the colours and get a feel for sweeping the brush across in nice consistent strokes. Like in art class you should establish a light source usually from a top corner so that you can start laying out some shadow areas and start building up the reflections on the paint.

 

A good tip is to use some brown/beige just across the bottom of the car to give the illusion of reflections from the ground. Grey is also suitable. For a deeper look switch the airbrush to “multiply” mode in the tool preset bar and add some more strokes to the bottom of the body.



Looking good already!

Now’s the time to decide on the paint finish. If you’re going for a suede or matte finish you needn’t go much further, maybe just adding some simple shadow lines. If you want to go for super gloss you need to work with smaller brush tips for crisp reflection lines. When I’m working I try to have an idea of where the car is parked i.e.; the beach or sidewalk and basically just make some reflection lines. Once you’ve been doing this for a while you’ll start to get a natural feel for what goes where and a lot of it is simply “made up”. You’re simply trying to trick the eye. Another good tip is to look at the original photo or car photos in general and see how the light falls. You’ll start to notice common reflections where panels meet and chrome reflects. Remember to set your brush mode back to normal, and for the sharper lines I like to set the pressure of the airbrush back up to around 80-90%



Now we have the basic painted car we can start to tidy it up. At this point I’ll take my time to carefully white out all the details such as bumpers, handles trim and around the outline. I also grey the windows and black out the interior and under shadow cutting in around the wheels as I go. I also add some deep moody blue to the wheels.





Also a tip worth noting: If you find your outlines on the top layer are a little pale you can click on that layer to select it and simply use a black airbrush to go over the lines. Again because the layer is locked it will only apply paint to the lines so it takes a matter of seconds to make them darker. Try it to see what I mean.

Chrome effect

For chrome trim and bumpers I use a pretty set formula. When you look at a chrome bumper or door handle you’ll notice the bevelled edges and curves pick up different reflections. An easy way to decide how to use your colours is by saying that anything facing upwards, bonnet strips, tops of door handles etc will be tinted blue to reflect the sky. Anything facing down would therefore reflect the ground the cars sitting on, so you could use browns for sand/dirt, greys for asphalt, or greens for grass. You’ll have to experiment to see what works for you! Once you’ve put down some colour you can make it look sharper by adding dark reflection lines in black or similar. You’ll see good examples of this when looking at hubcaps. You generally see the sky (blue), a horizon line (black) and the ground (brown/grey/green) Add to these some white highlights and you’re on a roll!

Note also at this point that I decided to add some green over the blue on the wheels for more of an aqua blue.



Details and finish

Once you’ve reached this point you are ready to decide if it’s nearly finished or not.

Style 1: If you favour a more sketchy style or are looking to create some quick renderings you can finish up by selecting the top layer (outlines). Then by using some white, paint the edges of the door lines etc to give some added highlights. Next you need to flatten your image to one layer to add some finishing touches. Go to Layer, Flatten Image… I then add some more highlights and reflections to the glass etc and voila, a finished piece. If however you want to really impress try Style 2



Style 2: If you have more time or are looking for an extremely crisp rendering you can start rubbing out the original lines and airbrushing everything smooth. To erase the original lines select the outline layer and deselect the grey & white check box you clicked earlier. You can now erase these lines or tidy them as you see fit. Again using the method above you can flatten the image and buff it all up as much or as little as you choose. I’ve included some detail close up’s to show the difference between an hours work and say 4-5 hours work!

 

Lastly here’s the fully rendered piece finished off with some Paterson magic. I find adding a simple background can really make the rendering feel complete. Hope you like it!



Don’t forget to save! Speaking of which I generally save as PSD files until I’m done then I’ll save another copy as a jpg for general viewing.

So there you have it. Of course I haven’t showed you all of my little tricks as there’s some things you need to develop on your own but I hope this has proved to be useful? Bear in mind nobody ever taught me any of this, I had to seek answers from multiple sources and work it out as I went along. Photoshop is full of surprises and I’m still finding new things everyday, so take the time to explore it properly. Remember art isn’t about simply trying to copy someone else, it’s about making your own path and inventing your own styles and techniques. I hope to read about them someday!

Thanks

Scott Paterson

 

GREAT instruction! This can really come in handy deciding what to do with a car. Thanks for the time you put into this!

 

Thanks took me a while but it's the first one of a few I'm putting together for my new website. Thought I'd share it here first as theres some majorly talented artists lurking. Thought it'd be good to get some feedback!

 

Nice one Scott,

Showed this to my boy who is just getting to grips with Photoshop and he was really impressed. Looks like I will be going to Maplins tomorrow to buy him a Tablet though....

P.

 

Wow! Very cool - thanks for sharing.

 

Way Cool. Thanks, -stick

 

Whilst I'm in the sharing mood...Two of the best features of photoshop are the Hue and Saturation, or Selective colour Modes..both are found in Image, Adjustments...

They allow you to tint selected colours so you can easily see what your concept looks like in a different colour...I spent 5mins on these to give you an example:

The first I simply played with the colours



This one, I adjusted the colours and changed the wheel style by blacking out the hubcaps and drawing in some spiked centre caps. I also added a couple of whacky pinstriping details...

 

Awesome tutorial, Scott!

Now where the hell have you been?!!

Looks like the new venture is takin off pretty good for ya, bud.
Don't be a stranger... lot of the guys have been askin' about ya!

Thanks again for the great post, brother!

~Steve

 

Thanks! Now I have two windows open and gonna start playing around.

 

very nice work.

 

very cool, thanks for sharing

 

For you a GIANT THANK YOU!!! I have been very curious to explore this area of the art world.Up till now i didn't know how to even ask where to start or what to ask.I'm still stuck in the past,doing the occasional pencil or ink drawings,as well as trying to learn more about rendering with coloured markers.Now that i've recently upgraded to a new Mac with more capabilities i want to learn more to move into the modern art world through the computer.

 

Wey hey Steve, just popped over and put up some ramblings on my "true home" lol...see you over there!

 

wow. i wont be able to do that...but its nice to see how its done.

nice post.

thanks.

 

I work with Photoshop CS2 almost everyday (I'm in advertising).

You sir, have amazing talent.

I only wish (I) or our vendors had half as much. Talk about an amazing amount of work just to post the screenshots! GREAT writeup!

 

WOW...... this is great. I've asked many people who do photoshop well how they do it and they always act like its some great secret kept by the secret society of photoshoppers........ Thanks...... im gonna try it!!!!!!!

 

just what he said!!!!

 

Amazing work!!!

 

Nice work! I will definitely second your recommendation for the Wacom tablet. (I don't even have a mouse connected to my computer at work!)

As for the cropping & straightening, your way works fine, but I feel like there is an easier way. Instead of using the Marquee tool to make your selection I think it's easier to use the Crop tool. (See attached, or just hit "C" on your keyboard when you're in Photoshop.) With the Crop tool selected, click-drag on your scan to form the rectangle where you want your image edges to be. You will have the dotted line border with little squares, called "handles" at the center of each edge and at each corner of the rectangle. Click and drag on any of the center or corner handles to move that edge or corner in- or out. Also notice that when you hover your cursor outside the rectangle, the cursor changes. If you click and drag outside the rectangle, you can rotate your crop area visually instead of guessing with numbers. Once you have your crop area rectangle where you want it, hit the Enter key on your keyboard or double-click inside the crop area.

My description makes it sound complicated, but when you see it happen, it's very fluid and easy.

Again, nice work, Mr. Deertay!

 

I am a self-taught graphics guy and a novice at best.

Thanks for your work.

Truly one of the best tech posts I have seen on the HAMB...and there are alot.

 

Wow, guess it is worth the 50 bucks I was quoted.

 

I love learning more stuff about Photoshop. I need to work on my sketching! Thanks for the tute, it's first rate as is your finished product.

Thanks!

 

Good tutorial!!!!
Eventough nothing new to me.

 

-

Here are some other tutorials!!!:
http://archive.cardesignnews.com/studio/tutorials/index.php

-

 

art tutorial....... get pencil, draw, draw, draw............ya want color?, use colored pencils...........ya wanna use something other than paper?, get brush and paint, paint paint paint........Technology is making people lazy.......