How to Create a Flat Styled Set of Writing Tools

• 17 minutes READ

Creating the Copic Marker

Step 1

Unlock the copic marker layer, and create a 20 x 158 px rectangle which will act as our marker’s base shape. Change its color to #CBC5C5 and then vertical align it to the right side of the pencil at a distance of 26 px.


Step 2

Add an outline to our marker, by duplicating the shape we just created, and once you have it selected go to Effect > Path > Offset Path and set the Offset to 6 px. Expand the shape (select > Object > Expand Appearance), change its color to #5D5656 and then send it to the back using the Arrange function.

Adding outline

Step 3

Add a couple of highlights by creating a 20 x 2 px shape which we will position to the top of the marker, and two 2 x 152 px rectangles which we will align to the outer sides of the marker. Change their Blending Mode to Soft Light and then group them together using ctrl + G. Add a smaller 20 x 4 px piece towards the bottom of the marker, change its color to black (#000000), its Blending Mode to Multiply lowering its Opacity level to 22%.

Adding base

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 couple of details by creating one 8 x 26 px rectangle and two sets of two smaller 8 x 1 px ones for the top and bottom side. Select the shapes, distance them at 1 px from one another, and then group them together using ctrl + G.

Horizontal align them to the marker’s body using the Align panel and then position them by inserting these coordinates into the Transform panel:

  • X: 303 px
  • Y: 299 px

Positioning details

Step 5

Create the thinner tip indicator by drawing an 8 x 6 px shape with a Corner Radius of 2 px. Delete the bottom anchor points using the Direct Selection Tool (A) and unite the remaining anchors using ctrl + J. Next, create a 4 x 2 px rectangle and position it right above the top section of the object we’ve just created. Using the Pen Tool (P) create a shape that is 2 px wide, and 3 px tall, and has a pointy tip. Finish the tip indicator by adding a 2 x 2 px which we will align horizontally to the tip, at about 2 px towards the top. Use #5D5656 as the main color for all of the elements.

Creating the thinner tip

Step 6

Create the thicker tip indicator by creating a copy of the thinner tip’s base shape, and then adding a 6 x 6 px square which will have to go about 1 px towards the inside. Then, using the Direct Selection Tool (A) select the top right anchor point, and move it down by 2 px. Add a 4 x 4 px circle and then after selecting all of the indicator’s elements, group them (ctrl + J) and reflect them horizontally (right click > Transform > Reflect > Horizontal.

Creating thicker tip

Step 7

Position both the thinner and thicker indicators at 29 px from the top and bottom side of the middle detail.

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

Positioning thick

Step 8

Start working on the top section of the marker by creating a 20 x 36 px rectangle and positioning it to the top of our marker’s outline, and then pushing it down by 1 px so that it will go over a small area of the outline.

Positioning marker

Step 9

Add the highlights and shadow by creating four rectangles with 1 px height / width (depending on their position) and then change the Blending Mode for the highlights to Soft Light, and the one for the shadow to Multiply lowering its Opacity to 22%.

Adding highlights

Step 10

Create the top color indicator, by drawing a 20 x 9 px rounded rectangle, with a Corner Radius of 1 px. Color it using #7AAB7A and then delete its bottom anchor points using the Direct Selection Tool (A). Once you’ve united the remaining anchors (ctrl + J) position the new shape at about 4 px of the top section of the cap.

Adding top color

Step 11

Add an outline to the cap, by creating a 32 x 58 px rectangle, with a 7 px Corner Radius. Remove its bottom anchor points using the Direct Selection Tool (A), color it in a darker tint (#5D5656) and then position it under the other elements of the cap.

Top cap

Step 12

Select all the elements of the top cap, group them (ctrl + G), create a duplicate, reflect it, and then move it to the bottom of the marker using the Move tool (right click > Transform > Move and enter 219 px in the Vertical field.

Creating bottom copic

Step 13

Finish off the copic marker by inverting the position of the highlights and bottom shadow, so that the later ends up positioned towards the bottom.

Copic marker finished

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