Help with GIF !!

[Diella]

Hi All,

can somebody help me to explain about this??

I create animated banner using IR. First, I have 190 frames which really increase the file size (its about 1.600 kb!!) Now, I work on it again, reducing many frames and colors, and...holaa..the file size now is 137 kb, but it looks terrible.

Any idea, how to really compress the file size until less than 100 kb but still 'good-looking' on the browser.

Plz help ...

thanks a lot

Diella

 

[MindBender]

Short answer: Learn flash

Long answer:

It depends on your particular animation. The thing with gif animation is that you can only have a few frames if you have lots of colors because it really makes the file size balloon. If you reduce the colors to only a couple, then you can jump to many more frames, but you still have many limitations. The problem has to do with the format of the file. (I almost spit my coffee when you said you had 190 frames )

The good news: Post an example and maybe we can give you some tips to make it smoother and prettier.

The bad news: It really is mostly dependant on your particular animation and it just takes experience and learning some tricks to get it to work well.

 

[Diella]

Thanks for short and long answer

I am happy that you are not spit your coffee

Silly me... ;\ this is first time for me to create animation and I am compliment myself with a cup of starbuck coffee before somebody starts complaining "What happen with file size??" and how to upload this giant size??. Oopsss...allright, keep the starbuck and I work on it again.

Anyway, I am still on progress fix and repairing animation. I will post it here after I finish

But I am sure its not as pretty as I wish

Anyway.......


Thanks

Diella

PS: I hope I can post my 190 frames here )

 

[MindBender]

Well, if you do, post it in a link... I think my dialup would puke on a 1.6mb animated .gif haha.

Some things to keep in mind:

- Reduce number of colors.

- Reduce number of frames.

- Reduce actual pixel dimensions (this may not be possible with certain types, like linke exchange banners which are a set size).

- Only do animation in a small section of the graphic so that only certain portions are animating.

- Use animation tricks like using motion blurs to simulate motion instead of actually moving objects

- Be careful using things like fades and translucency as it tends to create more color data.

- If there isn't a reason to change colors, don't. Often people change color of text or images for no reason. Generally sticking with one or two colors of text is not only a good idea for file size, but it's a good design priciple as well.

- Do you need photo graphics or will line art work? The more colors the more you up the file size.

- .gifs freak out when you use horizantal gradients because it's considered a color change to the compression engine. Vertical gradients are not considered a drastic color change.

Just a few things... again, it really has to do with your specific project, but hopefully that will help a little.

 

[markzebra]

All good tips.

Its usually easily possible to get to under 100k - the secret can be keeping the image either black & white or nearly monochromatic - but being VERY selective about which colors you choose. Also play with "dither" - and the selective or adaptive palettes to begin with.

Also click "transparency" checkbox even if you have no transparency That will carve a good few K off your image. Why this isn't the default setting I'll never know!

If you look at my avatar, thats under 10k - so it is possible

 

[Diella]

Thanks Guys!!

Sorry for late respond. But, it works!!!
This morning, I do it again, with many reduce of frames. Below is the data:

Format: GIF
Dimensions: 794w x 45h
Size: 84.66K
Settings: Selective, 64 Colors, 88% Diffusion Dither, 19 frames, Transparency on, No Transparency Dither, Interlaced, 0% Web Snap

I am little bit hesitate to reduce color, first I used 32 colors, which I think it still looks better in the browser. Soon as I realize that when I add layer blue on top of the filtered layer, the file size is reduced. I changed the image to the 64 colors, instead of 32. But, again it is really far from the result I expected. I re-do it and forget about all photographs and smooth animation. Now is much more simple and straight forward.

Please let me know what you think. But, again Thanks for the suggestion :}

Diella


PS: I like your Avatar Mindbender and Markzebra. But for me, I your Avatar looks a bit more "snake" than Zebra, Markzebra [oops]

 

[AppleCider]

First, get rid of the interlaced. That can slow down an animation dramatically.

And please, either post or link the file It's impossible to tell whether or not 19 frames is too much without seeing it. (190 frames is definitely too much for any animated gif to be posted on the web!) And I know, animation can be a tricky thing. Good for you for keeping at it!

 

[markzebra]

Yeah - its the new species of genetically engineered "Sneebra"

 

[markzebra]

Actually 64 colors is sometimes more than you need - the most important thing is a smooth transition of tones. Color is an added luxury.

Heres another tip ??
? Show your color table,
??Choose Sort By Popularity from the drop down menu for this pallet
??Hold down your SHIFT key and click over the least popular colors first (at the end of the palette)
??In your image window you will see these colors become highlighted and you will then be able to decide which colors in your GIF are the most redundant, and you can delete them.

 

[(PSD) Sergiy]

(PSD) Sergiy

Hey! Why couldn`t you just use a Macromedia Flash banner?. Like for me, its taknig realy small amount of Space + higher quiality animation.

Example: This animation below has a size of 75 pixels square, and contain about a 100 frames [:I I did everething to reduce the colors and number of frames and ... 100 frames 54kb for a 75*75pixels? Man its radiculus...(<---wrong spelling? sorry i`m Ukranian) :B
Hey Zebra its a cool animation [:I

 

[MindBender]

It has to do with two things (mainly).

1. Compatability. While this isn't as big a deal as it was a couple years ago, there are still people that don't have the flash player, or possibly are using a browser that doesn't support flash. This isn't a problem with .gif because, unless you're using a text only browser, pretty much every browser supports gif and gif animation.

2. Availability. Some people don't have access to flash or know how to use it if they do. If you only have one banner or something to build, buying a several hundred dollar program isn't really budgetarily feasible.

Yes, flash does a much better job of long form animation at a smaller file size. If you are familiar with photoshop/imageready, there are lots of fun things you can do much quicker in those programs though. It's all a balancing act.

 

[Diella]

Hi MindBender and Sergiy,

I heard also that Flash can do great animation with smaller file size. And I do hope I can do bzzzing....bzzzingg....(read: stunned) animation using Flash.

I am a beginner of Photoshop, and so far doing bit messy than right things but, that's true, its fun!!!

About Flash... :\ , might be it becomes my new year resolution to learn about it as well. Hope there is a great website with a bunch of friendly and helpful people like here.

Diella

 

[(PSD) Sergiy]

(PSD) Sergiy

Hey Diella! You said that you kind of beginner in photoshop and doesn`t know Flash MX. Here is what i would say: First Learn well the Photoshop. Then start learning Flash MX, or learn first MX then PH. Why? Becose i started to learn two thing as well, and it didn`t go through, it was realy difficult to understand. So now i`m kind of intermidiate in MX, and i`m going up close to the an expert in PS, but not far is.
Study First PH, you even going to need PH in Flash animation, if you will study how to export the works correctly to any other Design or animation programm its going to be easy for you to work and study Flash MX :B

 

[Diella]

yeah well...

Photoshop coming first for sure!! that's why i am here.
You right, it will be difficult to study them both. By the way, how long does it takes for you to be as you are right now?? is it take a year or two?? still long way to go for me, but i'll be in the track

Diella

 

[(PSD) Sergiy]

(PSD) Sergiy

Hey Diella!
I am only 16 years is old, and i got my first computer EVER!, about 1.5 years ago,about 16-18 months. Nobody didn`t help me were to start, so i spend about 4-6 months checking out what`s up in there. Then i found the 5th Photoshop on my system and began explore.
After 6 months in PH5, suddently i got my Internet Conection 8} Than i got Ph7 and stuff like it, and i began to search through the Web and see people`s works, i found some first ugly turtorials on about.com then drowing for 6 months more proffesionally, and now i got here about 1 months ago. And for this one month on this forum i have studied about twice faster as i did without forum. So dont worry! you will do fine!

 

[Diella]

Woww Well done Sergiy!!!

You are still young to start learning this stuff and you'll become expert then. it's great to hear that!!!

For me now, I am trying to save for computer (still now, I am using office computer which gives me limitation time to explore and practice ;\ )

Again, well done Sergiy !! :}

Diella

 

[vogonpoet]

theres alot of great advice in here!! :}

all I can add is too be patient and keep practicing/experimenting. Tis one of the best ways of exploring PS.

 

[(PSD) Sergiy]

(PSD) Sergiy

ok go back on topic.

 

[deesea]

Heres another tip –?
• Show your color table,
•?Choose Sort By Popularity from the drop down menu for this pallet
•?Hold down your SHIFT key and click over the least popular colors first (at the end of the palette)
•?In your image window you will see these colors become highlighted and you will then be able to decide which colors in your GIF are the most redundant, and you can delete them.

I'm confused markzebra! [confused] \:] Never seen/used this feature. Is it in PS7 or IR?? Please tell me where it can be found.

 

[Erik]

In PS7 choose file>"save for web". The color table has its name on a tag at the right-hand side. At the top of this table, you see a little triangle. Click on it, adn choose "sort by popularuty from the drop-down list.
holding shift while clicking allows you to select more than one colour.

btw: an alternative for Flash is Swish ( www.swishzone.com )
Indeed far from offering the options Flash offers, but for banners etc it is worth looking at as it's very easy to learn.