A very common thing on websites is a calendar widget. They can be used as event calendars, date pickers, booking calendars, etc. In this tutorial, I’ll walk you through the step-by-step process of creating a stacked calendar widget withPhotoshop. We’ll be using shape tools and several blending options to achieve the final result. Let’s get started!


Assets used in this tutorial:

  • Arrows (Custom Shapes)

Step 1: Create a New Document

Open Photoshop and go to File > New (or CTRL+N) to create a new document. I will be creating a 400 pixels x 400 pixels document at 72 pixels/inch resolution. Color Mode: RGB 8 bit. Background Contents: Transparent.

Create a Stacked Calendar Widget With Photoshop | Step 1

After this is created we need to go to Edit > Fill > Color.. set color to #FFFFFF and click OK to fill the background with white.


Step 2: Creating the Month Navigation

Before we begin creating the month navigation let’s make sure we keep our layers organized in groups so click Create a New Group at the bottom of the layers palette, then double click the group and name it Month Navigation.

Create a Stacked Calendar Widget With Photoshop | Step 2a

Using the Rectangle Tool now draw out a rectangle of 274px by 44px and name it month-base. This will be the background to our month navigation.

Create a Stacked Calendar Widget With Photoshop | Step 2b

Next we will right click the month-base layer and go to Blending Options.. We will now add some style to it using the settings below..

Stroke – Size: 1px, Position: Inside, Color: #0966b6

Create a Stacked Calendar Widget With Photoshop | Step 2c

Inner Shadow – Blend Mode: Normal #44a2f3, Opacity: 100%, Angle: 90, Distance: 2px, Choke: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 2d

Gradient Overlay – Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #0966b6 | Location 49% – Color #0966b6 | Location 50% – Color #1671bf | Location 100% – Color #1b81d8, Angle: 90

Create a Stacked Calendar Widget With Photoshop | Step 2e

Next we will create the active month text so using the Horizontal Type Tool write out July 2013 with Font-Family: Helvetica Neue LT Pro (use Arial if you don’t have it), Font-Style: Bold, Font-size: 18px. Then center it with the month-base layer.

Create a Stacked Calendar Widget With Photoshop | Step 2f

Next we will create the previous and next month buttons on the left and right side. First we need to create another group inside of Month Navigation and name it Previous Month. Using the Custom Shape Tool now use the dropdown arrows to Load Shapes and choose the Arrows.csh included in the assets at the beginning of this tutorial.

Create a Stacked Calendar Widget With Photoshop | Step 2g

Now select arrow 140 and while holding SHIFT create an 8px by 10px arrow. Move it 15px from the left side and center it vertically.

Create a Stacked Calendar Widget With Photoshop | Step 2h

Right click the arrow layer now and go to Blending Options.. We’re going to give it a Drop Shadow now using these settings:

Blend Mode: Normal #094f8c, Opacity: 100%, Angle: 30, Distance: 1px, Spread 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 2i

Next we need to create the bevel to right of the arrow. So while holding CTRL hit + a couple times to zoom in. Then with the Line Tool selected hold SHIFT and draw a 42px horizontal line. Name it bevel-dark and move it 15px from the arrow.

Create a Stacked Calendar Widget With Photoshop | Step 2j

Right click the bevel-dark layer now and go to Blending Options.. We’re going to give it a Gradient Overlay using these settings:

Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #085496 | Location 100% – Color #0966b6

Create a Stacked Calendar Widget With Photoshop | Step 2k

Next we need to right click the layer again and Duplicate Layer. Name it bevel-light and with the Move Tool selected hit the right arrow on your keyboard once to move it 1px.

Create a Stacked Calendar Widget With Photoshop | Step 2l

Right click the bevel-light layer now and go to Blending Options.. We need to modify the Gradient Overlay now using these settings:

Gradient: Location 0% – Color #1876c6 | Location 100% – Color #44a2f3

Create a Stacked Calendar Widget With Photoshop | Step 2m

Now we need to right click the Previous Month group and Duplicate Group.. Name it Next Month then go to Edit > Transform > Flip Horizontal.. Then While holding SHIFT and using the Move Tool drag it to right side of the month-base again 15px from the edge.

Create a Stacked Calendar Widget With Photoshop | Step 2n

Next let’s rename the previous-arrow under the Next Month group to next-arrow, then right click it and go to Blending Options.. Here we will change the Angle of the Drop Shadow to 120.

Create a Stacked Calendar Widget With Photoshop | Step 2o

Last we need to right click the next-arrow again and select Copy Layer Style. Then right click our text layer “July 2013″ and Paste Layer Style.


Step 3: Creating the Days of the Week

First let’s close the Month Navigation group and then Create a New Group name it Days of the Week.

Create a Stacked Calendar Widget With Photoshop | Step 3a

Using the Rectangle Tool let’s create a new rectangle of 274px by 30px with a color of #f5f5f5 and move it up against the bottom of the Month Navigation.

Create a Stacked Calendar Widget With Photoshop | Step 3b

Change your foreground color to #606060 and with the Horizontal Type Tool selected change font settings to.. Font-Family: Helvetica Neue LT (Arial if you don’t have it), Font-style: Medium, Font-size: 12px, Center Text, All Caps.. Write out the first day SUN (Sunday) now. Move it about 8px from the left and center it vertically with the base.

Create a Stacked Calendar Widget With Photoshop | Step 3c

Now right click the SUN text layer and go to Blending Options.. with Drop Shadow we will use these settings now:

Blend Mode: Normal #FFFFFF, Opacity: 100%, Angle: 120, Distance: 1px, Spread: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 3d

Last we need to right click the SUN text layer and Duplicate Layer, then change the text to MON, move it to the right of SUN about 14px.. Repeat this step for each day of the week. We will perfect the alignment at the end of the tutorial when we have columns to align them with.

Create a Stacked Calendar Widget With Photoshop | Step 3e


Step 4: Creating Borders Around the Weeks and Days

First let’s close the Days of the Week group now and Create a New Group again, name it Horizontal Borders.

Create a Stacked Calendar Widget With Photoshop | Step 4a

Then using the Line Tool we’re going to create a Horizontal 274px line with a color of #bbbbbb right beneath the Days of the Week. Give it a name of border-1, again just to keep things organized.

Create a Stacked Calendar Widget With Photoshop | Step 4b

Now we need to duplicate border-1 layer and move the copy 38px down from the original, rename it to border-2 then repeat this step 4 more times so we then have 6 borders and we can see now that 5 empty rows are made.

Create a Stacked Calendar Widget With Photoshop | Step 4c

Next we will create some vertical borders, so close the Horizontal Borders group and Create a New Group, name it Vertical Borders.

Create a Stacked Calendar Widget With Photoshop | Step 4d

Using the Line Tool now with a color of #bbbbbb we’ll create a 225px vertical border on the left starting from the bottom of the Month Navigation. Give it a name of border-1.

Create a Stacked Calendar Widget With Photoshop | Step 4e

Using the Line Tool again we’ll create a 194px vertical line starting from the first horizontal border to the last. Then we will move it 38px to the right of the first vertical border. Give it a name of border-2.

Create a Stacked Calendar Widget With Photoshop | Step 4f

Now we need to duplicate the border-2 layer and move the copy 38px to the right. Repeat this step 4 more times so you should be left with 7 columns.

Create a Stacked Calendar Widget With Photoshop | Step 4g

Last we need to duplicate the border-1 and move it to the far right side to finish up our borders and we now have a nice outline for our weeks and days.

Create a Stacked Calendar Widget With Photoshop | Step 4h


Step 5: Creating the Days

First close the Vertical Border group then Create a New Group and name it Row 1.

Create a Stacked Calendar Widget With Photoshop | Step 5a

Using the Rectangle Tool draw out a 38px by 38px square and place it on the first row and the first column. Name it col-1-base.

Create a Stacked Calendar Widget With Photoshop | Step 5b

Next we need to right click the col-1-base layer and go to Blending Options.. we will add style to it using these settings:

Inner Glow – Blend Mode: Normal, Opacity: 100%, Color: #fafafa, Choke: 100%, Size: 1px

Create a Stacked Calendar Widget With Photoshop | Step 5c

Gradient Overlay – Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #dddddd | Location 100% – Color #ECECEC, Angle: 90

Create a Stacked Calendar Widget With Photoshop | Step 5d

Next change your foreground color to #606060 and using the Horizontal Type Tool we will create our first day number using these font settings.. Font-Family: Helvetica Neue LT Pro (Arial if you don’t have it), Font-style: Bold, Font-size: 16px, Center Text (IMPORTANT: saves time aligning for the rest), Tracking: 60. Then we will center the number on the col-1-base.

Create a Stacked Calendar Widget With Photoshop | Step 5e

Now right click the 30 text layer and go to Blending Options.. We’re going to apply a Drop Shadow using these settings..

Blend Mode: Normal #FAFAFA, Angle: 120, Distance: 1px, Spread: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 5f

While holding CTRL select both col-1-base and the text layer 30, then right click them and Duplicate Layers. With both the copies selected hold SHIFT and move them right to the second column. Rename col-1-base copy to col-2-base then edit the 30 text layer to 1 with the Horizontal Type Tool. Repeat this step for the entire first row.

Create a Stacked Calendar Widget With Photoshop | Step 5g

Now that we have 1 row done we can speed up the process for the rest. First close the Row 1 group, then right click it and Duplicate Group.. Rename it to Row 2 and then move it down to row 2 on our calendar. Simply use the Horizontal Type Tool now to change the numbers. Then repeat this step for the last 3 rows.

Create a Stacked Calendar Widget With Photoshop | Step 5h

Next we style our previous and next month dates separately from the current months. So open Row 1 group again and right click col-1-base and go to Blending Options.. We just need to change the Gradient Overlay using these settings..

Gradient: Location 0% – Color #ECECEC | Location 100% – Color #f5f5f5

Create a Stacked Calendar Widget With Photoshop | Step 5i

Right click col-1-base again and Copy Layer Style.. Then open Row 5 Group and while holding CTRL select the last three col-base’s (col-5-base, col-6-base, col-7-base) then right click them and Paste Layer Style..

Create a Stacked Calendar Widget With Photoshop | Step 5j

With Row 5 Group still open hold CTRL and select the text layers 1, 2 and 3. You can release CTRL then navigate to Row 1 Group and hold CTRL again and select text layer 30 as well. Then with the Horizontal Type Tool change the font-color to #b6b6b6 and click OK to change them all.

Create a Stacked Calendar Widget With Photoshop | Step 5k

Now we need to style the current days base, it uses the same gradient as the Month Navigation so lets open the Month Navigation Group, right click month-base and Copy Layer Style.. Then open Row 2 Group, right click col-4-base and Paste Layer Style.. Right click col-4-base again and select Blending Options.. Uncheck Stroke and Inner Shadow first, then we will add an Inner Glow with these settings:

Blend Mode: Normal, Opacity: 100%, Color: #155a96, Size: 8px

Create a Stacked Calendar Widget With Photoshop | Step 5l

We just need to change the text color to #FFFFFF with the Horizontal Type Tool. Then right click the 10 text layer and change it’s Drop Shadow settings to this..

Blend Mode: Normal #0966b6, Opacity: 100%, Angle: 120, Distance: 1px, Spread 0%, Size 0px

Create a Stacked Calendar Widget With Photoshop | Step 5m

Before we move on to the last step lets align the Days of the Week with the columns. We can do this quickly with the Smart Guides but if you aren’t familiar with them, select the Move Tool then open Row 1 Group, hold CTRL and click on col-1-base’s thumbnail then click the SUN text layer and Align Horizontal Centers at the top. Repeat for each day.

Create a Stacked Calendar Widget With Photoshop | Step 5n


Step 6: Create the Stacks

First close all open groups and then Create a New Group, name it Stacks. Then with the Rectangle Tool draw out a 274px by 4px rectangle. Name it stack-1 and give it a color of #dedede then place it so the very bottom of the rectangle is over the bottom border of the calendar. Then drag the Stacks group below the Month Navigation group, you shouldn’t see the rectangle anymore.

Create a Stacked Calendar Widget With Photoshop | Step 6a

Now right click the stack-1 layer and go to Blending Options.. we’ll giving it a Stroke using these settings..

Size: 1px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Color: #bbbbbb

Create a Stacked Calendar Widget With Photoshop | Step 6b

Then with the Move Tool selected hit the down arrow on keyboard twice to move the stack-1 layer 2px down. You should now have the first stack visible.

Create a Stacked Calendar Widget With Photoshop | Step 6c

Finally, just duplicate the stack-1 layer and rename the copy to stack-2, then move stack-2 behind stack-1 in the layers palette and using the Move Tool again hit the down arrow 2 more times to create the second stack. Repeat this step for the last stack then we are done!

Create a Stacked Calendar Widget With Photoshop | Step 6d

Leave a Reply

Your email address will not be published. Required fields are marked *