Quantcast

Jump to content

» «
Photo

[TUT] Beginners Guide to Imageready.

12 replies to this topic
Rob.
  • Rob.

    Don't Stop

  • Zaibatsu
  • Joined: 10 Jul 2005

#1

Posted 27 February 2006 - 10:17 PM Edited by Rob_UK, 27 February 2006 - 10:31 PM.

user posted image


A Foreword


Ok, so this is a in-depth guide to the basics and the tools, and everything you need to know to get started on making basic animation using Adobe Imageready the tutorial that follows will only relate using terms and tools that are featured in both Adobe Photoshop CS and Adobe Imageready. Both of these programs are best used together, as they are like brother and sister, and are part of the same family. To fully understand what follows, I may like to advise you to look at my Beginners Guide to Photoshop CS the link is provided here:Link - Click Here
This is so that you understand about layers, and other technical parts of your picture, although don't worry as i will still go through some of it in the tutorial when it relates to techniques and how to apply them.


What I Will Be Covering

Imageready Specific Windows
Layer Style Animation Effects
Icons Defined and Explained
Tweening and It's Advantages
Best File Types to Use
Saving your animation, and the file types
Optimizing your animation and what to look for


By the End of this tutorial you will know how to produce this type of effect:
user posted image
As well as other techniques which you could apply to other animations.


Getting Started


OK, so before we start, and even open imageready, we are going to use Photoshop to allow us to prepare the base of our animation, below i have used the following settings, as I want my animation to become an avatar.


user posted image


After creating a black fill using the paintbucket tool and applying a 3px Red stroke followed by a 1px Black stroke i have ended up with the followinf result:
user posted image


The above was all done in one layer which is Very improtant as it means this will be our base layer, and so for the animation I want to create, this will not be animated, you can check if what you did was all under one layer by looking at the following window:
user posted image


The next steps we will take is to create the shape that we will eventually use with our animation, and becuase we do not want to use the background in our animation, we want that to be stationary. So we can determine what we do and what we don't want to use in our animation we will create a new layer for our animation shape to lay on, so we do the following;
user posted image


OK, so now we have the base and our new layer, we are now ready to insert the image which we want to apply an animation effect to, to make it simple we will right click the following and select the bottom option; Custom Shape Tool.[b]
user posted image


I Have opted for the warning sign to be the shape which i want to animate, you can select the warning sign using the [b]Drop Down Menu which pops up on the top of your screen after selecting the Custom Shape Tool;
user posted image


To make my shape Dimensionally Symetrical i will hold shift while I drag to make my shape appear over my base, in this instance I have decided to make my warning sign red so that it matches my 3px boarder;
user posted image


We have now finished our base and the shape we want to animate, to make sure you are ready to animate you want to make sure that your warning sign is totally sperate from the base layer. In the following picture I have highlighted the layer which needs to animated;
user posted image



Rob.
  • Rob.

    Don't Stop

  • Zaibatsu
  • Joined: 10 Jul 2005

#2

Posted 27 February 2006 - 10:20 PM Edited by Rob_UK, 27 February 2006 - 10:32 PM.

Ok we are now at the end of the first step, and we can now think about actually animating the picture, but first you can either decide to save our work as .psd format, or if you're confident and want to go straight into animation click on the button picture below to go straight into image ready;
user posted image


Getting to Know Imageready


When we first open up imageready, make sure your window configuration is the same as mine;
user posted image


We now are ready to deal with the frames of our animation, I will now go through the tools and buttons which are available and are specific to imageready You should see the following setup
user posted image


On the animation window, which was featured in the picture above you may of realised the bar featured below, this bar will allow you to make the main changes in your work to make you setup your animation eg, Play and Duplicate Frame
user posted image

Rob.
  • Rob.

    Don't Stop

  • Zaibatsu
  • Joined: 10 Jul 2005

#3

Posted 27 February 2006 - 10:20 PM Edited by Rob_UK, 27 February 2006 - 10:42 PM.

What Each Icon Means


Here is a description of the icon and what they do:
user posted image
The Forever Tab When pressed this will allow you to select how many times (in a forum case) your animation will be played each refresh, so forever, will cause it to repeat, whereas once will only play it once per refresh.
user posted image
• Much like a DVD or VHS player, this speaks for itself pretty much, it'll play, fastforward and stop your animation
user posted image
Tween will allow you insert frames at a selected position in between frames, you can also decide to insert different parts of your original layers. So for example, i have the following setup;
user posted image
Once selected, this appears;
user posted image
If i use this current configuration it means that i will add 5 frames infront of frame 2 (or where ever specified) and they will only contain the layer which i selected, in this case my current selected layer is the warning sign and so they will only appear in the frames, the sign only not the black background.My result is something like this;
user posted image
This is the effect of tweening, it can be very useful when you want to create animations in which you have to make a difference occur between frames.
user posted image
Duplicate: This button will duplicate your current frame, the number of times you press this button, is the number of frames you'll have a frame eg;
user posted image
user posted image
Trash: This is the final button, this will delete your selected frame, you can delter multiple frames by holding down the shift button.


Creating the Animation


So let's start the animation, first off we'll get around 28 of the current frame, we can create this number of frames by using our knowledge of the Duplicate Button.
user posted image

Rob.
  • Rob.

    Don't Stop

  • Zaibatsu
  • Joined: 10 Jul 2005

#4

Posted 27 February 2006 - 10:23 PM Edited by Rob_UK, 27 February 2006 - 10:46 PM.

Ok, to get the effect we want, we are going to use Outerglow layer style, first make sure your first slide is selected and then select the following, but first you want your warning sign layer to be selected;
user posted image


We are now ready to use our outerglow, first select a red colour and then select the size of the outer glow of your avatar as 2, this will then be the norm for every other frame for the time being;
user posted image


You know need to now repeat this process for every sequential frame in your animation, but everytime increase the outerglow process by 2 pixels, so for example, the second frame will have 4[b/] and the third will have [b]6[b/], becuase there's [b]28 frames you want to stop increasing by 2 pixels at around the 14th frame, from that frame onwards you then keep doing the process but decline instead/ So in short from 14 onwards you will decrease by 2 pixels. eg, at 14 you could be at 30 for example, but for the 15th frame you will be at 28 pixels on your outer glow.
Eventually you will have a row of frames which will slowly incline and then decline.
user posted image


We have now done the main steps, pressing the play button will allow you to watch the animation, underneath the frames are also numbers selecting them will allow you to change the time between each frame.


Saving Your File


user posted image
This is the window you'll see somewhere on your screen if you used the Window Configuration i showed you earlier, what we want to concentrate on is the upper part of this window.
user posted image
Using the settings above will give you the following result;
user posted image
Those setting produce an avatar which looks like this of about 41kb which is half of the forum limits. When changing the selected options you may want to consider the size that you are doing it at. A Signature would produce a large filesize, so you will want to watch how big it is, and in some cases you will have to compromise with low quality.
If you ever need to see an advance preview of what your animation will look like before you save to see how your optimisation configuration works out then simply press the following tab on your animation window;
user posted image
To finally save your work do the following;
FILE > SAVE OPTIMISED AS


End of Tutorial


I have now come to the end of this tutorial, I hope this has helped you into learning how to use imageready as a tool with photoshop, it can open many new doors.

Hopefully you will have learn't something from this, but don't just restrict yourself to what you see here, expand on your skills and experiment, as that is the only way i have found to progress in my GFX skills.

Thanks for reading, i hope it has been of some use smile.gif


Mike_Toreno
  • Mike_Toreno

    ***

  • BUSTED!
  • Joined: 28 Jul 2005

#5

Posted 27 February 2006 - 10:46 PM

I noticed a few grammar mistakes and some bbtags left open, etc. But other than that, I imagine this'll help a lot of people with ImageReady (or at least help them on their way). Good job, Rob (lolrhyme).

Ottae
  • Ottae

    (/'ɒteɪ/)

  • Zaibatsu
  • Joined: 16 Jun 2005
  • None

#6

Posted 27 February 2006 - 10:58 PM

Good work Rob, very well set out and easy to follow, you've got a knack for Tutorials. I'll use this in future animation, good job icon14.gif

Canoxa
  • Canoxa

    Woosh.

  • Zaibatsu
  • Joined: 08 Oct 2004
  • None

#7

Posted 27 February 2006 - 11:20 PM

I shall repeat my words from the last time I saw your avatar under a link to your profile: Nice one, good work, whatever I said.

MAcSandNinEs
  • MAcSandNinEs

    Gangsta

  • BUSTED!
  • Joined: 13 Mar 2005

#8

Posted 28 February 2006 - 12:29 AM

Looking for number 4, eh? Well, this is a great tutorial turn.gif . -JD

Bryce.
  • Bryce.

    f*ck them and their whole crew

  • BUSTED!
  • Joined: 12 Mar 2005

#9

Posted 28 February 2006 - 03:49 AM

Great tutorial, I bookmarked it, just like all your others. icon14.gif icon14.gif

Platinum.
  • Platinum.

    El Dinamita

  • Zaibatsu
  • Joined: 16 Aug 2004

#10

Posted 28 February 2006 - 07:46 AM

Gotta say, that is one in-depth sexy tutorial, even a no-handed person could follow that tutorial with ease. Good job. icon14.gif

Waddy
  • Waddy

    Gods foster son.

  • Moderator
  • Joined: 02 Feb 2004
  • None

#11

Posted 28 February 2006 - 10:10 AM

Nice work there Rob, good of you to take time out.
I will have a go later I think, Ive never done stuff like this, I always ask others, So ill give it a go and let you know how I get on.
Photoshop comes with Adobe...right? I usually use Paint shop pro 9.
Great guide man. smile.gif

Mike_Toreno
  • Mike_Toreno

    ***

  • BUSTED!
  • Joined: 28 Jul 2005

#12

Posted 28 February 2006 - 04:22 PM

QUOTE (MAcSandNinEs @ Feb 28 2006, 00:29)
Looking for number 4, eh? Well, this is a great tutorial turn.gif . -JD

Not everyone is a karma whore, you know.

Bryce.
  • Bryce.

    f*ck them and their whole crew

  • BUSTED!
  • Joined: 12 Mar 2005

#13

Posted 02 March 2006 - 02:39 AM

QUOTE (Mike_Toreno @ Feb 28 2006, 16:22)
QUOTE (MAcSandNinEs @ Feb 28 2006, 00:29)
Looking for number 4, eh? Well, this is a great tutorial turn.gif . -JD

Not everyone is a karma whore, you know.

AHAHHAHAAHAHHAHA Joey you are the official badass of the forums. Omg I seriously stood up and laffed my ass off when you said that. Dude you kick so much ass.

Back on topic, to prove that this TUT works, I made an avatar! Thanks again Rob_UK. Muchos respect




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users