Calendar Icon Design – Photoshop Graphic Design Tutorial 2
In Category:
Intermediate Photoshop Tutorials
I have noticed many people design nice web icons on their blogs, so I decided to create in this Photoshop tutorial a general icon design for a Calendar. Below is the outcome of this Photoshop tutorial:
We will start with a simple step of creating the base for our icon. Below, I have displayed the setting for my drop shadow and the base itself.
The next thing we do is to create the bar where we will keep our month and year. I have used the #ff5400 hex shown below, so if you want to achieve the same results, please use that.
Create a duplicated layer, and overlay it with this hex color #ffc000.
Now using the Eraser Tool approximately the size of 65, erase the lower half of your overlaid layer. Move down the layer two or three pixels down, and now your bar should look like this:
Create a new layer, and take your pencil. Set its size to 1PX, and draw a line right at the top of the overlaid layer, which should look like this:
Go to your layer style, and then blending options, applying the following settings to your layer.
Grab your text tool, and pick the month and year that you want it to display. I used Arial Narrow size 12. Check out the results below:
Apply these layer style settings to your text. You will need to change your blending options and the drop shadow settings.
As you can see, the area for all the dates is quite plain, so we need to create depth for it. Create a background with the hex color of #e3e3e3. Please see the exact results below:
Use your Eraser Tool at aproximately the size of 185, and apply it from the top.
Now you will need to start creating the boxes for the days. It does not have to be the exact number of days, but just to make it look a little more official, get it close to that number. We will start by creating a column with a 1px border inside our body of the calendar. The main color for the column will be #e8e8e8, and #c0bbbb for the border.
Now we have to cut squares out of that rectangle, so grab your Rectangular Marquee Tool, and just cut the rectangle into small boxes.
Now set the background to white, and duplicate the layers four times, and in the sixth column, make the style as your original column was.
Just to make this look a little fancy, make one of the boxes shaded with orange, and outline it with a more reddish orange. I used for the background #ffab6c, and for the border #ff6200.
You are basically done. You can always mess around with the smaller sizes, and see how it looks. My final result can be seen in the previous image, and right below:
This Photoshop Tutor tutorial has been tagged with: calendar, calendar drawing, calendar icon, calendar image, computer drawing, draw a calendar, drawing tutorial, Photoshop design tutorials