How to Create a Flat Styled Set of Writing Tools
Creating the Rotring Liner
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
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).
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%.
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.
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.
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.
Add an outline of 6 px to the previously created shape using the Offset Path effect.
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%.
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.
That was it guys!
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!