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

Comments

  • Reply »
    Jenn

    Jenn

    Thanks Tony, you’ve definitely proven to me that Sketch can be a great alternative to Photoshop instead of just Illustrator. The subtle effects that you’ve added for realistic touches are great!

    Jun 24, 2014 at 2:43 pm
  • Reply »
    Arthur Evans

    Arthur Evans

    Thank you. I will use these tips and bookmark this post for when I download Sketch. Thank you for sharing.

    Jun 24, 2014 at 3:39 pm
  • Reply »
    Tabris

    Tabris

    Very cool ! I’m hoping Sketch will take over Illustrator and Photoshop as my tool of choice for creating illustrations.

    Jan 10, 2015 at 7:31 pm
  • Reply »
    mustr

    mustr

    Why can’t we download this icons sketch file? :)

    Nov 26, 2015 at 6:02 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      It’s no fun if you don’t follow the tutorial and make it yourself!

      Just kidding, here you go:
      http://medialoot.com/images/sketch-calendar-icon/calendar-icon.sketch.zip

      Nov 27, 2015 at 5:41 am
      • Reply »
        mustr

        mustr

        Thanks. I did the tutorial, but had some issues and my version didn’t turn out like yours. Mine is great as well, but just want to compare it and see what I did wrong :)

        Thanks for this

        Nov 27, 2015 at 5:43 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all