Mini-Movie tutorial using Photoshop and Animation Shop
I made a mini-movie icon for the first time last night, and immediately several people asked how to make them. I've not seen anyone do a tutorial on them so far, so I figured that I'd write one up and post it in case anyone was interested.
The tutorial is behind the cut, since it's quite long, and there are several images involved. I've never written a tutorial before, so my apologies if something's been overlooked, or things are overexplained. Constructive criticism is appreciated - I'll go back and change things if people say that I'm overexplaining, or not clear enough.
Full disclosure: I didn't come up with the idea of making these. I have no idea who did, but whomever it was is pretty damn clever, I think. Also, I've only been making icons since the beginning of August, so my skills are sort of rudimentary in some areas. There are lots of things that are "common knowledge" that I just don't have, and I'm sure that there are a lot of shortcuts that I'm missing. If I've made things more complicated than they need to be, please let me know, and I'll try and fix it.
Start by deciding in your head how you want the icon to look. It's much easier to do if you know what you're hoping the finished product will be. From there, select your images. Decide what animation you want to use, and pick an image for your base. For my base, I selected Aragorn looking at the Paths of the Dead, because the animation is going to be of him walking into the Paths.
Open your base image.
This is my base image, untouched. Alter the base as you wish. To reach the effect that I wanted, I used the lasso tool to select Aragorn and sharpen him. I then inverted the selection, blurred the area, then applied a gaussian blur to 1.5 pixels. Leaving that area selected, I created a new layer, and in the new layer applied a pattern fill from a pattern that I had previously created. (A small 4x4 pixel grid.) I set the transparency on the fill layer to 20%, because I didn't want it to be an obvious thing, just something to add some texture and to help draw people's eye away from the fact that Gimli's helmet is showing in the lower right of the picture.
This is the icon to this point.
I felt that the contrast between Aragorn and the background was a little harsh, so I selected him again, copied it, and created a new layer with just Aragorn on it. To make things blend a little more, I right clicked on the layer, and went to "blending options". From there, I selected "Outer Glow", and selected the palest blue in the background for the colour of the glow. I left it on the default "screen" blend mode, and set the opacity to 25%, where it wasn't really noticable, but it smoothed things out a little bit. I left the technique at "softer", but changed the spread to 0%, and the size of the glow to 2 pixels.
The icon to this point.
This is where things start to deviate from standard icon-making procedure. You need to have your animation saved in a frame-by-frame format - That is to say, you need to be able to open each frame individually. Open the animation, and copy the first frame that you want to use in the movie. Go back to your base, and paste the first frame into the base on a new layer. Your icon should now look something like this:
At this point, you should work out the rest of the layout of your icon. If you're going to have words on it, this is the time to put them on. If you're going to cut things out and leave transparent bits, this is the time to do that, as well. If you feel that your movie needs a border, add that. I would advise creating the border on a separate layer, because you're going to have to replace the frame that's currently on the screen, and if you create the border on the same layer, you're going to end up having to recreate it every time, and frankly? Boring.
That's the icon to this point. It has text, a border on the movie, the background how I want it, and the first frame of the animation put in there. Save this as image one.
Go back to your animation, and copy the second frame of it. Paste the frame into the appropriate place on the base. Save the file as image two. Go copy the third frame, come back, and paste it in again. Repeat this until you've saved every frame.
Open your animation program. I'm using Jasc Animation Shop, because I cannot for the life of me figure out Image Ready. I used the animation wizard to import all the frames into the stop, and to arrange them in the proper order. I've found that for smooth animations, most frames need to have a duration of between 10/100 and 20/100 of a second. To create the animation in the icon that I've made, I used 15/100 for the first four frames (so that they move a little faster than the rest of the animation, and give the impression of wind picking up,) 18/100 for five and six (since that starts the fade, and there's less wind, more foreward motion,) 22/100 for the seventh, (so that it felt like it faded more, as that's actually what happens in the clip that I saw,) and then 30/100 for the eighth and final clip (so that there was a feeling of completion that wasn't quite achieved with a 20/100 hold).
Preview your animation to make sure that it moves at a speed that you feel is appropriate. Remember that making the duration of the frame longer doesn't add to the file size, so you can tamper with it all that you want. When you're satisfied with how it looks, save the icon. I didn't optimize mine, and even without it, it's only 18K, well short of Livejournal's 40K limit.
This was the final icon:
Hope that helped someone!
Edited on 5/12/03 to add: If you have questions about how to get the images to make the animation itself, please read the comments here, here and here. Also, I have no idea how to screencap in Windows Media Player. Sorry.
The tutorial is behind the cut, since it's quite long, and there are several images involved. I've never written a tutorial before, so my apologies if something's been overlooked, or things are overexplained. Constructive criticism is appreciated - I'll go back and change things if people say that I'm overexplaining, or not clear enough.
Full disclosure: I didn't come up with the idea of making these. I have no idea who did, but whomever it was is pretty damn clever, I think. Also, I've only been making icons since the beginning of August, so my skills are sort of rudimentary in some areas. There are lots of things that are "common knowledge" that I just don't have, and I'm sure that there are a lot of shortcuts that I'm missing. If I've made things more complicated than they need to be, please let me know, and I'll try and fix it.
Start by deciding in your head how you want the icon to look. It's much easier to do if you know what you're hoping the finished product will be. From there, select your images. Decide what animation you want to use, and pick an image for your base. For my base, I selected Aragorn looking at the Paths of the Dead, because the animation is going to be of him walking into the Paths.
Open your base image.
This is my base image, untouched. Alter the base as you wish. To reach the effect that I wanted, I used the lasso tool to select Aragorn and sharpen him. I then inverted the selection, blurred the area, then applied a gaussian blur to 1.5 pixels. Leaving that area selected, I created a new layer, and in the new layer applied a pattern fill from a pattern that I had previously created. (A small 4x4 pixel grid.) I set the transparency on the fill layer to 20%, because I didn't want it to be an obvious thing, just something to add some texture and to help draw people's eye away from the fact that Gimli's helmet is showing in the lower right of the picture.
This is the icon to this point.
I felt that the contrast between Aragorn and the background was a little harsh, so I selected him again, copied it, and created a new layer with just Aragorn on it. To make things blend a little more, I right clicked on the layer, and went to "blending options". From there, I selected "Outer Glow", and selected the palest blue in the background for the colour of the glow. I left it on the default "screen" blend mode, and set the opacity to 25%, where it wasn't really noticable, but it smoothed things out a little bit. I left the technique at "softer", but changed the spread to 0%, and the size of the glow to 2 pixels.
The icon to this point.
This is where things start to deviate from standard icon-making procedure. You need to have your animation saved in a frame-by-frame format - That is to say, you need to be able to open each frame individually. Open the animation, and copy the first frame that you want to use in the movie. Go back to your base, and paste the first frame into the base on a new layer. Your icon should now look something like this:
At this point, you should work out the rest of the layout of your icon. If you're going to have words on it, this is the time to put them on. If you're going to cut things out and leave transparent bits, this is the time to do that, as well. If you feel that your movie needs a border, add that. I would advise creating the border on a separate layer, because you're going to have to replace the frame that's currently on the screen, and if you create the border on the same layer, you're going to end up having to recreate it every time, and frankly? Boring.
That's the icon to this point. It has text, a border on the movie, the background how I want it, and the first frame of the animation put in there. Save this as image one.
Go back to your animation, and copy the second frame of it. Paste the frame into the appropriate place on the base. Save the file as image two. Go copy the third frame, come back, and paste it in again. Repeat this until you've saved every frame.
Open your animation program. I'm using Jasc Animation Shop, because I cannot for the life of me figure out Image Ready. I used the animation wizard to import all the frames into the stop, and to arrange them in the proper order. I've found that for smooth animations, most frames need to have a duration of between 10/100 and 20/100 of a second. To create the animation in the icon that I've made, I used 15/100 for the first four frames (so that they move a little faster than the rest of the animation, and give the impression of wind picking up,) 18/100 for five and six (since that starts the fade, and there's less wind, more foreward motion,) 22/100 for the seventh, (so that it felt like it faded more, as that's actually what happens in the clip that I saw,) and then 30/100 for the eighth and final clip (so that there was a feeling of completion that wasn't quite achieved with a 20/100 hold).
Preview your animation to make sure that it moves at a speed that you feel is appropriate. Remember that making the duration of the frame longer doesn't add to the file size, so you can tamper with it all that you want. When you're satisfied with how it looks, save the icon. I didn't optimize mine, and even without it, it's only 18K, well short of Livejournal's 40K limit.
This was the final icon:
Hope that helped someone!
Edited on 5/12/03 to add: If you have questions about how to get the images to make the animation itself, please read the comments here, here and here. Also, I have no idea how to screencap in Windows Media Player. Sorry.