Saturday, August 1, 2020

How To Create A Porsche 911 With Sketch (Part 2)

About The Author

Visual and UI/UX Designer, the author of dozens Adobe Photoshop and Sketch tutorials. Espresso addict. Watch enthusiast.
More about
Nikola
Lazarević

In Part 1 of this tutorial, Nikola Lazarević explained how you can create and tweak the body of a car in Sketch including the front signal lights and the tail lights. In this part, he continues with the design of the car windows, bumpers, headlights, the interior, and a few other elements.

Are you ready to push Sketch to its limits once again? As noted in the previous part, this tutorial is geared more towards experienced illustrators, but if you’re new to Sketch then you should also be able to profit from it since all of the steps are explained in great detail.

After finished off the tail lights, let’s continue with the design of the car windows.

7. Rubber Seals Around The Windows

In this step, we will add rubber seals around the windows. Start first with the side window. Switch to the Vector tool (V) and draw a shape around the the side window, like on the image below.

Note: Before you continue, remember that we’re still drawing inside the bodywork group!

Screenshot of the steps described in the previous paragraph of the tutorial.
Draw a rubber seal shape around the side window. (Large preview)

Turn off Borders and set Fills to #000000, and add a Shadows effect:

  • Color: #FFFFFF
  • Alpha: 90%
  • X: 0; Y: 0; Blur: 3; Spread: 1
Screenshot of the steps described in the previous paragraph of the tutorial.
The rubber seal around the side window is now complete. (Large preview)

Next, let’s add a rubber seal around the front windshield. Draw a shape around the front window, turn off Borders, set Color to #000000 and apply Shadows:

  • Color: #FFFFFF
  • Alpha: 90%
  • X: 0; Y: 0; Blur: 3; Spread: 1
Screenshot of the steps described in the previous paragraph of the tutorial.
The front windshield’s rubber seal. (Large preview)

Now, let’s add a trim on top of the rubber seal. To do that, duplicate the seal shape, turn off Fills and Shadows, turn on Borders, set Color to #E0E0E0, border position to Inside and Width to 1.5px. Double-click on the shape to enter vector editing mode and then select and move the points until you have something like on the image below. Be patient, it may require some time!

Note: While usually I’d suggest avoiding half-pixels in your vector illustrations as much as possible, in some cases these might actually work well. After quite some trial and error while working on the trim on top of the windshield’s rubber seal, I’ve discovered that 1.5px gives the best visual results.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the trim. (Large preview)

Tip: Change point types as needed while working on this shape.

At the end of this step, we need also to add a seal around the rear windshield. Draw a shape around it, turn off Border, set Fills to #000000 and apply Shadows with the same parameters like we did for the previous seals.

Screenshot of the steps described in the previous paragraph of the tutorial.
The rear windshield’s rubber seal. (Large preview)

8. Door Handle

Pick up the Oval tool (O) and draw an ellipse. Set Border color to #949494, position to Center with a Width of 1px. For the Fills use a Linear Gradient:

  1. #787878
  2. #C9C9C9
  3. #A5A5A5

And add Inner Shadows:

  • Color: #000000
  • Alpha: 50%
  • X: 0; Y: 2; Blur: 2; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Draw an ellipse for the door handle. (Large preview)

Create a rectangle on the left and on the right side of the ellipse by using the Rectangle tool (R). Make the outer corners rounded by using the Radius property in the Inspector panel. Turn off Borders and set Fills to #333333.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the rectangles on the left and on the right side of the door ellipse. (Large preview)

We will now use Inner Shadows and Shadows to make it look slightly raised.

Select left side rectangle and add a light Inner Shadows effect with the following properties:

  • Color: #FFFFFF
  • Alpha: 20%
  • X: 2; Y: -2; Blur: 1; Spread: 0

Then, apply a Shadows effect:

  • Color: #000000
  • Alpha: 50%
  • X: 0; Y: 0; Blur: 2; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply the effects to the left side rectangle. (Large preview)

Next, select right side rectangle and apply Inner Shadows effect:

  • Color: #FFFFFF
  • Alpha: 20%
  • X:2; Y: -2; Blur: 1; Spread: 0

Apply a Shadows effect:

  • Color: #000000
  • Alpha: 50%
  • X: 0; Y: 0; Blur: 2; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply the effects to the right side rectangle. Still not there but we’re getting closer! (Large preview)

Let’s move on to handle. We will build our handle out of three shapes.

First, create two rectangles by using the Rectangle tool (R) and make the sides rounded with a help of the Radius property set from the Inspector panel.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start working on the handle details. (Large preview)

Then, use the Vector tool (V) to draw a shape between the rectangles.

Screenshot of the steps described in the previous paragraph of the tutorial.
With the Vector tool, draw a shape between these two rectangles. (Large preview)

Now select the rectangles and the shape we have just created and perform a Union operation (from the top Sketch toolbar) to create one object. Name this object handleshape. Change the Color to #E3E3E3 and add an Inner Shadows effect:

  • Color: #000000
  • Alpha: 50%
  • X: 0; Y: -2; Blur: 5; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the object and apply the styles. (Large preview)

Let’s add a subtle shadow to the handle. Zoom in and draw a shape like on the image below. Don’t worry if the bottom part goes out of handle area, we will fix this later with a masking operation. Turn off Borders and set Fills to #3D3D3D.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add a shadow to the door handle. (Large preview)

Let’s fit the shadow inside the handle. Select the handle and the shadow shape, and click on Mask in the top toolbar. The result of this masking operation will automatically be placed in a new group in the Layers panel list. Change the name of this group to handle.

Tip: *Don’t forget to check if Sketch turned off Inner Shadows for the masking layer. If that’s the case, just turn them back on.*

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘handle’ group is complete. (Large preview)

Now, let’s add a key lock to the door handle.

Draw a small circle. Add a Center Border with a Width of 1px and the Color set to #000000. Change Fills to Linear Gradient, and adjust the gradient with the following parameters:

  1. #888888
  2. #DFDFDF
  3. #CACACA

Apply a Shadow effect with the Color set to #000000 at 90% alpha, Blur to 3, the X and Y positions and Spread set to 0.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create a key lock. (Large preview)

Create a keyhole by drawing a tiny black rectangle without Borders in the middle of the circle. Group both shapes (circle and rectangle) into a key-lock group.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the keyhole. (Large preview)

The only thing left to do is to create the handle’s shadow which should be placed inside the ellipse (see the next screenshot). Find the handleshape object in the Layers panel list, click on the caret in front of the layer name to reveal its content (the shapes), select the bridge between the rectangles and press Cmd + C to copy this shape.

Screenshot of the steps described in the previous paragraph of the tutorial.
Select the bridge between the rectangles then copy it. (Large preview)

Select the ellipse that is below the handle, paste (Cmd + V) over the shape that we’ve just copied, set the Color to #505050, push it down 2px and apply a Gaussian Blur with an Amount of 2. Then select this shape along with the ellipse and group them together (Cmd + G).

Screenshot of the steps described in the previous paragraph of the tutorial.
Paste, move, apply the styles, then group. (Large preview)

Inside this group, select the ellipse, right-click on it and choose Mask from the menu, to make sure that the shadow will stay inside the ellipse.

Screenshot of the steps described in the previous paragraph of the tutorial.
The handle shadow is now complete. (Large preview)

Select all the elements that we created in this step and place them into a group named door handle.

9. Bumpers

Let’s create the front bumper first. Switch to the Vector tool (V) and draw the shape. Change the Fills Opacity to 0%, make sure that Borders are turned off and apply light and dark Inner Shadows effect.

First add a light Inner Shadows effect with the following properties:

  • Color: #FFFFFF
  • Alpha: 50%
  • X: 0; Y: 5; Blur: 6; Spread: 0

Then, add a dark Inner Shadows effect:

  • Color: #000000
  • Alpha: 50%
  • X: -2; Y: -5; Blur: 6; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
The front bumper. (Large preview)

Do the same for the rear bumper, but instead use these parameters for the dark Inner Shadow effect:

  • Color: #000000
  • Alpha: 50%
  • X: 3; Y: -5; Blur: 6; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
The rear bumper. (Large preview)

Name these shapes front bumper and rear bumper.

Let’s move on to the next element on the case. Now we will create the decoration on the front bumper. Grab the Rounded Rectangle tool (U) and draw a rounded rectangle (174px by 14px). Make sure it is outside of the bodywork group and give it the name bumper deco base.

Turn off Borders and then click on Fills, choose Linear Gradient, and add a gradient. Use #E4E4E4 with 100% alpha for the first color stop and #858585 with alpha 100% for the last color stop. Now, add another point with a click on the gradient axis in the color dialog, and move it to the exact middle by pressing 5 on the keyboard. Give it 100% alpha, and make sure its color is #E4E4E4. Add another one to the right, and also move it to the center. Change the color of this stop to #858585 with 100% alpha.

Screenshot of the steps described in the previous paragraph of the tutorial.
The front bumper deco element. (Large preview)

Duplicate the shape (Cmd + D), change the name to front bumper deco shadow and using the Layers panel list, drag it inside the bodywork group just above the front bumper shape, and add two Shadows effects.

Add the first Shadows effect with the following properties:

  • Color: #000000
  • Alpha: 80%
  • X: 0; Y: 2; Blur: 2; Spread: 2

Then, add the second Shadows effect:

  • Color: #000000
  • Alpha: 80%
  • X: 0; Y: -2; Blur: 2; Spread: 1
Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘front bumper deco’ shadow. (Large preview)

Let’s add a rubber element in the middle of the bumper deco. Select the bumper deco base, duplicate it and give this shape the name of rubber. Change the Fills to #303030 Solid Color, and change the Height to the half size, then align it to the middle with bumper deco base, using the Inspector panel.

Screenshot of the steps described in the previous paragraph of the tutorial.
The front bumper ‘rubber’ shape. (Large preview)

Add the following effects to the rubber shape.

First, a light Inner Shadow:

  • Color: #FFFFFF
  • Alpha: 30%
  • X: 0; Y: 2; Blur: 2; Spread: 0

Then, a dark Inner Shadow:

  • Color: #000000
  • Alpha: 100%
  • X: 0; Y: -4; Blur: 1; Spread: 0

After that, a dark Shadow:

  • Color: #000000
  • Alpha: 100%
  • X: 0; Y: -1; Blur: 2; Spread: 0

And lastly, a light Shadow:

  • Color: #FFFFFF
  • Alpha: 50%
  • X: 0; Y: 2; Blur: 2; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply all the styles to the front bumper ‘rubber’ element. (Large preview)

Finally, select the bumper deco base and the rubber shapes and perform a Mask operation so that none of the rubber shadows go outside of the bumper deco base. Name the resulting group front bumper deco.

Screenshot of the steps described in the previous paragraph of the tutorial.
The front bumper ‘rubber’ shape is now complete. (Large preview)

Now, using the same method as explained above, create the rear bumper deco element.

Screenshot of the steps described in the previous paragraph of the tutorial.
When it’s ready, the rear bumper deco should look like this. (Large preview)

Switch to the Vector tool (V) and draw a basic shape for the rear bumper guard. Add a Linear Gradient with the following properties:

  1. #EEEEEE
  2. #C9C9C9
  3. #939393
  4. #6C6C6C
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the rear bumper guard. (Large preview)

Duplicate this shape, place it behind (right-click on the shape and choose Move Backward from the context menu), apply #2D2D2D Solid Color, push it a couple of pixels to the right and resize the height down a bit using the resize handles. Name this shape rubber buffer. Add an Inner Shadows effect with the Color set to #FFFFFF at 30% alpha. Set Y and Blur to 2, and X and Spread to 0.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘rubber buffer’. (Large preview)

Select again the shape on top, duplicate it one more time, and use the key to move it a few pixels to the left. Modify the Linear Gradient (delete the two middle points, change the colors of the top and bottom points to #8E8E8E and #DEDEDE then move the top point down a bit). Finally, apply a Gaussian Blur effect with the Amount of 0.6.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue working on the rear bumper guard. (Large preview)

Select this shape and the shape below this one and perform a Mask operation. Name the resulting group bumper guard base, then select the resulting group and the rubber buffer shape and group them into a group rear bumper guard. Place this group just below the bodywork group in the Layers panel list.

Screenshot of the steps described in the previous paragraph of the tutorial.
The rear bumper guard — now finished. (Large preview)

Using the Rectangle tool, create two rectangles like on the image below (use Radius in the Inspector panel to control the roundness of the points). Select both shapes and to create one object, from the top toolbar in Sketch perform a Union operation. Move this new object inside the rear bumper guard group, directly into the bumper guard base group on top. Change Color to #000000, turn off Borders and add Gaussian Blur with the Amount of 1.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the shadow from the bumper inside the bumper guard. (Large preview)

Here’s a preview of what we’ve done so far.

The Porsche 911 illustration — getting there bit by bit...
The Porsche 911 — getting there bit by bit… (Large preview)

10. Windshields

Side Windows

Remember those side window 1 and side window 2 copies that we have created at the beginning of the tutorial, in Part 1?

Well it’s time to use them! Locate these copies in the Layers panel list and un-hide them. Make sure that Fills is turned off and add 5px Width Borders with a #72BD20 color, positioned Inside.

Screenshot of the steps described in the previous paragraph of the tutorial.
Time to un-hide the ‘side window 1’ and ‘side window 2’ copies! (Large preview)

At the beginning, we will create the window frames using these shapes.

So first, we will need to convert a shape border to a shape itself. We need to apply Inner Shadows to the window frames because there’s no option to apply Inner Shadows to Borders.

To outline the borders, select both shapes and go to LayerConvert to Outlines (or press Alt + Cmd + O on the keyboard).

Note: Converting the shapes to outlines has turned each shape into two separate combined shape layers. That’s because an outline stroke is a combined path that exists of two shapes:

  • one that determines the outer boundaries, and
  • the other determines the inner boundaries, creating the appearance of a stroke.
Screenshot of the steps described in the previous paragraph of the tutorial.
The outline borders. (Large preview)

Select and copy (Cmd + C) the inner shapes, then deselect the shapes by pressing Esc on the keyboard and finally paste (Cmd + V) them (please note that Sketch will place the copies on top), because we will use these shapes as windshields. Give them the names of side windshield 1 and side windshield 2 and hide them for now.

Let’s continue with the window frames. Draw two shapes using the Vector tool (V), select those newly created shapes and the side window 1 shape and perform a Union operation to create one shape. Change Fills to #DCDCDC and add Inner Shadows with the Color set to #000000 with 50% Alpha and Blur set to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘side window 1’. (Large preview)

Apply the same styles — Fills and Inner Shadows — to the side window 2.

Un-hide the side windshields and place them below the bodywork group in the Layers panel list.

Tip: Since the windshields are basically transparent I suggest you to temporary add some background color to the artboard, so you can actually see what we are going to do. To do that, select the artboard and then turn on ‘Background color’ in the Inspector panel then set ‘Color’ to something like #434343.

Now back to the side windshields: select the first one (the one on the left), turn off Borders and set Fills to Linear Gradient:

  1. Color: #FFFFFF, Alpha: 0%
  2. Color: #FFFFFF, Alpha: 22%
  3. Color: #FFFFFF, Alpha: 50%
  4. Color: #FFFFFF, Alpha: 27%
  5. Color: #FFFFFF, Alpha: 30%
Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘side windshield 1’. (Large preview)

Do the same for the other windshield.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘side windshield 2’. (Large preview)

Tip: You can use the Sketch’s feature Copy Style from the first windshield (right-click and choose ‘Copy Style’) then paste the style to the second windshield (right-click then choose ‘Paste Style’). After that, you may only need to slightly move the points to adjust the gradient to match with previous one, since the shapes are not the same height.

Front Windshield

Switch to the Vector tool and draw a shape for the front windshield. Apply a Linear Gradient with the following parameters:

  1. Color: #F3F2F0, Alpha: 40%
  2. Color: #FFFFFF, Alpha: 50%
  3. Color: #F3F2F0, Alpha: 20%
  4. Color: #F3F2F0, Alpha: 10%

Then add Inner Shadows with the Color set to #000000 with 10% Alpha. Set Y position to 2 and Blur to 8. Name it front windshield.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘front windshield’ element. (Large preview)

Rear Windshield

Draw a rear windshield with the Vector tool, and apply the same style (Linear Gradient and Inner Shadows) like for the front windshield.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘rear windshield’ element. (Large preview)

Name this shape rear windshield, then select all the windshield shapes, group them into a windshields group and make sure that this group is below the bodywork group in the Layers panel list.

Note: You can now turn off the Artboard’s background color in the Inspector panel.

11. Headlight

For the headlight, switch to the Vector tool and draw the shape that will be headlight glass. Use Solid Color #E4E4E4, turn off Borders and add Inner Shadows effect:

  • Color: #000000
  • Alpha: 10%
  • X: 5; Y: -2; Blur: 2; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Let’s create the headlight glass. (Large preview)

Next, draw a black (#000000) shape over the headlight glass. Duplicate this shape (Cmd + D), push it 1px the the left and apply a Linear Gradient with the following parameters, from top to bottom:

  1. #EEEEEE
  2. #F5F5F5
  3. #828282
  4. #484848
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the next part of the headlight. (Large preview)

Select all the shapes and group them (Cmd + G) into s headlight group. Then we need to rotate it a bit (by 25 degrees) and place it above the bodywork group.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘headlight’ group is now complete. (Large preview)

12. Rear Engine Grille

In this step we will create a grille over the rear engine lid. Once again, pick up the Vector tool (V) and draw a shape. Change Fills to #000000 and add Inner Shadows — for the Color use #FFFFFF with 80% Alpha, and set X position to -2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the grille element. (Large preview)

Duplicate this shape, move it to the left and down a bit, zoom in close enough, switch to vector editing mode and move the points so they touch the edge of the rear engine lid. Use the image below as a reference.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start building the engine grille using the grille element. (Large preview)

Repeat this eight more times to form a grille over the engine lid. Then draw a line using the Line tool (L). For the Color use #CCCCCC, set Width to 1px and choose Round cap for the Border ends. Apply black (#000000) Shadows effect with 100% Alpha and Blur of 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
The engine grille is now complete. (Large preview)

Select all of the grille layers, and place them inside the group rear engine grille.

13. Side Mirror

Let’s move on to the other details on the car. The side mirrors!

Using the Vector tool, create a shape which will be the base for the side mirror, turn off Borders and use Linear Gradient for the Fills:

  1. #E5E5E5
  2. #D5D5D5
  3. #878787
  4. #6A6463

Then add Inner Shadows:

  • Color: #000000
  • Alpha: 50%
  • X: 2; Y: -2; Blur: 6; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Shaping the ‘side mirror base’ shape. (Large preview)

Name this shape side mirror base.

Draw another shape, which will be mirror cover, once again turn off Borders and change Fills to Linear Gradient:

  1. #CCCACB
  2. #FEFEFE
  3. #A1A5A4
  4. #4A413F
Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘mirror cover base’. (Large preview)

Give this shape the name of mirror cover base. Duplicate the shape and push it 4px to the left using the key on the keyboard. Change Color to #C4C4C4 and add two Inner Shadows.

For the first Inner Shadow use:

  • Color: #000000
  • Alpha: 60%
  • X: 5; Y: 0; Blur: 1; Spread: 0

For the second Inner Shadow use following properties:

  • Color: #000000
  • Alpha: 50%
  • X: -4; Y: 5; Blur: 6; Spread: 0

Then select both shapes and perform a Mask operation, so the top shape does not extend past the mirror cover (the bottom shape). Name the resulting group mirror cover.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘mirror cover’ group. (Large preview)

Select side mirror base and add one more Inner Shadows effect, to add shadow from the mirror cover. For the Color use #000000 with 50% Alpha, set X position to -1 and Blur to 1.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add a shadow from the mirror cover. (Large preview)

We will finish this step by creating a shadow from the side mirror.

Grab the Vector tool and draw a shape like on the image below. Place it below the side mirror base, push it a bit up so it is really behind it, and add a Linear Gradient for the Fills. For the top stop use #000000 with 40% Alpha and for the bottom stop also use #000000 but with 0% Alpha. Don’t forget to turn off Borders.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create a shadow from the side mirror. (Large preview)

Name this shape side mirror shadow, then select all shapes created in this step and group them into a side mirror group.

14. Exhaust Pipe

It’s time to create the exhaust pipe. First, find in the Layers panel list the floor layer, remember — the one that we’ve created at the beginning of the tutorial in Step 2 — and un-hide it. Switch to the Rectangle tool (R) and draw a rectangle with the Radius set to 2. This rectangle shape will represent the exhaust pipe.

Turn off Borders and set Fills to a Linear Gradient:

  1. #E2E2E2
  2. #E3E3E3
  3. #A0A0A0
  4. #2C2C2C
Screenshot of the steps described in the previous paragraph of the tutorial.
Draw the exhaust pipe shape. (Large preview)

Duplicate the rectangle, make it smaller in width, switch to the vector editing mode, select the points on the right side and set their Radius to 0, then modify the existing Linear Gradient to:

  1. #1E1E1E
  2. #3A3A3A
  3. #2A2A2A
  4. #111111
Screenshot of the steps described in the previous paragraph of the tutorial.
Draw another part of the exhaust pipe. (Large preview)

Select both rectangles, group them into an exhaust pipe group and place the group just above the rear bumper guard in the Layers panel list.

Screenshot of the steps described in the previous paragraph of the tutorial.
The exhaust pipe, now finished. (Large preview)

15. Car Interior

Select side window 1 and side window 2, duplicate them (Cmd + D), change Color to #000000 and turn off the Inner Shadows.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start working on the car interior. (Large preview)

Place these duplicates below the rear bumper guard in the Layers panel list, and then, using the arrow keys on the keyboard, shift them 5px down and 2px to the right.

Screenshot of the steps described in the previous paragraph of the tutorial.
Move behind. (Large preview)

Draw a shape, which will represent the visible part of the car’s dashboard, turn off Borders and set the Fills to #2A2A2A.

Screenshot of the steps described in the previous paragraph of the tutorial.
Draw the visible part of the dashboard. (Large preview)

Next, let’s create the steering wheel.

Create a rectangle using the Rounded Rectangle tool (U), turn off Borders and change Fills to horizontal Linear Gradient with the following parameters:

  1. #000000
  2. #676767
  3. #292929
  4. #090909

Then we need to rotate the rectangle -24 degrees and move it to the left a bit.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the steering wheel. (Large preview)

Now let’s continue with other details of the car interior. Select the Vector tool and create a shape like on the image below. Turn off Borders, set Color to #000000, and apply Inner Shadows effect:

  • Color: #FFFFFF
  • Alpha: 30%
  • X: -12; Y: -6; Blur: 8; Spread: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Continue adding elements to the car interior. (Large preview)

Use the Oval tool (O) to draw a small ellipse. For the Color use #717171 and turn the Borders off.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add another element to the car interior. (Large preview)

Now let’s create the visible part of the driver’s seat. Create a shape with the Vector tool. Turn off Borders and use a Linear Gradient; for the top color stop use color #6D6D6D and for the bottom #171717. And add an Inner Shadows effect — Color is #000000 with 50% Alpha, X position is 2 and Blur is 7.

Screenshot of the steps described in the previous paragraph of the tutorial.
Draw the driver’s seat. (Large preview)

Duplicate this shape, push it 5px to the right and 1px up by using the arrow keys. Then modify the existing Linear Gradient — change the bottom color stop to #000000. And modify the Inner Shadows effect — change the Color to #FFFFFF with 10% Alpha; set X and Y positions to 5, and Blur also to 5.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue working on refining the seat’s details. (Large preview)

Now let’s add stitches to the seat.

Duplicate this shape, push it 5px to the right and 3px down. Then, turn off Fills and Inner Shadows, bring back Borders and for the Color choose Linear Gradient — for the top color stop use #696969 and for the bottom #000000. Add Shadow effect — for the Color use #000000 with 50% Alpha and set Blur to 2. Then select this shape and the layer below it and perform a Mask operation, so the stitches do not go outside the seat’s boundaries.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add stitches to the driver’s seat. (Large preview)

Almost ready with the car interior!

Next, select all layers and groups that we’ve created in this step and that are above the car body and position them just above side window 1 copy and side window 2 copy in the Layers panel list. Add to the selection those two shapes as well (side window 1 copy and side window 2 copy) and create a group (Cmd + G) named interior.

Screenshot of the steps described in the previous paragraph of the tutorial.
The car interior is now complete. (Large preview)

Let’s take a look at the big picture again.

Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there!
Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there! (Large preview)

It’s not bad, right?

But, before we conclude this part of the tutorial, let’s add one more small detail to the car body, so pick up the Line tool (L) and draw a line. For the Color use #E5E5E5, set Width to 2px and choose Round cap for the Border ends. Then apply Shadows — set Color to #000000 at 80% Alpha, Y position to 2 and Blur to 3. Finally, place this line inside the bodywork group.

Screenshot of the steps described in the previous paragraph of the tutorial.
The car’s body is now finished — one more final detail added. (Large preview)

Conclusion

The body of the car is now ready, as well as the windows, bumpers, headlights and taillights, and the interior — dashboard, the steering wheel, and the seat. In the next (and final) part of the tutorial, we’ll create the wheels (rims and tires), and we’ll add all the final touches, including the racing decals on the car’s body.

Smashing Editorial(mb, ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO



source http://www.scpie.org/how-to-create-a-porsche-911-with-sketch-part-2/

No comments:

Post a Comment