Create a Sleek Calendar Icon – Photoshop Tutorial

Hang out with us and create this sweet little calendar icon/web graphic using shapes, pixels, Layer Styles, and more in Photoshop! Learn a bunch of little tips and tricks about snapping, working with type and text, working with Layer Styles, just a tiny bit of burning in, and we even learn how to make chrome!

Sleek Calendar Photoshop Tutorial

[raw] [/raw]

Step 1:

Create a new Photoshop Document sized 1280px by 720px and drop in an Apple style linen background using this tutorial » Create a Linen Texture in Photoshop. I also masked a Levels Adjustment Layer set to the Screen Blend Mode and introduced a little color to mix up the background a little.

Step 2:

Create a new Layer and name it “Day Holder” and grab the Rectangular Marquee Tool and look to the Tool Options Bar and set the tool to draw “Fixed Size” with a width and height of 30px. Create a selection and fill it with black. Hit Cmd/Ctrl + D to deselect your shape.

Step 3:

Duplicate that Layer and use the Move Tool (V) to shift the shape to the left until the shape touches the edge of your first square. TIP: Go View>Snap To>Layers to ensure that those shapes “click” to each other. Nudge the shapes using your arrow keys one pixel away from your first square. Repeat this process until you have seven squares with a one pixel gutter between each of them.

Step 4:

Look to your Layers Panel and select all seven of these Layers and hit Cmd/Ctrl + G to group them into a folder. Name this folder “5th Row”. This will be the bottom row of our calendar. Duplicate this Layer Group four times and use your Move Tool (V) to shift each row up until you have that 1 pixel gap between your rows of shapes. Rename all of your Layer Groups as I have.

Step 5:

Now we need to create two more shapes before we start styling our calendar. Create a new Layer and name it “Day Names”. Grab your Rectangular Marquee Tool again and set your tool to draw “Fixed Size” to draw a rectangle to 216px width and 15px height. Position the rectangle as I have in the screenshot and then fill it with black. NOTE: We have a one pixel gap between the bottom of this new shape and the day squares beneath it.

Step 6:

Create a new Layer and name it “Month”. We need to create a similar shape to what we just created, sized 216px wide and 30px high. Using the Rectangular Marquee Tool create this shape, fill it with a dark grey, and place it just as I have WITHOUT the one pixel gap.

Step 7:

Next we want to create a selection sized 216px wide and 154px high and carefully place this selection over our small squares. Create a new Layer and drag it below all of our Layer Groups and name it “Stroke”. Fill this selection with # e7e9ea.

Step 8:

Now open up one of your Layer Groups and select one of our little squares. Go Layer>Layer Style>Color Overlay of #f0f4f7 and use the settings I have. Also apply an Inner Shadow using the settings I have.

Step 9:

Next, right-click that Layer and choose “Copy Layer Style”. Open up all 5 Layer Groups and hold down your Shift key and select all of the Layers and right-click again and choose “Paste Layer Style”. Check out the screenshot to see the results of our handiwork!

Step 10:

Select the “Day Names” Layer and add a Drop Shadow using the settings I have. Add a Gradient Overlay which runs from #ebebeb on the left to #f4f4f4 on the right.

Step 11:

Select the “Month” Layer and add an Inner Shadow using the settings I have below. Also add a Gradient Overlay which runs from #8bc620 on the left to #bcde4b on the right. Bump those colors in a little bit in the Gradient Editor like I have in the screenshot.

Step 12:

Let’s punch some holes into the top of our calendar! Create a new Layer and name it “Punch Out”. Grab the Elliptical Marquee Tool and, while holding down your Shift key, drag out a small ellipse and fill it with White. Place this ellipse up near one of the calendar’s corners and duplicate that Layer and move it over to the other corner. Hit Cmd/Ctrl + E to merge both of our “Punch Out” Layers together.

Step 13:

Cmd/Ctrl + Click the “Punch Out” Layer thumbnail to load those two little ellipses as a selection and then select the “Month” Layer in the Layers Panel and go Layer>Layer Mask>Hide Selection. Then click the little eyeball next to the “Punch Out” Layer to shut it off.

Step 14:

Set your foreground color to #7e7e7e. Select the Rounded Rectangle Tool (U) and look to the Tool Options Bar and set this Tool to draw a Shape Layer and set the corner radius to 5px. Draw out a small pill shape which will act as the clasp at the top of our calendar and run into one of the holes we’ve punched into it. Grab your Move Tool (V) and hold down your Alt/Opt key and drag a second clasp over to the other punched hole.

Step 15:

Next apply a Drop Shadow, Inner Shadow, Bevel and Emboss, and Stroke using the settings I have used. Copy those Layer Styles up to the second clasp shape.

Step 16:

Set your foreground color to White and grab the Text Tool (T) and choose a font you like and type out a month name and a year. TIP: To get the arrows in the type use the hot key Alt + 174 and Alt + 175. Apply a Drop Shadow and a Color Overlay using the settings I have.

Step 17:

Grab the Text tool and type out small abbreviations for the names of the days of the week. Align these using Photoshop’s Move Tool within the shape we created on the “Day Names” Layer just as I have in the screenshot.

Step 18:

Apply a Color Overlay and a Drop Shadow to this text and copy it to the other 6 text Layers.

Step 19:

The next step is a little tedious but it must be done! Grab your Type Tool and, using a bolder font face (I’m staying ultra-simple with Arial Bold), type out the number one for the first day of the month. I’m rolling with the layout of March, 2012. If your “Snapping” is still turned on this number should snap to the center of the square we want to align it in. Repeat this until you have all the days filled in! TIP: Align the text field CENTER for the first number, that way when you duplicate this little text field and get to double digits it will help keep you center aligned within the square without shifting to the right or left!

Step 20:

Apply the Color Overlay and Outer Glow that I have to the first number and then copy the Layer Style to all 30 of the other numbers.

Step 21:

Before we group all of these Text Layers together we need to dump in the “missing” days from the end of the previous month (this would also be the case for additional days running into next month). Add the text by duplicating a few of the Text Layers we already have and change the numbers to match the month you’re working on. Simply change the Color Overlay on these Layers to #bfbfbf.

Step 22:

Select all of our “Day” Text Layers and hit Cmd/Ctrl + G to group them all together.

Step 23:

To set the active/current day simply change the Color Overlay of that square and copy the Layer Style we have on our “March 2012” bit of text and paste it onto that day number Text Layer. TIP: You can quickly find the square under your number by Cmd/Ctrl + Clicking with the Move Tool (V).

Step 24:

Add a few small colored ellipses using the Ellipse Tool and setting different colors or even throw a Layer Style or two onto them! That’s it! Enjoy your calendar!