Abstract Shine Animation with Photoshop and ImageReady
Few days ago, I was playing with Photoshop and ImageReady, and I came up with something really delicious :). I was trying to make an animated Display Picture or Avatar for Windows Live Messenger 9 (which supports recently animated avatars). So I mastered an amazing technique that I’m going over step by step below. Note that this is an advanced tutorial because it involves the usage of Pen Tool, Layer Mask and Tween (ImageReady). Here’s what we’ll be working on
Let’s start:
Step 1
Open Adobe Photoshop and press CTRL + N to create a new image:
Step 2
Set the background color to #000000 (black) and the foreground to #122c52.
Step 3
Filter > Render > Clouds to get something like the following:
Step 4
Select the Pen Tool, make sure the “Paths” option 
is selected in the toolbar. Draw the following shape:
Step 5
CTRL + SHIFT + N to create a new layer (Layer 2).
Step 6
Select the Brush Tool, set the Foreground color to #ffffff (white), master diameter to 4px and hardness to 100%.
Step 7
Select the Pen Tool again, right click on the image and press Stroke Path…
Step 8
Set the following options in the Stroke Path dialog:
Step 9
CTRL + SHIFT + N to create the third layer.
Step 10
Select the Brush Tool again and increase the Master Diameter to 5px.
Step 11
Right click again on the image and press the stroke path. Then apply the same options.
Step 12
Hide the Layer 3 by unsetting the eye in the layers panel:
Step 13
Select the Layer 2 from the Layers panel. Then, Layers > Layer Style > Blending Options… and set the following settings (Outer Glow and Color Overlay):
Step 14
You will get something simillar to this (do not remove the pen tool selection):
Step 15
Now, we’re done with Photoshop, we’ll start editing with ImageReady:
Step 16
ImageReady will open. Window > Workplace > Default Workplace to arrange your windows.
Step 17
Window > Animation to show the animation window:
Step 18
Now, we will show the Layer 3 (that we already hided in Photoshop) by setting the eye back.
Step 19
Be careful here!!! Drag the Layer 3 in the Layers Panel to the “Add a mask” button in the bottom to create a mask of that layer. Select the Brush tool and clean up the white area in the mask. Then unset the link between the layer preview and the mask:
Step 20
Here’s the tricky part. Although it can be done in many ways, but i find this way the easiest. Select the Brush Tool (I think it’s already selected :)), set the foreground color to #ffffff (white) and select the following Brush:
Step 21
Make sure the mask is selected! draw with you free hand a line like this (Note that you will only see this line in the Mask preview in the layer panel):
Step 22
You should see in the Layers panel the following:
Step 23
Let’s start with the animation now. Press the 1st Frame in the Animation windows and press “Duplicate current frame” icon to duplicate the layers state.
Step 24
Now make sure the the mask of the layer 3 is selected, select the Move tool and Press Shirt + Right like 25 times to reach the following state:
Step 25
So, we have moved the line mask from left to right. It’s time to animate it! The frame 2 is selected, hold CTRL and click on frame 1 to make them both selected. Then press the Tween icon:
Step 26
Apply the following Tween settings:
Step 27
A set of frames will be created for you. Select the 1st frame, scroll to the end, hold SHIFT and click the last frame. You will have all the Frames selected. Click the delay drop down on any of the selected frames and choose Other:
Step 28
Enter 0.03 seconds as a delay between the frames:
Step 29
Now select the last Frame alone by clicking on it, and set its delay to 5 seconds:
Step 30
We’re done. It’s time to save the animation as gif. Make sure the format in the "Optimize" panel is GIF:
Step 31
File > Save Optimized As! 
Open it with Firefox, because Firefox renders the Gif formats faster than Internet Explorer (I’m not sure about Safari or other browsers).
By the way, here’s the avatar I discussed earlier in this tutorial:
If you have problems completing the tutorial and would prefer me doing it for you. I offer a custom design service for 20$. After sending the payment, simply click the “My MSN” button to get in contact with me, or, I will contact you as soon as I receive the payment.
I hope you have enjoyed my tutorial. If you have anything to add, or you found out that I missed something, leave a comment and I’ll be glad to fix it 
Stay tuned!
Digg this story ?
on 2008-01-08 15:19:08
:O sexy
on 2008-02-06 11:19:31
glad to see that we have same thinking.
on 2008-01-16 03:54:25
Hey thats one of the coolest ….am an amateur and have a self designed website and would love to learn from people like you on how I can spritz up my drab website.Thanks dude!
on 2008-01-16 06:40:48
Very nice! The animation is so smooth, and I’m surprised it’s only 20kb to boot. Simple technique as well, kudos.
on 2008-01-16 09:45:31
Nice
on 2008-01-16 09:45:49
nice
on 2008-01-16 12:39:50
Hello! Only works if the options Parameters, from Tween settings, are selected!
Bye!
on 2008-01-16 19:30:21
very cool! I can only create the image but not animate it because I have Photoshop CS3 and they discontinued it. Can you please tell me how to make it in CS3, i understand that the same features are in CS i just don’t know where
on 2008-01-16 20:30:25
Thanks Ankit. Actually I didn’t upgrade yet to CS3, I’m not sure about its features…
on 2008-05-12 07:23:48
can you guide me in step19 in your Abstract Shine Animation with Photoshop and ImageReady im havign problemin that step cant continue..help
on 2008-02-18 19:11:40
Ankit,
The only thing that you need to do is instead of opening imageready, just go to window>Animation. Also, when you’re going to save go to file>save for web and devices. Everything else is the same.
on 2008-01-16 23:44:54
It’s a great tutorial!
At step 14 i have this:
http://img210.imageshack.us/img210/9316/aaaaaaaaaaaaaabm8.png
and I don’t know what’s the problem???Pls help me?!
on 2008-01-16 23:48:20
hey game, make sure you check “Simulate Pressure” in step 8
on 2008-01-16 23:47:57
[…] : Abstract Shine Animation with Photoshop and ImageReady - by Elie El Take your fantastical swirls to another level! This simple tutorial will teach you how to add in a […]
on 2008-01-17 00:48:37
Yes.
Here are the pictures:
Step 1 to 5:
http://img113.imageshack.us/img113/2664/step1to5ql2.png
Step after 7(after stroke path):
http://img113.imageshack.us/img113/835/afterstrokepathonthethiol7.png
Step 14:
http://img113.imageshack.us/img113/3180/step14ob2.png
Maybe you can find the failure in “History”?
I don’t know but help me it’s the best tutorial that i have seen yet!!
:S :S
on 2008-01-20 00:51:52
game, recheck Step 6… I solved ur problem
on 2008-01-17 08:57:47
Really nice technique. I can picture a lot of uses for this. Oh, and it looks great when viewed on Safari too. Keep up the good work.
on 2008-01-17 12:31:41
hi, it worked perfectly with me…but the problem is tht i don’t know how to save it as GIF in CS3
on 2008-01-17 19:53:41
Can anyone send me this .psd file,maybe I can find the failure……pls
Here’s my msn:
da_game92@hotmail.com
on 2008-01-19 01:28:34
Hello! This tutorial is amazing! I’d like to do this with Text if anyone can help me please drop an email! Thanx so much
on 2008-01-21 00:28:49
If you have cs3 you only hacve to press Window>Animate
It’s almost the same thing
on 2008-01-21 22:23:49
you needed to mention that on layer 3 the layer and the mask needed to be unlinked, otherwise its brill
on 2008-01-21 23:43:17
Dan, I mentioned that in Step 19!
on 2008-01-23 17:19:06
Oh just i was looking for some good tutorials to link to off my website and i come across this! this is fantastic! hope you dont mind if i link to it!
on 2008-01-23 18:21:29
You’re free to link Tim! thanks
on 2008-01-23 21:34:17
I follow your guide really slavish but at the end I ended up with the problem that I couldnt save as gif file. The only option I have is photoshop file.
on 2008-01-23 22:33:50
you should “Save Optimized As” not “Save As”
on 2008-01-24 22:24:51
Hey Elie i have a problem i am in CS3 extended and i dont have image ready which makes it difficult because i dont think it can be done unless there is another method? however i am trying to apply this to my forum heads so it goes in from the left so far and at the same time it comes in from the right at the same time. Do you think you could apply this to the images to me if i e mail you? my e mail is tim@tksdofficial.co.uk if this is possible for you to do. Thanks
on 2008-01-24 23:15:28
Hello!~ very nice tut! for a start!
Who ever is using cs3- Extended.. you can still do this tut.. as i found out!
Just go to Windows-Animation while in PSCS3
on 2008-01-25 02:01:22
Awesome!
on 2008-01-25 11:53:46
I do know you can do animation in CS3 extended but its different to image ready its the Mask part i got stuck on not the animation
on 2008-01-26 01:04:51
i had this problem also… couldnt see why i couldnt get the animation to work but as someone said before the mask shouldnt be linked and it worked for me
on 2008-01-26 19:02:09
Hey Dude Cool tutorial but one thing… when i’ve done the animation how can i add a text and make it go with the animation? think you could tell me that? becouse everytime i try that layer mask thingy my text goes all shitty
It get’s pushed away and stuff, and when i try to remove the white stuff from the layer mask it removes the whole text :S
on 2008-01-28 21:41:40
I have problems with photoshop cs3 the mask, when one is moved for the
animation remains full white not only line…
on 2008-02-05 18:25:06
Cool tutorial… I’ve seen this in a few sigs/avatars, where it goes across the whole thing… I hope I find a good use for this one.
on 2008-02-08 03:42:48
[…] part is that it is not a hard technique (that is always a plus). The original tutorial was by Elie El Khoury, found on tutorialized.com. So first, get an appropriate canvas size and put black in the […]
on 2008-02-08 18:59:00
Thanks for the tutorial it’s great and it works!!!!
on 2008-02-12 08:01:24
[…] this tut out mang, it says image ready but forget that its the same for PS CS3 Elie El Khoury Abstract Shine Animation with Photoshop and ImageReady ★ this is how i learned how to do basic animation to banners and what not. Get this down and you’ll […]
on 2008-02-15 09:09:25
I can’t save the animation, why?
on 2008-02-15 09:21:26
Check out step 30
on 2008-02-16 17:40:34
Hmmmm.
dont understand.
on 2008-02-17 08:55:09
That effect was awesome… I´ll try it…
Byezzzzz
on 2008-02-18 20:10:28
Awesome… I did it
…
Byezzzzz
on 2008-02-22 03:29:50
Hey,
Saweet idea, but I’m gettin the same problem as game, and before you say select the pressure option, I did. Still the same results as game. I’m using Photoshop CS3 Extended. Any solution?
on 2008-02-23 01:58:40
I can’t seem to get the animation to work, im using Photoshop 7.0. I’ve followed everything to the very letter, but when i play the animation the masked layer doesn’t show as it passes across to great the effect of the light following the line. What have I done wrong?
on 2008-02-25 14:06:21
I’m having the same problem as game posted and Chris on step 14. I don’t get the edges of the line as sharp as it is in the tutorial?!?!?!?!
game solved the problem but he didn’t tell us how
HELP
on 2008-02-26 18:44:38
Can you do something like this with a rotating Shine ? like a Globe and then of the centre you rotate the shine so, that it goes around te world
on 2008-03-01 13:11:18
WOOOLALA
THANKING
on 2008-03-01 15:11:19
Anyone?
on 2008-03-01 17:09:46
Phantom, check out the yellow note in the step 6
on 2008-03-07 20:23:05
I have the same “Pen Pressure” problem.
It seems Photoshop need a pressure supported tablet bevore supporting this function.
But it sounds a bit odd to me.
Wy you can’t use the tool for automatic fade in and out? you don’t need a tablet for that because its just fading … px at the start & end.
Is there a way to make a auto fade in/out with a brush when you don’t have a pressure supported tablet connected?
(the normal “fade” function only fade on they end, so its no option.)
on 2008-03-09 03:27:46
I’m having a problem with it not shining…I got your basic thing down
Great tutorial by the way, but for some reason when I try to make it on a text it like…moves the aura of it off or something. Not sure what it’s doing. Here’s a link:
http://i115.photobucket.com/albums/n308/dragonbok/GlowSigGIF1.gif
on 2008-03-10 07:52:59
nice tut..but im lost at step 19…there is no brush in my imageready..im using CS..
is there a work around? thanks.
on 2008-03-10 16:22:34
Dude, nice tut!
It didn’t work for me at first because i forgot to unlink the layer and its mask, step 19, i read over it (me - dumbass hehe).
This is a sick technique!
thanx
on 2008-03-18 21:09:18
[…] Posted on March 18, 2008. Tutorial from ekhoury.com […]
on 2008-03-22 17:24:56
well very nice
but it doesn’t move i think i did something wrong by step 19
cause when i move the vector mask
the side before i made the line its white
maybe i used the wrong tool
can you explain more about the brush tool
on 2008-03-24 21:50:07
thanks elie! ur the best!
on 2008-04-01 23:27:44
hi man,
the park of the animation..the moving to the white brushed area on the layer mask does not works…
it does nothin at the animation it moves the layer..
on 2008-04-14 06:27:12
LOVE IT!!!
I have played with about 15 different pictures with this one. This is an awesome and well described tutorial.
My fave one I’ve done with this tutorial so far is here.
Thanks!
on 2008-04-16 17:45:34
1st let me say that this is a great tut.!
But I have some questions, I used this tutorial to make my own pic and it seems to work well when in a *.psd format but when I save it as an optimized *.gif then it just comes out black with no pic or animation and I can’t figure out why. could you gimme some pointers?
on 2008-04-23 20:41:04
could you please tell me how to do step no.2! i am ok with all the rest (i looked/read through it) but i’m not sure how to “do” black at 000… and the forg.122c52!
thank you.
on 2008-04-25 08:17:08
[…] View tutorial […]
on 2008-04-26 03:33:50
him
could u plz help me figure out what “Move tool and Press Shirt + right” means.
really appreciate it
on 2008-04-26 03:34:34
reply to this one plz
help me with “Move tool and Press Shirt + right”
wat does it mean?
on 2008-04-26 11:00:19
on Cs3 there is the problem of the mask does not work… what we can
make?
kind ekhoury it helps us!
on 2008-04-26 16:42:08
@girlie u select the move tool and the u hold shift + u press ur right arrow (on the keyboard^^)several times. I had a question to is it possible to do this with text to ? if it is and some1 knows a tut about it let me know plz ty. very nice tut btw =)
on 2008-05-12 07:07:28
make again a tutorial that is more simple please…
on 2008-05-14 08:13:47
i cant do the step 24! huhu..help me please…
on 2008-05-20 15:28:25
hiiii people
i need help with this method of how you animate in photoshop ( by the way i have an ileagle copy of photoshop so feel free to sue me adobe) <<<<—— but i will be sad and think of my puppy dog eyes in court hahaha
i will sned you pornographical images that i made
on 2008-05-23 00:08:43
I love this tutorial, very well explained and easy to follow. I have a question, is it possible to animate multiple curved lines rather than just the one?