How to Create a Flat Styled Set of Writing Tools

• 17 minutes READ

Creating the Rotring Liner

Step 1

Start by creating a 12 x 188 px rectangle which will act as our liner’s main shape. Color it using #CBC5C5 and then position the object using the Transform panel:

  • X: 503 px
  • Y: 328 px

Positioning the base shape

Step 2

With the shape selected, create a duplicate (ctrl + C > ctrl + F) and then apply an Offset Path effect of 6 px to it. Expand the resulting object (Object > Expand Appearance), change its color to #5D5656 and then make sure to send it to the back of our main shape (right click > Arrange > Send to Back).

Adding the outline

Step 3

Add two 2 x 186 px rectangles on each side of the lighter grey section of the liner, making sure to align them to the top, and most importantly change their Blending Mode to Soft Light. Add a smaller 12 x 2 px shape towards the bottom of the liner, setting its Blending Mode to Multiply and its Opacity level to 22%.

Adding the highlights

Newsletter Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

Step 4

Add a similar decal to the one we used on the mechanical pencil, by creating a 4 x 4 px circle, followed by two 6 x 1 px rectangles. Add a taller 6 x 18 px shape and another 6 x 1 px one, coloring them all using #5D5656 and making sure to distance them at 1 px from one another. Group all five elements, and then position them towards the bottom side of our liner, at about 24 px from it.

Adding the decal

Step 5

Finish of the bottom section of the liner by adding a 4 x 2 px red (#EF7B7B) rectangle underneath the liner’s outline, and applying an Offset Path of 6 px to it.


Step 6

Move towards the top section of the liner, and add a 20 x 60 px rectangle (#CBC5C5) which will go about 6 px towards the inside surface of the liner’s outline.

Adding the main shape

Step 7

Add an outline of 6 px to the previously created shape using the Offset Path effect.

Adding the outline

Bootstrap Template Builder

With Startup you can build a website online using the Bootstrap builder with ready-made designed and coded templates and themes.

Try FreeOther Products

Step 8

Add a 12 x 4 px rectangle just underneath the outline we’ve created at step 7, and change its color to black (#000000), setting its Blending Mode to Multiply and its Opacity level to 22%.

Adding shadow

Step 9

Start adding details to the cap by creating four 20 x 2 px delimiters positioned at about 4 px from one another. Group these and then position them at about 20 px from the cap’s outline. Add the highlights and bottom shadow making sure to give them depending on the direction (vertical or horizontal) a width or height of 1 px, applying the same Blending Modes and Opacity levels as we used before.

Next add a 20 x 4 px rectangle to the top of the cap’s outline, and color it using #5D5656 making sure to center it horizontally.

Move to the right side of the cap, and add a 2 x 20 px rectangle (which will act as a bridge for our clip.) and top align it to the delimiters we created a bunch of moments ago. Create another 4 x 54 px rounded rectangle with a 2 px Corner Radius and position it to the right side of the bridge, leaving about 8 px going above and outside the bridge’s topside.

Group all the elements together and you’re done.

Creating the rotring liner

That was it guys!

Illustration finished

I’m happy to let you know that you’ve just finished our cool little writing instruments pack. I hope you found the recreation process understandable and most importantly learned something new along the way. Until next time!

1 2 3 4 5
Andrei Ștefan

Just another young gun coffee fanatic from Europe, designing colorful worlds one pixel at a time. When I'm not "making stuff" you can usually find me at my place, flipping news and catching up on all the crazy things happening in both the tech and design realms. If you want to drop me a line you can easily reach me on Google+ or Dribbble.

Posts by Andrei Ștefan

Never miss an article or news again.

Sign up to get fresh stuff in your email monthly. For those who want to keep in touch with web design and development trends and tools.

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