How to Design a Clean and Modern Calendar Widget in Photoshop

Calendar is one thing every House or Office or software now a day needs. It helps schedule your task and keeps you on track everywhere. Doesn’t matter where you work and what you do.

How to Design a Clean and Modern Calendar Widget in Photoshop

Every app needs some extra widgets, like calendar for example. Therefore, we decided to offer you one and that’s not all…I’m going to build a tutorial explaining you all the steps involved in designing one. If you’re a Photoshop newbie, you’ll learn a lot following this tut, from designing techniques to Photoshop effects and lot more.

“I’ve been on a calendar, but I’ve never been on time”- Marilyn Monroe


Final Result

Let’s see what you will be creating in this tutorial.

instantShift - Clean and Modern Calendar Widget in Photoshop

Materials Needed:

Design a Calendar Widget in Photoshop

Let’s get started!

Step 1: Create New File

Open Photoshop and create a new document of 600x450px. Set the “Background Contents” to “Transparent“.

instantShift - Create New File

Step 2: Setting Up the Background

I decided to use a nice wood pattern as background. Download the Wood Pattern from PulsarWallpapers and add it to the Photoshop stage. The image will be our background.

instantShift - Setting Up the Background

Step 3: Draw Calendar Shape

Let’s start building the calendar widget. Grab the Rectangle Tool (U) and draw a white rectangle of 280x260px right in the middle of the stage. Then apply to it the next layer styles:

instantShift - Draw Calendar Shape

instantShift - Draw Calendar Shape

This is how the calendar looks like until now:

instantShift - Draw Calendar Shape

Step 4: Draw Calendar Header

Let’s draw the header, which will be the Months slider…each month will slide on the header, and the calendar will change its days. Of course, this is only a design and will have no functionality, but is the first step for any project. In general, the design is the first step of any type of project.

Select the Rectangle Tool(U) and draw a rectangle of 280x40px over the shape. Position it at the top of the shape and stylize it with the next layer styles:

instantShift - Draw Calendar Header

instantShift - Draw Calendar Header

This is how the header should look like:

instantShift - Draw Calendar Header

Step 5: Draw Month Change Arrows

We still need to add some more touches to the header, like months, 2 arrows and a line. So add with the Horizontal Type Tool(T) a month name(I chose August), select the Custom Shape Tool(U) and add 2 small arrows and after, grab the Line Tool(U) and draw a dark horizontal line(#352111) at the base of the header.

instantShift - Draw Month Change Arrows

Step 6: Draw Rows & Columns

Let’s proceed. We’re gonna build now the boxes for each day of the month but before doing this, I want to speak about “Guides”. Guides help you position images or elements precisely. Guides appear as nonprinting lines that float over the image. You can move and remove guides.You can also lock them so that you don’t move them by accident. To add a guide, firstly you need to activate Rulers(Ctrl+R) or go to View->Rulers. The rulers should appear on top and left side of canvas. Add a guide by drawing from rulers to stage.

Now that you know how to use guides, select the Rectangle Tool(U) and draw 5 rectangles of 280x40px from bottom to top. Then apply to them the next gradient overlay:

instantShift - Draw Rows and Columns

Arrange the rectangles exactly like in the image, from bottom to top. The remaining space between header and content will be for days(sun, mon, tue, wed, thu, fri and sat, exactly like on any calendar).

instantShift - Draw Rows and Columns

Now, make use of Guides and them at every 40px, so we may add some days inside them. To measure exactly 40px, you can use Ruler Tool(I).

instantShift - Draw Rows and Columns

Step 7: Delimit Rows & Columns

Now delimit each rectangle by drawing some horizontal and vertical lines of 1px using the Line Tool(U), darker and lighter to create a nice overall effect.

Start with vertical white lines and draw them 1px right to vertical guide:

instantShift - Delimit Rows and Columns

Continue with horizontal white lines and draw them 1px under horizontal guide:

instantShift - Delimit Rows and Columns

Add horizontal dark-gray(#c5c5c5) lines above each horizontal guide:

instantShift - Delimit Rows and Columns

Finish with vertical gray lines by drawing them left to each vertical guide.

instantShift - Delimit Rows and Columns

You should obtain nice rectangles delimited by lines:

instantShift - Delimit Rows and Columns

Step 8: Add Weeks in Calendar

Now, above the rectangles, inside that white empty space, add each day of the week:

instantShift - Add Weeks in Calendar

Step 9: Add Days in Calendar

Inside each small rectangle, add days from 1-31, but make sure to take into account the relation between each number and day. For example, 1st of august 2011 is Monday.

instantShift - Add Days in Calendar

Step 10: Reduce Opacity of Inactive Days

I added inactive days as well, like 31 of July and 1,2 and 3 of September because they fits into calendar but I highlighted them. Draw a white rectangle over each inactive box and reduce its opacity to 50%. This way you’ll obtain clean inactive days.

instantShift - Reduce Opacity of Inactive Days

Step 11: Highlight Current Day

The current day should be highlighted too, but in a different way. Choose a day you want to make it current, draw a rectangle of 39x40px and position it like in the image(starting from top-left corner). Color it in orange(#da603b) and add to it a 1px stroke(#7a2d16). The final rectangle should fall over dark-gray lines.

instantShift - Highlight Current Day

Step 12: Add Events

Now we’ll add a final touch. As any serious application calendar widget, our calendar should show days with events or tasks. Therefore, let’s add a day which has events assigned.

With Pen Tool(P), draw a small triangle of 7x7px, starting from top-left corner of a box, then color it in the same orange used for current day(#da603b).

instantShift - Add Events

With this last touch, our calendar widget is designed and ready to be coded for an admin panel of a fancy web application.

Final Result

Here is what we crafted finally.

instantShift - Final Result

Hope you enjoyed designing calendar along with me. Do you think adding something will make it more effective? We are hearing, do suggest us.

Download The .PSD File

The .PSD is released under GPL. You can use it for all your projects for free and without any restrictions.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s