Good morning, I am working on a whole new graphic for the website I am working on, based on all of your thoughts… which I thank you!!
I have posted the new front page graphic. As you see there is a little girl on a swing. I saved this pix in 3 different angles. I would like to give the illusion of her swinging when they enter this first page.
That’s so much better than the original tree and I like the subtle
smile on the tree trunk.
If you want to have the little girl swinging, I suggest you separate
the branch and swing as a separate layer, to keep the file size down.
In Photoshop (|CS3) you can animate just this by importing your 3
different swing angles, opening the Animation Window and using the
‘tweening’ function to make an animated GIF.
Just one suggestion - I am sure others will follow.
Colin
On 22 Jul 2009, at 15:33, swimmer35 wrote:
Good morning, I am working on a whole new graphic for the website I
am working on, based on all of your thoughts… which I thank you!!
I have posted the new front page graphic. As you see there is a
little girl on a swing. I saved this pix in 3 different angles. I
would like to give the illusion of her swinging when they enter this
first page.
I will try it… actually the branch is separate from the tree… just
because of this idea
I thought you would… when i repost I will email.
Julie
On Jul 22, 2009, at 10:58 AM, Colin Alcock wrote:
Good afternoon - from this side of the pond!
That’s so much better than the original tree and I like the subtle
smile on the tree trunk.
If you want to have the little girl swinging, I suggest you separate
the branch and swing as a separate layer, to keep the file size
down. In Photoshop (|CS3) you can animate just this by importing
your 3 different swing angles, opening the Animation Window and
using the ‘tweening’ function to make an animated GIF.
Just one suggestion - I am sure others will follow.
Colin
On 22 Jul 2009, at 15:33, swimmer35 wrote:
Good morning, I am working on a whole new graphic for the website I
am working on, based on all of your thoughts… which I thank you!!
I have posted the new front page graphic. As you see there is a
little girl on a swing. I saved this pix in 3 different angles. I
would like to give the illusion of her swinging when they enter
this first page.
I am having some issues with ps …I placed all three gif files… on
top of each other. I am trying to get more animation frames… but
unsure how to. can you give me more detailed instructions to do this.
please…
if you want email me off topic…
Julie
email@hidden
On Jul 22, 2009, at 10:58 AM, Colin Alcock wrote:
Good afternoon - from this side of the pond!
That’s so much better than the original tree and I like the subtle
smile on the tree trunk.
If you want to have the little girl swinging, I suggest you separate
the branch and swing as a separate layer, to keep the file size
down. In Photoshop (|CS3) you can animate just this by importing
your 3 different swing angles, opening the Animation Window and
using the ‘tweening’ function to make an animated GIF.
Just one suggestion - I am sure others will follow.
Colin
On 22 Jul 2009, at 15:33, swimmer35 wrote:
Good morning, I am working on a whole new graphic for the website I
am working on, based on all of your thoughts… which I thank you!!
I have posted the new front page graphic. As you see there is a
little girl on a swing. I saved this pix in 3 different angles. I
would like to give the illusion of her swinging when they enter
this first page.
It’s sometime since I have done this, and a quick test didn’t ‘tween’
as I remembered, but so that you can use your younger and more agile
brain on it, I’ll try and set out the basic steps for you to
experiment - but it’s one of those things that’s easier to explain on
screen.
Open the three images (I’ll call them A, B & C).
Copy and paste B & C onto A as separate layers.
Go to Window on the Menu bar and choose Animation
Duplicate the image you see in the Animation strip window twice.
(Click on the Duplicate icon to the left of the trash icon).
For each frame in the Animation strip click on the ‘eye’ icons in
the layer window, so that only the relevant image is present.
Select a time duration at the bottom of the frame (say, 0.2 secs)
Shift Click frames A & B to select both and click on the 'Tween"
icon , next to the Duplicate icon.
Set the number of frames to ‘tween’ between the two originals ( and
that’s where I became unstuck!) and you should get a series of
intermediate frames.
Click on the Play icon to preview
Repeat for second pair of frames and save for web.
I’ll try and look at it in more detail tomorrow, but you may well come
up with the answer first.
Or perhaps someone more experienced in Photoshop can step in here.
Please!
Colin
On 22 Jul 2009, at 16:58, julie maxwell allen wrote:
I am having some issues with ps …I placed all three gif files… on
top of each other. I am trying to get more animation frames… but
unsure how to. can you give me more detailed instructions to do
this. please…
thank you so much
ad colin said any one else with tips to animate… let us know TY!!
j:)
On Jul 22, 2009, at 1:54 PM, Colin Alcock wrote:
It’s sometime since I have done this, and a quick test didn’t
‘tween’ as I remembered, but so that you can use your younger and
more agile brain on it, I’ll try and set out the basic steps for you
to experiment - but it’s one of those things that’s easier to
explain on screen.
Open the three images (I’ll call them A, B & C).
Copy and paste B & C onto A as separate layers.
Go to Window on the Menu bar and choose Animation
Duplicate the image you see in the Animation strip window twice.
(Click on the Duplicate icon to the left of the trash icon).
For each frame in the Animation strip click on the ‘eye’ icons in
the layer window, so that only the relevant image is present.
Select a time duration at the bottom of the frame (say, 0.2 secs)
Shift Click frames A & B to select both and click on the 'Tween"
icon , next to the Duplicate icon.
Set the number of frames to ‘tween’ between the two originals
( and that’s where I became unstuck!) and you should get a series of
intermediate frames.
Click on the Play icon to preview
Repeat for second pair of frames and save for web.
I’ll try and look at it in more detail tomorrow, but you may well
come up with the answer first.
Or perhaps someone more experienced in Photoshop can step in here.
Please!
Colin
On 22 Jul 2009, at 16:58, julie maxwell allen wrote:
I am having some issues with ps …I placed all three gif files…
on top of each other. I am trying to get more animation frames…
but unsure how to. can you give me more detailed instructions to do
this. please…
That’s because there’s a space in it. If you put %20 in there where
the space is, it will work, but it would be better if Julie made the
URL legal in the first place. test_1 or test-1 or test1 will all work
fine as folder names.
Julie
On Jul 22, 2009, at 2:46 PM, Walter Lee Davis wrote:
That’s because there’s a space in it. If you put %20 in there where
the space is, it will work, but it would be better if Julie made the
URL legal in the first place. test_1 or test-1 or test1 will all
work fine as folder names.
Another quick thought for a coarse (stepped) animation, would be to
rotate the swing in a series of Photoshop layers, before going to the
Animation feature. How many steps depends on how patient you are, but
it only takes a few seconds to duplicate a layer and rotate it
slightly around a fixed point, and then repeat a few times. It may
help with the ‘tweening’, too to have more intermediate frames.
Paul
Thanks. A useful link for me to refresh my limited knowledge.
Colin
On 22 Jul 2009, at 19:26, Paul Bradforth wrote:
On 22 Jul 2009, at 19:04, julie maxwell allen wrote:
Another quick thought for a coarse (stepped) animation, would be to
rotate the swing in a series of Photoshop layers, before going to
the Animation feature. How many steps depends on how patient you
are, but it only takes a few seconds to duplicate a layer and rotate
it slightly around a fixed point, and then repeat a few times. It
may help with the ‘tweening’, too to have more intermediate frames.
Paul
Thanks. A useful link for me to refresh my limited knowledge.
Colin
On 22 Jul 2009, at 19:26, Paul Bradforth wrote:
On 22 Jul 2009, at 19:04, julie maxwell allen wrote:
It’s very rough, using just three’states’ of the artwork - I reckon 5
7 would be better, but it will increase the file size. For this
reason isolate the swing from the tree and branch as a separate image
when you do yours.
Here’s how it was done (more quickly than to write the instructions!):
Open your base drawing of the swing (I downloaded your gif).
Using the Lasso tool, select the little girl and swing image up
only as far as the rope knots below the branch.
Create a duplicate layer
Using the Free Transform tool, hold down the Command (Apple) key
and select the middle handle at the bottom of the selection and drag
to a new position in the arc of the swing. Press Return.
Duplicate the layer and repeat 4 for each intermediate position.
(You can correct distortion, if it’s too obvious, by careful use of
the Free Transform tool).
Open the Animation window and duplicate the frame for the number of
steps you need - in my case 4 additional.
Set the duration - in my case 0.3 secs.
Click on each frame and close all of the ‘Eye’ icons in the Layers
pallette, except for the position of the swing you want to show in
each ‘step’. I.e. frame 1 will show only the base layer, frame 2 layer
2, the next step of the movement, etc. Don’t forget you need to have
enough frames that take you through the swing one way and then back to
the first frame position, by choosing the relevant layer visibility.
Preview to see if you have what you want.
“Save for web…” and reduce the colours to, I suggest, 64.
(Experiment, you may get away with less, reducing the file size).
I think that may do what you want, in a simple way - until you go to
Flash or Video techniques, of course!
Colin
On 22 Jul 2009, at 20:21, julie maxwell allen wrote:
It’s very rough, using just three’states’ of the artwork - I reckon
5 - 7 would be better, but it will increase the file size. For this
reason isolate the swing from the tree and branch as a separate
image when you do yours.
Here’s how it was done (more quickly than to write the instructions!):
Open your base drawing of the swing (I downloaded your gif).
Using the Lasso tool, select the little girl and swing image up
only as far as the rope knots below the branch.
Create a duplicate layer
Using the Free Transform tool, hold down the Command (Apple) key
and select the middle handle at the bottom of the selection and drag
to a new position in the arc of the swing. Press Return.
Duplicate the layer and repeat 4 for each intermediate position.
(You can correct distortion, if it’s too obvious, by careful use of
the Free Transform tool).
Open the Animation window and duplicate the frame for the number
of steps you need - in my case 4 additional.
Set the duration - in my case 0.3 secs.
Click on each frame and close all of the ‘Eye’ icons in the
Layers pallette, except for the position of the swing you want to
show in each ‘step’. I.e. frame 1 will show only the base layer,
frame 2 layer 2, the next step of the movement, etc. Don’t forget
you need to have enough frames that take you through the swing one
way and then back to the first frame position, by choosing the
relevant layer visibility.
Preview to see if you have what you want.
“Save for web…” and reduce the colours to, I suggest, 64.
(Experiment, you may get away with less, reducing the file size).
I think that may do what you want, in a simple way - until you go to
Flash or Video techniques, of course!
Colin
On 22 Jul 2009, at 20:21, julie maxwell allen wrote:
Save the frames as PICTs. PICTs are quite big, but GIFs created from them are small. The animation uses the default settings, with Loop-Forever and Interframe Delay-30:
As Colin said, the child and rope need to be separated from the tree. There are numerous ways of doing this—in PS, or with Freeway’s Paths tool, or in a drawing program like Intaglio.
It’s very rough, using just three’states’ of the artwork - I reckon
5 - 7 would be better, but it will increase the file size. For this
reason isolate the swing from the tree and branch as a separate
image when you do yours.
Here’s how it was done (more quickly than to write the instructions!):
Open your base drawing of the swing (I downloaded your gif).
Using the Lasso tool, select the little girl and swing image up
only as far as the rope knots below the branch.
Create a duplicate layer
Using the Free Transform tool, hold down the Command (Apple) key
and select the middle handle at the bottom of the selection and drag
to a new position in the arc of the swing. Press Return.
Duplicate the layer and repeat 4 for each intermediate position.
(You can correct distortion, if it’s too obvious, by careful use of
the Free Transform tool).
Open the Animation window and duplicate the frame for the number
of steps you need - in my case 4 additional.
Set the duration - in my case 0.3 secs.
Click on each frame and close all of the ‘Eye’ icons in the
Layers pallette, except for the position of the swing you want to
show in each ‘step’. I.e. frame 1 will show only the base layer,
frame 2 layer 2, the next step of the movement, etc. Don’t forget
you need to have enough frames that take you through the swing one
way and then back to the first frame position, by choosing the
relevant layer visibility.
Preview to see if you have what you want.
“Save for web…” and reduce the colours to, I suggest, 64.
(Experiment, you may get away with less, reducing the file size).
I think that may do what you want, in a simple way - until you go to
Flash or Video techniques, of course!
Colin
On 22 Jul 2009, at 20:21, julie maxwell allen wrote:
First check that for each frame of the animation you have only one
layer visible - you can see this in the layers palette where the
little ‘eye’ icon turns visibility on and off. As you progress with
each step you should be turning on visibility for the frame image
required and turning off the image(s) in the previous frame.
Also, your graphic jumps from the back position to the starting frame
at the end of each swing. Add a reverse sequence of your frames that
step backwards to the first. This will smooth the swing transition.
You can also increase the duration of front and back frames slightly
to give that slight dwell that you get you get when a real swing
changes direction.
Colin
On 23 Jul 2009, at 15:28, julie maxwell allen wrote:
The directions are perfect… but having one issue…
the graphic is staying on the page as it moves… like a rainbow/ 3d
effect… please look…
BTW anyone have any issues w CS3 and its cache… I have ben working a
couple of times w this and creating new files to see different
examples… but at one point after making a layer I was not able to
select the free transform tool. any suggestions? is this the cache and
how do you empty it in CS3?
On Jul 23, 2009, at 10:23 AM, IanB wrote:
An alternative way is to create the animation in GIFBuilder Carbon.
It’s freeware and easy to use.
Here’s an example made from 2 frames:
Save the frames as PICTs. PICTs are quite big, but GIFs created from
them are small. The animation uses the default settings, with Loop-
Forever and Interframe Delay-30:
As Colin said, the child and rope need to be separated from the
tree. There are numerous ways of doing this—in PS, or with Freeway’s
Paths tool, or in a drawing program like Intaglio.
