Design & UX
Article

Design a Clean Calendar UI in Photoshop

By Anum Khan

We’re all getting ready to welcome the new year, and there’s no better way to prepare than by designing a calendar UI precisely for the purpose of planning out the year’s milestones and achievements. Following these techniques, you will be able to design your very own calendar just the way you like it.

In this tutorial, I’ll walk you through the process of designing a minimalist calendar user interface in Photoshop. Along the way, we’ll use few shape tools, filters, and various blending options to achieve the final outcome. So, let’s get started!

Final result: (To download the completed, layered file, click here.)

2013 calendar UI

Step 1

Create a new document in Photoshop with a 1000px width and a 1000px height.

2013 calendar UI

Step 2

First of all, we’ll create the base for the calendar. Set #d85724 as your foreground color and draw a rectangle using the rectangle tool. Use the following dimensions.

2013 calendar UI

Step 3

Double-click on the rectangle layer to open the layer style window and apply the following settings for “Bevel and Emboss” and “Drop Shadow”.

2013 calendar UI

2013 calendar UI

2013 calendar UI

Step 4

Now, duplicate the rectangle layer and decrease its size a bit using the free transform tool (Ctrl + “T”). Place this layer below the original rectangle layer and drag it a bit downward to get the effect shown below.

2013 calendar UI

Duplicate this layer to make the third base, decrease its size further, position it just above the background layer, and drag it a bit downward.

2013 calendar UI

Step 5

Next, we’ll make base shadow. Press Ctrl+ <click on the first rectangle layer> to make selection around it. Now, create a new layer just above the background and fill the selection with pure black using the paint bucket tool. After that, go to “Filter” > “Blur” > “Gaussian Blur”. Apply a 4px Gaussian blur filter to the new layer. Then, drag the shadow downward so it becomes visible below the 3rd base layer. Lastly, reduce its opacity to 75-80%.

2013 calendar UI

Step 6

We’ll create the header for the calendar now. To start, we’ll make the navigation arrows. Draw a small ellipse near the top corners using color #f3f4d9.

2013 calendar UI

Apply the following settings to create a drop shadow on this ellipse.

2013 calendar UI

2013 calendar UI

Step 7

Select the pen tool (Tool mode: Shape) to draw the arrow shape shown below using color #d85724.

2013 calendar UI

Apply the settings below for inner shadow on the arrow.

2013 calendar UI

Collect the ellipse and arrow layers into a group, duplicate this group, and flip it horizontally by going to “Edit” > “Transform” > “Flip Horizontal”. Position it near the right corner to form the opposite arrow.

2013 calendar UI

Step 8

Next, we’ll add the title text. Set #f6f6f6 as the foreground color and add your desired text using the type tool. I am using the “Myriad Pro” font here.
Apply the same drop shadow settings that we used for the ellipse in step 6.

2013 calendar UI

2013 calendar UI

Step 9

The header is ready. Next, we’ll make the weekdays section. Draw a rectangle with the following dimensions using color #c3beab.

2013 calendar UI

Step 10

Apply the following settings for stroke on this newly-drawn rectangle.

2013 calendar UI

2013 calendar UI

Step 11

Set #3b3b3b as your foreground color and type in the abbreviated weekdays using “Arial” font on a single layer. Adjust spacing between different days.

2013 calendar UI

Step 12

Apply the following layer style settings on the weekdays layer.

2013 calendar UI

2013 calendar UI

2013 calendar UI

Step 13

Next, we’ll make our first row of seven boxes. Draw a rectangle using color #e5e5e5. Use the following dimensions for your rectangles.

2013 calendar UI

Apply the same settings for stroke on this new rectangle that we applied for the weekdays rectangle in step 10. Now, duplicate this rectangle six times and arrange each copy side by side, as shown below. Collect these seven boxes into a group and name that group “1st row”.

2013 calendar UI

Step 14

Now, duplicate the “1st row” group, drag it downward, and position it just below the original “1st row”. Label this group as “2nd row”. Keep on duplicating this group and complete five rows using the same process.

2013 calendar UI

Step 15

Draw a very thin rectangle in pure white color with the following dimensions, and position it below the top stroke of the weekdays rectangle, as shown below. Reduce its opacity to 80%.

2013 calendar UI

Duplicate this white line layer six times and position these copies below the stroke line of gray boxes rows.

2013 calendar UI

Step 16

Add the digits on separate layers (so that you can easily edit them later on), and position these in the center of their respective gray boxes. Apply the same settings for inner shadow and drop shadow on these digits layers that we used in step 12.

2013 calendar UI

Step 17

To differentiate the previous and next month’s days on the first row of the calendar, we’ll change their Inner Shadow and Color Overlay settings.

2013 calendar UI

2013 calendar UI

2013 calendar UI

Step 18

Draw rectangles exactly above the previous and next month’s days using color #9c9887, and reduce their opacity to 15%.

2013 calendar UI

Step 19

Next, we’ll highlight today’s date. To do this, make a rectangle over the desired date box. I am going to use color #a0cdcc here. Make sure to draw this rectangle below the digits and above the gray box layers.

2013 calendar UI

Apply the following settings for inner shadow on this colored rectangle.

2013 calendar UI

2013 calendar UI

You can highlight important dates over your calendar by making different colored rectangles over the dates. See below.

2013 calendar UI

Step 20

We’ll complete this calendar by making a shadow. Make the selection as shown below using the rectangular marquee tool, and fill it with pure black color on a new layer.

2013 calendar UI

Position this layer just above the base layers and drag it a bit downward. After that go to “Edit” > “Transform” > “Warp”. Use this Warp tool to make the curved shadow shown below.

2013 calendar UI

Now, apply 1.5px Gaussian blur filter to the shadow, and reduce its opacity to 50%.

2013 calendar UI

2013 calendar UI

That’s it. I hope you enjoyed the tutorial and learned something useful. Do share your thoughts!

  • JamLan

    Please pardon my ignorance, but how would I use this? Do I draw 365 calendars for 2013? Is there a way to update this psd file, based on the date? Convert it to something I can update? Use this (the instructions particularly) as a template to code/draw a calendar?

    I love the design, I’m just not sure where to go with it.

  • Chakotay

    Actually, I don’t think to draw a PSD template is hard.

    My question is that how do I convert the PSD to HTML so that I can really use it in my website? Otherwise it is just a picture for me.

    Is there any tutorial for this?

    Many thanks.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.