| |
|
|
|
How To Make Web Animations With A Photo Background
Introduction
The main formats for presenting graphics on the web all have advantages
and disadvantages.
This is illustrated in the following table:
| Format |
Animation |
Max. Colors |
Transparency |
Good for Photos |
Good for Continuous Tone Images |
| GIF |
Yes |
256 |
Yes |
No |
Yes |
| JPEG |
No |
16,777,216 |
No |
Yes |
No |
| PNG |
No |
16,777,216 |
Yes* |
Adequate |
Yes |
Now one obvious thing that you can see by reading this chart, is if you
want animation you need to use GIF, but
if you want to present photographs you need to use
JPEG (or perhaps PNG).
But what if you want to show an animation on top of a photographic background?
There's no obvious solution in the chart!
Fortunately, as far as web design is concerned,
there is a solution: take advantage of
GIF's
transparency option, plus a bit of clever
HTML coding,
to place the transparent GIF on top of a
JPEG background.
In this tutorial, I'll show you how (in three chapters):
- Selecting Graphics
First, we'll get some GIF animations,
and a nice background.
- Slicing Up The Background
Next, I'm going to slice up the background into segments. The idea
is that each GIF animation can be placed
over a separate segment.
- Putting It All Together
Finally, we'll put it all together, to look like one combined
graphic, using
HTML.
Related Pages on this site:
Related Books:
- GIF Animation Studio: Animating Your Web Site (Web Studio Series)
Disclosure: Products details and descriptions provided by Amazon.com. Our company may receive a payment if you purchase products from them after following a link from this website.
| |
By Richard Koman
O'Reilly Media
Paperback (184 pages)
Product Description:
GIF animation is bringing the Web to life -- without plug-ins, Java programming, or expensive authoring tools. This book details the major GIF animation programs, profiles work by leading designers (including John Hersey, Razorfish, Henrik Drescher, and Erik Josowitz), and documents advanced animation techniques. A CD-ROM includes freeware and shareware authoring programs, demo versions of commercial software, and the actual animation files described in the book.
List Price: $39.95*
Lowest New Price: $11.20*
Lowest Used Price: $0.99*
*(As of 01:57 Pacific 27 May 2012 More Info)
Buy It Now
|
- The GIF Animator's Guide
Disclosure: Products details and descriptions provided by Amazon.com. Our company may receive a payment if you purchase products from them after following a link from this website.
| |
By Sandra E. Eddy
John Wiley & Sons
Paperback (322 pages)
Product Description:
The GIF Animator's Guide At last —a book on GIF animation for all of us. The GIF Animator's Guide is the most comprehensive book on animating GIFs for World Wide Web pages. With easy step-by-step instructions for desktop applications including Paint Shop Pro and Photoshop, you learn how to create and edit GIF89a animations to enhance your website. Whether you are a beginner or experienced Web developer, this book will answer all your questions about creating and animating GIFs—from beginning to end. The GIF Animator's Guide is designed both to be easy to use and to provide all the important information about creating good-looking graphics and animations using a variety of popular programs—freeware, shareware, and commercial—for both Windows and Mac computers. The book includes valuable information about animation, computer graphics, and GIF standards so that you can easily create animations for your Web page. CD-ROM Included The CD bundled with The GIF Animator's Guide includes Microsoft GIF Animator, Paint Shop Pro, GIF Construction Set, GIFBuilder, Ulead GIF Animator, and save-disabled versions of Photoshop 4 and Illustrator 7. It also includes a large gallery of unique and copyright-free GIF animations that you can plug into your own Web pages.- Learn how to create GIF animations easily with Microsoft Image Composer, Microsoft GIF Animator, Photoshop 4, Illustrator 7, Paint Shop Pro, GIF Construction Set, CorelDRAW, and GIFBuilder
- CD includes Microsoft GIF Animator, save-disabled versions of Photoshop and Illustrator, a gallery of GIF animations, and freeware and shareware including Paint Shop Pro, GIF Construction Set, GIFBuilder, and Ulead GIF Animator
- Ideal for all GIF animators—both amateur and professional
- Free animations are included on the CD to use for your Web site
- Learn how to optimize animations by using the 216-color palette, planning for transparency, offsetting images, and setting time delay
http://www.mispress.com
List Price: $39.95*
Lowest New Price: $9.00*
Lowest Used Price: $0.42*
*(As of 01:57 Pacific 27 May 2012 More Info)
Buy It Now
|
Related Software:
- GIF Animator 5.0
Disclosure: Products details and descriptions provided by Amazon.com. Our company may receive a payment if you purchase products from them after following a link from this website.
| |
Ulead
CD-ROM (Unix)
Windows NT/Linux/Windows 98/Windows Me
Amazon.com Review:
Animated GIFs are the best way to catch someone's eye on the Web without slowing your page down to a crawl. Ulead's GIF Animator is a great tool to create these attention-grabbing designs. While you can make an animated GIF using almost any graphics program, the features you need are often hidden away in a full image editing package. Because GIF Animator is designed just for working with animations, the tools are easy to find and use. The interface is easy to work, as it provides a filmstrip view of all the frames in your animation. You'll also see a list of all the objects across all the frames, so you can work across multiple frames, overlaying one object on another. From the main window, you can edit the images, produce intermediate frames automatically by tweening from one image to another, optimize the color palette to make the file smaller, and preview the final animation. A simple set of editing tools lets you paint, erase, and add text. Excellent integration with programs like PhotoImpact, Photoshop, and Paint Shop Pro means you can work with layers in an image as objects inside GIF Animator, or update your images in another package and automatically see the changes in GIF Animator. There's a set of special effects and transitions, but you can also use Photoshop plug-ins and filters. You can work with video files as well as still images, and import and export a range of formats including Flash. This is the latest version of a classic utility that's packed with features but still easy to use. If you need images that move, make them in GIF Animator. --Mary Branscombe
List Price: $49.95*
Lowest New Price: $139.97*
*(As of 04:12 Pacific 27 May 2012 More Info)
Buy It Now
|
Related Web Sites:
- Clipart.com (Advert)
 Our subscription-based service provides access to more than 2.6 million clipart images, photos, fonts, and sounds.
| |
How To Make Web Animations With A Photo Background:
| |
|
|
|
