Vector Foundations For A Classic
This walkthrough assumes you know your way around Sketch and are ready to push its vector tools further than usual. If you already have experience with the app, all steps will be explained completely; newcomers are welcome as well, though some earlier familiarity with the interface helps.
This part deals with the groundwork. We’re setting up the project, mapping out the main shape for the vehicle, and making a start on the lights. Everything is created in pure vectors — no bitmap anything, so the final Vectors can expand or shrink indefinitely without visual accuracy loss.
As we build the car model, Sketch will be pushed almost to its limits. It’s useful to get your hands on the corresponding source file; you could create the said groundwork from the provided data or you can draw alongside it in an alternate blank canvas file.
Download the Porsche 911 Sketch file (1.4 MB)
Project Setup
Setup starts with a fresh sketch document titled “Porsche911”, with a matching artboard of the same name sized 1920px wide by 1080px high.
We’ll now bring in a reference image for profiling. Find a good photograph of a Porsche 911 and paste it directly into your artboard. In the Layers panel, right-click the image layer and choose Lock Layer, protecting it from any unintentional rearrangement.
Tip: The lock can also be toggled by holding Alt and clicking the lock icon that appears next to the layer.
Instead of creating each exterior detail globally, set up a wireframe first. With the Vector tool (V shortcut), zoom in (press Z, click to enlarge) and map the car’s main lines: click once per point, and to adjust a segment, position the next point but hold the mouse and drag to use Bézier control handles. These basic shapes rely on points and Bézier handles to control curvature.
Temporarily, make your wireframe distinctive with a stronger stroke (via the Inspector panel), since a subtle one makes mapping difficult.
Point Handling Types
You’ll need full command over four point types. When a Vector point is selected, the type can be specified from the inspector and cycled on the keyboard:
- Straight — gives a sharp, corner-like point, with adjustable corner Radius through Inspector.
- Mirrored — parallel and equal-length Bézier handles on two sides of the node.
- Disconnected — the handles are unlinked and can move individually as sharp corners might need.
- Asymmetric — similar to mirrored, handles remain parallel but width can be independently adjusted.
To place curves intuitively around the framework, combine precise clicks and drags when you place points. As you go around outer edges, deliberately exclude the front and rear windshields from this cutout. Continue around the body. Accuracy in tracing here is less critical with respect to fine detail, especially for parts of the silhouette that get buried later in the layout.
Refining the Silhouette
Once the principal outline will approximate the body, we’ll style side openings. Use the vector tool, mapping shapes for each side window. Give the nodes the names side window 1 and side window 2.
Duplicate these (Cmd+D) and put the copies aside as unhidden for later. For subsequent action, choose the car layer alongside the two side-window shapes and bring them to the toolbar such that the final op is a Subtract. The cutting effect will merge adjustments, leaving the intended window space. Name the resulting composite car body, which represents a near unified mass.
Return to a bottom layer for the lower floor — produce that with vector mapping but with a less rigorous attention to show only the lower that gets hidden in dark later on. Move it underneath to the placement order: shown below “car body”.
Last is setting reference lines or guide circles for rims. Use the Oval tool (press O). Make circles accurate to dimensions of a standard Porsche wheel for this map.
Hold Shift with Alt — vector starting at the center — for perfect circles that make their mark. Call the shape wheel base. Adjust order so they sit below car body, just in front of the floor layer within the structure list to create an accurate wheel well space.
Shading And Detailing The Body
With the main silhouette in place, we move on to the body color and surface shading. Hide the reference image, wheel base, and floor layers. If you still need the photo for guidance, duplicate and move the reference image outside the artboard so your workspace stays clean.
Select the car body shape, turn off its Borders, and apply a Fills color of #E9E9E7 as the base coat.
Now build the first shadow region. Draw an elongated shape with the Vector tool that overhangs the car body, then select both this new shape and the car body and apply a Mask. Sketch will group the result automatically—name this group bodywork. From here on, every new element you create should be placed inside this group. Select the shape you just masked, remove its Borders, set its fill to #E1E1E1, and soften it with a Gaussian Blur of 4.
Add a softer secondary shading shape using the Vector tool. Fill it with a Linear Gradient from #E4E4E4 to #C5C5C5, with no border. Apply a Gaussian Blur of 6, then add a Shadow effect: color #FFFFFF at 90% alpha, with X 0, Y -8, and Blur 10.
Next, create a shape for the shadow along the bottom of the carrosserie. Fill it with #4E4E4E and blur it by 12. Then draw one more small shadow shape filled with #D8D8D8 and give it a Gaussian Blur of 5.
For highlights, draw three separate shapes and fill them with, respectively, #F9F9F9, #F1F1F1, and #F1F1F1. All three get no border and a Gaussian Blur of 6. These will form the light reflections across the panels.
Finally, define the fender creases. Sketch two more vector shapes and name them front fender and rear fender. Fill both with #393939, remove the border, set Opacity to 50%, and blur by 2.
Door Lines And Panel Lids
This section adds the panel seams and openings. With the Vector tool (V), draw the fuel tank, front trunk, rear engine, and fog light lids as open paths—do not close the shapes. Just press Esc when you are satisfied with the line. Give all these lines a #000000 border at 1px width.
Styling differs slightly per lid. For the fuel, front trunk, and rear engine lids, apply a Shadow effect: #FFFFFF at 90% alpha, with X 0, Y 2, and Blur 2. The fog light lid gets a softer shadow at 20% alpha, with X 2, Y 0, Blur 2, and Spread 2.
Create the jack point cover as a small circle with the Oval tool (O). Turn off the fill, and apply an outside border in #000000 at 1px. Add a shadow of #FFFFFF at 30% alpha, with both Blur and Spread set to 2.
To trace the door line accurately, make the reference image visible again and set bodywork to 50% opacity. Draw the door seam with the Vector tool and then restore everything to full opacity. Style this path with a black border at 2px and a shadow effect of #FFFFFF at 40% alpha with X 2, Y 2, Blur 2, and Spread 2.
Finish the door with two small black-filled rectangles at the door bottom, aligning their lower edges to the same horizontal line. Hold Shift while drawing to keep them straight, or use the Rectangle tool (R) and align the points manually in edit mode.
As a last touch, draw a new shape for the engine lid. Fill it with black, remove the border, and apply a shadow of #FFFFFF at 60% alpha with Y and Blur both 2. Name this layer engine lid.
Assembling The Front Lighting And Horn
Start the signal-light housing with the Rectangle tool (R). Fill it with black, disable Borders, and add a Shadow using white (#FFFFFF) at 30% alpha, positioned at X: 2, Y: -3, with 2 blur and 2 spread.
Enter Vector Editing mode by double-clicking the shape (or pressing Enter). Select the top-right point, nudge it left 15px with the ← key, and set its Radius to 9px. Exit mode with Enter.
Duplicate the shape (Cmd + D), remove the Shadow, and apply a Linear Gradient from #ECECEC to #7F7F7F. Move this copy 2px left, then re-enter vector edit mode and shift the top two points down by 2px.
Duplicate once more and switch the fill back to a Solid Color of your choice (yellow works as a placeholder). In vector edit mode, adjust the shape: move the top two points down 3px, the bottom two points up 3px, the right two points left 3px, and the bottom-right point left another 3px so its right edge aligns with the layer beneath it.
This shape will now be split into two functional areas. Duplicate it, naming the original horn space and the copy turn-signal. Hide the turn-signal copy for now. Working on horn space first: enter vector edit mode, select the top-right point, reset its Radius to 0 in the Inspector, and drag it right until a red alignment guide appears under the bottom-right point. Then select both right points and drag the whole edge left to create a slimmer shape for the horn slot.
Tip: Hold Shift while dragging points to maintain horizontal or vertical movement.
Un-hide the turn-signal shape. Enter its vector edit mode, grab the two left points, and drag them right until a small gap appears between the two shapes.
Return to horn space. In vector edit mode, hold Shift and click the right segment to insert a point at its midpoint. Double-click this new point to convert it to Mirrored, then move it 4px left. Shift the bottom-right point 2px left as well.
Apply the same treatment to turn-signal: enter edit mode, add a midpoint to the left segment, set it to Mirrored via the Inspector, and nudge it 3px left.
Horn Grille Construction
Select the horn space shape and add a Linear Gradient with #1D1D1D at the top stop and #D0D0D0 at the bottom. Adjust the gradient angle by dragging the top stop right and the bottom stop left.
Duplicate it, set the fill to solid #131313, and in vector edit mode pull the two left points slightly right. Next, move the top-left point a little further right, add a midpoint on the left segment, convert it to Mirrored, and move it 2px left.
Now build a grille element. Draw a tiny rectangle over the horn space, 2px tall, filled with #9A9A9A, no border. Duplicate it, change the copy’s height to 1px and fill to #000000, and position it below the grey rectangle. In vector edit mode, move its bottom-left point 2px right. Group both rectangles and name the group grille element.
Duplicate the grille element group and position the copy 7px up and 2px right. Duplicate again, shifting 7px up and 3px right.
Because the grille extends beyond the horn space, select all horn elements and apply a Mask to clip them inside the space. Sketch groups the masked result; rename that group horn.
Turn Signal Housing
Select the turn-signal shape and set a horizontal Linear Gradient with three color stops: #FFA137, #B23821, and #B23821.
Add an Inner Shadow in black at 40% alpha with X: 0, Y: 0, Blur: 5, Spread: 0. Then apply a Shadow in white at 50% alpha with X: 0, Y: 0, Blur: 2, Spread: 0.
Build the first bulb with the Oval tool (O). Draw a circle, remove its border, set fill opacity to 0%, and add an Inner Shadow in black at 12% alpha with X: -9, Y: 0, Blur: 9, Spread: 0.
Create a rectangle via the Rectangle tool (R). Round its corners in the Inspector, remove its border, and fill it with a Linear Gradient using these four stops: #C06D25, #DE8D55, #BC4E08, #A64A15.
Select both the circle and rounded rectangle and apply a Mask; name the group light1.
Tip: Sketch occasionally disables Inner Shadows on the masking shape during a Mask operation. Check light1 afterward and re-enable the shadow if needed.
Add the second bulb similarly. Draw a circle with borders off and fill opacity at 0%, then give it an Inner Shadow in black at 18% alpha with X: 0, Y: 12, Blur: 5, Spread: 0. Duplicate this circle, scale it down, and modify its shadow to Y: -5, alpha 28%. Add a second Inner Shadow — black, 50% alpha, X: 0, Y: 0, Blur: 2, Spread: 0. Group both circles into light2.
In the Layers panel, select turn-signal, light1, and light2, then apply a Mask to nest the lights inside the housing. Name the group turn signal light.
Adding A Reusable Screw
Draw a small circle with the Oval tool near the right edge of the signal light. Set fill opacity to 0%, and configure a Border of 1px, positioned Inside, colored #B3B3B3 at 30% alpha. Add an Inner Shadow: black, 50% alpha, X: 0, Y: 2, Blur: 2, Spread: 0.
Duplicate the circle and scale it down. Remove the border, restore fill opacity to 100% with color #B2CBDF, and layer these effects: first an Inner Shadow in white at 80% alpha (X: 0, Y: 0, Blur: 1), then a second Inner Shadow in black at 50% alpha (same offsets), and finally a Shadow in solid black with 2 blur.
Duplicate this circle once more, scale it down, set its fill to #303030, and delete all shadow effects. If the tiny circle is hard to align, check your Sketch Preferences: Pixel Fitting can interfere — temporarily disable it under Preferences → Layers.
Group the three circles into a screw group. Turn this into a reusable asset by right-clicking the group in the Layers list and choosing Create Symbol. Name it screw and click OK. Since this symbol is reusable, you can insert it anywhere in the illustration later; future edits to the symbol update every instance.
Finish the assembly with one last detail: zoom to about 3200% and add a miniscule rectangle, without borders, filled solid #131313.
Building the Tail Lights
The tail lights follow a layering approach similar to the front turn indicators. Start with a base rectangle filled black, Borders off, and Shadows applied:
- Color:
#FFFFFF - Alpha:
30% - X:
-2; Y:-3; Blur:2; Spread:2;
Enter Vector Editing mode, shift the top left corner 15px to the right, and set Radius to 9px.
Duplicate the shape, strip the Shadows, and fill it with a Linear Gradient from #ECECEC to #7F7F7F. Nudge this duplicate 2px to the right and, in Vector Editing mode, select the top two points and move them down 2px.
Duplicate again (Cmd + D), switch from gradient to a temporary Solid Color fill, and reshape it in Vector Editing mode: pull the top two points down 3px, push the bottom two points up 3px, move the left two points right 3px, then slide the bottom left point left 3px. When done, the right edge of this shape should run parallel with the shape beneath it.
Swap back to Linear Gradient, orient it horizontally using the right-pointing arrow, and set five color stops:
#5D1720#621822#662423#B04643#C25F56
Finish the housing with two effects. First, Inner Shadows: color #000000, alpha 50%, with X 0, Y 0, Blur 5, Spread 0. Second, Shadows: color #FFFFFF, alpha 50%, with X 0, Y 0, Blur 2, Spread 0.
Adding the Light Bulb Details
Draw a Rectangle (R) sized roughly like the bulb housing. Set Fills opacity to 0%, Borders off, and apply Inner Shadows in black at 40% alpha with X -2, Y 0, Blur 5, Spread 0.
For the bulb itself, draw a small rectangle and give it rounded corners via Radius in the Inspector. Turn off Borders and fill with a Linear Gradient between #B75D61 and #6B2224.
Select both rectangles and Mask them so the rounded bulb sits inside the housing rectangle. Group the result and name it tail-light1.
Sketch sometimes disables Inner Shadows on the masking shape during a mask operation. After masking, select the masking shape and re-enable Inner Shadows in the Inspector if necessary.
Next, build the second tail light housing. Draw another Rectangle, fill opacity 0%, Borders off, and add Shadows in black at 30% alpha with X -2, Y 0, Blur 2, Spread 0.
Over it, place a small circle, again with Borders off and fill opacity at 0%, but with two Inner Shadows: the first at 40% alpha (X 0, Y -2, Blur 5, Spread 0), and the second at 30% alpha (X 0, Y 0, Blur 5, Spread 0).
Combine these into a group (Cmd + G) named tail-light2. Insert the screw symbol from Insert → Document, place it over tail-light2, and position it as shown.
Where Things Stand
The car's main exterior is now complete: the door shape, front and rear lids, the front turn light, and both tail lights are in place. The next installment of this tutorial will cover the windows, bumpers, headlights, interior, and the remaining exterior details.
