Making a Christmas Card

Transcription

CS3 Fireworks - Making a Christmas Card
Every Christmas people email around these great flashing lights animated Christmas
Cards. The following instructions will help you make one of these cards by creating an
animated GIF in Adobe Fireworks. Here is the finished non-animated card :
There are some great Christmas fonts on the DaFont website at:
http://www.dafont.com/theme.php?cat=804
We have chosen to use “Christmas Lights” by “Grey Wolf Websworks” for our project.
To find out all about DaFont, and how to download and install the fonts onto a home
computer, go to this web page:
http://passyworldofict.blogspot.com/2009/06/download-and-install-dafont-fonts.html
For our task, we will assume that people are working in a locked-down work environment,
and so they are not permitted to install new Fonts onto their computer. The work-around
we have used is to make our Dafont text in test mode on the Dafont Website, and then
Printscreen capture it into Fireworks. We then cropped around the text, used magic wand
to make the white background transparent, and also resized our image to suit our 500x370
card size.
Here are the resulting two Dafont images:
They will be coloured in using Fireworks later on, and then become the flashing lights on
our card.
Next we used Fireworks to draw a Christmas Tree. We used paintbrush effects of
“Charcoal > Textured” and “Air Brush > Normal” on the tree, and the preset “styles” to
alter the round balls that were made with the Oval Tool.
How to make and Animated GIF Christmas Card Using Adobe Fireworks
Page 1 of 10
We also used Fireworks to modify a photo of a Snowflake, by applying a number of preset
styles, and altering hue and saturation, to make a snow flakes background image.
The above four items will each be placed on a separate layer in our Fireworks document.
First we need to open up the “BackgroundSTART.png” snow flakes image using :
File > Open and then browse to where this image is on our hard drive.
Next we need to click open the right hand side “Layers” tab, (or do Window > Layers), so
that our display looks like this:
Next we double click on “Layer 1” (highlighted in blue above), and then rename this layer
to “Background” and press enter.
Page 2 of 10
Now we need to add three new layers to our project. Click on “Web Layer” so it is
highlighted in blue.
Then click on the “Folder +” icon, (as shown below), to add each folder.
Rename these three layers as: “Tree”, “Merry Text”, and “Xmas Text”; and then click to
highlight the “Tree” layer like this:
We can now bring in “TreeSTART.png”
image onto the “Tree” layer. We do this
by using :
File > Import and then browsing to
where our Tree Image file is. Fireworks
then shows an upside down “L” symbol.
We need to hold down our left mouse
button and draw a rectangle onto the
screen for the tree to go into.
We can then move our tree around, and
use the “Scale Tool” (press the letter Q to
get onto the tool), and use it to stretch our
tree taller to the required size, as shown
below.
We need to then make sure that we
change back onto the top left corner
“Black Arrow” tool when we are done.
Page 3 of 10
We can now click onto the “Merry Text” layer, and use File > Import to bring in the
“MerrySTART.png” text. Position and resize it with the scale tool to make it look like the
diagram below.
Do the exact same thing while clicked onto the “Christmas” text layer, to import in the
“ChristmasSTART.png” text.
Page 4 of 10
Flatenning Down our Layers into a Single Layer:
To make things easier for the next steps, we are now going to flatten our layers down into
a single layer. To do this, click on the “Web Layer” in the right hand corner layers palette,
and then hold down the Control key and press “A” to highlight all of the layers.
(All items on our screen should now have a light blue line around them to indicate that they
are selected).
Now from the top of screen menu bar do: Modify > Flatten Layers .
We will then have one layer called “Layer 1” with all four components in it like this:
We now need to use
Control and A (or hold
down Control and Click
each layer) to highlight
all four “Bitmap” layers.
Again do Modify >
Flatten Layers, to
produce a single layer
as shown to the right.
Save our project every
5 minutes or so as
“XmasCard.png”.
Creating Frame by Frame Animation using the “Frames” tab
We are now ready to start making our Christmas lights coloured and flashing.
To make the animation we will need to create a separate “Frame” each time we make the
next light colour in. The first frame will be as above (with no lights turned on).
To get into frames mode, we need to go to the top right hand corner tab next to “Layers”
tab that says “Frame” (or do Window > Frames). We then need to duplicate our first frame
by opening the frames options menu which is circled in the picture shown.
From the resulting pop-up menu we need to choose “Duplicate Frame”, click on it, and
then on the pop-up options for Duplicate Frame, leave it selected with “After Current
Frame” as shown below.
This will create a copy of our first frame, that is called “Frame 2”. We can then double click
to rename it as “Letter M” because in this frame we will colour in the “M” letter’s light.
Page 5 of 10
With Frame 2 “Letter M” selected, we need to zoom in with the magnifying glass tool onto
the letter “M” light, and then select onto the “Replace Color” tool by clicking onto the
bottom right hand corner of the rubber stamp tool, as shown below:
We then set the Brush size to 6, and then click onto the “From Color” in the Properties
Inspector at the bottom of the screen like this:
Page 6 of 10
We now click this from color square, and then move the mouse eye dropper symbol into
the white part of the “M” light to select this exact white color:
We now need to set the “To Color” which is the right hand side color, that our white will
change into when we paint over it. Click the right hand color square in the bottom of
screen Property inspector, and choose a blue color to have this:
We can now use our mouse like a paint brush, push the left button down and move all
around inside the “M” light to change its color to blue like this.
Page 7 of 10
From here onwards we just repeat our previous steps, to make a new Frame for each
letter that we color in, (Frames panel right hand corner Options panel and then click and
click “Duplicate Frame”, then ok on the pop-up box.
Rename the new frame as the next letter, eg. “E” letter and then zoom in and using the
colour replace tool, colour that light in. So each frame we make has one more light
colored in, and so by the last frame, all of the letter lights are coloured in different colors.
Note that we can also copy frames by holding down the Alt key, and then dragging a new
copy of the last frame down. (Slightly quicker than using the “Options” menu).
To test how our animation is going at any time, there is a set of Player buttons just above
the Property Inspector, and we can press “Play” and then stop to see our frames
continually play through: (Note: Play changes into a square stop after it is clicked)
Note that if we want to adjust the
speed of our animation, we need to
double click on the right hand side
number of a specific frame, and
this will bring up the “frame delay”
adjustments box.
Page 8 of 10
To finish off the animation we need to have some alternating “Lights all White” and “Lights
all Colored” layers to have all the lights flash on and off together around five times.
To do this we need to Duplicate our first frame, and then click the left mouse button and
drag it down to the bottom past the last “S” letter frame. (or we can use “Options” menu,
Duplicate Frame, and then select “At End” on the pop-up menu, and click ok).
To make room to be able to see all our frames, do Window > Styles (to untick the styles
panel), as well as Window > Color Mixer (to untick and hide the color mixer panel).
This should turn off all the panels, so that we only have our frames showing like this:
The Letter “S” frame highlighted above, is the one where all the lights are colored in, and
so if we Duplicate this to the end of the frames, then we can have the all white lights,
change to all colors lit up. (Rename the Layer to All Lights Colored”).
We can then duplicate and alternate these two frames a few times to get all lights flashing
on and off as the last part of our animation. Also change the flashing to be a bit slower, by
double clicking the right hand side number (probably a “7”) and then change it to be “14”
hundredths of a second. Use the bottom of screen player to get it the way you want it.
Then have a few frames with all the lights on, before the animation repeats itself.
The finished frames panel should look something like this:
Page 9 of 10
Building our animated Christmas card is finished, and we need to save it as a Fireworks
.png file. But to put it into an email to send to our friends, we need to do File > Save As,
and then click on the save as type (as shown below) and click on “Animated GIF”):
This will create a GIF file that we can then insert into an email (works ok in MS Outlook
mail, but does not seem to work in Hotmail unfortunately).
To get around the Hotmail problem, we can save our card as a Flash SWF file. We then
attach and send the SWF to our friends, and tell them to open it to play on their PC.
(But the Flash SWF does seem to play slightly faster than our GIF for some reason).
Page 10 of 10

Making a Christmas Card

Transcription

Similar documents

4th of July Community Festival and Fireworks Show

Banquet Information

In the Shop

DECK THE HALLS WITH CANADALE

DECK THE HALLS WITH CANADALE

creative juice - CE Meeting

Fireworks Display from Manoel Island in Sliema

Tales from TAFFY`s Tree - Tavistock Infant School

July 2016

as Village