How To Make Web Animations With A Photo Background

Chapter 3: Putting It All Together

• I've created a table which is 300 pixels wide. This is deliberately the same width as my original earthrise.jpg background.
  
  
• Within the table, I've created a three cells laid out in a row. This is so each cell can accommodate one of the three segments from earthrise.jpg that I created in the previous chapter.
  
  
• The first cell in the row is 190 pixels wide, the same width as earthrisel.jpg. I've also set earthrisel.jpg as the background for that cell, and then centered the buglegs.gif animation on of it.
  
  
• The second cell in the row is 10 pixels wide, the same width as earthrisec.jpg. In this case, I've placed earthrisec.jpg as an image within the cell, specifying its width and height (10 and 225 pixels respectively).
  
  Creating at least one cell like this, with a segment of the background as cell contents (rather than as a cell's background) is essential because it ensures the whole table will be made high enough to fit in the whole of the background. This is because the height of the table row is determined by the height of the tallest item in the row (so if earthrisec.jpg had been placed in the background of this cell, the row would be the larger of the heights of buglegs.gif and snorkel3.gif, namely 200 pixels, which would result in our 225 pixel high background being truncated at the bottom).
  
  
• The third cell in the row is 100 pixels wide, the same width as earthriser.jpg. I've also set earthriser.jpg as the background for that cell, and then centered the snorkel3.gif animation on of it.

• 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.25* *(As of 12:25 Pacific 8 Feb 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.26* *(As of 12:25 Pacific 8 Feb 2012 More Info) Buy It Now

• 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 08:35 Pacific 8 Feb 2012 More Info) Buy It Now

• Clipart.com (Advert)
  
  Our subscription-based service provides access to more than 2.6 million clipart images, photos, fonts, and sounds.