Tutorial 05 - Animated Icons - Sharpay
Hello everyone! *Waves*
This is my tutorial on how to create an animated icon using InterVideo WinDVD 7 to take caps from footage, and Adobe Photoshop 7 and ImageReady to create the finished icon.
I've recently been making a good few animated icons and thought this tut may be of use to anyone who's getting started making any themselves.
I'm assuming a basic knowledge of Photoshop here but if you have any questions about any of the steps then feel free to ask.
As you can see, this is a white-bordered icon, using a short clip of animation which is then followed by a line of text which is faded in and out on a white backround.
Creating Your Icon Base
The first thing we need to do is to build our icon base using Photoshop. These can be as simple or complex as you like, but I personally prefer a simple approach so as not to detract from the icon's animation. In this icon's case, I want to create a border that looks like this:
To do this, create a blank 100x100pixel document to begin with. Create a new layer above your background and fill it with white (#FFFFFF). Next, create a new layer above this and choose a pale grey (#C6C6C6) or other suitable colour and create a rectangle in the centre of the layer. This can be done by either dragging out a rectangular marquee, using a brush or even simply by using the pencil tool (and holding shift to help) to draw your shape. I made my grey border 6 pixels wide and left a space of 66pixels by 54pixels in the centre. This space is where your animation frames will eventually be, and so it's a good idea to consider what size you'd like to make this space in advance. If you leave a box which is too small your animation may appear tiny and difficult to see, while a box which is too large may mean you have to reduce your animation's quality to keep it below the 40kb limit for icons on LiveJournal. I've used this size space for many icons and find it to be a good compromise, but of course if you'd like a square frame for example, just keep to a similar size. When you're happy with your border, merge all the layers together but leave the background alone and separate. Then, using your magic wand tool, select the area within your border and hit delete, leaving your box where your animation will go empty.
Ok so your base is beginning to take shape, but it's also a good idea to add in a few extra layers which will help your icon look its best. Click on your lowest layer, the background to ensure the new layer will be created inderneath your icon frame. Create a new layer and fill it with grey (#D0D0D0). Set this layer to the blend mode 'Overlay' and reduce its opacity to 50%. What this layer will do is to brighten the animation up once we insert it, and it makes the icon look much fresher.
Next, (and this layer is optional or can be adjusted to suit your personal icon requirements) create a new Hue/Saturation layer above your grey overlay layer, and set saturation to +16. Again this will help your animation to be bright and give it a bit of kick, but if you prefer not to then that's not a problem. If you wanted to create a black and white animation for example, you could now add a plain white (#FFFFFF) layer and set the blend mode to 'Color' to make any caps you insert appear in desaturated form. These layers are just used to edit all of your caps in the same way, rather than you having to edit them all individually.
Now we're going to put some extra layers in place which will be used later to create the fade-in white and text for your icon. Above your border layer, create a new layer and fill it with white (FFFFFF). Also above this layer, add another new layer. This will be your text layer. At this stage I never know what I want the text to eventually read, so I just type my name in as it can be edited later, and edit the text colour, font and size until I'm happy. For this icon I used the font, 'Alamain' which I got from www.dafont.com at some stage. I made my text grey (#C6C6C6), size 10 and centred it.
Yay your base is now ready! Make only the layers from your border downwards visible and uncheck the eyes on the white mask and text layers to make them invisible. Your layers should look a little something like this:
Make sure the layers are in the correct order with your white mask and text layers above your border. I double-clicked on each of my layers to rename them which helps me keep track of what's going on! Now save you base as a .psd file so that you have all of the layer information saved.
Your base is done! Now it's time to prepare your caps which will be used to make your animation frames. If you have a series of caps on your computer then you probably won't need this section but I'm going to show you how I take caps from my own DVDs using InterVideo WinDVD 7.
Taking Your Screencaps From Your DVD
Insert your DVD into your computer. Close the little autoplay box that pops up and instead open up WinDVD. I picked up this software after seeing it being used in other animation tutorials, I got it pretty cheap and can honestly say it's a great piece of software both in terms of capping and simply watching DVDs.
Ok once you open WinDVD it will start playing your DVD. Click anywhere on your screen while this is happening and two blue panels will appear. Here's an image of the panel located along the bottom of the screen:
Obviously the first few buttons are your basic playback ones; used for forward and reverse playback, pausing, playing, stopping and navigating scenes as we work from left to right. The remaining three on the far right of the bar are to take you immediately to the disc menu, and to take you to the audio and video centre.
At the top of the screen, this is the panel you can see:
WinDVD lets you do various things but the tool we want to use is the Capture tool. I've hovered over it to show which one it is; click on it and a sidebar will appear on the right of your screen. This is where your caps will be displayed once you've taken them.
Ok so begin playing your movie or choose a specific scene to skip to and find the place on your DVD that you want to feature in your animation. Bear in mind that you should only choose a short animation, one that lasts maybe a few seconds long; much longer than this and you risk you animation being too choppy or breaking the 40kb icon size limit.
Once you've found your place on your DVD, hit pause. It is worth mentioning at this point WinDVD's frame navigation feature. This is located in the lower left corner of your screen, just above the blue bar at the bottom. It looks like this:
Of course one lets you go backwards and one forwards. However while the forwards button skips just one frame, the backwards one reverses about ten or so frames, so you need to take all of your frames in one go to be sure you'll get them all in good sequence. Use this frame-skip button to make sure you've found the ideal frame to begin capping. Once you're happy, hit the 'Capture' plus button which is in the top right corner of your screen in the capture bar, and looks like this:
As you can see I took a cap from my DVD intro. Your caps will fill the blank spaces in this bar from the top downwards. If at any time you want to delete one or all of them, simply click on the minus sign and choose either to delete the cap you have selected or all of them. You can also view any cap in more detail at any time by clicking on it in the sidebar and then clicking on the eye symbol next to the minus button, which will bring up a larger preview window.
Once you've taken your first cap, use the frame-skip button I mentioned earlier to skip two frames. The reason I choose to skip two and not just one is that capping every frame, even in a short animation, will give you far too many caps than you will want to use for your animation, and there will not be as much movement between each one. Once you have skipped two frames, capture again using the plus button, then skip two more frames... and so on until you have capped all of the animation you want to cover. Ideally you want to have approximately 16 frames in your final animation, 18 is the maximum I can ever fit in, but you can take up to about 20 at this stage and save them all if you want to, and edit them down later on. This is also a good idea as you can simply remove a couple of frames off the beginning or end of your clip when you're at the iconning stage.
So I've capped the part of my DVD I wanted to cover; every two frames as I said and I've ended up with 19 caps. A couple too many ideally so I decided to delete the first two as I don't think they're vital to my animation. Now I have 17, yay! Perfect. Also it's kinda cool to drag the scrollbar up and down to get an idea of how the caps form the animation as they move downwards :)
These are my caps. Once you're happy you've done a good job, click on the little save button next to the eye one (it looks like a floppy disc) and choose 'Save all.' Choose to save them in jpeg format, and they will automatically be all put in your capture folder within your WinDVD folder. You can then select these files using Windows Explorer (mine are found in Desktop > Computer > C: > Users > Sophie > Documents > InterVideo > WinDVD > Capture ... phew!) and put them all in a folder which is easier to locate. Also it's a good idea at this point to rename any files that have been numbered as filename2.jpeg as filename02.jpeg; this will make sure that when you load your caps later they will all be in perfect order, rather than filename10.jpeg being numerically placed right after filename1.jpeg. I hope that makes sense, just basically make sure each file number a two-digit one, by typing in an extra '0' into any pre-ten filenames. Make sure these caps are all in one folder containing no other files.Your caps are now ready!
Putting Both Together
Riiiight ok so now all the prep is done, the fun bit starts! :D
Open your base in Photoshop. Select your blank background layer which is the very bottom layer. Now click on your 'Jump to ImageReady' button on your tool palette:
And here you'll be in ImageReady!
If you've never used ImageReady it can be a little daunting at first but it's fairly simple once you get going. You should have a Layers window on the right of your page very similar to the Photoshop version, and you'll also see a new Animation window running along the bottom of your screen and an Optomize window open above your Layers one. If you're missing any of these three don't worry, simply go to your 'Window' tab at the top and check each of them. You can also uncheck any other windows to remove them and give yourself some extra working space if you want to.
The main new window we'll be working with is the Animation one, at the bottom of the screen. This is where you'll be able to view the individual frames of your animation.
The first thing to do is to open your caps. Go to File > Import > Folder as frames... and then navigate through your folders to choose the folder with your caps in. Click OK and a new window will open containing all of your caps. And seeing as we were clever and renamed all of them so they were in numerical order they'll all be prefectly arranged :D
You'll notice that each of your caps has been made into an individual frame in the Animation window at the bottom. At this stage you can click on Play to see how the animation looks altogether, just click on the Play icon at the bottom of the Animation window. You should have a maximum of 18 caps in your series, but if you have too many then this is the stage to make any final changes. If your caps are exceeding 18, play your animation and try to determine where caps can be removed to reduce the number of frames. Normally for me the best place to remove them from is the beginning or end of the animation where I've just continued to cap regardless, but if you can't face deleting those you'll have to remove one from somewhere in the middle of your caps series. Once you've chosen any frames to remove, select them in the animation window and then click on the dustbin to delete. In the example below, I chose to remove the first frame, so I have selected it and then clicked on the dustbin:
It's also a good idea once you've deleted your excess frames to delete the corresponding layers from the Layers window. This will help keep file size down and avoid confusion later on. If I click on my new first frame in the Animation window, I can see in the Layers window that it is my second cap up which is the frame being used. The layer below that corresponded to the frame that I just deleted and is therefore of no use, so right-click and delete it. Similarly if you deleted frames from the end of your animation, click on the last frame of your animation and see which layer is visible here (represented by the eye symbol) and delete any frames above this one which are now of no use. This shouldn't be an issue if you reduced your number of caps early on; doing so means you get to skip this silly layer business! :)
Ok so now we want to put our animation frames into our icon base document. Click on your base document and ensure the layer selected is the bottom background one. This will mean any caps dropped in will be inserted directly above this layer (and below the icon border, more importantly). Next, go into the document containing your animated frames, and ensure you have the first frame selected. From there, we are going to link all of the layers together by clicking in the boxes next to every other frame, as shown here:
This is a before and after image, see the little link icons in the right-hand image? This shows all the layers have been linked together. Now you can click somewhere in the middle of your animation and drag-and-drop your frames into your base document. Now you should be able to see your base with a little bit of your first frame inside the middle. This is because the caps are waaay too big for the icon at the moment, so we're going to jump back to Photoshop to fix this. Click the jump button on the tool palette as before.
Now for some resizing. As your caps are all linked together, any resizing we do to one cap will be duplicated in them all, which is very handy! Scroll down all of your layers to the bottom and ensure the first animation frame above the blank background is selected, Now go to Edit > Transform > Scale and drag the corners of your cap smaller, until they begin to fit the space left in your border. Hold shift while you do this and the ratio of your caps will be preserved, they won't skew or stretch or anything. Drag your cap into a good position within your frame and enter when you're done. As you drag in the corners, your resizing box will look like this:
You may also be able to notice at this point as your caps become visible that they are a little brighter than when you previously saw them in ImageReady. This is the grey overlay layer which is on top of the caps brightening them, so if they are too bright or not bright enough, you can edit this grey layer after you've finished resizing. So now I'm happy with my size and positioning, my icon looks like this:
It's starting to take shape! Yay! Next I'd recommend sharpening each of your cap layers as resizing makes them a bit soft. This can be found in Filter > Sharpen > Unsharp Mask. Beginning at the lowest of your frame layers, use an unsharp mask on it and then move one frame up and repeat until you're sharpened every animation layer. I use settings of:
Amount - 49
Radius - 0.4
Threshold - 0
Once you've done one cap, you can use Ctrl + F on the others to simply repeat the sharpening filter on the others. Once you've done that, you should make all of the animation layers except for the lowermost one invisible again by removing the eyes in the boxes next to them. This means when we jump back to ImageReady soon we'll be all ready to begin with the first frame.
But just before we do, let's finalise our text. By this point I generally know what I want my icon text to say, so scroll to the very top of your layers and make your text layer and the white layer beneath it visible by clicking on them. (Making the white layer visible gives us an idea of how the text will look and helps block out the animation layers too). Now you can select your text an edit what you want it to say. I chose to simply use Sharpay's line, 'Surpriiiiise!' because it makes me laugh a lot! :D Another idea is instead of having a text layer, you could use a heart brush instead on this layer and instead of some text appearing on the icon, a little heart would flash up. Whatever you choose to do, once you're done uncheck the eyes on these two layers again so they return to being invisible, and select your lowermost animation cap. Now, jump back to ImageReady.
Making The Animation
Finallyyyyy! It's taken so long but will be so worth it. OK, now back in ImageReady, we're going to set the time our first frame will be played for. At the bottom left of the Animation window you should see a small '0.1 sec' being displayed. Change this time to 0.1 seconds - this is how long our first frame will last.
First frame done! Now we're going to duplicate this frame using this button:
As you can see, you can hover over it to be sure you have the right button :) And now we have two identical frames! Now the basic idea to create the animation is that from the first frame, you duplicate it and add on the next layer of your animation. This means your frames will be layered up as follows:
Frame 1 1st animation cap
Frame 2 1st animation cap + 2nd animation cap
Frame 3 1st animation cap + 2nd animation cap + 3rd animation cap
...and so on. The higher layer will obviously be only layer visible as it is above the others.
To do this step-by-step, once you have duplicated your first frame, you should make the next animation layer up visible by clicking on the eye next to it. Once you've done this, duplicate your most recent frame again and then add the next layer up. You'll end up with this:
These are how the first three layers are made up. Each layer is a duplicate of the one before, plus one more frame. Continue duplicating each frame and adding a new layer until you reach the end of your animation layers. You should now have a maximum of 18 frames. You can now test your icon by pressing play to check the animation runs smoothly.
Now this is a full animation at this point. It could be saved as is but there is also the option of fading out to white and adding on text, which I find makes the icon look much better as there is no jerky effect when the icon begins its loop over. Now our top two layers (the white one and text one) come into play.
After your final animation frame, duplicate it once more. This time, we're going to begin to fade in the white layer. Make the white layer visible over the top of your final frame, but reduce its opacity to 40%. You should be able to see your final frame through the semi-visible white. Next, duplicate the frame again and increase the white layer's opacity to 80% on this frame. Here we're building up the white intensity. Duplicate the frame once more and this time set the white layer to full 100% opacity.
Now we can add in our text. This works on the same principle as fading in the white, so duplicate your most recent frame and now make the text layer visible too. Set its opacity to 50%. Then duplicate this frame and set the text opacity to full 100% opacity. I find the text only really needs one semi-opacity layer to fade in well which is why I use different opacities here than with the white layer. Now we're on the layer where the text is fully visible, change the time this frame is set to 0.5 seconds. This gives the text a chance to be read fully and gives a nice pause in the icon looping.
To fade the text and white back out, we're going to to do the same technique in reverse. Duplicate your most recent layer and set the time back to 0.1 seconds, before reducing the opacity to 50%. Then duplicate again before removing the text on this layer completely, leaving us with the plain white layer on top. Duplicate again, and here reduce the white layer to 80% opacity, and then repeat and reduce to 40% opacity. On these final two layers however, all of the frames will be visible beneath the white layer, so you need to uncheck all off the animation frames except for the lowermost one, so that the white fades back to the beginning og the animation.
Here's a quick recap covering the white and text layers:
...
Frame 18 - all other animation caps + 18th animation cap
Frame 19 - Frame 18 plus White layer at 40% opacity
Frame 20 - Frame 18 plus White layer at 80% opacity
Frame 21 - Frame 18 plus White layer at 100% opacity
Frame 22 - Frame 21 plus Text layer at 50% opacity
Frame 23 - Frame 21 plus Text layer at 100% opacity (Time = 0.5 sec)
Frame 24 - Frame 21 plus Text layer at 50% opacity
Frame 25 - Frame 1 plus White layer at 100% opacity
Frame 26 - Frame 1 plus White layer at 80% opacity
Frame 27 - Frame 1 plus White layer at 40% opacity
This is how the final frames of your animation should look. Using the basis you had 18 animation frames, you should finish with an icon animation of 27 frames including your white fade and text. Press play to test your icon loops smoothly and when you are completely happy, it's time to save!
You can save your animation as a .psd file which I'd always recommend as it means if you need to edit later you can just open the .psd file in ImageReady and all of your frames will still be there exactly as you leave your finished icon.
To export your icon as a .gif, we first need to optomise it which will make it a good file size for an icon. In the Optomise window, use these settings:
You probably will only need to change the colours to 32. Once done, use File > Save Optomised As... to save your icon as a .gif. After you've done so, it's a good idea to open up the start menu, find your icon and hover over it to ensure in the file info that the icon is 40kb or less. Using these steps your icon should be below 40kb, but if yours has just snuck over, you'll need to return to image ready, delete one of your animation frames (it's heart-destroying, I know!) and then re-save and this should reduce your file size enough.
And that's your icon done! Phew! I hope this tutorial was useful if only a little long-winded, but I figured being thorough was better than glossing over vital details :) If you have any questions at all please don't hesitate to ask and I hope this helps with animation icons!