How To Create a Cool Blog Post Date Icon with Photoshop

In a recent redesign of my own personal blog I decided to use a calendar style icon to display the post date . It’s one of those elements that would once have been created with background images, but now thanks to the wealth of CSS3 features it can be created entirely in CSS3. We’ll be using properties such as linear-gradients, border radius and box shadow to replicate the icon’s original Photoshop design.

The Photoshop concept

CSS calendar icon

Many designers have taken the route of designing directly in the browser, but I’ll always be a fan of creating design concepts in Photoshop. Even though many of the effects can now be created directly in CSS, life is made much easier when you can simply copy across the figures from Photoshop’s layer styles, rather than testing out different effects by constantly changing your CSS syntax.

Begin by creating a rounded rectangle as the base of our calendar icon. Set the corner radius to 10px in the header. This is one figure we’ll be copying across to the CSS later, under the border-radius property.

Add a Gradient Overlay layer style to the rectangle, using a vertical gradient running from #dad8d8 to #fcfcfc;

Give the icon a fine 1px Stroke using the colour #e3e3e3 to define its edges.

Finally add a Drop Shadow effect and adjust the sliders to 20% opacity, 0px Distance and 15px Size. These figures will come in handy when setting up the box-shadow property later.

Duplicate the rectangle layer and delete away the upper portion. Change the Gradient Overlay colours to #790909 and #d40000 to create a red strip where the month will sit.

Configure an Inner Shadow to represent a top border by changing the settings to #a13838 Normal, 100% Opacity, 3px Distance and 0px Size.

Use Photoshop’s Text tool to set up the date within the upper portion of the calendar icon. Here I’m using Helvetica in #9e9e9e;

Enter the month along the lower strip, changing the font settings to Bold and the colour to white.

This leaves our quick Photoshop mockup complete. Once upon a time we would export the background as an image then place HTML numbers over the top, but nowadays all these Photoshop effects can be created with CSS.