How to Create a Calendar in Photoshop

On 17 Dec, 2011 By With 5 Comments

Calendar is an important part of our day to day life. Calendar keeps us informed about the date and future event(s). And since Christmas is coming, so our tutorial for today is “How to Create a Calendar in Photoshop“, this is really a simple technique and the results are awesome! You can also use the UI Design on your app or website, just convert it to html and css to work 😉

You can download the PSD at the bottom of this tutorial!

Final Product

calendar How to Create a Calendar in Photoshop

Let’s Start!

1 canvas How to Create a Calendar in Photoshop

Open your canvas and set the width 450px and height to 400px.

3 canvas marque How to Create a Calendar in Photoshop

Fill the canvas with #0a7db7, name this as bg1. After that create a new layer name bg2, use Elliptical Marquee Tool (M) and draw a circle inside the canvas. Fill it with  #2db2f4.

4 canvas blur How to Create a Calendar in Photoshop

On Filters > Blur > Gaussian Blur > set to 37.4px and hit OK.

5 rounded rectangle tool 5px How to Create a Calendar in Photoshop

Select Rounded Rectangle Tool (U) and set radius to 5px, name this as body.

6 body dropshadow How to Create a Calendar in Photoshop

In Blending Options > Drop Shadow and set the Distance to 2px, Size 5px. Blend Mode to Normal.

7 bodyinnerglow How to Create a Calendar in Photoshop

Inner Glow, set the size to 1px and choke to 0.

8 body stroke How to Create a Calendar in Photoshop

In Stroke, set the size to 1px and change the color to #076899.

9 body finished How to Create a Calendar in Photoshop

To achieve this, just duplicate the body layer (CTRL + J) and press arrow key up 2 times so it’ll move 2px.

10 header marquee How to Create a Calendar in Photoshop

Now create a new layer, name it header. Select Marquee Tool (M) and select the top part of the body layer.

11 header fillcolor How to Create a Calendar in Photoshop

Fill it with #0a7db7. Now, hold CTRL + click on body layer while header is still selected and press SHIFT + I and hit delete. You’ll have something like the one above.

11 header dropshadow How to Create a Calendar in Photoshop

On header layer > Blending Options > Drop Shadow, set the Distance to 1px and Size to 5px.

13 header gradient How to Create a Calendar in Photoshop

On Gradient Overlay follow the colors above, and set the angle to 90.

14 header marquee line How to Create a Calendar in Photoshop

Create a new layer and select Single Row Marquee Tool (M), set the line just 1px above from the bottom of the header. Fill it with #FFFFFF

16 header withline opacity58 How to Create a Calendar in Photoshop

Here is the body of our calendar, I’ve also set the line opacity of the line layer to 58px.

17 header text dropshadow How to Create a Calendar in Photoshop

Write the December text on the header, follow the settings above for text Drop Shadow.

18 header text final How to Create a Calendar in Photoshop

Here is the final look of the header with text, you should have the same result.

19 calendar lines How to Create a Calendar in Photoshop

Add those days text above, font is Arial Bold 10pt #707172.

About the margin lines, I am not sure how to do this automatically (if you know how, please share with us) I did all of this manually, it may take some time of getting the right size for each. The best part is you’re patience will be put to the test :D.

20 calendar numbers How to Create a Calendar in Photoshop

I fill those spaces with numbers following the December Calendar Days. I use Arial Bold 16pt #3a3a3a.

What I did with the dates is created the first set in group, and then duplicate them and arranged until I have the complete dates.

21 calendar 25 selected How to Create a Calendar in Photoshop

Create a new layer and select the 25 date, we will highlight this as a sign of special event on our calendar.

22 calendar 25 background gradient How to Create a Calendar in Photoshop

In Blending Options > Gradient Overlay follow the settings above

23 calendar background gradient settings How to Create a Calendar in Photoshop

In Gradient settings, set the opacity to 100% and angle to 90.

24 calendar background innershadow How to Create a Calendar in Photoshop

Inner Shadow set the distance to 1px and size to 1px, color #FFFFFF.

25 calendar background stroke2 How to Create a Calendar in Photoshop

In Stroke set the size to 1px and opacity to 100%.

26 calendar black25text How to Create a Calendar in Photoshop

You’ll have something like the one above, now to change the text color of 25 set the color to #FFFFFF.

27 calendar 25 text drop shadow How to Create a Calendar in Photoshop

In 25 text drop shadow, set the size and distance to 1px. Follow the color above.

calendar How to Create a Calendar in Photoshop

Here is the end result! Clean and minimalist calendar, you can use this on one of your projects or if you created a different version that would be so cool! If you have other suggestions to make it easier or faster for creating such design, please share with us on the comments below.

5 Responses to “How to Create a Calendar in Photoshop”