An emoji is a specific type of pictorial icon. In this tutorial, we will draw a set of car and van emojis in Photoshop using its amazing vector feature. We will start by drawing a standard van and car and then turn them into other cars, such as an ambulance, firetruck, taxi, and police car. I hope you like it.
For inspiration, why not check out Envato Market for emoticons and icons.
1. Preparation
Step 1
It is always a good idea to put every element inside a separate layer group. Each car and its elements (bumpers, tires, etc.) should be placed inside a specific group layer and given an appropriate name. I also suggest that you start some research on car icon design. By seeing other icon designers' work, you will learn which element is essential in the design.
Step 2
Start by creating a new document in Photoshop. Hit Control-N or click File > New. We don't need a big canvas. Set its size to 320 pixels x 140 pixels. Click OK.
Step 3
Click the Add Adjustment Layer icon and then select Solid Color. Select a dark gray color for the canvas background. After this, you can simply delete the Background layer to decrease the file size.
Step 4
Click Arrange > New Window for [file name]. The same file is opened in a separate window. Both are the same. You can edit in one of the windows and the changes will appear in the other one at the same time. We'll use this to help us see the real result, in 100% magnification, and at the same time working with the details.
Drag one of the tabs to detach it from the main workspace. Set its zoom level to 100%. Set the other window at a larger zoom level.
2. Draw the Basic Van
Step 1
We start by drawing the basic van shape. Activate the Rounded Rectangle Tool, and then click and drag to draw a white 14 px × 18 px shape. From the Properties panel, set the top left corner radius to 10 px.
Apply Inner Shadow and Inner Glow layer styles to the layer to add shadow and a bit of depth. Use the following settings.
We want to keep each layer organized. Get yourself used to naming every layer with a sensible name.
Step 2
Duplicate the vector shape of the van's cab by hitting Control-J, and then pull its lower and right side to turn it into a windshield.
Add the following Layer Styles to add blue lighting to the shape. In the Inner Glow dialog box, use blue.
Step 3
Draw a 2 px width white rectangle on the lower part of the van. Add Inner Shadow and Gradient Overlay layer styles to add simple lighting to the shape. This shape is going to be the van's bumper and base.
Step 4
Draw a rounded rectangle with a radius of 2 pixels on each corner. Here, we are using yellow for its color. You may have a different favorite color. To add lighting to the shape, we simply add Inner Shadow and Gradient Overlay layer styles. Play around with the Angles settings until you get a satisfying result.
Step 5
The next step is adding the wheels. Of course, we just need to add a simple circle shape by Shift-dragging using the Circle Shape Tool. From the Option Bar, set its Fill color to white and its Stroke color to dark gray with a size of 1 pt. The diameter of the wheel should be even, such as 8 px, 12 px, or 16 px. This will make the next steps easier. Apply Stroke and Inner Glow layer styles to add simple lighting to the wheel.
Step 6
We will use two sets of wheels, front and rear. Because both are the same, it's a good idea to use a Smart Object. Right-click the wheel layer and choose Convert to Smart Object. Next, Alt-drag to duplicate the wheel.
Step 7
We are going to add a small gap, 1 px width, between the wheel and the van's body. Create another dark circle shape, with diameter 2 pixels bigger than the wheel. Place it behind the wheel. Add a rectangle covering half of the wheel under the car's bumper and set its path mode to Subtract Front Shape. Add black Stroke and Gradient Overlay.
Add the same shape behind the other wheel.
Step 8
We're almost done. The last step is adding the shadow. We can easily paint shadow under the van using the Brush Tool. But the downside is that the result will be in pixels, and images based on pixels tend to blur uncontrollably when they are resized. You really don't want that to happen in a small image such as this.
Our approach is to draw a dark rounded rectangle underneath the van and then fill it with Inner Shadow and dark Outer Glow layer styles.
There you go, complete with shadow.
Step 9
I guess we have just missed one small detail: the rearview mirror. All we need to do is draw a triangle and a square. That's it. We now have the basic shape of a van emoji. You can stop at this point or continue adding small ornaments to make it unique.
Step 10
Starting from here, the following steps are optional. Draw a 1 pixel tall rectangle shape on the box. Shift-drag to add another shape to the box. For its color, set it to lighter yellow.
Add Inner Shadow and Drop Shadow layer styles to add depth to the box surface.
Step 11
Let's add a company name on the box. Draw a white rectangle using the Rectangular Marquee Tool.
Add text inside the white area. While the text layer is active, change the anti-aliasing method of the text and pick the clearest appearance, Usually, for small text, Crisp works best.
3. Make an Ambulance
We've finished the standard van. By adding slight modifications, such as changing color, we can create other types of van.
In this tutorial, we will make an ambulance. First, we need a reference to see the common characteristics of an ambulance. You can find them on PhotoDune. Just search for ambulance or ambulance car. From these photos, I notice three common elements of an ambulance: sirens, a cross sign, and red and white color.
Step 1
This ambulance is made from the previous van. So, Alt-drag to duplicate it.
Step 2
We don't need the stripe detail and text on the box. We can remove it.
Step 3
Change all the color to white.
Step 4
Add a new red rectangle using the Rectangle Tool. Draw a red cross sign made from two overlapping rectangle shapes. The path mode should be Combine Shapes. Add Inner Shadow and Drop Shadow layer styles to add depth to the red shape.
Step 5
Draw a rounded rectangle on top of the ambulance cab. Add a radius to its top left and top right corner until we have a half rounded rectangle for the siren's shape.
For its color, add a layer style Gradient Overlay with linear gradient from red to blue.
Add Inner Shadow and Outer Glow to add subtle light to the sirens.
And here they are: a basic van and ambulance.
4. Create a Car
Step 1
For the car, we start by drawing a simple rounded rectangle. Add the upper part of the car by drawing it manually using the Pen Tool.
Add Inner Shadow and Gradient Overlay layer styles to add simple lighting and three-dimensional perception to the shape.
Step 2
Duplicate the car's lower body and change its color to black. Add a rectangle and set its path mode to Intersect Shape Areas.
Step 3
Add wheels to the car. We can simply copy and paste the wheel we made earlier for the van.
Step 4
Let's add a windshield to the car. The process is similar to what we did earlier to the van. Draw a polygonal shape using the Pen Tool and then apply layer styles Inner Shadow, Inner Glow, and Outer Glow to add blue highlight to the glass.
Step 5
Just like we did with the van, there's no need to draw a door. But we need to add a small 1 pixel line to separate the front and rear door. Draw a 1 pixel width white rectangle between the two windshields. Apply a slight drop shadow.
Reduce its layer Opacity to 10%.
Step 6
Duplicate the car's main body. Change its color to white. Add a rounded rectangle on the front of the shape and set its mode to Intersect Shape Areas. This is going to be the car's headlight.
Repeat the same for the taillight. Use red for this one.
Step 7
Draw a dark rounded rectangle shape underneath the car and apply layer styles Inner Shadow and Outer Glow to turn it into the car's shadow.
5. Make the Police Car
We have done with the basic car. We can add certain elements to turn it into a specific car, such as a police car. What elements are essential for a police car? Search police car photos for reference from PhotoDune. We can see that there are three essential elements in common: its black and white color, sirens, and police text on the door.
Step 1
Let's duplicate the standard car. Change its main color to black. Apply another Gradient Overlay layer style by clicking on the plus icon next to the already available Gradient Overlay. So we use two Gradient Overlays, one for the highlight on the car's body and another one for its color. Set this new Gradient Overlay layer style from white to black with Style: Reflected.
Step 2
Add text on the side of the car. Experiment with the anti-aliased option to achieve clear visibility of the text.
Step 3
Add a rounded rectangle for the siren and apply Gradient Overlay. We have drawn this before for the ambulance. You can just simply duplicate it. Depending on the country's law, the color for ambulance and police sirens might different. Check your country's emergency light color in Wikipedia.
Awesome Work, You're Done!
We have finished drawing the emojis. They are all made from vector shapes, without manual pixel brushing. As you can see, they are both just a variation of the basic van and car. If you add other elements, you can modify them into a firetruck and taxi too. Try them yourself. Good luck!
