Log in

sinecure [userpic]
Moving Lights tutorial (PS, AS3)
by sinecure (sinecure)
at April 14th, 2007 (09:27 pm)

I feel: busy

As requested, I wrote a tutorial for lights moving over your icon subject, as in the icon above. I'm not going through the whole 'how to make an icon' thing. I'll trust that you know how to do that, and if you don't, refer to the thousands of tutorials that will help you, including some of my own, found in my memories.

1. Choose an image that's dark, preferably with lots of black around it, because when you animate it the more colors in the image, the bigger the saved file. Plus, it looks better with darker images because it's sort of a nighttime looking thing. I'm using a Veronica Mars icon I just made for this tutorial, and hopefully it doesn't have too much color. *crosses fingers*

2. Make your icon that way you normally would. Crop it to size, lighten it, color it, add text, whatever. When you're done stamp it to a new layer by creating a blank layer and then pressing Shift+Ctrl+Alt+E.

My finished icon.

3. Open a whole new document and drag this stamp into it and move it into position. It's easier to handle all the layers we'll be making without all the previous layers we used making the actual icon. Save it, because you don't want to lose all the work we'll be going through. Save the previous one as well... obvious to me, maybe not to others who don't save the psd files. *shrug*

4. I used a brush by unbrokensky. This is what I used to make the light go across the icon. Save it to your computer, open it in PS and click Edit/Define Brush Preset If you're using PSP open it in there and Select it, then click on your brush palette and click on Create. I think that's all that's needed. I'm going from memory here, and it's been a long time since I opened PSP. You can get the brush from this link here. Make sure you credit unbrokensky.

4. Grab your new brush and create a new layer. Make sure your foreground color is white. Zoom in and place the brush on the right side, lining it up with the edge. Click once. Duplicate the layer and Flip it horizontally. Move them both to the middle of your icon to better see them, then with your Mover Tool move the flipped one to line up with the straight edge of the other layer so that they're back to back. Like this:

5. Merge the two brush layers together. Duplicate your icon layer. The first one will be left normal. The duplicate will have the light coming in from left or right, whichever you prefer. I'm going from right to left. Move the brush layer almost out of frame, all the way to the right. Set the layer to Soft Light. Your arrow buttons will come into use a lot here, so as not to move it up or down.

6. When the brush is in position, create a new layer above all and Stamp the image into the layer using the Shift+Ctrl+Alt+E. Move this layer down to above the very first layer, making it layer 2. Your untouched layer duplicate is still there, in the third position since we stamped it. Choose your light layer and move it over a ways with the arrow button on your keyboard. I'd say 25 pixels. We may end up taking out some layers later, but for now this is a good number. If you'd like, to make it easier going, you can name your layers 1, 2, 3, and so forth to keep track of them, but as you stamp them they'll go in their own order, so you may not need to. Always keep Layer 2 Copy above the others and the brush layer above Layer 2 Copy and you'll be fine.

7. Keep Stamping and moving the light layer over in 25 pixel increments until it disappears on the other side. The last one took my light layer out of frame completely at 15, so I Stamped the last one there instead of at 25. Your Layer 2 Copy is now your top icon layer. Shut off Visibility to all the layers and click on each one successively to see a sort-of preview of how it'll look. See if it flows well and that the layers are all in order.

My Layer Palette looks like this...

8. I use Animation Shop 3, because I learned that application first and it's a heck of a lot easier to use than Image Ready, but I'll try to animate it in both applications. AS3 first. It is a pissy, pissy machine and won't open a file that has transparent bits, so I go to Open, and click my saved icon that I'm working on and right-click/Copy/Paste. I rename it and open it, closing the other version. In PSP there's an option of Duplicating the entire thing, layers and all, and pasting it, but I haven't found it in PS, so, this is how I do it. Now Delete the brush layer. I keep it in my other icon layers so that I can go back later and know how I did something, as I did with this icon/tutorial. :)

9. All ready? Open AS. I have 11 layers, and the file is big, hopefully I'll get that lowered a bit and not have it looking like crap. Okay, if you know how to view your animation already, do that to see how it looks.

( If not, click this link right here and find out.)

10. It's going pretty fast, so we need to set the Frame Speed. Click the first frame and Right Click. Choose Frame Properties. This is the first frame, with no light layer on it at all. I like to set this layer pretty high so that there's a period when the light isn't on there right away. 500 is a good number that delays the light from starting for 5 seconds. You don't want it to constantly loop because that just looks like a trillion and one cars are passing and it's annoying. So, a long delay is always good between the beginning and end of an animation. I'm even considering going higher... and then I did. I have mine set to 1000. A 10 second delay.

I also deleted the very last layer because it was simply a repeat of the first layer and that just added an extra layer that doesn't need to be there, and will up the size.

11. Now, click on the second layer and scroll across to the last frame and click on it while holding down Shift. I started out setting the speed to 25, but that was way too slow. I lowered it in increments and finally settled on 12. Then I checked it again. I liked it there. It resembles a passing car's headlights shining across Veronica's face and not a psycho loony dancing around her with flashlights strapped to his body. (I have issues with 'blinkies') When you have your settings how you like them, go to File/Optimation Wizard and choose 'Animation Gif File', and 'Create a new animation from the optimized animation'. I have mine set the Best Image Quality and when I click on Next it shows the progress. Click Next again and see what it looks like Optimized. Click Next again to see how big the file is. If it's okay, as mine is, just on the cusp, then click Finish and save it.

If not... click Cancel and then click Undo, otherwise it'll be Optimized as you go into the process again and drag down the quality like a bitch. I don't know why it does that when you're cancelling, but it does. Plus? Hitting the Back button lets you go through the process again, but the animation is still, so you can't see what the quality is of all the layers. *rolls eyes*

My finished AS3 icon:

There weren't too many colors in it as I feared. Although I did just barely squeeze in under the LJ limit.

12. Now, Image Ready... I so don't know if it'll be able to do this. I only go into IR when absolutely necessary. And it never really is. As I understand it, to get all of the frames into the animation to be able to edit it, you have to click on the arrow in the Animation Palette. Click the bottom-most layer and it's in there. Click the next layer and it's in there, but the other one isn't. So, click the bottom layer and then the next one. Click the arrow and choose Copy. Do so again, and choose Paste, then choose Paste After Selection. Do this until all the layers are in your animation. (If there's a different, easier way to do this that I'm just not getting? Please, God, tell me now!)

All your frames are now together in the animation. Click on the first one and-- you know. I tried. I did. I couldn't see the animation in a realistic way that would tell me how it looked. I couldn't save the damn thing. All it saved was the first frame, then it shut down on me, and-- it's a bad, bad program!

If you know how to work IR, just use the above AS part as a sort of guide. I'm really sorry I couldn't help you here. I just don't get Image Ready at all.

Well, that's it. That's the tutorial. All done now.

The icon is up for grabs if anyone wants it. Credit, comments are nice, don't hotlink. Don't alter.