How to Create a Line Art Based Skateboarder Kit in Adobe Illustrator

Skateboarding is one of those rare rebellious things that ended up changing the lives of thousands if not millions of kids around the world. It's something that continues to fascinate me, and that is why I decided to create this in-depth tutorial on how to design your own skateboard piece using Adobe Illustrator.

The process will rely on the use of basic shapes (rectangles, rounded rectangles and circles), and some help here and there from the Pathfinder panel.

1. Setting Up Our Document 

Assuming you already have Illustrator up and running, create a New Document (File > New) and adjust the settings as follows:

• Number of Artboards: 1
• Width: 1000 px
• Height: 800 px
• Units: Pixels 

And from the Advanced tab: 

• Color Mode: RGB
• Raster Effects: High (300ppi)
• Align New Objects to Pixel Grid: checked

2. Layering Our Artboard

Once you’ve created a fresh document, go to the Layerspanel and make sure to create seven layers and name them as follows:

1. background
2. skateboard
3. trucks
4. wheels
5. wrench
6. plates
7. bearings

3. Setting Up a Custom Grid

If you are familiar with the way Illustrator works, you should know that it gives you the option to snap your design to its Pixel Grid. That means that each anchor point will be positioned at the middle intersection of four pixels.

Because there are different situations that require different grid settings, sometimes you might find yourself in the position to adjust the ones running on your version of Adobe Illustrator.

I personally have gone for the lowest and at the same time the most accurate settings, because I feel I have more control over my designs.

To change these settings, you must go to Edit > Preferences > Guides & Grid. From there, a little popup will appear, where we need to adjust the following:

• Gridline every: 1 px
• Subdivisions: 1

Once you’ve adjusted these settings, all you need to do in order to make everything pixel crisp is enable the Snap to Grid option located under the View menu.

Quick tip:You should know that the Snap to Grid option will transform into Snap to Pixel every time you enter Pixel Preview Mode, but don’t worry—that’s totally fine. Most of the time you will be going back and forward with this display mode.

4. Creating the Skateboard

Step 1

Position yourself on the skateboard layer, making sure to lock all the other ones. Using the Rounded Rectangle Tool, create a 132 x 520 px shape with a Corner Radius of 66 px. Color the board using #F47D7D and then position it by inputting the following coordinates into the Transform panel.

• X: 450 px
• Y: 400 px

Step 2

Once we have our board in place, we need to create its outline. To do so, we will first create a duplicate by copying (Control-C) and then pasting(Control-F) our original shape. Change the duplicate’s color to #44423E and then, while having it selected, go to Effect > Path > Offset Path.

Step 3

Adjust the Offset as follows:

• Offset: 8 px
• Joins: Miter (default)
• Miter limit: 4 (default)

Quick tip: once you have created the offset, you can either expand it (Object >Expand) or leave it as it is so that you can adjust the thickness later on with the help of the Appearance panel.

Also, once you’ve created the outline shape, for both the deck and future objects, make sure to send it to the back of the main shape using the Send to Back option.

Step 4

Once we have our deck and its outline, we need to create the holes to which you would normally attach the trucks. To do so, create a 4 x 4 px circle, and position it as follows:

• X: 438 px
• Y: 246 px

Step 5

With the first hole positioned, create a duplicate by dragging to the right side while holding down Alt, and position it at a distance of about 20 px from the original shape, making sure to group the two (Control-G).

Step 6

As soon as you’ve created the first two holes, create a duplicate row by using the same dragging trick, but this time towards the bottom. Then select both the first row and the newly created one, and distance the duplicate group at about 40 px.

Step 7

Because any normal skate deck has a total of eight holes, we need to add the bottom ones to ours. First create a copy of the ones we have right now (Control-C > Control-F) and then position the duplicates with the help of the Transform panel:

• X: 450 px
• Y: 532 px

Step 8

As you might have guessed, once we have all our holes in place we need to actually cut them out of both the deck and the outline. To do so, we first have to select the circles and make sure they aren’t grouped together (right-click > Ungroup), otherwise Pathfinder won’t be able to extract them from the shapes.

Once you’ve made sure that the elements are not in a group, create a copy (Control-C), which we will need in a couple of seconds), and then select both them and the skate deck and use Pathfinder’s Minus Front function.

Step 9

Paste the previously copied circles (Control-F) and this time select them and the outline and repeat the same process as before with Minus Front. Once the holes are extracted, your outline shape will be positioned on top of the deck, so you will need to send it to the back one more time (right-click > Send to Back).

Step 10

Remember I told you to keep a copy of the little holes a few steps ago? Well, I hope you did, because we need to create the outlines for the deck’s cutouts.

Simply paste the circles (Control-F) on top of the deck, change their color to #44423E and then flip the stroke with the fill (Shift-X). Change the thickness to 4 px and make sure to Align the Stroke to Outside.

You should now have something like this.

Step 11

Once we have our basic skateboard deck, it’s time to add some highlights and shadows to make it more interesting.

Before we begin creating the highlights, we first have to create a duplicate of the pinkish deck. Once we have our copies, use the Ellipse Tool (L) to create a 148 x 30 px shape, which we will vertically center to the board, and then move it towards the bottom by about 64 px.

Step 12

With both the ellipse and the pink deck selected, use Pathfinder’s Minus Front option.

Step 13

Once you have extracted the ellipse, you will have two sections of the deck grouped together. As we only need the top part, ungroup them (right-click > Ungroup) and delete the bottom one. Change the color of the remaining object to white (#FFFFFF) and set its Blending Mode to Soft Light, lowering the Opacity to 20%.

Step 14

To create the top section's smaller highlight, we will first have to create two copies of the deck, and then move the upper one 4 px towards the bottom. Once we have them both selected, go to the Pathfinder panel and use Minus Front.

Quick tip: when you use Minus Front on objects that have sections cut out of them, in our case the deck, you will manage to get your desired shape, but you will also get a bunch of remaining sections. To correct this, simply ungroup them (right-click > Ungroup) and then deselect the one you need, in our case the top curved section, deleting the rest.

Step 15

Change the color of our newly created highlight to white (#FFFFFF) and its Blending Modeto Overlay, adjusting its Opacity to a value of 20%.

Step 16

Create the bottom section shadows by duplicating the highlights that we already have, horizontally reflecting them (right-click> Transform >Reflect). Position the duplicates by selecting them and the deck, and then using the Vertical Align to Bottom option found in the Align panel.

Step 17

Color both sections black (#000000) and then change the Blending Mode of the bigger section to Multiply and also lower its Opacity to 6%. For the smaller section, set the Blending Mode to Multiply but keep a higher value (20%) for the Opacity. Once you have created all the elements of the skateboard deck, group them together (Control-G) so that things won’t get lost if you move them by mistake.

Step 18

To create the grip tape, simply copy the pink shape, move it to the left at about 38 px and then change its color to #44423E.

Step 19

Add a nice little texture onto the grip, by duplicating (Control-C > Control-F) the object and then going toEffect > Texture > Grain and adjusting the settings in the popup as follows:

• Intensity: 74
• Contrast: 50
• Grain Type: Sprinkles

Quick tip: I don’t know if you’ve noticed this, but when you create textures onto shapes that are aligned to the pixel grid, the texture itself will often go outside of the surface of the object underneath it. To fix this, simply paste a copy of the shape onto the texture and with both selected, right-click >Make Clipping Mask. If the option doesn’t appear, then you should go to Object > Clipping Mask > Make.

5. Creating the Trucks

Step 1

Once you’ve finished building the skate deck and the grip, it’s time to move on to the trucks layer and create the little parts.

Grab the Rounded Rectangle Tool and create a 36 x 56 px shape with a Corner Radius of4 px, color it using #BEBFCC and then position it at about 80 px from our previously created skateboard.

Step 2

Create an outline by duplicating the shape and using the Offset Path effect, remembering to send the offset to the back.

• Offset: 6 px
• Joins: Miter (default)
• Miter limit: 4 (default)

Step 3

Add a highlight by duplicating the main shape twice, and moving the upper one 4 pxtowards the bottom. Select both of the copies and then use Minus Front from the Pathfinder panel, making sure to change the resulting shape’s color to #BDCCD4.

Step 4

Copy and horizontally reflect the shape we just created, moving it towards the bottom section of the larger object. Change its color to black (#000000) and then set its Blending Mode to Multiply, lowering the Opacity to 20%.

Step 5

Now it’s time to add the bolts that hold the truck to the deck. First create a 4 x 4 px circle and position it at about 4 px from the top and left side of the truck’s main shape. To be more accurate, enter Pixel Preview modeby pressing Alt-Control-Y (View > Pixel Preview).

Step 6

Create three more bolts and position them towards the remaining sides of the truck, keeping the same 4 px gap as before.

Step 7

Once we have the baseplate, we need to work on the hanger. Using the Rounded Rectangle Tool, create an 88 x 12 px shape with a Corner Radius of 2 px, and change its color to a lighter#DDDEED. Position the object at 20 px from the plate’s top section.

Step 8

Give the hanger an outline of 6 px using the Offset Path effect (Effect> Path > Offset Path).

Step 9

Add a subtle highlight by duplicating the hanger’s main shape, twice, and moving the upper copy downwards by 4 px. Select them both and use Minus Front. Once the new shape is obtained, change its color to white (#FFFFFF), Blending Mode to Overlay, and its Opacity to 40%.

Step 10

Add a bottom shadow by copying and horizontally reflecting the highlight, changing its color to black (#000000), Blending Mode to Multiply, and its Opacity level to 20%, making sure to align it to the bottom of the hanger.

Step 11

Add a bottom section to the hanger’s outline by creating a 32 x 32 px circle (#44423E) and aligning it to the top section of the outline.

Step 12

Next we need to create the darker area for where the bushing goes. Grab the Ellipse Tool (L) and draw a 20 x 20 px shape, color it using #AFB0BD, and then position it by vertically aligning it to the top section of the hanger’s main shape, not its outline.

Step 13

Once you’ve finished step 12, it’s time to add the kingpin (a larger bolt) that holds the hanger to the baseplate.

Grab the Polygon Tool and create an object that has 6 sides and a total radius of 5.6569 px (don’t worry, we’ll fix this in a couple of seconds). Position it exactly at the center of our previously created shape, and then change its Width to 12 px. That should fix any misalignment problems, making it snap to the Pixel Grid.

Step 14

Next we will add the lateral axles that go on each side of the hanger. Select the Rounded Rectangle Tool and create a 120 x 8 px shape, with a Corner Radius of2 px, color it using the same #44423E as we used for most of our outlines, and make sure to position it under the hanger itself, centering it both vertically and horizontally.

Step 15

Once we’ve created our axles, it’s time to add a nut to each side. First let’s create the base shape by drawing an 8 x 12 px rounded rectangle with a Corner Radius of 2 px. Color it using #DDDEED and then position it at a distance of 4 px from the left axle.

Step 16

Add a top highlight and bottom shadow using the same quick process and colors as we did in steps 9 and 10, finishing the piece with a 6 px outline. Group the nut (Control-G)and then create a duplicate and position it on the right side of the hanger at 8 px from its outline.

Step 17

Finish up the truck by adding a subtle shadow right under the hanger and its round middle section. We can quickly accomplish this by using the Direct Selection Tool (A). First we need to enter Isolation Mode for the truck's baseplate (right click on the group and select Enter Isolation Mode, or simply double click on the group). Then we use the Direct Selection Tool to create a set of duplicates by selecting the hanger’s outline and round section, copying (Control-C) and then pasting them (Control-F).

Step 18

After you’ve pasted the two, group them (Control-G) and then move them down by 4 px. Change their Blending Mode to Multiply and lower their Opacity to 20%. As we want the shadow to appear only on top of the truck's baseplate, we need to create a Clipping Mask using the plate’s main shape as a mask.

Step 19

Once you have the first truck completely finished, group all of its elements (Control-G) and then create a duplicate which we will position at a distance of 36 px from the original.

6. Creating the Wheels

Step 1

Moving up to the wheels layer, grab the Ellipse Tool (L) and create a 14 x 14 px circle. Flip its fill with its stroke (Shift-X), making sure toAlign the Stroke to Outline and then adjust them as follows:

Bottom Circle (the Outline)

• Stroke Weight: 20 px
• Color:#44423E

Middle Circle (Our Wheel’s Base Shape)

• Stroke Weight: 14 px
• Color:#A5807C

Top Circle (the Inner Outline)

• Stroke Weight: 4 px
• Color:#44423E

Once you have all three circles created, expand them (Object > Expand), and then group them together (Control-G).

Step 2

Finish up the wheel by creating a 42 x 42 px circle, and flip its fill with its stroke (Shift-X), making sure to Align the Stroke to Inside. Give it a 4 px Stroke Weight and expand it. 

Cut the ring in half, and change the top section’s color to white (#FFFFFF), its Blending Mode to Soft Light, and its Opacity to 40%. Create a duplicate, flipping it horizontally (right-click> Transform > Reflect > Horizontal) and then align it to the bottom of the wheel, changing its color to black (#000000), its Blending Mode to Multiply and its Opacity to 20%.

Step 3

Create three additional wheels by copying the original we just created and positioning the copies at a distance of 48 px, displaying them in a square formation.

7. Creating the Wrench

Step 1

The wrench is basically a cross that has multiple segments duplicated and then rotated at a 90° angle.

First let’s draw some of the basic shapes. Grab the Rectangle Tool (M) and create a 4 x 144 px shape, color it using #DDDEED, and position it right in the middle of the square like the formation of the wheels.

Step 2

Add a 14 x 26 px rectangle with a Corner Radius of 8 px. With the help of the Direct Selection Tool (A) delete its top anchor point, and unite the remaining ones (Control-J), aligning the newly created shape to the top section of rectangle we created a few moments ago.

Step 3

Add a 14 x 4 px subtle white highlight (Blending Mode set on Overlay with a 40% Opacity level), a bottom shadow (Blending Mode set on Multiply with a 20% Opacity level) and a 4 x 4 px circle (#44423E) which you will center to the top section of the wrench. 

For the bottom section simply group the top ones we already have, flip them horizontally, and then position them to the bottom, inverting the Blending Mode and Opacity levels of the highlight and shadow.

Step 4

Group the entire vertical section of the wrench that we have so far, and rotate it at a 90° angle (right-click> Transform > Rotate).

Get rid of all shadows and highlights, leaving only the little darker circles. Create a set of two highlights, keeping the same settings as before.

Step 5

Next, build the middle round section of the wrench by creating a base shape of 24 x 24 px (#DDDEED), on top of which we will add a darker 16 x 16 px shape (#44423E). Then add another smaller and lighter 12 x 12 px circle (#BEBFCC), on top of which we will create a double colored ring similar to the one from step 2 of the Creating the Wheels section, adjusting it to the following values:

• Width: 12 px
• Height: 12 px
• Stroke Weight: 2 px
• Color: black (#000000)
• Blending Mode: Multiply
• Opacity: 20%

Once you have the top section of the ring, reflect it horizontally and change its color to white (#FFFFFF) making sure to set the Blending Mode to Overlay and the Opacity to 50%.

Step 6

Group all the elements (Control-G) and position them at the intersection of the two arms of the wrench.

Step 7

All we need to do now in order to finish the wrench is create its outline. To do so, we will have to select the wrench’s arms, the heads, and the round center, group them, and apply an Offset Path of 4 px to the whole group. This is better than uniting them and adding the effect afterwards, which would make some parts fall off the Pixel Grid.

8. Creating the Plates

Step 1

Assuming you’re already on the plates layer, grab the Rounded Rectangle Tool and create a 48 x 68 px shape with a Corner Radius of 10 px, color it using #44423E and then top align it at about 30 px from the first truck we created a while ago.

Step 2

Add a highlight and a shadow by repeating the same trick of creating two copies, moving one downwards by 4 px and then extracting the top one from the one underneath. 

Once you have the top section created, create another one from it by dragging down while holding Alt, making sure to reflect the piece horizontally. Change the settings of the top and bottom sections as follows:

Top Section (the Highlight)

• Color:#FFFFFF 
• Blending Mode: Overlay
• Opacity: 40%

Bottom Section (the Shadow)

• Color: #000000 
• Blending Mode: Multiply
• Opacity: 20%

Step 3

Once we have our highlight and shadow, we need to create the four little cutouts as we did with the skate deck. First create a 4 x 4 px circle, position it at a distance of 10 px both to the top and left side of the plate, and then create another three copies, maintaining the specified distance towards the outside margins.

Once you have all four circles positioned, select them and the plate, and use Pathfinder’s Minus Front option to cut them out.

Step 4

Once the cutouts are made, your shape should have covered your previously created highlight and shadow. To correct this, select the object, and right-click > Arrange > Send to Back. With everything stacked correctly, select all the elements of the plate and group them together (Control-G).

Step 5

The last step we need to take now is to create a copy of our first plate, and then position it at a distance of 36 px towards the bottom.

9. Creating the Bearings

The last and final piece of our skateboarder pack is a set of eight little bearings. As you might have guessed, we will create one and then multiply it until we get the rest of the bunch.

Step 1

Grab the Ellipse Tool (L) and create a 4 x 4 px circle, color it using #44423E, and then position it using the following coordinates:

• X: 735 px
• Y: 443 px

Step 2

Flip the circle’s fill with its stroke, aligning the stroke to the outside, giving it a Weight of 11 px. Create another duplicate circle, and change its color to #BEBFCC and its Weight to 5 px.

Create a ring circle of 14 x 14 px, flip its fill to stroke (Shift-X), and give it a Stroke Weight of 1 px. Remove the bottom half, and color the remaining section black (#000000) setting the Blending Mode toMultiply and its Opacity to 20%. Duplicate it and flip it horizontally, changing its color to white (#FFFFFF), its Blending Mode toOverlay and its Opacity to 40%.

Last but not least, create another 4 x 4 px circle, flip its fill with its stroke (Shift-X) and give it a Stroke Weight of 2 px, making sure to Align the Stroke to Outside.

Step 3

Once you have the first bearing complete, group all of its elements (Control-G) and then create a copy to its left, at about 12 px. Group the two to create a row, and then create three more rows towards the bottom, distanced at 10 px from one another.

Quick tip: you could accomplish the same result by entering Pixel Preview mode and manually dragging the first row downwards 10 px while holding Alt and then pressing Control-D twice more to replicate the action and get the rest of the rows.

10. Adding the Background

The last and final piece of our illustration will be the background. To add it, simply create a rectangle that has exactly the same dimensions as our Artboard (1000 x 800 px), color it using a dark grey (#EFEFEF), and then center it both vertically and horizontally using the Align panel.

Skate On!

Grab your skateboard 'cause we got ourselves one nice looking pack, and most importantly learned some neat tricks along the way.