Real Time Javascript Calendars
This tutorial is for intermediate web developers / designers. You must have decent knowledge of your graphics program and be html savvy to some degree to make use of this tutorial outside of making the exact same calendar you see here. Knowledge of table design is a must. This tutorial is designed to give you a general idea of how they are made. I am using Paint Shop Pro 7 to make this calendar, however this tutorial is easily translated into any layers capable graphics program, provided you are familiar with it.
Script used in this calendar can be found here which is a part of the Javascript Source . However, because this tutorial requires it, the script is provided already on page two. Please remember to maintain credit in the script :)
| STEP 1 First you need to open a NEW IMAGE >>> WIDTH= 135 height= 95 RESOLUTION = 72.000 BACKGROUND = TRANSPARENT IMAGE TYPE = 16.7 Million COLORS ( 24 bit ) . Save as calendar. |  |
STEP 2 Decide
what color palette you are going to use for your calendar Choose a color
for the middle of your calendar as your foreground, and another color
for the border as your background. I used these colors : Blend mode : NORMAL Floodfill |
  |
STEP 3 Now go into SELECTIONS >> SELECT ALL.. then go into SELECTIONS again and choose MODIFY >> CONTRACT and set it to 1. Your selection should now be a pixel smaller all around like so > Now using your foreground color with settings same as before, floodfill your image.. Your results should be similar to the image on the right :) I've taken my selection off, however, you wont want to do that just yet!
|
 |
STEP 4 Now with your inside color still selected change your foreground color to a slightly darker color. I am choosing this color : #80B080 Take your airbrush tool now with approximately the following settings : Shape : ROUND Size : 36 Hardness
: 0 Airbrush around the inner edges of your calendar to give it some shading and texture.. So you calendar should look like this right now > |
 |
| STEP 5 Now select a much lighter color - white works as good as anything else - however I'm using a light yellow because I really wanna give this calendar some funky lighting ;) Here is the code for it : #FEFDA0 . With your airbrush tool at the same settings, spread your airbrush across the center of the image. Here is what mine looks like now.. |  |
| STEP 7 Well we have the foundation for the calendar prepared. What we need to do now is increase our canvas size so we can add our flourishments. I am increasing my canvas size to 300 x 300. In PSP 7 you can do this by going to IMAGE >> CANVAS SIZE and making sure both center image horizontally and vertically are checked. This example image has been resized but I wanted you to have an idea of how much space would be required around the calendar. |  |
STEP 8 So now we have to figure out what we want to add to our calendars :) For the purpose of this tutorial , I am providing a doll base, wings and some flowers, so we can try to keep our clocks to the same dimensions. This tutorials will hopefully teach you the basics so you can expand on them in your own time and create calendars completely yours alone. So here are all the items you will need. I encourage you to recolor things to better suit your tastes :) The base is from my dolls site Faery Grrl Dolls and wherever it is used must be credited with a link back to http://faerygrrl.com/dollz Please read the terms concerning use of my bases here if you are ever uncertain :) Thanks :) To use the gifs in PSP you will need to open them and go to COLORS >> INCREASE COLOR DEPTH >> 16 MILLION COLORS. Then go to LAYERS >> PROMOTE TO LAYER. and erase the background color. Now you can dress your faery up, add her wings, give her some pretty hair and merge her altogether :) Ok so I will wait while you bring another beautiful faery to life *Ü* |
The rest is up to you but have faith in yourself, you can do it !!! |
STEP 9 Ok you should have your faery together now :) Add a new layer to your calendar LAYERS >> NEW RASTER LAYER >>
name it FAERY. Copy your faery and paste her into this new layer. Now
use your mover tool |
|
| STEP 10 Adding Flowers! CLICK HERE! | |
with your border
( background ) color. 
and
move your faery to be sitting on top of your calendar like I have mine.
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
