immoral // animated icon tutorial
This tutorial will be extensive because my icons tend to be rather complicated. So be prepared for the long haul. I will only be explaining my animation processes on this particular post. Since the difficulty level of this icon is rather high, I will be assuming you know your way around Photoshop and ImageReady fairly well.
start<----->end
difficulty level: 8/10
animation frames: 32
program[s] required:
Adobe Photoshop [PS]
Adobe ImageReady [IR]
note: I'll be starting in PS, as there are a few effects I have to hand create before starting the animation slides. Please note that the number beside each layer holds no relation to the step-number in this tutorial. It's important that you click on each link within a step, as I will be demonstrating my process through screenshots.
01.] The first thing I want to do is thin down the size of the flame in the original icon base. After all, flames don't start out roaring, right? To accomplish this, create a new layer, use the eye dropper tool to match the color surrounding the flame, and then use a small paint brush to color over the desired area. Don't color over the entire flame in this step!
----->
02.] I know at some point in time, I'm going to have to "extinguish" the flame altogether because matches don't stay eternally lit. So the next step will easily mimic step 01. Just as before, create a new layer, use the same color swatch you picked up with the eyedropper, and this time completely color over the flame. Be careful not to color over the matchstick, though!
----->
note: There is a good reason I didn't combine steps 01 and 02 and just completely color over the flame in one easy step. You don't want your animation to be choppy so you want the flame to gradually disappear, not just completely blink out in one frame. Keep in mind that transitions need to be smooth and flowing for a professional appearance.
03.] Now we're going to work on building the flame. First, you need to change the opacity of the layers we made in steps 01 and 02 to 0%, as demonstrated here. We do this because you want to see the original size of the flame, and work up from that.
To build the flame larger, we're going to give it a nice glowing look. Color and linear dodge layer effects are always good for this type of trick. To make the flame larger and glowing, create a new layer, use your eyedropper to pick an orange-brown color from the icon, and then color upward on the flame using a small paint brush. Then to soften the edges of the flame, use your smudge tool to pull the paint upward.
note: The reason why I pulled a dark orange-brown from the original base instead of a pure orange is 50% trial and error, and 50% experience. Most of the time you'll know what color to choose because of the effect you're using, but the other half of the time you'll just have to keep trying different colors until you find the best one.
To complete step 03, simply choose color dodge from the drop down layer effects on the layer you painted the orange.
----->
04.] Finally, an easy step! Since I've already mentioned that we're going for realism, I'm going to give the illusion that Sanzo is inhaling on the cigarette. To do this, we'll need to make the end flare. Look very closely at the end of the cig, because this step is very hard to see. Like always, create a new layer. Through trial and error, I found that you'll need to use the dropper to pick up a darker orange-brown from the icon base than we used in step 03.
To finish up, use your drop down layer effects to choose linear dodge. However, it's alright to play around between color and linear dodge to see which effect you like best.
----->
05.] For our last PS effect, we'll need to create the smoke. Everyone's smoke is going to differ slightly, so you'll just have to play it by ear. For my smoke, I used a premade brush from Insomniac Brushes, but any brush you have that could pass as smoke will do just fine.
Create a new layer [you should know this by now] and use your eye dropper to pick up the palest yellow you can from the base icon. Then use your premade brush to fashion some smoke trailing up from the end of the cigarette.
----->
note: From this point on, I will be using IR!
06.] Open up your IR, and we're ready to begin the fun part. On frame 1, we have to prepare the icon for a continuous reel, which is really annoying and takes some planning. Luckily for you, I'm going to show you exactly how to start off.
For our first frame, you must set every layer you created in this tutorial to 0% opacity except for the layer in step 01. That layer will remain 100%. You use the opacity slide in IR just as you did for PS in previous steps.
----->
07.] Now we're going to make the flame flicker in the dark. This step is mostly about personal preference. You might want your flame really flickery or just a little jumpy. My first 15 frames are nothing but the flame jumping up and down.
To make the flame flicker, simply change the opacities of the layers in steps 01-03 randomly. This will give the fire a realistic, jumpy effect. This process is a little complicated to demonstrate, so let me give you an example by showing each individual frame.
+
+
+
+
+
+
=
note: You'll want to hit the play button in your reel after every time you make a new frame. Doing this constantly as you go along will ensure you don't accidentally screw anything up and don't realize it until the very end. Previewing is important!
08.] Now that your flame flickered high enough to light the cigarette, we want Sanzo to inhale. Meaning, we need to make the tip flare red within the animation reel. Another easy step, as all you have to do is create a new frame with the cigarette tip layer at 100% opacity, and leave it at 100% until we get in-depth with the smoke frames.
09.] Once the cigarette is lit, we want to completely extinguish the flame and bring in the smoke. To make this step, create your new frame [I'm going to assume you know when you need to do this- usually with each new step]. Next, within that frame you want to change the opacities in steps 01-02 to 100%, and the opacity of step 03 to 0%. Keep in mind that the layer with the cigarette tip should still be at 100% for this entire step. Finally, since we don't want the smoke to instantly appear, change the opacity of the layer with the smoke to 20% to gradually make the transition. This process sounds more confusing than it really is.
10.] All my remaining frames will be used to complete the smoke effect. This part is tricky, so you may need to read the directions a few times. You already have the smoke started, since your frame from the last step changed the opacity of the smoke layer to 20%. Once again, your cigarette tip layer is still at 100% opacity for this entire step!
Create 4 new frames. All 4 of those new frames will auto-set the smoke layer opacity for 20% because the parent frame [the frame we created in step 09] was set at 20%. Now, in those 4 frames you want to raise the opacity by increments of 20% each time.
11.] Almost finished, so hang in there! Now we're going to use the same process from step 10 to count back from 100% opacity using increments of 10%. However, you're going to stop once you hit 10% instead of counting back all the way to 0%. Once you hit 10%, you're going to create two more frames and set both of those to 5%. Here's a little diagram of how the smoke layer's opacity will appear in your frames.
20-40-60-80-100-90-80-70-60-50-40-30-20-10-5-5
Now, on those last two frames of 5%, we're going to turn off the flare of the cigarette's tip. Make sure you're on the layer with the tip, and click on that first frame of 5%. Change the opacity for the cig tip for the frame to 33% [or something in that range]. Then click on the other frame of 5%, and change the cig tip layer's opacity to 0%.
12.] For this step, we're going to make the smoke float upward and out of the icon as real smoke would. Go back to the frame in which your smoke layer's opacity is set at 90% and select your move tool. Make sure you are clicked on the smoke layer before your proceed, and not still on the cig tip!
Using your move tool, you're going to drag the smoke upward a tiny bit within the preview. This process will be repeated on every frame until your last. This part takes a little careful planning because you want to be sure that your smoke has moved completely off the icon by the time you reach your very last frame, yet you want to be sure that the smoke moves the same increment of space between each frame. In other words, you don't want to get to the last frame and have to move your smoke a huge chunk upward in order to make it disappear. Remember- smooth transitions are the key! Here's a small part of the smoke reel for example.
13.] An easy step! Change the time delay of your very last frame to 1 second. That way, there's a small lapse in time before Sanzo re-lights his cigarette.
14.] In your preview box, click on the optimized tag. As you're well aware, LJ doesn't allow you to upload icons that are over 40K. Check your specifications for size in your preview box to see if you've gone over.
As you'll notice, my icon is below the size restraints, but that's because I always start my animated icons at a lossy of 12 [as it has been during the entire tutorial]. However, if your icon is well above or below 40K, you'll have to use the lossy slide until it's no more than 39K. I've found that LJ sometimes won't accept icons that are even one tenth of a point over 39 [it's bitchy like that].
I find for the best results, you should always leave your settings as displayed below. The lossy slide is the only thing you should really use when trying to change the size of your icon. Things that may make your icon large in size include using the "tween" option to link frames, changing opacities in layers, moving around the base icon, and effects that drastically change colors in the icon.
15.] For your last and final step, simply hit the play button in the reel to see how smoothly your icon loops from start to finish and back to start. Let it play through a few times to make sure there's no discrepancies between frames. Then click on File, Save Optimized As, and you're ready to load it to LJ! Your final product should look similar to mine, although there are sure to be differences between icon makers and personal preferences.
frequently asked questions [FAQ]:
Q: Can I suggest an icon for your next tutorial?
A: Yes.
Q: Will you teach me how to use IR or PS?
A: HAHAHAHAHAHAHAHA. HA. No. Try Googling for tutorials.
Q: Will you send me IR?
A: I run on a 24K. It takes me five minutes to check Hotmail, dudes.
Q: Can I link to your tutorial?
A: Please do! Share!
Q: Can I hotlink to your images?
A: KIREI ANGRY. KIREI SMASH!
Q: Can I redistribute the icon I made with your tutorial and icon base in my icon journal or icontests?
A: I would rather you didn't. Essentially, you didn't really make the icon yourself. However, if you use my tutorial to make an icon of your own using a completely different icon base/original picture, then that icon is 100% yours.
Q: Can I load the icon I made using your tutorial and icon base to my personal journal?
A: Once again, that doesn't jive well with me, but I can't do anything to stop you.
Q: Why don't you use Jasc Animation Shop?
A: Jasc is for pansies! Really though, the premade effects are corny and the icons save at really shitty resolution. I guess it's good for achieving certain effects, but I still say AS is the program of the lazy.
Q: I couldn't understand a certain step in your tutorial. Can I contact you personally about it?
A: Yes, but be aware that my time is precious and worth millions upon trillions of dollars.
Q: Your tutorial was too difficult to understand!
A: question n 1. An expression of inquiry that invites or calls for a reply. 2. An interrogative sentence, phrase, or gesture.
READ A BOOK, DAMN IT.
Do you have a question that wasn't answered here? Then please leave it in a comment!