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 Shift + Right Arrow around 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!
I am Elie El Khoury, from Lebanon (Byblos), Woopra co-founder & CIO, Web & Software Developer, Designer, Guitarist, Mac user and the worst blogger on earth! 
:O sexy
glad to see that we have same thinking.
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!
Very nice! The animation is so smooth, and I’m surprised it’s only 20kb to boot. Simple technique as well, kudos.
Nice
nice
Hello! Only works if the options Parameters, from Tween settings, are selected!
Bye!
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
Thanks Ankit. Actually I didn’t upgrade yet to CS3, I’m not sure about its features…
can you guide me in step19 in your Abstract Shine Animation with Photoshop and ImageReady im havign problemin that step cant continue..help
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.
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?!
hey game, make sure you check “Simulate Pressure” in step 8
[...] : 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 [...]
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
game, recheck Step 6… I solved ur problem
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.
hi, it worked perfectly with me…but the problem is tht i don’t know how to save it as GIF in CS3
Can anyone send me this .psd file,maybe I can find the failure……pls
Here’s my msn:
da_game92@hotmail.com
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
If you have cs3 you only hacve to press Window>Animate
It’s almost the same thing
you needed to mention that on layer 3 the layer and the mask needed to be unlinked, otherwise its brill
Dan, I mentioned that in Step 19!
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!
You’re free to link Tim! thanks
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.
you should “Save Optimized As” not “Save As”
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
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
Awesome!
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
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
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
I have problems with photoshop cs3 the mask, when one is moved for the
animation remains full white not only line…
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.
[...] 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 [...]
Thanks for the tutorial it’s great and it works!!!!
[...] 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 [...]
I can’t save the animation, why?
Check out step 30
Hmmmm.
dont understand.
That effect was awesome… I´ll try it…
Byezzzzz
Awesome… I did it
…
Byezzzzz
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?
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?
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
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
WOOOLALA
THANKING
Anyone?
Phantom, check out the yellow note in the step 6
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.)
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
nice tut..but im lost at step 19…there is no brush in my imageready..im using CS..
is there a work around? thanks.
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
[...] Posted on March 18, 2008. Tutorial from ekhoury.com [...]
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
thanks elie! ur the best!
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..
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!
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?
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.
[...] View tutorial [...]
him
could u plz help me figure out what “Move tool and Press Shirt + right” means.
really appreciate it
reply to this one plz
help me with “Move tool and Press Shirt + right”
wat does it mean?
on Cs3 there is the problem of the mask does not work… what we can
make?
kind ekhoury it helps us!
@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 =)
make again a tutorial that is more simple please…
i cant do the step 24! huhu..help me please…
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
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?
Here is a sig I made using your tutorial Eli.
http://star.walagata.com/w/udcki/swirly-sig.gif
You helped me so much! Your service was awesome and it went by quick. A++!
Here is an example of multiple streaks being animated with the technique:
http://star.walagata.com/w/udcki/red-streaks.gif
Wow Kirk… Very nice choice of colors
I would suggest to make the shine bush’ hardness much lower.
Thanks, I will give that a try.
Nice! very very nice!, my result: http://img442.imageshack.us/img442/2407/bnkandesnreby6.gif
very nice!
inn step 24, ?????Move tool and Press Shirt + Right ?????
I’m stuck! I get to apply the mask in step 19, the mask in the layers panel is colored white, so do I paint the whole thing black with the brush? (I’m using Photoshop CS3 if that makes any difference)
Sorry to be a nuisance but this look awesome and I really want to do it!
Sorry, It took a train journey and my laptop and I got it figured. I’m not sure what I was doing wrong. Great stuff though. thanks
thanks
VGG. Nice animation
Daymo & anyone else stuck on that masking part. after dragging the layer to the “add layer mask” button, you have to paint the mask all black. You also must unlink the image and the mask (the chain in between the two in the layers menu). Then while making sure the mask is selected you have to use the paintbrush and paint a white squiggly line on the left of the mask (which actually will make that part visable during the animation). Then in the animation window (window>animation in CS3). Continue with step 23.
EXELLENT resource for image ready controls in CS3 http://kb.adobe.com/selfservice/viewContent.do?externalId=kb400899
excellent idea! thank you so much!
Can you show a similar tutorial for making a zorro effect, just like in the movie? Im trying to create a 3d effect of an INFINITY IMAGE in blazing fire, formatted in GIF.
please show me how to do it. 
thank you so much
Very nice!
very nice
very nice animation
thnx
i will try it
Hello Mr.Khoury
I’m using photoshop CS3, w i can’t save the file as a GIF image file, when i save it as GIF, the picture won’t glide anymore! what to do?
Hi,
Is there any way to make this animation follow a path? I mean, over here we scroll the white bar in the mask from the left to the right, but how to create this effect when you would like the shine make to follow a certan abtract path like the form of a sensual woman, form of a flower, …
Please Advice.
Sincerely,
JDV.
can someone upload PSD please?
i do all as is in tutorial and it doesnt work
and i dont know what i do bad
(sorry for my english)
This tutorial looks great, except how do you get those curves using only three anchor points with the pen tool? Mine turn out all straight TT~TT
great tutorial, but im getting really annoyed tryin to make an animated gif using image ready, im saving it as gif 128 dithered, then im going to save optimise as and it just isnt saving it at all as animated!! im downloading other animated images and wallpapers and they are all flattened images to!! can any one help me!!
UsefZ, save the file as follows, “Save Optimized As”, save as gif. To see it as an animation, open it with MS Explorer. It should animate then for you. Good luck!
Janine, open Image Ready and reset your preferences. Dont change anything and then go to Save Optimized As, then Gif, then open with IExplorer.
That is an awesome animation
Was the first time i’d used imageready, and was still pretty simple. Two thumbs up.
Good Tute looking to make these wavy things for ages and now you have shown me how to animate and even bigger plus
Totally awesome! I’m also looking for tutorial which shows how to make irregular gradient, (it’s behave and looks like it moves or something like a wave. Very delicate of course, we not talking about some dirty solutions)
//
please someone explain step 24 for me as i dont understand what he means by shirt + right
He means press shift and the right arrow button.
[...] 19. Abstract Shine Animation with Photoshop and ImageReady [...]
Hey realy nice tutorial mate
thanks for it ^^
really nice work in all tutorials.
[...] Abstract Shine Animation with Photoshop and ImageReady [...]
[...] Abstract Shine Animation with Photoshop and ImageReady [...]
[...] Abstract Shine Animation with Photoshop and ImageReady [...]
the only problem i have is that the animation is moving very blocky..no problemo though im sure the glow effect in after effect’s could add a extra puch to this flow line.thanks for the tut
[...] 19. Abstract Shine Animation with Photoshop and ImageReady [...]
cool! i tried it in photoshop cs4 and it works!.. thanks!!! (^^)
Thanks, it was cool.i did it but my light wasn’t that visible. it’s very light( the white light that passes through the carve line) if u don’t concentrate u might not see it pass. is it because i used red and not blue.
and i don’t have the glow either .
did not work for me – try to animate but if I move mask to the right for frame animated 2 there is no animation on frame 1? c3 not sure what to do?
Great tut one thing though is there a way to have the background transparent so I may use this on any background I choose?
Thanks Lisa
Hi me again I uploaded my image on firefox and a few troubles the animation is very slower than was in PS I tried reducing time to none and still slow I’m using a 3000px wide image but the swirl is the same size as the tutorial I’m creating rather large headers to fit large screen monitors also I used some text with glow blend and also I used a highlight technique to add gloss all on seperate layers but it wont render the transparency very odd the 1st time it would but the layers blink so I added them seperately in another animation program which is very good program called GIF movie gear my main use of it is for producing png animations known as apng that works correct in only a few browsers firefox being one of them I will have to experiment more with this problems as tonite I’ve had a bad head cold an maybe not problem solving at my best but the tutorial is a very good one if followed throughly.
Thanks Lisa
hey can you tell me how to make multiple ribbon glows at different timings