Open Photoshop and create a new document of 600x450px. Set the “Background Contents” to “Transparent“.
Step 2: Setting Up the Background
I decided to use a nice wood pattern as background. Download the Wood Pattern from PulsarWallpapers and add it to the Photoshop stage. The image will be our background.
Step 3: Draw Calendar Shape
Let’s start building the calendar widget. Grab the Rectangle Tool (U) and draw a white rectangle of 280x260px right in the middle of the stage. Then apply to it the next layer styles:
This is how the calendar looks like until now:
Let’s start building the calendar widget. Grab the Rectangle Tool (U) and draw a white rectangle of 280x260px right in the middle of the stage. Then apply to it the next layer styles:
This is how the calendar looks like until now:
Step 4: Draw Calendar Header
Let’s draw the header, which will be the Months slider…each month will slide on the header, and the calendar will change its days. Of course, this is only a design and will have no functionality, but is the first step for any project. In general, the design is the first step of any type of project.
Select the Rectangle Tool(U) and draw a rectangle of 280x40px over the shape. Position it at the top of the shape and stylize it with the next layer styles:
This is how the header should look like:
Let’s draw the header, which will be the Months slider…each month will slide on the header, and the calendar will change its days. Of course, this is only a design and will have no functionality, but is the first step for any project. In general, the design is the first step of any type of project.
Select the Rectangle Tool(U) and draw a rectangle of 280x40px over the shape. Position it at the top of the shape and stylize it with the next layer styles:
This is how the header should look like:
Step 5: Draw Month Change Arrows
We still need to add some more touches to the header, like months, 2 arrows and a line. So add with the Horizontal Type Tool(T) a month name(I chose August), select the Custom Shape Tool(U) and add 2 small arrows and after, grab the Line Tool(U) and draw a dark horizontal line(#352111) at the base of the header.
Step 6: Draw Rows & Columns
Let’s proceed. We’re gonna build now the boxes for each day of the month but before doing this, I want to speak about “Guides”. Guides help you position images or elements precisely. Guides appear as nonprinting lines that float over the image. You can move and remove guides.You can also lock them so that you don’t move them by accident. To add a guide, firstly you need to activate Rulers(Ctrl+R) or go to View->Rulers. The rulers should appear on top and left side of canvas. Add a guide by drawing from rulers to stage.
Now that you know how to use guides, select the Rectangle Tool(U) and draw 5 rectangles of 280x40px from bottom to top. Then apply to them the next gradient overlay:
Arrange the rectangles exactly like in the image, from bottom to top. The remaining space between header and content will be for days(sun, mon, tue, wed, thu, fri and sat, exactly like on any calendar).
Now, make use of Guides and them at every 40px, so we may add some days inside them. To measure exactly 40px, you can use Ruler Tool(I).
Step 7: Delimit Rows & Columns
Now delimit each rectangle by drawing some horizontal and vertical lines of 1px using the Line Tool(U), darker and lighter to create a nice overall effect.
Start with vertical white lines and draw them 1px right to vertical guide:
Continue with horizontal white lines and draw them 1px under horizontal guide:
Add horizontal dark-gray(#c5c5c5) lines above each horizontal guide:
Finish with vertical gray lines by drawing them left to each vertical guide.
You should obtain nice rectangles delimited by lines:
Step 8: Add Weeks in Calendar
Now, above the rectangles, inside that white empty space, add each day of the week:
Step 9: Add Days in Calendar
Inside each small rectangle, add days from 1-31, but make sure to take into account the relation between each number and day. For example, 1st of august 2011 is Monday.
Step 10: Reduce Opacity of Inactive Days
I added inactive days as well, like 31 of July and 1,2 and 3 of September because they fits into calendar but I highlighted them. Draw a white rectangle over each inactive box and reduce its opacity to 50%. This way you’ll obtain clean inactive days.
Step 11: Highlight Current Day
The current day should be highlighted too, but in a different way. Choose a day you want to make it current, draw a rectangle of 39x40px and position it like in the image(starting from top-left corner). Color it in orange(#da603b) and add to it a 1px stroke(#7a2d16). The final rectangle should fall over dark-gray lines.
Step 12: Add Events
Now we’ll add a final touch. As any serious application calendar widget, our calendar should show days with events or tasks. Therefore, let’s add a day which has events assigned.
With Pen Tool(P), draw a small triangle of 7x7px, starting from top-left corner of a box, then color it in the same orange used for current day(#da603b).
With this last touch, our calendar widget is designed and ready to be coded for an admin panel of a fancy web application.
Final Result
Here is what we crafted finally.
Hope you enjoyed designing calendar along with me. Do you think adding something will make it more effective? We are hearing, do suggest us.
No comments:
Post a Comment