How to Create a Calendar Icon Using Bohemian Coding Sketch

This icon design tutorial for Sketch 3.x will teach you how to use the Mac app by Bohemian Coding to create an attractive calendar icon using a combination of skeuomorphic and flat design principles.

Step 1

Start by creating a new document in Sketch 3 and drawing a rectangle with a dark blue fill to use as the background. For the tutorial I used a 800 x 500 pixel rectangle for the background layer.

Step 2

Next we will build the wooden block for the base of the calendar. Start by drawing a 320 x 320 pixel rectangle with 30 pixel rounded edges.

Step 3

First download this seamless wood texture. Then in sketch add a new fill on top of the solid color and select the pattern option. Click the Choose Image.. button in and locate the wood texture that you downloaded. Set the blending mode to Soft Light.

Step 4

Add a third fill to the rounded rectangle and select the default black to transparent white swatch. Set the blending mode to Soft Light.

Step 5

Add an Inner Shadow:

Step 6

Duplicate the rounded rectangle. Then select the original rectangle again and add 6 pixels to the height.

Step 7

Still with the original rectangle selected remove the gradient overlay fill and adjust the solid colour fill to make it a slightly darker shade.

Step 8

Again with the original rectangle still selected add a drop shadow:

Step 9

Now select the duplicated rectangle and add a thin white drop shadow with the Soft Light blending mode.

Step 10

Draw a new 300 x 300 pixel rectangle with 20 pixel rounded corners, a very light grey (#F8F8F8) fill and drop shadow.

Step 11

Duplicate the rectangle, reduce the height by 2 pixels to 298 pixels and add a thin drop shadow. Then repeat this step until you have the original layer and 5 copies each 2 pixels shorter than the previous. The result should create an effect like the screenshot below:

Step 12

Draw another new rectangle with a red fill and 20 pixel rounded corners. Press the Enter key or double click the shape to enter the vector edit mode, highlight the two lower points and remove the rounded corners.

Step 13

Add a gradient fill, shadow and inner shadow to create the effect of depth:

Step 14

Directly below the shape draw a thin 2 pixel high rectangle with only a gradient fill from black to transparent white. This will create a subtle shadow effect.

Step 15

Add a new text layer with a drop shadow for the month name. And two other text layers for the date and day of the week:

Step 16

For the mini illustration on the right hand side, start by drawing a single small square, and duplicate it until you have 7 columns and 5 rows. Then select all of the layers and combine them with the Union operation.

Step 17

Delete the first 3 and last 4 rectangles from the combined shape, then reduce the fill opacity to 50% and add a shadow

Result & Conclusion

And the end result should look something like this: The main thing to remember is that although Sketch is primarily a vector drawing application, you don't need to feel limited to only flat and minimal designs. The ability to layer different types of fill including textures and patterns will allow you incorporate skeuomorphic elements into your designs.