Ellie's Treasures PhotoImpact Tutorials-Blinkie Calendar

This will open in a new window and print out on standard 8½" X 11" paper

For information about which fonts, programs, etc I used to construct my pages and my headers, click here.

Font: BaaBookHmkBold

Font: Bentley for both

Font: Atlantis

The font name is typed in that font. If you see your default font, such as Times New Roman, it means you don't have that font installed.
Just left click on the font or right click and save target as to save the font to your computer.
If you want to learn how to install fonts, click here.
For more examples, click here

For this tutorial you will need:
Ulead PhotoImpact - available for purchase or trial here
Ulead Gif Animator - available free for PI 11 owners here
Available for purchase or trial for all others here
You may also use any other animation program you happen to have.

This may seem like a lot of steps and there's lots to do to complete the calendar, but it's not hard.
And once done, you can save as a template to reuse many times over.

Filters and materials needed
No filters needed
You need a tube, psd file, or object.

I am assuming you know the basics of PhotoImpact and where the tools can be located.

Here are some arrows and bars you can drag and drop where you need to mark or underline where you are. .
Just left click and drag to where you want it then let go.
They will stay where you put them until you close your browser.

Let's Get Started!
For your ease in getting to various parts of the tutorial, here are some links
Getting started: setting up the grid, just below
Adding the numbers and text
Deciding size and layout of calendar
Adding the grid to a larger canvas
Adding the blinkie lines
Make 1 or 2 more frames (2 more is the best)
Animation

MAKING THE CALENDAR GRID

Setting up the grid

1. Open a new white canvas, you can change this color later.

2. Decide what size you want your grid to be.
Make allowances for the fact that you'll be adding a border,
possibly a tube at the side or top outside the grid so don't make it too large.
A good size is 140 wide and 120 tall if you are not adding the month to the grid.
140X140 if you are adding the month inside the grid.
You will use multiples of 7 across and 6 down and adjust the grid accordingly
Normal month will be 4 1/2 weeks, and 7 days, of course LOL, Your grid will always be 7 across.
add one row for the DOW initials that makes it (usually) 6 rows by 7 columns
If you want to have the month enclosed in a box right at the top that will be 7 rows tall instead of 6.
(you can add the month and year outside of the grid at the top of the canvas
you will be switching to later if you don't want to put them inside the grid)
If your month is spread across 6 weeks you will need to make it one row taller,
7 for grid without month, 8 if you need a box for the month at the top.
(see April calendar at the top to see what I mean)
to make any other size, just use multiples of 7 across and 6 down and make the grid that size
I made mine 140X140 (7 rows down, 7 across, 20X20 each, with a row for the month)

3. To change the grid size you see, go to File>Preferences>General
and go down to the Guidelines & Grid section.
Change it to 20X20
X

Now go to View>Guidelines and Grid, and click on grid.

This should now show up on your new canvas like this.

Zoom in.
You will be doing most of the work zoomed in for better control.

Picking the colors
4. Pick 2 colors, 1 for background, one contrasting for grid, text and numbers
Fill the canvas with the color you want for the calendar background or leave it white..

Drawing the grid lines

Go to your line and arrow tool (it's behind the path drawing tool),
set the shape at straight, color what you want the grid to be, 2D object,
(if the panel isn't showing, click on panel),
In the panel click the outline tab, choose the style as straight line,
arrow as straight line and then select width as hairline,
make sure you set it to hairline last as you lose the options once you pick this setting.

Click on the options tab and uncheck anti-aliasing.
It won't make much difference in the hairlines but in the thicker lines
it will add a band of another color along it, and we don't want that.

Note: for the April bunny one, I used squares instead of dashes,
I put the width at 1, contrasting color, make sure anti-aliasing is off (the options tab of the line and arrow tool),
I picked the small box style at the top of the list and for Arrow of course I picked the straight line with no arrowhead.
Once done I didn't like it so I changed the lines to dashes. LOL Couldn't see much movement with the squares at this small a size.

In your canvas, starting at top to bottom, or left to right, follow the gridlines with your line tool,
don't do the one right under where the days of the week will be (or the month/year row if you have added that)
Don't do the borders either. All of these lines will be drawn a little thicker.
I used black as I intend to save the whole grid as an object later.
You will have a layer for each line. This is so easy.
Just click at the beginning of the line and click on the end of the line and you will have a straight line in-between.
As you draw the lines, each one will appear on a separate layer. This is good, it's what we want.
A little trick, if you are having a problem making the line straight, hold the
shift key down as you draw and it will keep the line straight.
This works in any graphics program, at least all I have tried.
Making these lines is very easy and quick, only takes a minute or two.

This is the shot without the heavy lines
I also made no vertical lines in the first three blocks, leaving them as one section to add my name to.
It's not as difficult as it looks here, I still had the grid turned on when I added the lines.

Stop when you have all but the line under the days section
(and the month/year section if you added this) and the borders.
Now change your width in the panel to 1 and do the missing lines and borders.
This is the shot with the heavy lines, no borders

And this is what it looks like with the borders.

Now select all and right click and save as one object or save as multiple objects.
Just drag it over and drop it into the object library where you want it.
Make sure your background color isn't the same color as your lines or you won't be able to see it. LOL.
I dragged mine as a group so I could change the lines around if I wanted to later.
When I dropped it, it looked like one column was wider than the others, I redid it, same thing.
So I opened a new canvas and checked, it went in properly, so if it does this to you, don't worry.
Deselect the grid. Save your file as a ufo file in layers.

You are done the grid.

ADDING THE NUMBERS AND TEXT

1. Click on the text tool and pick a font and color
Pick 2D for the mode

Each letter and number and word you type will go on it's own layer automatically.
Again, that's just what we want.
I am in the habit of typing then hitting the move tool to set the text
and I keep repeating that till all of the text, etc is typed.

Pick a font that is easy to read at small sizes. You can use a simple font, such as Arial.
You can use a fancy font as well. Experiment to see if it is readable at the 100% size of the calendar.
This will be at the true size of the calendar and you will see very easily if it's readable at that size.

Keep in mind that with the calendar zoomed up to work on it, the text will look funny,
blurry and out of focus. Reduce to actual pixels to see how they will look at the right size.
You may have to try out a few before you find what you like.

I chose Atlantis, font size 20, for the calendar (the March Doll one) after checking the grid
at it's true size to make sure it was readable at that size and it was what I wanted.
As I said before, it doesn't really matter because you can change it later.
You may have to go bigger or smaller depending on the font used.
Some are very large and some are tiny.
I check out some text and some of the larger numbers, like 39, 27, etc
to see how the font will work in the squares and at what size.
Also, keep the numbers fairly small, don't fill up the whole square or it will look too crowded.
Use your judgment here.

I put the month and year in, then selected both, right clicked>Align>Bottom,
then with both selected merge as single object and in the move toolbar click on center horizontally.
If you don't have it where you want vertically then place it now.
Be aware that once you merge into a single object you can't change the font or font size.
I left mine unmerged as I wanted to have the option to change it.
I went to File>Preferences,>General>Grid again and changed the grid to 10X10.
This will help in placement of numbers, words, etc.
You don't have to do this if you feel you have a good eye for this.
I quickly just typed in all the numbers into the about right spot, didn't stop to arrange them.
Once done, I went back and arranged them all in the center of each square.

You can use just the initial letter for the days, such as S for Saturday and Sunday,
M for Monday, etc. or abbreviations, such as Sun, Mon, etc

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SAVING AS A TEMPLATE FOR LATER RE-USE
You can drag each one to your object library as you go and reuse them
for other calendars just as I did with the grid lines.
You will be able to change the color, size, font, etc. when you reuse it.
So you only have to do these basic steps once if you save them.
You can also save the entire thing as a ufo when you're done and
you will still be able to change all the components if you don't merge before saving.
And my favorite method? I open a canvas, white, in this case it was 400X400
and as I made each word or number I right clicked, duplicated and dragged to the new canvas.
When the new canvas is done, I will have all of the months, numbers, etc.
When I start a new calendar, I can just open this canvas, duplicate it, close the original
and there I have all of the parts ready to drag and drop onto the new calendar!
Because I wanted to reuse the templates, I made one without a month section and one with
for whatever way I wanted to make them another time.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I now made sure all of the objects were deselected and
filled the background with a gradient, made of a pale green to a med green.
I was going by the colors of the tubes I wanted to add.

If you choose to change the color of the fonts, grid, text, etc all at once,
in the layer palette select each of the layers, go to the fill tool, pick your color and click ok.
Or you can click on each component, click on the text tool and change it there.
Ready for the next step?

CREATING THE REST OF THE CALENDAR

Deciding the size and layout of your calendar
You are now going to open a new blank white canvas the size you want this part of your calendar to be.
This includes the grid and rectangle around which the blinkie lines will be flashing.
But first you have to decide the layout of the finished calendar and the size.

The size will vary whether you enclose the whole calendar within the blinkie borders,
adding tubes to the top and/or sides or adding tubes to the canvas outside of the blinking lines.
You do need to add an area at the top to place the month and year,
if you haven't added them to the grid as explained above.
If you have added the extra row to the grid for your month and year,
you can even stop here and just go to the section for type 3
where you add the border, and don't continue on to put it on a larger canvas (click here)
I imagine you will probably want to add more though!

Type 1
You can have the blinkie lines going around the calendar with no border
Like this one

This may not be the best example, it's the first one I made. LOL
This is the simplest one
This is on a 180X220 canvas Type 2
You can add tubes here and keep it all inside the blinkie,
just like above but you will add a border for the blinkie lines.
This is just like type 1 but has a dark border for the blinkie lines

This is on a 150X190 canvas

Type 3
The animated lines are around the original grid
and the grid is placed in an expanded canvas
Like this - with a final thin border going
around it to finish it off.

The final result is on a 200X210 canvas.
Also Type 3
You can make it like this on a transparent canvas.
The same as the type to the left, except that the canvas
is transparent and you do not add the thin border
around the outside of the final canvas.

The final result is on a 250X250 canvas

Add grid to larger canvas

General instructions
You must copy and paste the grid into the new canvas BEFORE you add the blinkie lines.
If you don't, it will be hard to put the lines in later as they may not copy with the grid.
(Edit>Copy; to new canvas, Edit>Paste as an object)

Type 1
Your grid is probably 140X120,unless you added the row for the month and year,
in that case it will be 140X140. My final example was 180X220
so create your new, larger canvas in that size or adjust accordingly.
Use the same color as your calendar background.

If you look at the final calendar in the section above, you will see that it's wider than this one shows.
I realized there was no room for the dashes so I made a bigger canvas and copied-pasted the grid into it.

You now add the month, year and any tubes or objects you want within the blinkie borders, each on separate layers.
Place them where you want them, making sure they are not too close to the edges.

If you are adding a dark blinkie border continue on to the type 2 section below.

If you are not adding a darker border but just the blinkies around the edges,
click here to go to the section on adding blinkie lines.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Type 2
Follow the steps as for Type 1 above.
The canvas can be a bit narrower as you are adding the dark border to put the blinkie lines in.

Add a 5 or 6 pixel border in the color you used for the gridlines and text.
(Format>Expand Canvas - "Expand sides equally" checked; Expand color:
right click and pick the color on your palette you're going to use)
This will make your grid 10-12 pixels wider and taller.

Now click here to go to the section on adding blinkie lines.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Type 3

Working with your grid canvas and not the expanded canvas as the first two types,
add a 5 or 6 pixel border in the color you used for the gridlines and text.
(Format>Expand Canvas - "Expand sides equally" checked; Expand color:
right click and pick the color on your palette you're going to use)
This will make your grid 10-12 pixels wider and taller.

Note: if you've come directly here from making the grid and don't want
to add anything else, go to the Adding Blinkie Lines section below.
Otherwise, just continue on with this section.

Make the larger sized canvas you want to use, the same
background color as your grid or on a transparent canvas.
I made the March doll one 200X210 and flood filled it with the same gradient I used in the grid,
and the April bunny one 250X200 on a transparent background
but this will vary depending on where you want to place the tubes or objects and how big the tubes are.
If you are using a solid or gradient background instead of a transparent one,
put a thin border, about 2 pixels, around the outer edges of the canvas,
in the same dark color you used for the borders and text and grid lines, to finish it off.

Copy and paste the bordered grid into your final canvas.

Add the tubes and arrange them and the grid into the final layout.
Also put on your watermark if wanted or use the text tool to type your name in a suitable spot
such as I have in the April bunny calendar and the March bear girl one.
The April bunny one has two nice sized blank squares at the top and the bottom to add text to,
since April starts on a Saturday and ends on a Sunday.

Don't merge the background, tubes and grid together.
You will want the dash lines to be under the tubes that overlap the grid.

You're now ready to add the blinkie lines

Adding the blinkie lines

Setting the line and arrow tool
Click on the Line and arrow tool. It's behind the Path tool so hold down
the little arrow next to it and you will see the line and arrow tool.
Set it to width of 1, style-pick the dashed line 3rd from the top.
Arrow, pick the straight line with no arrowhead.

Zoom the canvas till you can see the border clearly
(about 150% usually, unless the blinkie is very small).

As you draw each line, it will go in as a separate layer, which is just what we want.

Lines for frame 1
For type 1, the calendar with no dark border around the canvas, your lines need to be right at the edges for this method.
For all of the other types, put the dashes right about the middle of the border.

Put your cursor in the top left corner, and draw the line down. It will stay straight.
Stop at the bottom corner, Now draw a line from bottom left to bottom right. Stop again.
Continue around the blinkie. Use a contrasting color (either light on dark or dark on light)
or you can color every other dash a different color after you're done, such as I did with the April bunny.
I used the magic wand to pick every other dash and flood filled them. It doesn't take long.
If you find that the thickness of the line seems to vary between the different sides,
being thinner at the top and bottom lines, then duplicate the left line and
copy it to the right side and do the same with the top and bottom lines.

If you look at the examples just above, you will see that the left line starts at the top edge,
bottom starts on left edge, right starts right at bottom edge, and top line starts right at right edge.

I recommend you name all of the layers, right, left, top, bottom
so you can select them easily when it's time to move them.
You can rename them by right clicking, click on properties and change the name there.

Final Edit
Once done putting in your lines, right click on layer palette on the tube layers and go to Arrange>Bring to front.
This will put the tube on top of the blinking line, which looks better than
having the blinking lines go over top of the tube! LOL
If you want to sharpen or use the unsharp mask, do it now as well.
If you do it on each frame separately they will never turn out the same twice
(I know, I tried - the animation went from sharp to fuzzy to sharp to fuzzy
even though I used the same setting on both frames LOL)

Duplicate canvas and then merge frame 1
If you're happy with the whole thing, Control-D to duplicate the canvas while it's still in layers,
then back to your original canvas, select all objects and merge as single object.
(do not "merge all", especially if you are using a transparent canvas
it will lose it's transparency) and save as a ufo file. Save it as frame 1.
~~~~~~~~~~~~~~~~
Alternate method: You could duplicate each layer, hide the new layers by clicking on the eye,
merging as single object the rest of them and then name it frame 1 and saving as Frame 1,
then unhiding the new layers to work on them. I find just duplicating the canvas much easier and quicker.
~~~~~~~~~~~~~~~~

Making frame 2
In your duplicate canvas, you will now be moving the lines with the arrow keys on your keyboard,
not with your mouse, for greater precision.
Make sure you do not move anything else, like the tubes, or they will bounce in the animation.
Click on the left line layer, and move it so it ends near the bottom edge,
then the bottom line layer and move it so it ends at the right edge and so on.
You are putting each of those lines in the opposite position than they were in before.
Frame 1 Frame 2

Select all objects, merge as single object and save this as Frame 2.ufo
If you are using the alternate method and keeping all of this on one canvas,
hide the merged frame 1 layer and merge the rest as a single object
and save it as Frame 2 without turning the frame one layer back on.

On further experimentation, I found that 3 frames makes the flow smoother than 2 frames.
If you want to make 3 frames, just make another one the same way as frame 2, but in
frame 2 don't move the lines as much and then in frame 3 move them to their final position.

You're now done the creation - on to the animation! Very easy.

ANIMATION

Open Ulead Gif Animator.

Go to File>Animation Wizard.

In the first window, check the size of your canvas and insert the numbers here.

In the next window, add your two or three frames by browsing to them.

In the next window, pick the delay time and that will be 10.

In the last window click on finish and the wizard will close.
You will now see your frames along the bottom.

Go up to the top of the window and click on the preview tab and you will see how it turned out.

If you're happy, go to File>Save as and save it as a gif.
If you want to optimize, go to the optimize tab right next to the edit tab instead
or go to File>Optimize Wizard. I didn't use it so can't help you there, it's been awhile and I can't remember. LOL
But these calendars are a small file size and are not too large even un-optimized.
My un-optimized calendar was only 20 kb. You can only do this un-optimized if you don't have a transparent canvas.

If you have put your calendar on a transparent background,
to save your gif with the transparency intact you must click on the optimize tab,
and along the top where you see Matte, left click on that and pick none.

That's it, you're now done your first blinkie calendar.
And if you saved in layers as I showed you, you will be able to use them as a template to make another one.
Back to top

Here are a few more examples of my calendars. As you can see, I prefer the ones on a transparent canvas.

l hope you had fun!
Back to top

If you have any questions or suggestions, click on the email button below to contact me. Have a wonderful day!

These tutorials are all my own creations.
Any resemblance to any other tutorial is purely coincidental and unintentional.
Feel free to share any of my tutorials on this site by a link back to my site,
but do not copy and send the entire tutorial to anyone or any group.
You may also save it to your hard drive (go to File>Save As, and save as an mht file-
this will save the pictures with the page in one single file and will open in a browser)
or print it out for your own personal use.
©2003-2010 Ellie's Treasures

online dvd rental

Back to top
Webpage Design Information
This webpage background was made in PhotoImpact with a tutorial by Deb DeHaven
Sadly, she passed away and her site is gone.
The font I used for the text on the buttons is BrockScript
Click on the font name to download the font.
I use PhotoImpact to make all of my headers due to the amazing
3D text it has and the wonderful presets available free online
Most of the presets I use are either the ones that come with PhotoImpact, usually the Gel ones,
or from Deb's PI Tutorials and More (see below) or Carol Oyl's site
This is the address to Deb's old pages
http://www.fortunecity.com/skyscraper/millenit/1716/pitutorials/objects/presets/presets1.html
I can't find any links to her new pages but the presets are still on this page for download.
For more sites to find PI Presets, take a look at my Great Beginnings page.