Download Source Files
In this tutorial, I will be taking you through the steps to create a rendering of a car. It will take you from initial sketch to this stylized polished off piece suitable for a presentation. The time taken to complete such a rendering depends on the complexity and the level of detail on the car. This particular one took me about an hour. So grab a cup of coffee and let’s get started!
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below.
Tutorial Details
- Program: Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: 1-2 hours
Step 1
For this tutorial I will be rendering the side of a vehicle. This is just a random sketch of mine that I chose. Notice the wheels are vastly exaggerated perhaps a little too much, but for the purpose of this tutorial it works fine.
There are countless different ways to render a vehicle and the purpose of the rendering should determine the style of the rendering. If you are in the initial stages of a project, you can be very loose with your rendering and only spend about ten minutes on it. If you are further along in the project the rendering will be tighter to demonstrate a truer illustration of what the real vehicle might look like. This tutorial demonstrates how I would tackle the latter. The style is my style and should be used as a guide and catalyst to developing your own style.
Scan your image and open it up in Photoshop. The quality of the sketch is not important in this case because the whole thing will be redrawn in Photoshop and any mistakes will be corrected (for example, one of the wheels might be smaller than the other).
Select Alt + Command + I and change the document size width to 210mm and the DPI to 300. This means that if the resulting image is printed at full size on an A4 sheet of paper the quality will be good, even if it were to be printed at A3 it would still look good.
By default the sketch will be on a layer called “Background” and the layer will be locked. To unlock it, right-click on it and select Layer from Background … a New Layer dialog box will appear, click OK and the layer will change to “Layer 0.” Now click “Layer 0″ once so that it is selected, then double-click it and change its name to "sketch." Next click the little padlock above it to lock the layer.
Go to Layer > New > Layer to create a new layer, then rename it "bg." You can now drag and drop layers to reorder them. Place the "bg" layer below the "sketch" layer. These two layers will remain at the bottom of the layers tab.
Step 2
This is the most laborious of the process. Using the Pen Tool (P) trace over your sketched lines. Use as few points as possible to keep the sketch flowing, light and clean. As an example, the top curve uses only two points, the first one and the end.
Step 3
Go to the Brush Tool, select a Hard Round 1px brush and make sure the color is set to black. The Opacity and Flow should be set to 100%, which is the default.
Create a new layer (Shift + Command + N) and call it "outline." Click on the Pen Tool, right-click anywhere on the image and select Stroke Path, the dialog box should come up with the brush tool selected (this should be the brush that was defined earlier). Make sure simulated pressure is not selected and click OK.
In the path panel (Windows > Paths) the "work path" will be highlighted in blue. Click outside of the blue area to deselect it. The paths will now be invisible. To make them visible again click on the work path (notice that the background is a light blue color, this is just a personal preference of mine and is not necessary).
Step 4
Select a medium color, (I have chosen a light blue, but it can be anything in the midrange), make sure that this is the foreground color.
Make sure that the "outline" layer is selected, then use the Magic Want Tool (W) to select all the areas of the car that will be made into metal. Between each piece selected there will be a gap where the line is, so you need to expand the selection by 1 pixel. To do this go to Select > Modify > Expand, and enter 1 in the box, then apply.
Make sure that the selection is still active. Now create a new layer and Edit > Fill the foreground color. Rename this layer "base" and make sure that it’s below the "outline" layer.
Step 5
Reduce the opacity of the "outline" layer.
Step 6
Using the Magic Wand Tool (W) select the wheels and ground area and any area which will be black. Now fill it with black. Put this layer underneath the "base" layer.
Step 7
For this next stage I have modeled some wheels using Alias (I am in the process of writing a tutorial on how to do this, visit Designer Mart for more news on this in the future), though you can find a stock image of wheels to use.
Step 8
Create a new layer and name it "outer lines." Go to the Brush Tool (B) and select a slightly thicker brush that is Hard and Round with 3 Pixels for size. Turn the paths on. Grab the Direct Selection Tool (A) and click on an outer path to select it, then right-click and select Stroke Path. Turn the paths off to get a clearer view of the new stroke.
Step 9
Create a new layer and name it “glue.” Using the same method as Step 7, create the strokes to highlight the glasshouse and lights.
Step 10
Create a new layer and name it "shutlines." Use the same method as in step 7 to create some shutlines. Select the Eraser Tool (E), right-click anywhere on the image and select a large, soft, round shape. Use this eraser to rub out bits of the ends of the shutlines to make them look lighter towards the ends.
Step 11
It’s important to decide which parts of the vehicle face upwards and which face downwards. Any part that faces up will reflect light and any part facing down will be darker.
Create a new layer and name it "ground darkness." Command + Right-click the base layer to select the area. Make sure that the "ground darkness" layer is selected.
Select the Gradient Tool (G) and make sure that the black to transparent setting is active and apply it from the bottom of the selection upwards.
Step 12
Make the "outline" layer active and use the Wand Tool (W) to select the shapes above the wheel arches. Create a new layer and name it highlights. Fill this layer with white, then use the Eraser (E) tool to soften the top edges of the arches. Using the techniques described above work your way down the car.
Step 13
The area underneath the glass is facing upwards so it will reflect light.
Step 14
The area at the top of the side of the car, known as the waistline, is a large area facing upwards so it will be lighter. I’ve added a little darker bit to the bottom right of it. Sometimes when something large reflects the sky it’s nice to add a little break in it. Some houses or trees might create such a shadow.
Step 15
The sill area will reflect light.
Step 16
Add a little light coming in from the front to give it more depth.
Step 17
Select the area just below the waistline and add a slight gradient to that area, this will give the impression that the area below it is reflecting the atmosphere.
Step 18
Add a little shade to the front grille area.
Step 19
Add a little shadow just below the shoulder-line near the front to make it look like its slightly pinched.
Step 20
Then add a solid block to that to accentuate it further.
Step 21
Select the “base” and add a large gradient from the right. Play with the Opacity of it to make it subtle. This it to make it look like there is light coming from the right.
Step 22
Select the glasshouse area and fill it with a light blue color.
Step 23
Select the bottom half of the glasshouse and fill it with black and turn down the opacity until you get a nice gray color. Then select the upper section of the glasshouse and add a light gradient and again adjust the opacity until you get a realistic look.
Step 24
Often cars reflect road markings or the environment and creates nice flowing shapes on the side.
Step 25
Then add an outline to the reflection.
Step 26
Add a large shape to the left of the car and add a gradient to it. This will make the vehicle stand out.
Step 27
This step is to make the vehicle stand out. If there was a theme to the design, then the image might be more relevant. In this case, I just painted some random shapes using stock Photoshop brushes. Put this image in the bottom of the layer tab just in front of the "bg" layer and name it "atm."
Step 28
Make a copy of the "atm" layer and name it "atm reflect." Go to Edit > Transform > Scale to scale the "atm reflect" layer down a little bit. Command + Right-click the “base” layer to select the area. Command + Shift + I to select the inverse of what is selected. Make sure the "atm reflect" layer is selected then delete it.
Step 29
Now turn all your layers on apart from the "outline" layer.
Step 30
For the back light draw a random squiggle.
Step 31
Then apply an "outer glow" layer style to that layer to give it a glow.
Step 32
The front lights were created using a scatter brush painted in a straight line and erased towards the front. Then I added a glow on the back lights.
Step 33
It’s nice to flip the outcome to see how it looks from the other side. Edit > Transform > Flip Horizontal
Step 34
Using this method you can easily change the color of the car without having to worry about the highlights, lowlights, etc… simply change the "base" color.
Step 35
Experiment with different wheels. (this is another of the designs) …
Conclusion
Experiment with different background colors. The final design is below. There are lots of different styles of rendering, this is just one, have fun making your own!
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Martin Tyminski
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
The background texture is… horrible (sorry).
I think also that the bg is not fine for this work.
But the other part of the tutorial in nice.
Thanks ENVATO!
thank you so much…
Incredibly so…
I agree.
yes but the car is great
The original render had a different background but I couldnt remember where I got some of the contents from so I couldnt credit the owner so I couldnt show it here. When I took it out the car looked quite bare in comparison so I quickly rummaged this up. Looking at it now I agree it doesnt do the car any justice.
Thank you for the comments…
I think this tutorial is ok infact its realy quite informative and innovative, but i think it should have stopped at step 25, the effects added in the next steps id exept from a beginner and it still won’t go without comment.
No offence at all to the auther, just my thoughts on the final outcome.
I agree..
Yeah I’ll agree with that one too. Good tutorial though
nice technique :)
I like this. Not crazy about the background but the steps leading up to that point are pretty informative and easy enough to follow.
Thanks…I have actually been looking for something like this.
A good tutorial but more detail would have been nice
Could you elaborate where you would like to see more detail please.
That was fun, thanks!!!!!!!
Wow! It’s amazing what you can do with just Photoshop.
COOOOOOLL
No need for the background in my opinion, it ruins the overall piece. Step 26 was good enough, and working with concept ideas and in a concept related job, especially car designs, the background clutter is worthless. Designers are looking at the design and structure of the car only- unless obviously the car is in an environment.
To conclude. The car design is pretty good, but you shouldn’t have added the background textures in. They don’t help the piece at all.
I like that you did it all from scratch. The only thing I would add are some brake calipers and maybe play with the back hatch area, it looks a little too two dimensional. Other than those gripes it looks sweet!
Yeah I agree about the brake calipers. I am in the process of modelling some up and they will be available soon on my site.
Thank you for the comment.
wicked tut! :D
Thankyou, soooooo much – I’ve been waiting for something like this for ages now, and it’s finally come – PSD tuts, I loe you!
whohoo..
this roxx ;D
nice technique
Ditto on the background, but nice use of line weight…
I think the effort on the detail on the concept car is pretty good. thanks
Lmao Nice but this is not a Tutorial, this is like teaching experts how to do a Car.
You should know that most of the people wo visit your site are beginners and this si beyond experts…
Sorry but your side besides having the good tutorials in private for plus+ the free ones are Full-Complex.
Now worth the time.
This tutorial teaches you how to use photoshop to render a car. Averyone has the ability to sketch the side of a car and with this tutorial they can colour it in and make it look nice.
Please could you elaborate and let me know which part you thought inapropriate.
I think PSDtuts should mention when any tut is made using anything more than Photoshop. That should be mentioned in the first page where all tuts are put out so that the viewer knows before jumping into a tut. For example, you start learning this one and on step 7 it says something is done in Alias. Thats what I mean.
Good point I think. The reason why the wheels were modelled in Alias is because to render some wheels would be a tutorial in itself. I have made these wheels available on my site or alternatively you can google some nice wheels and use those instead. Hope this helps.
It’s not bad although I think the instructions/steps were a little vague.
Off topic, has the font for comments changed or is it just my eyes playing tricks on me?
Hmmm I am not sure that the background is totally inappropriate. sorry to cut across the grain here. A good background can definitely add to a piece and in step 26 it looks great.
After that though it almost would make sense to see it in a commercial marketed at a female demographic. I almost see it being used as particles in After Effects. For Concept art though it is a bit much. After that it looks less and less like a piece of concept art and more and more like an advertisement. In a lot of cases less is more. This is definitely true in this situation.
I do like the idea of changing the base color though. That was good thinking. I like it. Thanks for the Tut+!
Alex
artstudentsurvivalguide.blogspot.com/
deep
I like the tut! :) I’m trying to push myself further and further with my designs. Right now I’m working on something totally different, but this will be the next thing to try out :) I’ve never drawn a car really in PS. So this will be a new experience, even though it doesn’t seem that hard.
I’ll try and go a bit more into detail with it, tho. See how close it can come to being a bit more realistic, rather than vector’ish.
It also wouldn’t be too hard adding a tiny bit perspective, once you can do this. Definitely a nice one to start my ‘car-drawing’ with! Thnx ;)
The front light…now what is that?! Where is it coming from? Looks just awful.
The background is crappy and the back tire looks weird.
Also the image is too cropped.
The rest is really good.
i like the outcome. Nice tutorial
the car is good.. the lights and the background are gross and look wayy too amateur..
background is fail. stars? are you serious??
This site is so frustrating, everybody rips it apart for not having any tuts that break from the photo manipulation route, then when it does, bitch about it.
If you dont like the background, heres a radical idea….. CHANGE IT…. simple as,
its not carved in stone. since when has photoshop only allowed you to put in the background specified in a tut?????
Instead of getting angry and throwing your toys out of the pram, if you’d have read the comments that mention about the background including mine, we have informed him in a civil and mature manner that the background offers nothing to the piece and that the tutorial writer should have stopped at Step 26. That’s called constructive critisicm and it helps designers move onto the next stage in terms of their development. You can’t just ask your friends and family who are going to give you positive feedback all the time.
Not one person here has been aggressive towards the tutorial writer, mostly just commenting on the background, informing him why it doesn’t work, but also praising his work on the car.
“If you dont like the background, heres a radical idea….. CHANGE IT…. simple as”
You’re correct, we can change the background. I don’t think one person here has questioned that. The comments are aimed at the final image produced by the tutorial writer though, from what we can see. People are guaranteed to comment on it.
So from reading your opening paragraph, it’s quite clear to me that the use of words such as “frustrating” and using swear words like “bitch” you have a problem with feedback and constructive critisicm.
Nobody here has called the tutorial writer names, and nobody here has directed personal insults at him. We’ve looked at the tutorial and the final image and given praise to certain parts, whilst suggesting how he could have improved the piece – i.e stop at point 26.
amen.
Wow how far can you miss the point, and for somebody who doesnt get angry you sure vented some there, for starters did I mention your comment, no, my comments were actually aimed at the people not providing anything constructive in the way of feedback for example.
“background is fail. stars? are you serious??”
so is that constructive? no, is it civil and mature? no, did you write it? no.
The people who provide tutorials to this site are experts in their field, and are chosen as such, they have not put up work for appraisal, from armchair critics, and should be shown some respect.
the point that you missed in my comment was the fact that tutorials are guides to achieving an end result, not some concrete set of instructions they are there to teach technique how you apply them is up to you, so the fact that you or other bandwagon jumpers like you, dont like the background is neither here nor there.
So step down off your soapbox put your brain into gear and next time read the comments properly.
Totally agree with DaveK, what gives you the right to crit this guys work, are you writing a book on automotive design and illustration? I think he knows what he is talking about.
count to 10… feeling better? no? repeat… how about now?
I love the assumptions here. Firstly, “they have not put up work for appraisal, from armchair critics, and should be shown some respect.”
Secondly – “what gives you the right to crit this guys work, are you writing a book on automotive design and illustration? I think he knows what he is talking about.”
You have no idea what I do for a living, but keep the generalisations going. Phew, the internet never ceases to amaze me.
There is no assumption on my part, the author did not put their work up for appraisal from armchair critics, they put it up to educate, that is the definition of a tutorial, you know, as in tuition…..
I like the tutorial and there are useful techniques on it, but i have to agree with everybody’s comment on the background. thanks for sharing thu
the car looks fantastic… but the bg and the lights have some serious problems lol
pretty amazing…
but i looks like a vector
Nice detailed concept car. Will try it soon.
Thank you
Interesting idea. Decent excecution.. poor automobile design. Front end looks like a crumpled beer can. Beltline is too high.. horrible visibility in that thing. BUT… it does look interesting. And thats what really matters for a concept!
This is a great tut, I think you should not look at this as a whole but a way to be inspired and take it on another journey and explore your own ideas in photoshop, play around and enjoy it.
Waaaaaaaw .Great Tutorial
Thanx
A bit hard to follow but the result is just great! thnx!
the car is damn ugly, but the tutorial is not bad
Thank you all for the comments. Nice to see a couple of you really getting in there and mixing it up a bit. Not point in beating round the bush.
I invite you all to visit my website and try out some of my other techniques and would love to hear more of your comments and suggestions.
Thanx for the time you put into this tutorial… from my noob point of view you have shown me another way to explore with this fantastic program and render something, up until now, I didn’t think I could achieve.
Cheers
I impressed!
i think its pretty good but d one who have d passion of designing side view of cars . vat should he do . pls sugest me , m passionate about dis.
very nice man with nice car
Wow Martin nice tut! any more coming from you?
Awesome
Thanks again for all the comments. And in reply to more tutorials, yes there are plenty on my site. Enjoy…
very helpful tutorial for the absolute begginer, i have some experience with photoshop n this is a amazing in depth tutorial, jus what i need right now, i think the background was not suitable but it done the job for now n u can always edit that later right? thanks for the tut, plz continue to make more!