Log in

Previous Entry | Next Entry

Moving Animation (Roaming)

This tutorial will teach you how to animate icons like this:
Photobucket - Video and Image Hosting

Hmm, this is my first tutorial that I've ever ever posted on LJ...so I hope I did all of this right >___<
And I'm not sure if someone posted something like this already, buuut, I'm 99.9% sure that some didn't.

Anyway, this tutorial is going to teach you how to get a moving icon like this:
Photobucket - Video and Image Hosting

For this tutorial, I used Adobe Photoshop CS and Adobe Imageready CS ^_^
Now let's get started, woohoo! *bounces*

1) Get your picture that you want to animate, for this icon, I used this picture (From New York Minute with Mary-Kate and Ashley Olsen):

2) Paste it into a new picture thingy that's 100x100 pixels. But do not flatten! You should have something like this now:
Photobucket - Video and Image Hosting

3) Now, press Ctrl + Shift + M to enter Imageready to start animating ^_^

4) When you're in Imageready, duplicate the current frame
Photobucket - Video and Image Hosting

5) Once you've duplicated that frame, drag the duplicated layer over a little
Photobucket - Video and Image Hosting

6) Repeat the last two steps, and keep duplicating and moving the duplicated layer little by little, over and over until you're satisfied with what you have...
Photobucket - Video and Image Hosting

7) Also, if you want, you can change the pace of how fast or slow your animated icon is moving if needed
Photobucket - Video and Image Hosting

8) Save the image (Ctrl + Alt + Shift + S) as a .gif...then, your final result should look like this:
Photobucket - Video and Image Hosting

The End


( 40 comments — Leave a comment )
Nov. 29th, 2006 05:01 am (UTC)
this needs to go into a cut.
Nov. 29th, 2006 05:02 am (UTC)
Very nice, with the screenshots. But LJ cut, please? :)
Nov. 29th, 2006 05:02 am (UTC)
LJ cut, please!
Nov. 29th, 2006 05:04 am (UTC)
IK 3 peopl already said it, but cut please?
Nov. 29th, 2006 05:05 am (UTC)
sorry you guys, i'm really new to this stuff, i'll cut it
Nov. 29th, 2006 05:06 am (UTC)
Great tut! I really like that you added the pics to show what you did.

And, I know, its already been said, and I hate to beat a dead horse, but could you pretty please cut this? :D
Nov. 29th, 2006 05:06 am (UTC)
Oh, and +mems. I'm actually really excited to try it, I've never done an animated icon before! :D
Nov. 29th, 2006 05:07 am (UTC)
THis is great, but you might want to do this behind a cut, make the cut by doing this :
then you have your tutorial in here and that's it.
but without the * of course!
Nov. 29th, 2006 05:10 am (UTC)
Yeah, um, about five people are on your ass about it but please, a cut? My friends page would appreciate it. :-) Thanks.
Nov. 29th, 2006 05:11 am (UTC)
sorry sorry sorry guys, i just found out i don't know how to do a cut, could someone please show me how? I'm still new to this

sorry for being so annoying about this, i'm really sorry, it's really my first time doing this
Nov. 29th, 2006 05:14 am (UTC)
< lj-cut text="blah blag "> without spaces This goes on top of the images
at the end put this without spaces </ lj-cut >
Nov. 29th, 2006 05:15 am (UTC)
Use this:

Nov. 29th, 2006 05:17 am (UTC)
I like the tutorial. You might want to fix the file size though. Icons need to be under 40 kb to be used on LJ, and yours is 226 kb.
Nov. 29th, 2006 05:21 am (UTC)
okay, sorry for all the troubles and annoyances i caused you guys, but I made the cut

I hope I didn't annoy all you guys, this was my first time...and I guess I didn't make that good of an impression, huh? *sighs*
Don't worry, I won't make a mistake like this again, and again, I'm really sorry
Nov. 29th, 2006 05:24 am (UTC)
I think you did fine. The excessive "I know you were already told but let me beat the dead horse anyway" was just rude. I think it's a nifty tut and will be trying it out.
Nov. 29th, 2006 05:48 am (UTC)
to agree with xreal_facex, there was a bit too much of beating the dead horse :) you did fine, and i'm +mem because i still have yet to tackle imageready and learn how to use it (i know, i know). thanks!!
Nov. 29th, 2006 12:27 pm (UTC)
The only thing that annoyed me was the excessive amount of people who kept on about the cut. That's just unnecessary. Especially after you said that you were trying to fix it.

Love the tut! I'm memming it and will be trying it out ASAP :) Thanks so much!
Nov. 29th, 2006 07:25 pm (UTC)
I agree. Especially because they all said it within like 10 minutes of each other. Give the poor girl a chance! LOL
Nov. 29th, 2006 05:29 am (UTC)
Haha, this could come in handy! =D Adding to mems. :)
Nov. 29th, 2006 05:39 am (UTC)
Yup. This could come in handy. But how to decrease the size...?
Nov. 29th, 2006 07:30 am (UTC)
I think this a good tutorial! And I really didn't think it was necessary for 323123 people to tell you to cut it. Don't feel bad, and welcome to the comm + LJ :D
(Deleted comment)
Nov. 29th, 2006 12:23 pm (UTC)
Are you doing 'Save Optimized As' or just 'Save As' you have to do 'Save Optimized As' in order to get to save it as a .gif :)
Nov. 29th, 2006 10:57 am (UTC)
Very nifty, although you could also use the 'tween' option for 'position' instead of duplicating and moving over and over again. Might save you some time and cramps in teh mouse-hand. ;-)
Dec. 16th, 2006 12:33 pm (UTC)
What does the "tween" option ACTUALLY do? I accidentally clicked it when playing with the technique in this tut and wasn't entirely sure of the effect it created!
Dec. 16th, 2006 01:09 pm (UTC)
Does this help?
Dec. 16th, 2006 01:20 pm (UTC)
Re: Does this help?
Muchly! Thanks! :-D
Nov. 29th, 2006 11:03 am (UTC)
Spiffy cool!

But the size is really too big for an LJ icon. :/
Nov. 29th, 2006 11:29 am (UTC)
How can you change the bitrate of the gif file?
Nov. 29th, 2006 01:00 pm (UTC)
i have trouble with step 5 ):
Dec. 16th, 2006 12:29 pm (UTC)
I'm trying it as we speak and when you duplicate the frame, you have to click on the picture you're animating - ie, back on the original, with the mousey tool and then just slide it slightly in the direction you move it. It's like making a computerised flip book. You make teensy weensy adjustments in the position and when you play them, it looks like one smooth movement.
Nov. 29th, 2006 02:47 pm (UTC)
I like this!
Gonna try this out, thanks! =]
Added to my memories
Nov. 29th, 2006 09:34 pm (UTC)
Thank you for This! I always wondered how this was done! :)
Nov. 30th, 2006 12:23 am (UTC)
Thanks a lot! :)
Nov. 30th, 2006 04:25 am (UTC)
Very cool idea, I never thought of doing them like that!
Dec. 11th, 2006 05:42 pm (UTC)
that's great, thanks!
Dec. 30th, 2006 12:30 pm (UTC)
amazing tut! thanks. :)
Feb. 2nd, 2008 06:23 pm (UTC)
just a tester :D, this tutorial helped me out so much!
What was the delay on your icon? I just cant find the right one, and yours came out beautifully.
Jan. 20th, 2009 08:58 pm (UTC)
anyone know how to do this for cs3? D:
Jun. 28th, 2009 08:04 am (UTC)
Jun. 29th, 2009 07:53 pm (UTC)
For some reason, when I hit DUPLICATE FRAME in Image Ready, the layer/photo seems to lock and I can't move the photo at all :\
( 40 comments — Leave a comment )

Latest Month

February 2017


Powered by LiveJournal.com