Animated Lightning Tutorial
By Ignition of Fallout Productions
Difficulty - Beginner to Moderate

Programs required: Photoshop (I used Photoshop 8.0 CS, but since there is nothing complicated in the background image than most of the recent versions of photoshop should be possible also) with Image Ready (standard with Photoshop)


First off, this is the effect that you will learn to create in this tutorial:





Now, onto the learning.

Note - Skip the first two steps if you want to get straight to the lightning and glow effect.

Step 1: Create a background

First thing we will need to do for this tutorial is make a background in Photoshop. This will be the base of the image...you can either use a pre-existing image or choose to create your own. I made a very simple one, by creating a 400x150 pixel document (file>new) and then going to filter>render>clouds.

After rendering the clouds, I went to filter>render>difference clouds and then pressed Ctrl+F about 40-50 times, which just repeated the difference cloud filter. After that I adjusted the curves of it a bit (Ctrl+M) - you can experiment with it and find what suit you while learning about the Curves editor at the same time - and then I pressed Ctrl+U and gave it some color. Make sure the colorize box is checked in the lower left hand corner of the Hue/Saturation window, and play with the Hue and Saturation. I gave it a hue of 186, and a saturation of 25. Feel free to play around with it though. My background now looks like this:



That's it for our background.

Step Two: Adding the Text

Next we're going to add the text. Grab the text tool and adjust the size of it, depending on your image. I used the following settings, and the font I used is called Unreal Tournament. I downloaded it from http://www.dafont.com. The green box on the left with a black "T" inside of it is the text tool, for you beginners.



Next click on your background, and type what you want it to say. If are planning to have just text, and not a render or other image also, then it looks best just to center the text (like I did). If you want to make it look like I did (transparent-like) then look at the image below. Right now, ignore the large box and focus on the small one in the lower left. Where it says "fill", set that to 0%. Then double click on your text layer icaon (the T in that box) or you can right click on it and go to blending options. We are going to give it a bevel and emboss and an outer glow so the outline of the text will be visible. For the outer glow, we are going to give it a size of 0 right now (as in it won't be visible.)



Here are the settings I gave to my outer glow - it will not be visible now, we will cover that part in the animation.



Ok good, we're done with our background and text.

Step 3: Creating the lightning

Select your background layer, and then go to layer>new layer, and proceed to render clouds (filter>render>clouds). Then render difference clouds, as we did to create the background (filter>render>difference clouds). Now press Ctrl+I to invert it, and Ctrl+L to go to the Levels modifier. This is a great tool that you can play with, but for now just select the box in the middle and change it from 1.00 to .1, as detailed in the picture below. You should now have something like this:



Now redo step three, creating a new layer above this. Depending on how many lightning flashes your going to want in your animation, repeat this step once for each seperate flash.

Step 4: Making a brighter background for use with the lightning

This step will come into play when we create the animation. Select the background layer, and duplicate it. Go to the levels editor again (Ctrl+L) and change that middle box to about 1.5. This will make it much brighter. Now hide the 2 lightning layers and the bright background layer by clicking on the eye to the left of them in the Layers Dialog.



It is now time to go to Image Ready.

Click on this button at the very bottom:



Step 4: The Animating

Ok, this is what we have been waiting for. First of all, make sure the animation dialog is visible by going to window>animation (make sure it's checked.)

Now what we're going to do is duplicate our first frame.

Click the this button in the Animation window:



Now select that duplicated frame, and go back to the Layers Dialog. Remember the outer glow? Yea? Well now's the time to adjust that. Go over to the layers, and under the text layer double click on "Outer Glow" and adjust it as shown in the image below.



Now, with our second frame still selected, click on the Tween tool shown right to the left of that "duplicate frame" button in this image. It is the line of circles slowly getting smaller.



Now click on the Tween button (one to the left, as said) and make sure it is on "With Previous frame" and in the "frames to add" box select 5 (or however many you want to add, I think 5 is a nice rounded off number for this purpose.)

After it does that, select the last frame in your sequence and duplicate it. This time go to the outer glow option again, but set the size to 0 (so it will be invisible). Repeat the tween step, adding 5 or so frames.

Step 6: Adding the Lightning

Select 2 frames that you want to add the lightning effect to, each lightning frame one apart from the other. I chose two frames in the middle, in which the glow was greatest, frames 6 and 8.

First, select the first frame (frame 6 in this case). Now go back to the Layers Dialog, and hide the background layer by clicking the little eye. Then make the brighter background visible, by clicking the eye. Also make one of your lightning layers visible, and set it's blending mode to "linear dodge" - in the drop down menu that says "normal" in the shot below.



Repeat that with the second lightning frame (frame 8 here) but instead select the second lightning layer, make it visible and set it to linear dodge. You can adjust the brightness of the lightning in the Levels editor (Ctrl+L, remember?) to spice it up some.

After that, you're pretty much done, you can view it by clicking the Play button in the animation window. Now go to "File>Save optimized as" and enjoy!!

I hope you enjoyed following this tutorial, as I spent the past 2 hours or so making it as indepth as possilbe to cover any possible questions. All of the images are hosted on imageshack.com, which is fine as far bandwidth is concerned because they have no limit on it.

You can also create something like the following, even though I have not included how to do the rain or border in this tutorial:



If you have any questions or comments, you may either register on these forums or email me at "project.ignition@gmail.com". You can view some of my other work, and contact me, at my website: unrealwp.frihost.net.

Thanks for reading, and I hoped you learned something cool from this tutorial!

Nice tut ignition. It was written really well and is easy to do for just about anyone. Good job.

Thanks. Edited it, also added the following image which was done using basically the contents of that tutorial (with just a border and rain).

http://img32.exs.cx/my.php?loc=img32&image=storm.gif

I hope this makes it on good tuts as a lot of people could probably use this :)

thanks for the tut man

but.. it is going far to fast :P

that is what I made

( I made the time of each layer 0,1 sec B) )

and only 1 lightning ( tought you used 1 so I counted on t that the tut would handel 1 only :P)


don't look at the rest of it cos I don't think the rest is good :P

Pretty cool altron, thanks for trying it - GJ :)

If you're here from good tutorials, I hope you like the tutorial and feel free to register here :)

What's a good site that you could host a gif on for free? Right now I'm using uploadit.org but that only allows jpegs. :(

I believe Image Shack supports .gif's.

photobucket does 2

that's awesome! here is what i got

how do you animate the border? I couldn't figure it out

Thanks Chicken, and good job! :)

To animate the border, what you basically do is create a bevel and emboss with a pattern, and then make another layer that has the same bevel and emboss with a different depth setting. Then you tween the two frames, and it makes that pretty cool effect.

There's a tutorial on Good-Tutorials somewhere for a similar effect... I forget what it's called though.

thats awesome chicken kickass boarder

Oh yea, and welcome to Fallout Productions man. I hope you stay :)

Hi there, i'm new here as well as in Photoshop world

Following your tut drove me into this, thanks Ignition

NP man, and welcome to Fallout! :D

Good job on that lightning, it looks great :) .

Thanks ignition and rusty... I couldn't seem to get the same lightning effect as everyone else did. Could you maybe tell me how to make like yours?

Do you mean the shape of the lightning??

because that is just luck sometimes you render clouds that looks perfect for ligtning sometimes you can better start over :P

okay

ok, well im tryin what u do and i cant figure out how to save it :( it saves as a .psd and that just opens up ps! help?!

Save it as a .gif for animation, save as .psd for later editing without animation. Just open ImageReady and then open up the .gif.

i cant save it as a .gif the only choice is .psd

OK thankz to zero i finally got it figured out PLEASE DONT LAUGH lol here it is!



This is not what it looked like in PS IR

Thanks for the great tut, here what I got

not quit the desired effect doh you lightning is a bit too thick and not really lightning like more like a brush stroke

just started using photoshop...this is my second attempt at trying something and this tutorial was excellent and really easy to follow

here's my result...

nice man! i like it!!

Great tutorial. It sure made me enjoy being at work today. This is what I got.


Nevermind photobucket took the size down and now it looks messed up. If I find another server I will psot it.

Check the shoutbox again ;) . Glad iggy could make your day better :)

Good Game, Now lets hit the showers :lol:

J/k :blink:

Here we go and thanks for the help.

Edit: I swear I am not an idiot but it didn't show .... grrrr

Very nice tut! I had one problem, though. When I went to layers and changed the middle box to .1, my image just went black, help?

hey good tutorial this is what i got:
it is a bit of weard on the part with the lightning

Woah Nice one...

Wow it's amazing and easy tutorial! Tnx
Look what i got:


And Happy new year!!

Very nice job M8

oh yeah!
Now i have this

I added to my sig too ..It plays faster through image shack than it does on my puter? It looks more natural..hmm? Well here it is ...stop laughing ..! :D


It's still too fast ? I set it at .6 sec in the animation slices. I wonder if saving it optimized had anything to do with it ?