OB电竞直播官网观看
Prepare for today’s communication roles Northwestern’s MS in Information Design.
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 finishing 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!
Turn off
Borders
and set
Fills
to
#000000
, and add a
Shadows
effect:
-
Color:
#FFFFFF -
Alpha:
90% -
X:
3; Spread:1
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:
3; Spread:1
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.
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.
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
:
-
#787878 -
#C9C9C9 -
#A5A5A5
And add Inner Shadows :
-
Color:
#000000 -
Alpha:
50% -
X:
2; Blur:2; Spread:
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
#33
3
333
.
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:
Then, apply a Shadows effect:
-
Color:
#000000 -
Alpha:
50% -
X:
2; Spread:
Next, select right side rectangle and apply Inner Shadows effect:
-
Color:
#FFFFFF -
Alpha:
20% -
X:
-
2; Y:-2; Blur:1; Spread:
Apply a Shadows effect:
-
Color:
#000000 -
Alpha:
50% -
X:
2; Spread:
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.
Then, use the Vector tool ( V ) to draw a shape between the rectangles.
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:
-2; Blur:5; Spread:
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
.
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.*
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:
-
#888888 -
#DFDFDF -
#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
.
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.
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.
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
).
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.
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:
5; Blur:6; Spread:
Then, add a dark Inner Shadows effect:
-
Color:
#000000 -
Alpha:
50% -
X:
-2; Y:-5; Blur:6; Spread:
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:
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.
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:
2; Blur:2; Spread:2
Then, add the second Shadows effect:
-
Color:
#000000 -
Alpha:
80% -
X:
-2; Blur:2; Spread:1
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.
Add the following effects to the
rubber
shape.
First, a light Inner Shadow :
-
Color:
#FFFFFF -
Alpha:
30% -
X:
2; Blur:2; Spread:
Then, a dark Inner Shadow :
-
Color:
#000000 -
Alpha:
100% -
X:
-4; Blur:1; Spread:
After that, a dark Shadow :
-
Color:
#000000 - Alpha: 100%
-
X:
-1; Blur:2; Spread:
And lastly, a light Shadow :
-
Color:
#FFFFFF -
Alpha:
50% -
X:
2; Blur:2; Spread:
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
.
Now, using the same method as explained above, create the rear bumper deco element.
Switch to the Vector tool ( V ) and draw a basic shape for the rear bumper guard. Add a Linear Gradient with the following properties:
-
#EEEEEE -
#C9C9C9 -
#939393 -
#6C6C6C
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
.
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
.
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.
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
.
Here’s a preview of what we’ve done so far.
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
.
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 Layer → Convert 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.
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
.
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 :
-
Color
:
#FFFFFF, Alpha :0% -
Color
:
#FFFFFF, Alpha :22% -
Color
:
#FFFFFF, Alpha :50% -
Color
:
#FFFFFF, Alpha :27% -
Color
:
#FFFFFF, Alpha :30%
Do the same for the other windshield.
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:
-
Color
:
#F3F2F0, Alpha :40% -
Color
:
#FFFFFF, Alpha :50% -
Color
:
#F3F2F0, Alpha :20% -
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
.
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.
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:
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:
-
#EEEEEE -
#F5F5F5 -
#828282 -
#484848
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.
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
.
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.
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
.
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 :
-
#E5E5E5 -
#D5D5D5 -
#878787 -
#6A6463
Then add Inner Shadows :
-
Color:
#000000 -
Alpha:
50% -
X:
2; Y:-2; Blur:6; Spread:
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 :
-
#CCCACB -
#FEFEFE -
#A1A5A4 -
#4A413F
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:1; Spread:
For the second Inner Shadow use following properties:
-
Color:
#000000 -
Alpha:
50% -
X:
-4; Y:5; Blur:6; Spread:
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
.
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
.
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
.
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 :
-
#E2E2E2 -
#E3E3E3 -
#A0A0A0 -
#2C2C2C
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
, then modify the existing
Linear Gradient
to:
-
#1E1E1E -
#3A3A3A -
#2A2A2A -
#111111
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.
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
.
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.
Draw a shape, which will represent the visible part of the car’s dashboard, turn off
Borders
and set the
Fills
to
#2A2A2A
.
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:
-
#000000 -
#676767 -
#292929 -
#090909
Then we need to rotate the rectangle
-24 degrees
and move it to the left a bit.
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:
Use the
Oval
tool (
O
) to draw a small ellipse. For the
Color
use
#717171
and turn the
Borders
off.
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
.
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
.
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.
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
.
Let’s take a look at the big picture again.
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.
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.
