How to Create a Flat Styled Set of Writing Tools

• 17 minutes READ

Creating the Touch Markers

Next we will start recreating the two Touch markers, by creating one instance, and then duplicating that, modifying it here and there, and end up having two smooth looking instruments.

Step 1

Start by creating a 16 x 170 px shape, which will act as our marker’s base shape, color it using #736D6D and then position it to the right side of the Copic marker, at about 26 px.

Positioning shapce

Step 2

Once we have our base shape in place, we need to add the thick outline to it. Simply create a duplicate by copying (ctrl + C) and then pasting (ctrl + F) the object from the previous step, and then apply an Offset Path effect of 6 px to it, making sure to change its color to #5D5656 and then send it to the back (right click > Arrange > Send to Back).

Creating the outline

Step 3

Add a 16 x 14 px yellow (#F4D484) rectangle which will act as our color indicator, and position it to the top section of the marker’s body using the Align panel.

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

Adding the color

Step 4

Then, add two 2 x 152 px side highlights, making sure to change the Blending Mode to Soft Light and lowering the Opacity to 40%. Add a bottom 16 x 4 px shadow and set its Blending Mode to Multiply and its Opacity level to 8%.

Adding highlights

Step 5

Add the inner detail to the marker, by creating one larger 8 x 34 px rectangle and two smaller 8 x 1 px ones under it at a distance of 1 px from one another. Group them and then position them using these coordinates:

  • X: 353 px
  • Y: 305 px

Positioning the inner

Step 6

Copy (ctrl + C) the thin/thick tip indicator from the copic marker layer, and paste (ctrl + F) them onto the touch marker’s main body. Then select both the indicators and the inner decal (the one we created at step 5) and align them at a distance of 35 px from the decal.


Step 7

Start creating the top cap, by drawing a 28 x 15 px rectangle with a 2 px Corner Radius. Using the Direct Selection Tool (A) select the bottom anchor points and delete them, uniting the remaining ones (ctrl + J).

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

Adjusting cap

Step 8

Position the new object onto the marker’s top side of the outline.

Positioning base

Step 9

Add a larger 24 x 36 px rounded rectangle with a Corner Radius of 4 px. As we did with the previous shape, delete the bottom anchor points and then position it right on top of the cap’s base shape. Then, with both objects selected group them together (ctrl + G).

Top Cap

Step 10

Finish off the marker by simply creating a copy of the top cap, reflecting it horizontally, and then positioning it right under the bottom side of the marker’s outline.

First touch

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

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