Calendar Icon Tutorial

Learn how to make those Calendar Icons you frequently see on blog sites.

PSD files for this Photoshop tutorial are included, and a package of free Calendar Icons are available for you to download as well!

Make a new document in Photoshop. I’ve made mine 100×100 pixels.

Making sure you’re working on a blank layer, grab the Rectangular Marquee Tool. Holding down Shift, drag out a square.

Fill the square with any colour. We will be adjusting this layer with Blending Options.

Select Blending Options for this layer.

Select Inner Shadow. Set the blend mode to Normal.

Select Gradient Overlay. Create a subtle light gray - near white gradient. Set the angle to 127 degrees.

Select Stroke. Set the size to 1 px, and the colour to a dark red.

Select OK. This is what your calendar should look like so far:

Make a new layer. Ctrl-click the first layer (to select it).

Using the Rectangular Marquee Tool, hold down alt while dragging a rectangle over the bottom portion of the calendar.

This will leave you with just the top part of the canvas selected. Once again, fill this layer with any colour. We’ll adjust it in Blending Options.

Go to Blending Options. Select Inner Shadow. Change the Blend Mode to Normal, and select a light red/pink.

Select Gradient Overlay. Create a subtle dark - light red gradient. (If you’re dealing with lighter colours, you may also want to apply a 1 px stroke).

This is how your icon should look so far:

Nice job! Now head on over to the next page to learn how to add a shine to your calendar.

Now to add the shine. Ctrl-click the current layer to select it.

Select the Elliptical Marquee Tool.

Select the icon with two boxes intersecting.

Draw an ellipse over the area you want your shine to be.

Select the Gradient Fill Tool. Create white - transparent gradient.

Drag your pointer down to draw the gradient.

You may want to adjust the opacity of this layer:

And there you go! A slick Web 2.0 Calendar Icon. You can add some text either with photoshop or CSS to work on your webpage. Enjoy!

You can download the PSD file for this Calendar Icon tutorial.
An entire pack of free Calendar Icons, which comes in several different colours, is also available at this post. Enjoy!

From mintyferret