PS7 Animation Tutorial
So, this is an animation tutorial to make this icon...
. I used similar techniques on this "Chair Bad" icon as well.
The breakdown is
Ok, so basically I am addicted to animation and have found a few things that seem to make it easier.
First thing you need is a series of screencaps. I prefer to make my own so this morning I snagged about 30 caps from American Beauty. Then I went through them and made a sequence of about 12 images.
While they are still full size I open create a new layer and generally on either the first or the last image I map out the stationary parts of the scene.
In rhis case it's the lines on the gym floor. I then also mark her head and shoulders so I have some sense of where in the image the focus is. I also make sure to mark all four corners of the full size image, this is important later.
Once I have a roadmap I use the rectangle tool on fixed aspect ratio to selet the part I want in the icon. I then mark out the corners of my selected box. While it is still selected I note the exact size of the box and set the marquee tool to fixed size so that each frame gets a box the exact same dimensions.
I then deselect and copy the whole layer of my markings onto each image. Because I've put marks in each corner it is automatically centered and all I have to do is marquee the outline of the inner box and crop.
Repeat for each image in the animation.
Once I have all my images I shrink them to 100x100.
I double check that the markings did their job and that all the images line up perfectly and delete the markings layer.
I wanted this to be kind of soft and dreamy so I duplicated my image and set the layer on screen.
Lighter but not quite as dreamy as I wanted so I used a technique I've seen in various tutorials. I duplicated my background and desaturated it.
Hit it with the Gaussian blur filter at about 1.3 
and the brought the screen layer to the top.
I'm liking the look but now the roses look really washed out so I add a fill layer of red (i use the eyedrop tool to grab a red from the original background image) and set it to soft light at about 30 percent.
I'm liking it more but I wanted to reds to be more bluey so I throw a light blue layer on soft light also about 30 percent on.
I added brushes and texts but there are lots of better tutprials about that out there so we'll just leave it at, I messed about, added brushes and text, and eventually had the final look.
From here it's just the more tedious task of flattening each image, copying it and pasting it all into one image with many layers. Then I open it in Image Ready and work out the timing. I held the first image for .2, all the transitional images for .1 and the final image for 1 second.
I optimistially started it out at 128 colors, but gradually pared it down to 90 in order to fit under 40k.
And the final result is
This is my first tutorial so please let me know if I've been unclear in any way. I hope that at least someone will find this helpful.
Thank you!
. I used similar techniques on this "Chair Bad" icon as well.The breakdown is
Ok, so basically I am addicted to animation and have found a few things that seem to make it easier.
First thing you need is a series of screencaps. I prefer to make my own so this morning I snagged about 30 caps from American Beauty. Then I went through them and made a sequence of about 12 images.
While they are still full size I open create a new layer and generally on either the first or the last image I map out the stationary parts of the scene.
In rhis case it's the lines on the gym floor. I then also mark her head and shoulders so I have some sense of where in the image the focus is. I also make sure to mark all four corners of the full size image, this is important later.
Once I have a roadmap I use the rectangle tool on fixed aspect ratio to selet the part I want in the icon. I then mark out the corners of my selected box. While it is still selected I note the exact size of the box and set the marquee tool to fixed size so that each frame gets a box the exact same dimensions.
I then deselect and copy the whole layer of my markings onto each image. Because I've put marks in each corner it is automatically centered and all I have to do is marquee the outline of the inner box and crop.
Repeat for each image in the animation.Once I have all my images I shrink them to 100x100.
I double check that the markings did their job and that all the images line up perfectly and delete the markings layer.
I wanted this to be kind of soft and dreamy so I duplicated my image and set the layer on screen.
Lighter but not quite as dreamy as I wanted so I used a technique I've seen in various tutorials. I duplicated my background and desaturated it.
Hit it with the Gaussian blur filter at about 1.3 and the brought the screen layer to the top.I'm liking the look but now the roses look really washed out so I add a fill layer of red (i use the eyedrop tool to grab a red from the original background image) and set it to soft light at about 30 percent.
I'm liking it more but I wanted to reds to be more bluey so I throw a light blue layer on soft light also about 30 percent on.
I added brushes and texts but there are lots of better tutprials about that out there so we'll just leave it at, I messed about, added brushes and text, and eventually had the final look.From here it's just the more tedious task of flattening each image, copying it and pasting it all into one image with many layers. Then I open it in Image Ready and work out the timing. I held the first image for .2, all the transitional images for .1 and the final image for 1 second.
I optimistially started it out at 128 colors, but gradually pared it down to 90 in order to fit under 40k.
And the final result is
This is my first tutorial so please let me know if I've been unclear in any way. I hope that at least someone will find this helpful.
Thank you!