1. Creating Frame-Based AnimationsCreating a stage size and a frame guide| 00:00 |
Now to (UNKNOWN) Sprite graphic, let's go
to the exercise files.
| | 00:03 |
Let's open up Sprite.psd.
Now in this Photoshop file we have a few Layers.
| | 00:09 |
At the top we have the leaf, next is the
apple, and then we have a core, inside here.
| | 00:17 |
Now what we're going to do is increase the
canvas size to make this 600 pixels wide,
| | 00:20 |
but before we do that, I want to create a
guide for our frames, so we have something
| | 00:23 |
to measure individual frames.
So let's come down to the Layers panel,
| | 00:27 |
let's create a new Layer.
Let's name this frame, let's move this to
| | 00:33 |
the bottom.
With this selected, let's come over to the
| | 00:37 |
foreground Color.
Let's pick a light blue.
| | 00:41 |
Next let's go to Edit > Fill, with
foreground Color.
| | 00:46 |
Now with that in place let's come down to
the Frame Layer, let's right-click, choose
| | 00:50 |
Convert To Smart Object.
So now with that frame selected, let's hit
| | 00:53 |
Cmd or Ctrl > G to create a new group.
Let's double-click this.
| | 00:58 |
Let's name this _fpl.
We're not actually going to publish out
| | 01:01 |
this frame, but we want to use this to
create a guide for ourselves.
| | 01:05 |
So now with that created, let's come over
to the main canvas.
| | 01:08 |
I'm going to zoom out a little bit.
Then go to the Image menu; come down to
| | 01:11 |
Canvas Size.
Let's come in here and change the Width to 600.
| | 01:17 |
Let's anchor this to the upper left hand
corner, click OK.
| | 01:21 |
And now let's come down to the Frames
Smart Object Layer, let's hit Cmd or Ctrl
| | 01:26 |
J, or duplicate the frame, select the Move
tool.
| | 01:31 |
Now on the main stage, I'm going to hold
the Shift key and hit the right arrow.
| | 01:34 |
I'm going to his this 10 times, and with
the Shift key that will multiply that by
| | 01:37 |
10 pixels, and that will move that frame
100 pixels.
| | 01:41 |
So if I move that a little bit more, you
can see that this is lining up right to
| | 01:44 |
the left hand side of the previous frame.
Now I'm going to continue to duplicate the
| | 01:48 |
Smart Object, and then move it 100 pixels
on the frame.
| | 01:51 |
So once I'm done, you'll see in the fpl
Layer, now have five copies of the
| | 01:55 |
original frame copy.
Now let's come in and modify one of these.
| | 01:58 |
So double-click on one of the Smart
Objects in the Layers panel, now inside of
| | 02:03 |
here I'm going to zoom up a little bit.
What I want to do first is put a border on
| | 02:08 |
the right side, so we can see the
individual frame graphics.
| | 02:10 |
So let's come over to our Tools, under the
Brush tool let's come down and select the
| | 02:16 |
Pencil tool.
Next let's come down to the foreground Color.
| | 02:20 |
Pick a darker blue.
Click OK.
| | 02:24 |
And then in the Smart Object, let's draw a
line on the right side.
| | 02:26 |
Next hit Cmd or Ctrl + S to Save, and in
the background you'll see that border now
| | 02:31 |
shows up on the right side of all of these
frames.
| | 02:33 |
Next let's come back into the Smart
Object.
| | 02:35 |
I'm going to increase the Brush size, and
put a dot right in the center of the Smart Object.
| | 02:40 |
And then, I'm also going to create a
couple of other dots as well.
| | 02:44 |
So I'll just make a cross pattern here.
Again hit Save, we can see that shows up
| | 02:48 |
in the background.
So I'm doing this because I want to have
| | 02:51 |
some reference points, so that I can line
up the art work across my sprite frames.
| | 02:55 |
And now lastly in the Smart Object, let's
come over and create a new Layer.
| | 03:01 |
Let's call this ground.
Let me decrease the size of my Pencil tool.
| | 03:08 |
And just draw a line down here.
That's going to be the ground, or the
| | 03:11 |
bottom where we're going to align all the
apples.
| | 03:13 |
Again, hit Save.
Next, I'll get my Move tool and move this
| | 03:18 |
down, and what I want to do is line up
this line, so it matches the bottom of
| | 03:21 |
where the apple is sitting.
So, once that's in place, let's come over
| | 03:25 |
here and let's close the Smart Object, and
that'll bring us back to the original canvas.
| | 03:28 |
I'm going to close up the fpl Layer.
So when we're done, we can turn off the
| | 03:33 |
fpl Layer, Save out our spreadsheet.
But anytime we want to come back and make
| | 03:36 |
modifications, we can turn on this fpl
Layer, to give us a guide for all of our
| | 03:40 |
individual frames.
Now with our frame guides in place, next
| | 03:44 |
we'll create Smart Objects out of our
apple, core, and leaf Layers, and then
| | 03:48 |
duplicate those as well.
| | 03:49 |
| | Collapse this transcript |
| Using Smart Objects to create frame artwork| 00:00 |
>> Now we are going to duplicate the
artwork for the individual frame of our sprite.
| | 00:03 |
So first let's come down to the layer
called apple.
| | 00:06 |
Let's right click, choose convert to smart
object.
| | 00:10 |
Next take commander control G to create
group.
| | 00:14 |
Let's name this apples.
Now select the apple layer.
| | 00:18 |
Cmd or Ctrl+J, or you can go to the Layer
menu and come down and choose Duplicate layer.
| | 00:24 |
With the copy selected, make sure you're
on the Move tool, hold the shift key, and
| | 00:29 |
hit the right arrow 10 times to move the
copy 100 pixels.
| | 00:32 |
Then hit Cmd or Ctrl+J to make another
copy and repeat this process until we have
| | 00:37 |
5 duplicates of the original smart object,
each positioned 100 pixels from the
| | 00:41 |
previous one.
Once that's complete, come over and select
| | 00:45 |
the apples group.
Let's apply a mask to the group.
| | 00:49 |
And then let's collapse this down.
Let's hide the apples group.
| | 00:54 |
Let's select the core, right click.
Convert to smart object.
| | 00:59 |
Hit Command or Control G to create a
group.
| | 01:01 |
Let's name this cores.
Then let's select the core layer.
| | 01:06 |
Cmd or Ctrl+J.
Make sure you're on the move tool, hold
| | 01:10 |
the Shift key, hit the right arrow 10
times to move the core duplicate 100
| | 01:14 |
pixels to the right.
And repeat this process until you have 5
| | 01:18 |
copies of the original core graphic spaced
100 pixels apart.
| | 01:21 |
Once that's complete, click on the cores
group, come down and apply a mask to that
| | 01:26 |
group as well.
Let's close this.
| | 01:29 |
We can turn the apples layer back on.
And then, let's come up and select a leaf layer.
| | 01:34 |
Right click, convert to smart object.
Cmd or Ctrl+g to create a group.
| | 01:41 |
Let's name this leaves.
Next, hit Cmd or Ctrl+J to duplicate the layer.
| | 01:46 |
Hold the Shift key, hit the right arrow 10
times.
| | 01:48 |
And move the leaf 100 pixels to the right.
And then repeat the same process
| | 01:52 |
duplicating the original leaf 5 times and
positioning each one 100 pixels across the stage.
| | 01:57 |
And once that's complete, you can come
over and collapse the leaves group.
| | 02:00 |
Now the reason we put all of these into
Smart Objects is so that if we wanted to
| | 02:03 |
come in and make a global change to our
animation, for example on the apple, you
| | 02:07 |
can come in and select any of the apple
Smart Objects.
| | 02:11 |
And if I were to make a change for
example, like maybe changing the hue saturation.
| | 02:16 |
Changing the color then hitting Cmd or
Ctrl+S or File menu > Save.
| | 02:22 |
You'll notice that the animation on the
main stage will update for all the of the
| | 02:25 |
individual frames.
So this gives us a really quick and
| | 02:28 |
efficent way to modify the individual
frames of our spreadsheet from one
| | 02:32 |
individual smart object.
I'm going to undo and close that smart object.
| | 02:36 |
So now that we have all of the artwork
positioned across all of the individual
| | 02:39 |
frames for our spreadsheet, next we'll
start modifying the individual frames to
| | 02:43 |
create our animation effect.
| | 02:44 |
| | Collapse this transcript |
| Creating bite effects on the apples| 00:00 |
So now, we're going to modify the art work
in the individual frames to make our animation.
| | 00:04 |
So, I'm going to zoom up here.
Now in the Layers panel, let's come over
| | 00:09 |
to the Apples group.
Let's click and select the Layer mask.
| | 00:13 |
So, you see these little icons here,
showing that this is the selected item of
| | 00:16 |
that layer.
Next, let's come over and select the Brush Tool.
| | 00:21 |
Up in the Options panel.
Come in here, and let's select a brush
| | 00:24 |
size of 20, select the round brush, and
make sure the hardness is somewhere above 95.
| | 00:31 |
I'll bring mine up to a hundred.
Hit Return.
| | 00:35 |
Lastly, come down and make sure the
foreground color is set to black.
| | 00:37 |
Click OK.
Now, what we're going to do is come in
| | 00:41 |
here and paint on this individual Layer
mask, and this is going to mask out all of
| | 00:46 |
the smart object, apples that are inside
of this group.
| | 00:48 |
So what we want to do is go to the second
apple.
| | 00:51 |
Let's come in here, and let's simply click
a few times and mask out a shape here, as
| | 00:57 |
if the apple's being bitten.
So now once we have this in place, you'll
| | 01:01 |
see that we have the black artwork being
painted on this mask.
| | 01:05 |
To see this, pull the Option or Alt key,
click on the mask, and Photoshop will go
| | 01:10 |
into its preview mode for the Layer mask.
Now, to make the bites a progressive
| | 01:14 |
animation, we want to make sure that we
replicate this mask on frame three.
| | 01:20 |
So to do that, let's come over to our
Marquee Tool, let's select the Marquee.
| | 01:25 |
Let's click and drag a Marquee around the
shape.
| | 01:27 |
Get your cursor inside of the Marquee.
Next hold the Cmd or Ctrl key to select
| | 01:32 |
and cut or move that shape.
Next hold the Option or Alt key to
| | 01:36 |
duplicate that layer.
And lastly, hold the Shift key, then hit
| | 01:40 |
the right arrow once.
Then let go of all the keys.
| | 01:44 |
So what we have here is a selection of the
shape that we've drawn.
| | 01:48 |
Hold the Shift key.
Hit the right arrow, nine more times.
| | 01:55 |
And what that's going to do is duplicate
the art that we created, a 100 pixels over
| | 01:59 |
on the right-hand side, on the mask.
Click outside of the Marquee to unselect.
| | 02:04 |
Let's come over to the Layers panel, click
on the folder.
| | 02:07 |
And what we'll see here is the artwork now
shows in the background, and we can see
| | 02:11 |
the Layer mask is in exactly the same
position from frame two to frame three.
| | 02:15 |
I'm going to move my canvas over a little
bit.
| | 02:19 |
And now inside of the area where we have
frame three, I'm going to hit the letter B
| | 02:23 |
for the Brush Tool.
Let's come over and select the Layer mask again.
| | 02:27 |
Let's come down to the lower right hand
side.
| | 02:29 |
And let's come in here and click a few
shapes for our second bite.
| | 02:34 |
Once we have that bite in place, hit the
letter M for the Marquee Tool.
| | 02:38 |
Let's come in here and draw a Marquee
shape around that mask area.
| | 02:43 |
Hold the Cmd key.
Then the Alt key, then the Shift key.
| | 02:48 |
Right arrow one time.
Let go of all of the keys except for the
| | 02:52 |
Shift key.
And then hit the right arrow, nine times,
| | 02:55 |
to get the layer mask to be positioned
over the fourth frame.
| | 02:59 |
Move my canvas over.
Click outside.
| | 03:03 |
Switch to the Brush Tool.
Let's come over here and add more bite marks.
| | 03:07 |
Marquee Tool.
Click and drag.
| | 03:11 |
Cmd+Alt+Shift.
Then just the Shift key.
| | 03:15 |
Let's move that mask over into place.
We're in the fifth frame here.
| | 03:23 |
Let's come in here and let's mask this
out.
| | 03:26 |
We should see a little bit of the seed
form the core layer underneath.
| | 03:30 |
Marquee Tool, Cmd+ Alt+Shift.
Right arrow key, one time.
| | 03:35 |
Shift key.
Let's move that over into place.
| | 03:39 |
Let's get our brush tool and let's add the
final larger bite to the upper left-hand
| | 03:43 |
side of the apple.
So I'm going to hold the Option key, come
| | 03:46 |
back to the Layer mask.
So as we can see, we have the shapes that
| | 03:49 |
we progressively built across all of the
individual frames.
| | 03:52 |
And then, if we look back at the art work,
we see that we get this effect of the
| | 03:55 |
bites on the apple being progressive, so
that one bite doesn't change.
| | 03:59 |
But we continue to add more and more bites
to give us our animated effect.
| | 04:03 |
And now with our modified mask on the
apples group, next we're going to add the
| | 04:06 |
same effect to the cores group.
| | 04:07 |
| | Collapse this transcript |
| Creating bite effects on the cores| 00:00 |
Now, to create a similar biting effect for
the cores group.
| | 00:03 |
I'm going to zoom up here inside of my
Photoshop canvas.
| | 00:07 |
Let's come over to the Layer mask that's
assigned to the cores group.
| | 00:10 |
Let's select a Brush tool.
Let's come down and change the size to
| | 00:14 |
about 15.
Hit Return.
| | 00:19 |
Make sure the foreground color is black.
Let's come over here, and let's add a Mask
| | 00:24 |
to the core.
Once we have that looking the way we want,
| | 00:28 |
Marquee tool, make a selection, hold Cmd
Option, then Shift, hit the right arrow
| | 00:34 |
once, then just the shift key and the
right arrow.
| | 00:40 |
Let's move that over until it's a 100
pixels to the right.
| | 00:44 |
Move my canvas over, switch the Brush
tool.
| | 00:47 |
Let's come in here and add a Mask to the
core for the lower-right bite.
| | 00:52 |
Marquee tool, Cmd Option Shift, hit it
once then just the Shift key.
| | 00:58 |
Move our canvas over, let's continue to
modify the Mask for the core layer.
| | 01:03 |
Once that is complete.
Marquee tool.
| | 01:05 |
Let's duplicate this to the fifth frame.
Let's modify the core for the bite in the upper-right.
| | 01:13 |
Marquee tool.
Duplicate this for the final frame, and
| | 01:19 |
let's modify the core for the upper left
hand bite.
| | 01:23 |
Now if we zoom out, we can see that the
Masks are being applied to both the cores
| | 01:26 |
group and the apple group to give us a
progression of the apple being eaten.
| | 01:30 |
Now with this effect in place, next we'll
animate the leaf across the individual frames.
| | 01:33 |
| | Collapse this transcript |
| Simulating the leaf falling| 00:00 |
Now we're going to animate the leaf, as we
progress through our animation, and here
| | 00:03 |
we're going to make use of those
registration marks we put in our frame guide.
| | 00:06 |
So first let's come over to the Layers
panel, select the FPO group.
| | 00:11 |
Let's drag this to the top of our Layers
panel.
| | 00:13 |
Let's open up the frames group and let's
come in and modify our frames smart object.
| | 00:17 |
So you can do anything you want inside of
here since this is really here just to
| | 00:21 |
help us align elements across the stage.
So what I'm going to do is come in and get
| | 00:25 |
rid of that blue background.
So let's click on the frame layer.
| | 00:28 |
I'm going to come up to the Magic Wand
tool.
| | 00:31 |
Come down and just click on the blue.
Hit delete.
| | 00:34 |
Hit save.
Now we can see the individual dots in the
| | 00:37 |
background showing up in the exact same
position on every one of these frames.
| | 00:41 |
Let's close the smart object.
Let's collapse the FPO group and then
| | 00:45 |
let's expand the leaves group.
Now inside of here we want to create an
| | 00:48 |
animation of the leaf so I'm going to zoom
up here.
| | 00:50 |
So for the very first frame we'll leave
the first leaf in its original position.
| | 00:54 |
For the second leaf, this one here, what
we want to do is start to rotate this a
| | 00:58 |
little bit.
So let's hit Cmd or Ctrl+T to transform.
| | 01:02 |
Let's rotate this a little bit.
Hit Return, then the Move tool.
| | 01:07 |
I'm going to come in here and move this
down, to about right here.
| | 01:12 |
And I can see that the leaf is right
behind the very top dot.
| | 01:15 |
I'm going to hold the Cmd or Ctrl key with
the Move tool.
| | 01:17 |
Click on the leaf to select the next leaf
in the succession.
| | 01:20 |
Cmd or Ctrl+T, we're going to rotate this
just a little bit more than the original leaf.
| | 01:26 |
So if I bring this over here, we can see
that movement.
| | 01:30 |
Now I want to position this lower than
this dot here.
| | 01:34 |
Let's come down to about right here and a
little over to the right.
| | 01:38 |
Let's hit Return.
Continue to move over.
| | 01:42 |
The next leaf, let's transform this.
I want this to animate a little bit
| | 01:47 |
further, so it's sort of rocking as it's
falling.
| | 01:51 |
Move tool, let's bring this down a little
bit more to the right.
| | 01:55 |
Again, I'm using these dots to figure out
exactly where I want the leaf to move
| | 01:58 |
across the frame.
Fifth frame.
| | 02:02 |
I'll have this rotate just a little bit
further.
| | 02:06 |
Move this down, it's almost in its final
position over here.
| | 02:09 |
And then finally the last leaf.
We're going to rotate this back a little bit.
| | 02:13 |
So that it's a little bit more straight.
So the leaf will sort of animate up a
| | 02:17 |
little bit and then back.
And then we'll move this down to sit on
| | 02:22 |
the floor to the right-hand side of the
apple.
| | 02:25 |
And now when I zoom out we can see the
progression of the leaf as well as the
| | 02:28 |
bite marks happening on the apple and the
core.
| | 02:31 |
And now with all of the frames created,
let's collapse the leaves group.
| | 02:34 |
Let's hide the FPO group, and now we're
ready to publish and test this in a browser.
| | 02:38 |
| | Collapse this transcript |
| Exporting and texting your sprite animation| 00:00 |
So at this point we're ready to publish
our sprite and test it.
| | 00:03 |
So from the Photoshop File menu let's come
down and choose Save for Web.
| | 00:07 |
Now one of the advantages of animating a
spreadsheet is that we can use the eight
| | 00:10 |
bit transparency that's available inside
of a PNG-24.
| | 00:14 |
So in the upper right hand corner let's
come up and choose PNG-24.
| | 00:17 |
This will give us 16 bits of color plus
eight bits of transparency.
| | 00:20 |
So I'll get some really nice transparent
edges on this animation.
| | 00:23 |
Next I'll choose Save.
And we're going to save this graphic into
| | 00:26 |
this sprite testing folder, which is
available for free as part of this course.
| | 00:30 |
So on the Exercise Files, let's go to
Sprite Animation Tester.
| | 00:33 |
Let's choose the sprite.png file.
Click Save and then click Replace.
| | 00:38 |
We're going to overwrite the existing PNG
file with the one we just created.
| | 00:42 |
And now back in the operating system let's
go into the exercise files.
| | 00:45 |
Let's open up the Sprite Animation Tester
folder and let's open up
| | 00:48 |
sprite_tester.html up in our browser.
And now in the browser, we can see the
| | 00:52 |
effect of that spreadsheet moving inside
of that HTML element.
| | 00:56 |
Now, if you'd like to make modifications
to the sprite tester to test different
| | 00:59 |
size graphics or more frames.
You can open the sprite_tester.html up in
| | 01:03 |
a tool like Dreamweaver, or any text
editor.
| | 01:06 |
Now inside of the HTML, in the heading
area, we have a couple of variables.
| | 01:10 |
We have total frames.
In here, you can put the number of frames
| | 01:13 |
that match the animation spreadsheet
you've set up inside of Photoshop.
| | 01:17 |
So in this case we see we have six.
I've also set up a looping parameter here,
| | 01:21 |
so you can set looping to true or false.
So to demonstrate this I'll change this to
| | 01:24 |
false and then you can also change the
speed.
| | 01:27 |
Speed is set in milliseconds inside of
JavaScript, so 250 is one quarter of a second.
| | 01:32 |
I'm going to come in and set the speed to
1,000.
| | 01:35 |
That means each frame will take one second
to play.
| | 01:37 |
Now if you want to change the height or
dimensions of the sprite you want to
| | 01:40 |
animate, you can come down here inside of
the body area.
| | 01:42 |
I have a div here with a class of stage.
You can set the width here and the height.
| | 01:47 |
And then you can set the actual PNG file
that you want to load into this object.
| | 01:52 |
So by changing these settings, you can use
the sprite animation tester to test any
| | 01:55 |
sprite that you're creating inside the
Photoshop.
| | 01:57 |
Let's hit Cmd or Ctrl+S to save.
Let's switch back out to the finder and
| | 02:02 |
now when we go back and test this in a
browser you'll see that each frame takes
| | 02:05 |
one second to load and it no longer loops.
Once it gets to the last frame it just stops.
| | 02:10 |
And now that our spreadsheet is animating
properly next I'm going to show you a
| | 02:13 |
technique for adding non-destructive
effects to your animation so you can
| | 02:16 |
experiment with different styles.
| | 02:18 |
| | Collapse this transcript |
| Applying nondestructive filter effects| 00:00 |
Now in this course, we've been using smart
objects.
| | 00:02 |
We can quickly modify frame guides and
artwork throughout our animation, but what
| | 00:07 |
i want to show you now, is how we can use
a smart object now to apply filter effects
| | 00:10 |
to all of the frames of our animation.
So inside of Photoshop lets select the
| | 00:14 |
Leaves group, hold the Cmd or Ctrl key to
select Apples and Cores.
| | 00:20 |
Now with all of these selected, let's
right-click.
| | 00:22 |
Choose Convert to Smart Object.
That's going to put all of these layers
| | 00:26 |
into a smart object.
If we double-click this, you'll see inside
| | 00:30 |
of the smart object.
We have our same structure in place.
| | 00:32 |
So we can quickly go back and modify the
animation if we need to.
| | 00:36 |
But back in the main Photoshop canvas,
what I want to do here with this smart
| | 00:39 |
object selected is come up to the Filter
menu.
| | 00:42 |
Let's come down and choose Filter Gallery.
So it's at the Filter Gallery.
| | 00:46 |
We can come in here and apply special
effects.
| | 00:49 |
Now, the effects that are being applied
are to that smart object, which in turn,
| | 00:52 |
since each of these elements is on a main
stage because we're using this as a sprite
| | 00:56 |
animation, we get the effect across all of
the frames.
| | 01:01 |
So we can come in here, and quickly start
playing with different animation styles
| | 01:04 |
and effects, publish this out to our
testing environment, and see what the
| | 01:07 |
animation looks like with these effects
applied.
| | 01:10 |
Once we apply an effect, you'll notice in
the Layers panel, when we apply a filter
| | 01:14 |
to a smart object, we get a smart filter.
And then the filters gallery.
| | 01:19 |
This allows us to go back to the Filter
gallery and reassign different filters.
| | 01:22 |
And of course, if we don't like the
specific filter, we can always come in
| | 01:25 |
here and just turn this off.
And once you've added a filter effect or
| | 01:28 |
an adjustment that you like, you can
simply save for web, like we did in the
| | 01:32 |
previous movie.
Load this up in your animation tester and
| | 01:34 |
see how the effect looks.
So as you can see here, I have a all
| | 01:37 |
series of animations of the same exact
spreadsheet with different effects applied.
| | 01:41 |
And you can use this to experiment with
different animation styles and techniques.
| | 01:45 |
And now, if you'd like more ideas on where
you can use this new Sprite graphic you've
| | 01:48 |
created, I have a course on the lynda.com
online training library called Edge
| | 01:52 |
Animate Essential Training.
Where I'll show you how to set up an
| | 01:55 |
animation inside of Edge Animate, making
use of a sprite sheet.
| | 01:58 |
Which you can in turn, incorporate into
iBooks, digital magazines, or your website.
| | 02:03 |
And with that, that completes creating an
animation sprite sheet inside of
| | 02:06 |
Photoshop, and I really appreciate you
watching my course.
| | 02:09 |
| | Collapse this transcript |
|
|
