Elvia (elvia_e) wrote in photoshop_cs,

Tutorial--Using Image Ready

I'm soo nervous this is my first EVER tutorial. But I know alot of people want to know, so here goes.

You don't have to want to know how to make this particular icon, but in going over how to make it kind of shows you the basics in image ready so later you can experiment more with it and make your own stuff.

I'll be making this very simple text animation icon:

this is for people who already have good knowledge of photoshop.

Ok, I made this icon in photshop cs:Image hosted by Photobucket.com

Then I went to image>duplicate

Image hosted by Photobucket.com (I don't know how many people know this trick, but it automatically makes you an identical copy of the icon you are working on, which is perfect for using when making frames)

THEN after I've duplicated my icon, I make a change to the new copy. I change the color of the text to yellow, so now I have this new icon:Image hosted by Photobucket.com

Once this is done, I save both icons in a new file somewhere. I created a file in my documents. You need this file to just have these 2 icons, you'll see why.

Now open Image ready.

In image ready go to File>>Import>>file as frames. Find the folder where you saved your icons and open it.

This will open your icons as frames of one animation
Image hosted by Photobucket.com You can change how long th animation stays on each frame on the time section. (I put my first frame at 0.1 & the second as 0.2)

Image hosted by Photobucket.com These are the controls play/stop, etc

Once you've tweaked your animation, you save it by going to File>>save optomized and you're done!

[Tips/Notes: if you make alot of similar animated icons, you can put them all in the same folder and when you open it up in imageready, just delete the frames you aren't using by clicking the frame and then clicking the trash can.

Also,you can use this for pictures or any other animations, I've made animated banners this way too. I made the icon I'm using this same way too.

There may be another ways to use imageready. I know you can also start directly in imageready and make your animation from scratch, but I find it easier to make the frames in ps cs first.]

Hope that wasn't all confusing! If you have any questions,just leave me a comment!
  • Post a new comment


    default userpic
thank you
hahaha - you ROCK !!

im teaching myself ps7 and ive just used your tutorial with success ♥
I just came across your tutorial and it helped a bunch, but I have a question. I made the icon without fault, but when I uploaded it to photobucket, the brush applied and the flashing text changed to a grainy grey color. Did I miss something?
Forgive me, I'm still learning. :]
Hm...maybe it's photobucket. I've never really had any problems with any changes once I uploaded it. Did you save it in the correct way, maybe? I hope your problem has been resolved. If not, let me know and I'll try to find out what happened to it.
I saved as optomized and it turns grainy. Maybe it is photobucket, but I don't really upload anywhere else.

Deleted comment

I haven't used image ready in a long time so I had to go through it quickly again. Since I've made this tut. I've switched to CS2, but I'm assuming it's the same. When you go to save, go to File>Save optomized As... if you click on that, it allows you to save as a gif which is what most animated icons are saved as. If you have any more questions feel free to ask. :) Hope that helped.
I never got this comment actually. I think I figured it out, but if it stops working I'll let you know. Thanks for all the help.
yeah, i just missed that very last part and just saved it regularly. Thank you! its awesome.
best tutorial ever!! thanks!