[Pro] animated graphic

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.

www.grassrootsweb.net/test 1
thank you again!!

Julie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Colin,

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

  1. Open the three images (I’ll call them A, B & C).

  2. Copy and paste B & C onto A as separate layers.

  3. Go to Window on the Menu bar and choose Animation

  4. Duplicate the image you see in the Animation strip window twice.
    (Click on the Duplicate icon to the left of the trash icon).

  5. For each frame in the Animation strip click on the ‘eye’ icons in
    the layer window, so that only the relevant image is present.

  6. Select a time duration at the bottom of the frame (say, 0.2 secs)

  7. Shift Click frames A & B to select both and click on the 'Tween"
    icon , next to the Duplicate icon.

  8. 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.

  9. Click on the Play icon to preview

  10. 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…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think I need to stretch first!!! LOL then i will go at it…

here is the link so far… just 2 pages but an idea…

www.grassrootsweb.net/test 1

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.

  1. Open the three images (I’ll call them A, B & C).

  2. Copy and paste B & C onto A as separate layers.

  3. Go to Window on the Menu bar and choose Animation

  4. Duplicate the image you see in the Animation strip window twice.
    (Click on the Duplicate icon to the left of the trash icon).

  5. For each frame in the Animation strip click on the ‘eye’ icons in
    the layer window, so that only the relevant image is present.

  6. Select a time duration at the bottom of the frame (say, 0.2 secs)

  7. Shift Click frames A & B to select both and click on the 'Tween"
    icon , next to the Duplicate icon.

  8. 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.

  9. Click on the Play icon to preview

  10. 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…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 22 Jul 2009, at 19:04, julie maxwell allen wrote:

I think I need to stretch first!!! LOL then i will go at it…

here is the link so far… just 2 pages but an idea…

www.grassrootsweb.net/test 1

thank you so much
ad colin said any one else with tips to animate… let us know TY!!

That link doesn’t lead anywhere. There’s lots of help about animated
GIFs in Photoshop help, and online at Adobe. This might be useful:

best wishes,

Paul Bradforth

http://www.paulbradforth.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

www.grassrootsweb.net/test%201 (until she fixes it)

Walter

On Jul 22, 2009, at 2:26 PM, Paul Bradforth wrote:

That link doesn’t lead anywhere.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul you are right…

I forgot to include the 1 in the link. but i uploaded it to
tweakinganother site folder.

here is the correct one:

www.grassrootsweb.net/tlc

and thank you for that link… I do have an animated up… needs
tweaking but right now it gives the idea

Julie

On Jul 22, 2009, at 2:26 PM, Paul Bradforth wrote:

On 22 Jul 2009, at 19:04, julie maxwell allen wrote:

I think I need to stretch first!!! LOL then i will go at it…

here is the link so far… just 2 pages but an idea…

www.grassrootsweb.net/test 1

thank you so much
ad colin said any one else with tips to animate… let us know TY!!

That link doesn’t lead anywhere. There’s lots of help about animated
GIFs in Photoshop help, and online at Adobe. This might be useful:

http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/

best wishes,

Paul Bradforth

http://www.paulbradforth.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter.

I did fix it…

www.grassrootsweb.net/tlc

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.

www.grassrootsweb.net/test%201 (until she fixes it)

Walter

On Jul 22, 2009, at 2:26 PM, Paul Bradforth wrote:

That link doesn’t lead anywhere.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

www.grassrootsweb.net/test%201 (until she fixes it)

And not only because I’m a pedant… include the prefix:

http://www.grassrootsweb.net/test%201

:slight_smile:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Julie

When you post links, please give the full URL like this:

http://www.yourdomain.com/folder_1. etc.

Also use an underscore or dash instead of a space for “test 1”,
otherwise the link breaks when automatically formatted in the list.

Yours would be: http://www.grassrootsweb.net/test_1, which means
renaming your test folder as test_1

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:

www.grassrootsweb.net/test 1

That link doesn’t lead anywhere. There’s lots of help about animated
GIFs in Photoshop help, and online at Adobe. This might be useful:

http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/

best wishes,

Paul Bradforth

http://www.paulbradforth.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You guys are a trip… you make me laugh and work hard… TY

ok here is the NEW correct link…

http://www.grassrootsweb.net/tlc

TY

On Jul 22, 2009, at 3:05 PM, Keith Martin wrote:

www.grassrootsweb.net/test%201 (until she fixes it)

And not only because I’m a pedant… include the prefix:

http://www.grassrootsweb.net/test%201

:slight_smile:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul,

thank you again for that link… I will work on it in the am…

I have posted the rough animated gif right now… maybe the
explanation to my questions will come in the morning…

but if any one has any simple ideas… thank you

Julie
http://www.grassrootsweb.net/tlc

On Jul 22, 2009, at 3:12 PM, Colin Alcock wrote:

Julie

When you post links, please give the full URL like this:

http://www.yourdomain.com/folder_1. etc.

Also use an underscore or dash instead of a space for “test 1”,
otherwise the link breaks when automatically formatted in the list.

Yours would be: http://www.grassrootsweb.net/test_1, which means
renaming your test folder as test_1

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:

www.grassrootsweb.net/test 1

That link doesn’t lead anywhere. There’s lots of help about
animated GIFs in Photoshop help, and online at Adobe. This might be
useful:

http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/

best wishes,

Paul Bradforth

http://www.paulbradforth.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Good morning - while you were sleeping, I had a little play with your
tree graphic with the result you see here:

http://www.herefornow.co.uk/Sandbox/Swing

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!):

  1. Open your base drawing of the swing (I downloaded your gif).

  2. Using the Lasso tool, select the little girl and swing image up
    only as far as the rope knots below the branch.

  3. Create a duplicate layer

  4. 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.

  5. 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).

  6. Open the Animation window and duplicate the frame for the number of
    steps you need - in my case 4 additional.

  7. Set the duration - in my case 0.3 secs.

  8. 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.

  9. Preview to see if you have what you want.

  10. “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! :wink:

Colin

On 22 Jul 2009, at 20:21, julie maxwell allen wrote:

ok here is the NEW correct link…

http://www.grassrootsweb.net/tlc


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That is great… I will print this out. pour the coffee and get
going!! thank you

On Jul 23, 2009, at 6:00 AM, Colin Alcock wrote:

Good morning - while you were sleeping, I had a little play with
your tree graphic with the result you see here:

http://www.herefornow.co.uk/Sandbox/Swing

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!):

  1. Open your base drawing of the swing (I downloaded your gif).

  2. Using the Lasso tool, select the little girl and swing image up
    only as far as the rope knots below the branch.

  3. Create a duplicate layer

  4. 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.

  5. 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).

  6. Open the Animation window and duplicate the frame for the number
    of steps you need - in my case 4 additional.

  7. Set the duration - in my case 0.3 secs.

  8. 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.

  9. Preview to see if you have what you want.

  10. “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! :wink:

Colin

On 22 Jul 2009, at 20:21, julie maxwell allen wrote:

ok here is the NEW correct link…

http://www.grassrootsweb.net/tlc


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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:

http://www.pixentral.com/show.php?picture=1RdTKlvhAPG4etZQ1nsbAkGihKPes

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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…

http://www.grassrootsweb.net/tlc

any suggestions??

Julie

On Jul 23, 2009, at 6:00 AM, Colin Alcock wrote:

Good morning - while you were sleeping, I had a little play with
your tree graphic with the result you see here:

http://www.herefornow.co.uk/Sandbox/Swing

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!):

  1. Open your base drawing of the swing (I downloaded your gif).

  2. Using the Lasso tool, select the little girl and swing image up
    only as far as the rope knots below the branch.

  3. Create a duplicate layer

  4. 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.

  5. 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).

  6. Open the Animation window and duplicate the frame for the number
    of steps you need - in my case 4 additional.

  7. Set the duration - in my case 0.3 secs.

  8. 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.

  9. Preview to see if you have what you want.

  10. “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! :wink:

Colin

On 22 Jul 2009, at 20:21, julie maxwell allen wrote:

ok here is the NEW correct link…

http://www.grassrootsweb.net/tlc


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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…

http://www.grassrootsweb.net/tlc

any suggestions??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ian,

thank you I will try that too…

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:

http://www.pixentral.com/show.php?
picture=1RdTKlvhAPG4etZQ1nsbAkGihKPes

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options