How to Create a Calendar Icon Using Bohemian Coding Sketch

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. create an icon using sketch app

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. create an icon using sketch app

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. create an icon using sketch app

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. create an icon using sketch app

Step 5

Add an Inner Shadow: create an icon using sketch app

Step 6

Duplicate the rounded rectangle. Then select the original rectangle again and add 6 pixels to the height. create an icon using sketch app

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. create an icon using sketch app

Step 8

Again with the original rectangle still selected add a drop shadow: create an icon using sketch app

Step 9

Now select the duplicated rectangle and add a thin white drop shadow with the Soft Light blending mode. create an icon using sketch app

Step 10

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

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: create an icon using sketch app create an icon using sketch app

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. create an icon using sketch app create an icon using sketch app

Step 13

Add a gradient fill, shadow and inner shadow to create the effect of depth: create an icon using sketch app create an icon using sketch app create an icon using sketch app

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. create an icon using sketch app

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: create an icon using sketch app create an icon using sketch app create an icon using sketch app

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. create an icon using sketch app create an icon using sketch app

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 create an icon using sketch app create an icon using sketch app

Result & Conclusion

And the end result should look something like this: create an icon using sketch app 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.

Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

See all
X

You've successfully logged in!