How to Create a Flat Design Bicycle (Part 1)

6 Comments

In our last tutorial, you learned how to make a GIF image; in this tutorial we will create a flat-style bicycle in Adobe Illustrator using simple shapes. In Part 2, we will animate the bicycle.

How to Animate a Flat Design Bicycle

Step 1: Set Up a New Document

  • Width: 1920 px
  • Height: 1080 px

Setting up a New Document

Step 2: Layer the Design

When importing files in After Effects we need to make sure our design is layered, otherwise we will end up with a flat image which we cannot animate. Every detail you want to add movement to later should be in a separate layer.

Let’s create layers for our bicycle. Name them! Name layers right away; you can also name them in AE.

Layering our design

Step 3: Create a Flat Design Bicycle

Creating Flat Design Bicycle

3.1  Start with the wheels. Create a circle 265×265 px, stroke – 20 pt, stroke color #676767. Fill the circle with green color #44B5A0. Create another small circle 24×24 px, stroke – 3pt, stroke color #676767, fill color a bit darker #575757, and align it to the center.

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

Creating Flat Design

Create another circle 181 x 181 px, align it to the center of wheel and using the stroke panel, click on round cup and round join (as shown in the picture).

Circle

Using the direct selection tool (A) delete the points shown.

Circle

Now create two circles. One –  267 x 267 px, color #D9D9D9, and one – 230×230 px. Put the smallest on in the middle and using the pathfinder panel; click on minus front, which will crop out the front circle, which is exactly what we need.

Circle

Put the cropped circle in the middle of the wheel.

Wheel

Group everything and put it in Wheel 1 layer.

3.2 For Wheel 2, create the same circle as first, but without the fill.

Copy the cropped circle from Wheel 1 and put it in the circle we just created.

Circle 2

Use the pen tool (P) to create a line from center to the top.

Use Pen Tool

Now with line selected, hold R+Alt and click on center of the circle. The rotate window will pop up.

Rotate

Fill in 45°  and click Copy. Press Ctrl+D to make multiple copies.

Expand

Select the inside of the wheel and go to object – expand, check fill and stroke, click OK. With everything selected, use the pathfinder panel to unite.

Unite

Click on each corner of the triangles we created; click the little circles in the corners of the triangles and drag the mouse to create round corners. Do that to all of them. (I used 5px roundness.)

Finally create a 30 x 30 px circle and place it in the middle of Wheel 2. Group everything and place it in Wheel 2 layer.

Wheel 2 layer

3.3 Using the pen tool (P) draw a frame as shown. Color #90cec7

Frame

Using the stroke panel make strokes rounded as before. Group everything as before and unite. Do the same as for the Wheel 2 triangles and make the corners round.

Round corners frame

Select the frame and put it into the frame layer.

3.4 To create a bicycle chair, create a rectangle 90 x 20 px, color #e0c968 and round the corners.

Chair

Hold the Alt key to duplicate the chair. Using the pen tool, create a shape ( #ceb755)  like this:

Down

Use the pathfinder panel and click on intersect.

Intersect

Place the shape on the chair; this will be the shadow. Create a smaller rectangle under the chair. To create a light, create a small circle into chair shape, with stroke 3 pt and using the direct selection tool to delete unnecessary points.

Group everything and put it in the Chair layer.

Chair fin

3.5 For the handlebars, use the pen tool and the same color as for the frame, create a line holding the shift tool. Put it in the handlebars layer.

Handlebar

3.6 Select the wire layer; use the pen tool to draw a stroke (2pt, #d3d2d2).

Wire

Add small rectangle (#676767) where the wire begins.

3.7 To create the chain circuit layer, repeat the same steps as for Wheel 2, only make it around 90×90 px.

3.8 For Pedal 1 we will will make two parts to create animation for both shapes. In pedal_01 layer use the pen tool to create a line 30 px long, with a round cup.

In pedal_02 layer use the pen tool create a shape like in picture below.

Pedal

3.9 Do the same for the pedal_03 layer.

You should have 10 layers.

And end result looking similar to this:

Bike

Hope you did well and see you for the next tutorial!

Previous articles:

Marta Berzina

Graphic designer from Latvia with passion for design and nature. You can see my work on Behance, Dribbble and Instagram.

Posts by Marta Berzina

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree