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


Abstract Shine Animation

Let’s start:

Step 1

Open Adobe Photoshop and press CTRL + N to create a new image:


New

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:


Clouds

Step 4

Select the Pen Tool, make sure the “Paths” option Paths is selected in the toolbar. Draw the following shape:


Pen tool 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%.

Make sure your selected brush supports Simulating Pressures:

Simulate Pressure Brush

Step 7

Select the Pen Tool again, right click on the image and press Stroke Path…

Stroke Patch Menu

Step 8

Set the following options in the Stroke Path dialog:


Stroke Path

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:


Hiding Layer 3

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):


Outer Glow


Color Overlay

Step 14

You will get something simillar to this (do not remove the pen tool selection):


Layer 2

Step 15

Now, we’re done with Photoshop, we’ll start editing with ImageReady:


Edit with ImageReady

Step 16

ImageReady will open. Window > Workplace > Default Workplace to arrange your windows.

Step 17

Window > Animation to show the animation window:


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:


Layer 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:


Brush for the mask

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):


Line

Step 22

You should see in the Layers panel the following:


Mask 1 Preview

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.


Duplicate frame

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:


Moving the mask

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:


Tween selection

Step 26

Apply the following Tween settings:


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:


Other Delay

Step 28

Enter 0.03 seconds as a delay between the frames:


Delay

Step 29

Now select the last Frame alone by clicking on it, and set its delay to 5 seconds:


Last Frame

Step 30

We’re done. It’s time to save the animation as gif. Make sure the format in the "Optimize" panel is GIF:


Optimize Panel

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).


Abstract Shine Animation

By the way, here’s the avatar I discussed earlier in this tutorial:


King Of Blues

Are you willing to do custom requests for a small fee?

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!

116 Responses to “Abstract Shine Animation with Photoshop and ImageReady”

  1. Dogyal says:

    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!

  2. Minty Ferret says:

    Very nice! The animation is so smooth, and I’m surprised it’s only 20kb to boot. Simple technique as well, kudos. :D

  3. Zelele says:

    Hello! Only works if the options Parameters, from Tween settings, are selected!

    Bye!

  4. Ankit says:

    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 :)

    • Elie Khoury says:

      Thanks Ankit. Actually I didn’t upgrade yet to CS3, I’m not sure about its features…

    • sonny12 says:

      can you guide me in step19 in your Abstract Shine Animation with Photoshop and ImageReady im havign problemin that step cant continue..help

    • bigmof says:

      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.

  5. game says:

    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?! :(

  6. [...] : 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 [...]

  7. game says:

    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

  8. Eric says:

    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.

  9. sadek ismael says:

    hi, it worked perfectly with me…but the problem is tht i don’t know how to save it as GIF in CS3

  10. game says:

    Can anyone send me this .psd file,maybe I can find the failure……pls
    Here’s my msn:
    da_game92@hotmail.com

  11. trouble says:

    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

  12. Vito says:

    If you have cs3 you only hacve to press Window>Animate
    It’s almost the same thing

  13. dan says:

    you needed to mention that on layer 3 the layer and the mask needed to be unlinked, otherwise its brill

  14. Tim Dobson says:

    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!

  15. Morten says:

    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.

  16. Tim Dobson says:

    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

  17. Jimual says:

    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

  18. dude! says:

    Awesome! :)

  19. Tim Dobson says:

    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

  20. Smurf says:

    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

  21. InfamousA says:

    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

  22. Eve says:

    I have problems with photoshop cs3 the mask, when one is moved for the
    animation remains full white not only line… :(

  23. Nightfirecat says:

    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.

  24. [...] 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 [...]

  25. game says:

    Thanks for the tutorial it’s great and it works!!!!
    :)

  26. [...] 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 [...]

  27. pelle says:

    I can’t save the animation, why?

  28. Michael a says:

    Hmmmm.
    dont understand.

  29. Fer says:

    That effect was awesome… I´ll try it…

    Byezzzzz

  30. Fer says:

    Awesome… I did it :D

    Byezzzzz

  31. Chris says:

    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?

  32. Photoshop Fan says:

    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?

  33. Phantom says:

    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

  34. darkrazor says:

    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

  35. krishna says:

    WOOOLALA

    THANKING

  36. Phantom says:

    Anyone?

  37. AcE says:

    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.)

  38. Bok says:

    I’m having a problem with it not shining…I got your basic thing down :D 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

  39. jonski22 says:

    nice tut..but im lost at step 19…there is no brush in my imageready..im using CS..

    is there a work around? thanks.

  40. Rob says:

    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

  41. [...] Posted on March 18, 2008. Tutorial from ekhoury.com [...]

  42. Jeffrey says:

    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

  43. Paul says:

    thanks elie! ur the best!

  44. Dammit says:

    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..

  45. Annjellicle says:

    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!

  46. RedWall says:

    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?

  47. xavier says:

    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.

  48. girlie says:

    him
    could u plz help me figure out what “Move tool and Press Shirt + right” means.
    really appreciate it :(

  49. girlie says:

    reply to this one plz
    help me with “Move tool and Press Shirt + right”
    wat does it mean? :(

  50. Ely says:

    on Cs3 there is the problem of the mask does not work… what we can
    make?
    kind ekhoury it helps us!

  51. cronix says:

    @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 =)

  52. sonny12 says:

    make again a tutorial that is more simple please…

  53. lady ann says:

    i cant do the step 24! huhu..help me please…

  54. 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

  55. Kirk says:

    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?

  56. Kirk says:

    Here is a sig I made using your tutorial Eli.

    http://star.walagata.com/w/udcki/swirly-sig.gif

  57. Joey Chau says:

    You helped me so much! Your service was awesome and it went by quick. A++!

  58. Kirk says:

    Here is an example of multiple streaks being animated with the technique:

    http://star.walagata.com/w/udcki/red-streaks.gif

  59. Calle says:

    very nice!

  60. trruls says:

    inn step 24, ?????Move tool and Press Shirt + Right ?????

  61. daymo says:

    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!

    • daymo says:

      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

  62. Angela Speed says:

    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

  63. Eros says:

    excellent idea! thank you so much!

  64. Joy Barza says:

    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. ;)

  65. mohab shami says:

    thank you so much

  66. Fredrik says:

    Very nice!

  67. [FD]King says:

    very nice

  68. simsima says:

    very nice animation
    thnx
    i will try it

  69. UsefZ says:

    Hello Mr.Khoury :P
    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?

  70. Josdevos says:

    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.

  71. ruster says:

    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)

  72. Kitten says:

    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

  73. janine says:

    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!!

  74. Kirk says:

    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!

  75. Kirk says:

    Janine, open Image Ready and reset your preferences. Dont change anything and then go to Save Optimized As, then Gif, then open with IExplorer.

  76. Steffan says:

    That is an awesome animation :D Was the first time i’d used imageready, and was still pretty simple. Two thumbs up.

  77. Samuel says:

    Good Tute looking to make these wavy things for ages and now you have shown me how to animate and even bigger plus

  78. 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)

    //

  79. Andrew says:

    please someone explain step 24 for me as i dont understand what he means by shirt + right

  80. Kitten says:

    He means press shift and the right arrow button.

  81. [...] 19. Abstract Shine Animation with Photoshop and ImageReady [...]

  82. Dennis says:

    Hey realy nice tutorial mate :D thanks for it ^^

  83. Dzinepress says:

    really nice work in all tutorials.

  84. [...] Abstract Shine Animation with Photoshop and ImageReady [...]

  85. [...] Abstract Shine Animation with Photoshop and ImageReady [...]

  86. [...] Abstract Shine Animation with Photoshop and ImageReady [...]

  87. -Ak- says:

    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

  88. [...] 19. Abstract Shine Animation with Photoshop and ImageReady [...]

  89. xyrus says:

    cool! i tried it in photoshop cs4 and it works!.. thanks!!! (^^)

  90. ansm says:

    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.

  91. ansm says:

    and i don’t have the glow either .

  92. monica says:

    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?

  93. Lisa says:

    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

  94. Lisa says:

    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

  95. Ahmed says:

    hey can you tell me how to make multiple ribbon glows at different timings

Leave a Reply