Quantcast

Jump to content

» «
Photo

[TUT | ANIM] Adding Borders to Animations

21 replies to this topic
jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#1

Posted 04 December 2006 - 06:49 AM Edited by jarjar, 04 December 2006 - 08:10 AM.

I did this for anuj the other day, it's not as hard as it looks and it adds more togetherness (I just made that up but still) to your animation. The idea of it is to have it look more complete. Have an animation with no border is usually a bad idea as it makes it look like somethings missing. Today, I will teach you how to add borders to already created animation in .gif format using Abode ImageReady CS2. It's perfect for avatars icon14.gif .

Requirements:
  • Adobe ImageReady CS2 or earlier (only tested on CS2 though)
  • An animation without a border (usually about the size of an avatar, although it doesn't matter)
---------------------------------------------------------------------------------------------------------------------------------


For your reference, today I will be using the same avatar I added a border too for anuj:
user posted image


---------------------------------------------------------------------------------------------------------------------------------


Step 1 - Creating and Arranging

Sub Step 1.1

First off, you need to start up Adobe ImageReady and open your animation ("File --> Open"):

user posted image
Click "File --> Open" to open an already created animation to add a border too...


Sub Step 1.2

Now select your animation and open it into the document container, today I will be using the same animation I used for anuj's avatar. It is about the same size of a normal avatar, and was resized when upload. Although, thats not a problem...:

user posted image
Select your file from the Windows Open Dialog and click "Open"...
user posted image
Your animation should now be loaded into the application. Move it to the center of the ImageReady application window for easier editing...


Step 2 - Understanding the Interface

Before we can continue I need to explain the ImageReady interface and how it opened's animations so you don't get confused with how I say to do things later in this tutorial...

Sub Step 2.1

user posted image
This is the "Animation" Tool Window. It has all the frames of the animation as well as there timing. It also allows you to control the movie so you can play it while editing it. ImageReady also have "tweening" capabilities, but we won't be looking at them today...


Sub Step 2.2

user posted image
This is the "Layer" Tool Window. Unlike in Photoshop where this contains all the layers of an image, in ImageReady it contains all the frames in layers where you can edit them. Here frames can be deleted, added or edited. This will be very important for this tutorial as we use it to add a border that will be placed throughout the entire animation, rather then manually editing each and every frame to add the border...
Sub Step 2.3

There the main 2 Tool Windows or Tool Boxs, which ever you wish to call them, that we will be using in this tutorial to add a border to an animation. In normal creation, manipulation and editing of animations in ImageReady you may also use other Tool Windows such as the ToolBox containing all the tool to edit the animation such as the brush tool, the move tool, the lasso tool, etc. Nearly all do the same job as they do in Photoshop, with a few exceptions of new tools and old tools that do completely different actions...

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#2

Posted 04 December 2006 - 06:49 AM Edited by jarjar, 04 December 2006 - 08:10 AM.

Step 3 - Setting Up The borders Fundamentals

Sub Step 3.1
Now the aim of this tutorial is to show you how to add the a border to the entire animation, if your wanting to only add it to particular frames, it will be more difficult and time consuming. But most of the time, borders are used throughout the animation, not at only certain frames and times.

In order to add the border to all frames throughout the animation we need to create a new layer (or to be more correct a new frame). Frames and layers can get confusing at times in ImageReady. In this instance it will be acting like a layer, but I am calling it a frame so I don't confuse anyone.


Sub Step 3.2

To make life a lot easier, select the top-most layer (frame) in the "Layers" Tool Window and then click the "Create a New Layer" button at the bottom of the "Layer" Tool Window:

user posted image
Select the top-most layer (thus the one at the top of the list)...
user posted image
Click then "Create a New Layer" button to create a new layer over the top of all other frames in the animation for the border...


Sub Step 3.3

You should now have a new layer that will appear at the top of the layer Tool Window:

user posted image
You should now have a new blank layer at the top of the layers list...


Sub Step 3.4

Now we need to select all of the layer so that the border will be applied around the outside of the animation. First off chose the 'Marquee Tool' from the toolbox:

user posted image
Select the 'Marquee Tool' from the Toolbox Tool Window...


Now to select the entire layer, while selecting the top post layer in which we just added click 'Ctrl + A' or 'Select --> All' to select the entire layer like so:

user posted image
Click 'Ctrl + A' or 'Select --> All' to select the entire layer...


Your animations and layer should now be selected and a white & black Marquee Box should be moving around the outside of it.

Step 4 - Adding The border

Sub Step 4.1

Now we get to the last run of the tutorial, the extremely easy part to be honest... First, now you have it all selected go 'Edit --> Stroke' to bring up this dialog:

user posted image
You should see this dialog pop-up, if not you had done something wrong. Retrace your steps...


Sub Step 4.2

Now just simply change the data in those textbox's and combo box's to read as follows:

user posted image
Change all the data in the dialog to what is in the above image...


All you have really done is change the border color to black. You only have the options of changing it to "Black', 'White', '50% Gray', 'Forground Color' or 'Background Color'. All are pretty self-explainitory.

Sub Step 4.3

Now your pretty much done. Just click 'File --> Save Optimized As...' or 'Ctrl + Shift + Alt + S to save your animation and your done:

user posted image
The finished product. See how the border makes your animation look more 'complete'...?


Thanks for reading smile.gif .

Blackadder.
  • Blackadder.

    Luck. Runs. Out.

  • Andolini Mafia Family
  • Joined: 19 Jun 2005

#3

Posted 04 December 2006 - 07:28 AM

Nice tutorial jarjar! Looks very simple to do smile.gif

Justin
  • Justin

    have a cigar

  • Members
  • Joined: 30 Jun 2004
  • None

#4

Posted 04 December 2006 - 07:50 AM

I guess I'll be the first one to say "it's border, ffs". tounge.gif

Good tutorial. As blackadder said, it's quite a simple process - one I can't believe anuj didn't know how to do... Not sure the guide demanded so many images, though. Especially initially.

Regardless, good job. Another contribution under your belt.

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#5

Posted 04 December 2006 - 07:55 AM

QUOTE (Fuzzy Juzzy @ Dec 4 2006, 17:50)
I guess I'll be the first one to say "it's border, ffs". tounge.gif

Ah sorry, thats the last time I let Firefox check my spelling mad.gif .

QUOTE
Good tutorial. As blackadder said, it's quite a simple process - one I can't believe anuj didn't know how to do... Not sure the guide demanded so many images, though. Especially initially.


Yes it is simple, but it's basically understanding the way ImageReady opens animations that confuses people. Oh, and many images had to be used because, I just like to explain everything to it's full extent. Basically smile.gif .

QUOTE
Regardless, good job. Another contribution under your belt.


Thanks...I think confused.gif .

Rob.
  • Rob.

    Don't Stop

  • Zaibatsu
  • Joined: 10 Jul 2005

#6

Posted 04 December 2006 - 08:09 AM

The usual way i do it, is to open the file in Imageready

Press this button;
user posted image
Which transfers the file to Photoshop.

Layer > New Layer
Add a border to that layer and place it at the top of the layers list, on top of the other layers.

Press this button;
user posted image
Which reverts the frames back into Imageready with the new border over all the frames.

Good Tut.

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#7

Posted 04 December 2006 - 08:13 AM

Really, well that is interesting. Thanks for the input Rob., I'll keep it in mind smile.gif . Cheers'

Also, thanks for GTA3Freak-2001 for fixing the title without laughing at me. I also went though and fixed all mis-spellings of "border". Thanks.

-Jared

Simon.
  • Simon.

    Gangsta

  • The Connection
  • Joined: 01 Feb 2005

#8

Posted 04 December 2006 - 09:29 AM Edited by Simon., 04 December 2006 - 09:32 AM.

None of the images in your tutorial are showing for me, jarjar. It shows "user posted image" confused.gif . But the technique used by Rob is the fastest and easiest.

Quality and detailed tutorial though.

CCPD
  • CCPD

    Boss

  • Members
  • Joined: 01 May 2006
  • None

#9

Posted 04 December 2006 - 09:31 AM

Good tutorial jarjar, but as Simon. alredy mentioned, you need to find another host!

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#10

Posted 04 December 2006 - 09:51 AM

Oh, lol, nah, it wasn't working because I had gone though and changed all 'boarder's to 'border's. So it was looking for the images in a different place. Fixed now wink.gif .

Blackadder.
  • Blackadder.

    Luck. Runs. Out.

  • Andolini Mafia Family
  • Joined: 19 Jun 2005

#11

Posted 04 December 2006 - 09:56 AM

Yeh jarjar, they are down, strange they were working a few minutes ago confused.gif

Nice signature CCPD smile.gif

EDIT: Still not working for me confused.gif

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#12

Posted 04 December 2006 - 10:20 AM

QUOTE (blackadder18 @ Dec 4 2006, 19:56)
Yeh jarjar, they are down, strange they were working a few minutes ago confused.gif

Nice signature CCPD smile.gif

EDIT: Still not working for me confused.gif

Yeah they were working for me too, not sure what the problem is. I'll see if I can fix it smile.gif .

tagamaynila
  • tagamaynila

    Bézier cultist

  • The Connection
  • Joined: 19 Nov 2003

#13

Posted 04 December 2006 - 10:25 AM

By default, everything you add on the first frame in imageready affects all other frames. Following this, all you have to do is open the animation in imageready, select the first frame, create a new layer on top of everything and make a border. Once done, all others frames should get the border as well.

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#14

Posted 04 December 2006 - 10:29 AM

QUOTE (tagamaynila @ Dec 4 2006, 20:25)
By default, everything you add on the first frame in imageready affects all other frames. Following this, all you have to do is open the animation in imageready, select the first frame, create a new layer on top of everything and make a border. Once done, all others frames should get the border as well.

Yes, thats right, thats exactly what I just used 14 images and 2 posts to explain, but it's what I was saying. icon14.gif .

tagamaynila
  • tagamaynila

    Bézier cultist

  • The Connection
  • Joined: 19 Nov 2003

#15

Posted 04 December 2006 - 10:40 AM

Sorry, didn't really notice since the images were down plus the fact that i can't read. tounge.gif

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#16

Posted 04 December 2006 - 11:32 AM

QUOTE (tagamaynila @ Dec 4 2006, 20:40)
Sorry, didn't really notice since the images were down plus the fact that i can't read. tounge.gif

Thats okay, neither can I ph34r.gif .

Yeah, images are fixed now, turned out there was a small problem with capitals in the wrong places tounge.gif .

Alternative Child
  • Alternative Child

  • BUSTED!
  • Joined: 11 Mar 2005

#17

Posted 04 December 2006 - 01:32 PM

Hmm, I must be living in the stone age of computers.

I paste each induvidual frame onto Microsoft Paint (at a time), and add a border, then paste it back to the animation.

Good tut.

anuj
  • anuj

    iconic

  • Inactive Staff
  • Joined: 17 Jan 2002
  • None

#18

Posted 04 December 2006 - 07:28 PM

QUOTE (Fuzzy Juzzy @ Dec 4 2006, 01:50)
I guess I'll be the first one to say "it's border, ffs". tounge.gif

Good tutorial. As blackadder said, it's quite a simple process - one I can't believe anuj didn't know how to do... Not sure the guide demanded so many images, though. Especially initially.

Regardless, good job. Another contribution under your belt.

Heh... what?

All I did was take an image and put it in my avatar. I didn't even resize it. Mainly because my work laptop is dead. If I didn't know how to put a border on an animated image, I'd be one sorry ass gfx mod.

Justin
  • Justin

    have a cigar

  • Members
  • Joined: 30 Jun 2004
  • None

#19

Posted 04 December 2006 - 09:24 PM

QUOTE (anuj @ Dec 5 2006, 06:28)
QUOTE (Fuzzy Juzzy @ Dec 4 2006, 01:50)
I guess I'll be the first one to say "it's border, ffs".  tounge.gif

Good tutorial. As blackadder said, it's quite a simple process - one I can't believe anuj didn't know how to do... Not sure the guide demanded so many images, though. Especially initially.

Regardless, good job. Another contribution under your belt.

Heh... what?

All I did was take an image and put it in my avatar. I didn't even resize it. Mainly because my work laptop is dead. If I didn't know how to put a border on an animated image, I'd be one sorry ass gfx mod.

My point.

The way this guide is set out, it looks as if the whole process is the result of some brainwave - the likes of which no-one has seen before. I was just saying the "I did this for anuj the other day", "the same avatar I added a border too for anuj", etc. might be trying to make it seem a teeny bit more impressive than it truly is.

I didn't actually think this sort of thing was above you. wow.gif

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#20

Posted 04 December 2006 - 09:30 PM

Fuzzy it was not meant to sound how you put it. The idea of the "I did the same thing for anuj the other day", etc, was to give people an example. Nothing more, nothing less. I did not say at any stage that anuj didn't know how to do it, I simply did off my own back for a bit of fun and asked him if he wanted to use it.

Maybe you need to get your facts straight before replying with such 'i know it all' posts. No offense.

-/TNT\-
  • -/TNT\-

    not like any other rainbow.

  • Members
  • Joined: 06 Aug 2006

#21

Posted 13 December 2006 - 11:05 PM

Nice tutorial jarjar, definitely something I should learn.

jarjar
  • jarjar

    Boss

  • BUSTED!
  • Joined: 07 Aug 2005

#22

Posted 14 December 2006 - 12:48 AM

Thanks mate, it's very simple and easy to learn, and comes in handy for nearly anything do with animations.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users