Light Animation tut.
Inimation lighting tutorial.
--->
go from that, to that
For this tut you will need a photoshop like program and an animation program. I'm using Adobe Photoshop 7.0, and Image Ready.
SECTION 1, PS.
Start off with the image you want to add this lighting affect to.
Crop the image 100x100.
Now we are ready to begin.
With your 100x100 image, go to layer>newlayer and create a normal layer.
Next, select your gradient tool. If you can't find it on your toolbar, then rightclick the paintbucket icon, and select the gradient tool that way.
Now, choose a Gradient. A black and white Gradient has the best efect, and since our icon is black and white, it would be the best choice.
And now we're ready to add this effect! Make sure your normal/new layer is selected. Now, drag your mouse diagnally from the top left corner to the bottom right.
This is what your icon should look like.
Now, on the layer we just put the gradient on, go to Layer>LayerStyle>Blending Options. Where it says: Blending Options> General Blending> Blendmode, select Overlay opacity at 100%.
This is what your icon should look like. This is the basics. You could leave your icon the way it is, and proceed, but lets say you want a snazzy border. Just go to Layer>New>Layer and create a normal layer. In this layer select an icon brush or a box brush and use a frame that you like. The brush I'm using is from stephys.portfolio. Once you've added any other affects to your icon we're ready to get started.
Duplicate your image by going to Image>Duplicate. On the layer with your gradient, for me its layer 2, set its opacity to 80% now follow this process: duplicate image, (this should be the 3rd image you have open infront of you), set the gradient layer's opacity to 60%, duplicate image, (this is now the 4th image) set its gradient layer's opacity to 40%, create a duplicate image (5th open image) and set its gradient layer to an opacity of 20%.
This is what you should have, 5 images, which a somewhat visible difference in gradient depth.
Now, merge all of the layers in each image by going to Layer>Merge Visible (or ctrl+shift+e)
Nothing should be different about your images, they are all just one later each now, and you still have 5 images open.
Follow me closely because I might get confusing here. I placed my images in descending order of how light the gradient overlay was. With your Rectangular marquee tool, select the entire image of the 80% overlay. copy it (ctrl+c = copy) and then paste it (ctrl-v = paste) to your 100% opacity gradient icon.
Now continue with your 3 other images, copying each and pasting them to your original image, the 100% opacity one. (*note*, in PS 7.0 you can also drag and drop the images).
Now, you're going to have duplicates of some images. After pasting the image that had the opacity of 20%, work backwords and re-copy and paste the 40%, 60%, and 80% images. This will make sense once we start animating the image.
Now, you should have a total of 7 layers and 1 background image.
Take that image now to your animation program.
SECTION 2, ANIMATION
Turn off layer visibility by clicking in the eye next to all layer, except for the background layer.
In your animation tab you should have only one image. Select the duplicate image button, and then click the eye on layer 1 to make that image visible. Deselect the eye on the background layer.
Continue this process, of creating a duplicate image, and selecting the visibility of each different layer until you've completed all the 7 layers and the initial background image. You should now have 8 slides.
Now, just select the speed you want the images to flash, I set mine to 0.1 sec, but if you like 0.0 second then you can leave it at that. Make sure your looping option is set to forever.
Go to file>save optimized as and name your image ans save it as a .GIF. Viola! You are done! And now a master of light animation. :)
--->
go from that, to that
For this tut you will need a photoshop like program and an animation program. I'm using Adobe Photoshop 7.0, and Image Ready.
SECTION 1, PS.
Start off with the image you want to add this lighting affect to.
Crop the image 100x100.
Now we are ready to begin.
With your 100x100 image, go to layer>newlayer and create a normal layer.
Next, select your gradient tool. If you can't find it on your toolbar, then rightclick the paintbucket icon, and select the gradient tool that way.
Now, choose a Gradient. A black and white Gradient has the best efect, and since our icon is black and white, it would be the best choice.
And now we're ready to add this effect! Make sure your normal/new layer is selected. Now, drag your mouse diagnally from the top left corner to the bottom right.
This is what your icon should look like.
Now, on the layer we just put the gradient on, go to Layer>LayerStyle>Blending Options. Where it says: Blending Options> General Blending> Blendmode, select Overlay opacity at 100%.
This is what your icon should look like. This is the basics. You could leave your icon the way it is, and proceed, but lets say you want a snazzy border. Just go to Layer>New>Layer and create a normal layer. In this layer select an icon brush or a box brush and use a frame that you like. The brush I'm using is from stephys.portfolio. Once you've added any other affects to your icon we're ready to get started.
Duplicate your image by going to Image>Duplicate. On the layer with your gradient, for me its layer 2, set its opacity to 80% now follow this process: duplicate image, (this should be the 3rd image you have open infront of you), set the gradient layer's opacity to 60%, duplicate image, (this is now the 4th image) set its gradient layer's opacity to 40%, create a duplicate image (5th open image) and set its gradient layer to an opacity of 20%.
This is what you should have, 5 images, which a somewhat visible difference in gradient depth.
Now, merge all of the layers in each image by going to Layer>Merge Visible (or ctrl+shift+e)
Nothing should be different about your images, they are all just one later each now, and you still have 5 images open.
Follow me closely because I might get confusing here. I placed my images in descending order of how light the gradient overlay was. With your Rectangular marquee tool, select the entire image of the 80% overlay. copy it (ctrl+c = copy) and then paste it (ctrl-v = paste) to your 100% opacity gradient icon.
Now continue with your 3 other images, copying each and pasting them to your original image, the 100% opacity one. (*note*, in PS 7.0 you can also drag and drop the images).
Now, you're going to have duplicates of some images. After pasting the image that had the opacity of 20%, work backwords and re-copy and paste the 40%, 60%, and 80% images. This will make sense once we start animating the image.
Now, you should have a total of 7 layers and 1 background image.
Take that image now to your animation program.
SECTION 2, ANIMATION
Turn off layer visibility by clicking in the eye next to all layer, except for the background layer.
In your animation tab you should have only one image. Select the duplicate image button, and then click the eye on layer 1 to make that image visible. Deselect the eye on the background layer.
Continue this process, of creating a duplicate image, and selecting the visibility of each different layer until you've completed all the 7 layers and the initial background image. You should now have 8 slides.
Now, just select the speed you want the images to flash, I set mine to 0.1 sec, but if you like 0.0 second then you can leave it at that. Make sure your looping option is set to forever.
Go to file>save optimized as and name your image ans save it as a .GIF. Viola! You are done! And now a master of light animation. :)