How to Create a Flat Styled Set of Writing Tools

• 17 minutes READ

Creating the Second Touch Marker

Step 1

Select the first touch marker (the one that we’ve just finished creating) and while holding down alt click and drag to the right to create a duplicate. Next, select both of them and distance the one closest to the right side of the Artboard at about 20 px from the original.

Positioning second touch

Step 2

Using the Direct Selection Tool (A) select the yellow color indicator and change that to a light grey tint (#9F9999).

Second touch marker finished

Creating the Rotring Mechanical Pencil

Step 1

Make sure you’re on the proper layer, and start by creating a 10 x 216 px grey (#9F9999) rectangle and position it using the following coordinates:

  • X: 449 px
  • Y: 296 px

Positioning the rotring pencil's

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 2

With the shape still selected, create its outline by using an Offset Path effect of 6 px, color it using #5D5656 and then position it underneath the pencil’s main shape, by right clicking > Arrange > Send to Back.

Adding the outline

Step 3

Add the side and top highlights by creating a duplicate of the light grey main shape, and then adding a slightly narrower 6 x 214 px one which we will horizontally align to the bottom of the first one. Then using Pathfinder’s Minus Front option, cutout the upper shape (which I colored green to make it more visible) to get the highlights.

Creating the highlights

Step 4

Change the highlight’s color to white (#FFFFFF) and then set its Blending Mode to Soft Light lowering its Opacity to 60%.

Changing rotring pen

Step 5

Add the inner body detail by creating a 2 x 2 px circle, one taller 4 x 12 px rectangle, and three smaller 4 x 1 px ones, all distanced at 1 px from one another. Then, group them together (ctrl + G) and position them at about 60 px from the pencil’s outline top section.

Positioning the rotring

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 6

Draw a 10 x 23 px rounded rectangle, with a 5 px Corner Radius and using the trick with the Direct Selection Tool (A) remove its bottom anchor points. Unite the remaining one (ctrl + J) and then position the new shape just above the pencil’s outline.

Adding the rotring pencil

Step 7

Add a 26 x 14 px rectangle (#5D5656) which will act as our clip’s ring section, and position it at about 34 px from the top clicker.

Adding the clip

Step 8

Let’s work on the pencil’s clip by creating a 12 x 65 px rectangle with a Corner Radius of 3 px. Using the Direct Selection Tool (A) get rid of the bottom centered anchor points uniting the remaining ones (ctrl + J), then using another rectangle positioned above (highlighted with red), cut the left half of the shape using Minus Front. Next create a 2 x 60 px rounded rectangle with a 1 px Corner Radius, left align it to the new shape, making sure to position it towards the bottom by 4 px. Select both it and our shape and again using Minus Front get rid of the smaller piece (highlighted with red).

Adjusting the pencil

Step 9

Position the clip on the right side of the ring aligning it to its top.


Step 10

Add an 8 x 10 px ellipse towards the bottom right side of the clip coloring it #5D5656, making sure to leave about 2 px of empty space between the ellipse’s bottom and the clip.

Adding the clip

Step 11

Add another smaller 4 x 4 px circle and position it towards the clip’s bottom, making sure that only half of the circle goes outside of it.

Rotring pencil

Step 12

Add a 10 x 4 px black (#000000) rectangle just underneath the clip’s ring and set its Blending Mode to Multiply while lowering its Opacity level to 14%.

Adding shadow

Step 13

Create a 16 x 62 px rectangle, color it using a light grey tint (#736D6D) and then position it using the Transform panel:

  • X: 449 px
  • Y: 377 px

Positioning the rotring pencil

Step 14

Using the Add Anchor Points tool (located underneath the Pen Tool), add an anchor point at a distance of about 3 px from the top and bottom anchor points of the rectangle. Then, using the Direct Selection Tool (A) select the top and bottom anchors one by one, and move them by 3 px towards the inside. Once you’ve done that, give the new shape an Offset Path of 6 px and you’re good to go.

Adjusting the rubber

Step 15

Add a red (#EF7B7B) top section to the rubber grip, a bottom shadow, and the highlight going all around the left, top and right side. Finish up the details by adding a bunch (I have total of 27, but you can vary the number) of 12 x 1 px rectangles distanced at 1 px from one another and color them using #7A7474. Group all the elements together so they won’t get moved by accident (ctrl + G).

Quick tip: use the same Blending Mode and Opacity level for the highlight and shadow as we used for some of the other steps above.

Adding details

Step 16

Create the mechanical pencil’s tip, by first making a 4 x 4 px rectangle (#736D6D) which we will position just under the rubber grip section. Select the new shape, duplicate it (ctrl + C > ctrl + F) and apply an Offset Path of 6 px to it, making sure to expand the offset (select > Object > Expand Appearance), color it in the dark tint we used for all of our outlines (#5D5656) and then make sure to send it to the back (right click > Arrange > Send to Back). Create a 4 x 2 px shape and position it towards the top section of the light grey object, making sure to change its Blending Mode to Multiply and the Opacity to 14%.

Add a 10 x 6 px rectangle, same color as the outline, and move its bottom anchor points towards the inside by 1 px. Add a narrower 4 x 4 pxsquare (#E1DCDC) and a tiny 2 x 2 px darker one (#736D6D) underneath it and you’re done.

Creating the rotring pencil

Step 17

Select all the elements of the mechanical Rotring pencil and group them together using ctrl + G. You should now have something like this.

Rotring mechanical

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

Animated Presentations Made Easy

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