Webkinz Insider - Not affiliated with Ganz or Webkinz.

Welcome to WI!


Free Webkinz Codes

Ads  Remove Ads

Become an Insider Insider Subscriber and make these ads go away!
Go Back   Webkinz Insider Forum > WebkinzInsider.Com > Somebody Help! > Guides & How-tos

Welcome to the Webkinz Insider Forum forums.

You are currently viewing our boards as a guest which gives limits your access to many of our other features. By joining our FREE community you will have access to post topics, communicate privately with other members (PM), removal of some (including the "in-text") ads, respond to polls, upload content and access many other special features, such as trading, and entering contests! Registration is fast, simple and absolutely free so please, join our community today!

If you have any problems with the registration process or your account login, please contact us.
Closed
 
LinkBack Thread Tools Display Modes
Old 08-20-2010, 04:11 PM   #1
Gift Guru
 
curiousg's Avatar
curiousg has disabled reputation

WI Subscriber
Donation Level 2 
Default How to reduce the file sizes of gifs (including making background transparent)

A file with the .gif at the end of it's name is a type of graphics file. If you are interested in animated .gif's specifically, here is a helpful introduction to them:

http://www.webkinzinsider.com/forum/...vatars-603450/


On the wiki and here on the forum, it is important to keep your file sizes small (usually below 100 kb). Animated .gifs are so much fun, but they can easily be too large for the forum or the wiki. (Thank you to Cocoabean and others on the wiki animation thread who has helped me understand much of this information.)

This thread has some ideas for how to reduce file sizes of animated .gifs


Before you begin, save your file with a new name so that you can have a backup version to return to if you don't like the changes you make.

1) Make the background transparent
(I will give some brief instructions on how to do this below, please add more if you know of other ways to make the background transparent)
2) Crop your picture!
Make sure that you don't leave any wasted space around the part that you really want people to see
3) Reduce the image size

Don't reduce the image size too small or you won't be able to see it! For avatars you want no more than 125 px x 125 px (I think). For sprites you need to be very small!
4) If it is an animated gif, reduce the number of frames


Ideally, the file should have no more than 20 frames. Many animated gif programs and some websites may allow you to change the timing of each frame. So, if you reduce down to 2 frames, you may want each frame to appear for a long period of time. You can often pick timing from 1/100 of a second to more than 1 second per frame.

You can sometimes reduce the number of frames by deleting every other frame; for example you can do this by deleting all the odd numbered frames. By deleting every other frame, you preserve the overall flow of the movement. On the other hand, you will lose some of the "smoothness" to the animation.
5) Reduce the number of colors used

Most screen captured images will start out using 256 colors, but many graphics program will let you reduce that to a "web adaptive" color palette with 128 or 64 colors or even fewer colors. . . choosing grayscale will really reduce your file size!
How do you know if the background is transparent?

Typically, you know that you have background transparent because the background will have a gray and white checkerboard appearance in the graphics editing program or at the online graphics editing site. (When you upload your picture to the wi forum, the transparent background will look like whatever color the page you put it on - usually white).

Click the image to open in full size.


How do you make the background transparent?

Answer: It depends on the online editing site or the graphics software that you have available to you. You can often google to find out how to do this on the particular site or program you use.

There is an option to make your images transparent in lunapic! The following link about sprites talks briefly about it.

http://www.webkinzinsider.com/forum/.../#post20616881

Follow the link below to see how to make a background transparent using the INDEXED TRANSPARENCY in Adobe Photoshop:

http://www.webkinzinsider.com/forum/...ansparency.gif

Follow the link below to see how to make a background transparent using INDEXED TRANSPARENCY in Adobe Fireworks:

http://www.webkinzinsider.com/forum/...-fireworks.gif

If you have an Adobe product (Photoshop, Fireworks, Imageready) you may be able to use the "magic wand tool" and the picture below shows specifically how to do this in Fireworks. Adobe photoshop has the magic wand as well.

TO USE THE MAGIC WAND TOOL, READ BELOW

If you are trying to make an animated gif and you have adobe photoshop, you may have to work frame by frame (and you may have to make the animated gif using an online site to link the stationary (still) pictures together- you can link several stationaly pics on lunapic, I think. Thank you to lilkinzmom7 for helping me understand this!)

Click the image to open in full size. = the magic wand tool

Click the image to open in full size.

Here's an example from another product (Easy GIF) that lets you change a color you pick to transparent using a the Color Replacer Tool.

Click the image to open in full size.


Please feel free to comment on more ways to optimize animated gifs. If you know of other ways to make the background transparent, please share that helpful information. Thank you.

Last edited by curiousg; 09-05-2010 at 09:14 PM.. Reason: adding more information
curiousg is offline Female
Sponsored Links
Old 08-22-2010, 06:31 AM   #2
Gifted
 
BloogleJ's Avatar
BloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roostBloogleJ rules the roost

Default Re: How to reduce the file sizes of gifs (including making background transparent)

WOW! Thats amazing! Rep for you.
BloogleJ is offline Female
Closed

Tags
blooglej wuz here hahaha, tranparent animated gif

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are On



All times are GMT -5. The time now is 12:49 PM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
SEO by vBSEO ©2011, Crawlability, Inc.
Copyright © 2007-2013 Kopi Enterprises, LLC
WebkinzInsider.Com is not an official site of, sponsored by, nor affiliated with Ganz, Inc, Webkinz, Lil'Kinz, or Kinzville Newz and all character names, logos, and images are trademarks owned by Ganz, Inc.
no new posts