How to Create a Flat Styled Set of Writing Tools
Creating the Copic Marker
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.
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.
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%.
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
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.
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.
Position both the thinner and thicker indicators at 29 px from the top and bottom side of the middle detail.
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.
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%.
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.
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.
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.
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.