Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
6. Added extras > Animated GIFs - Pg. 137
Added extras 137 Animated GIFs One thing that a GIF can do that a JPEG cannot is become animated. An animated GIF is the simplest form of animation; it is recognized by all browsers and rarely causes problems. Animated GIFs are usually encountered as banner advertisements and can be annoying. But a subtle piece of animation can add interest to an otherwise lifeless site. How does it work? The browser simply replaces one GIF after another into the same space on the page and the eye perceives it as a fluid movement, like a flip-book animation. There are various programs available to construct animated GIFs, such as GIF Construction Set Professional from Alchemy Mindworks, and Easy GIF Animator from Blumentals Software, but the most common method until recently was to use Adobe Photoshop with its co-worker ImageReady. However, with the release of Adobe's Creative Suite 3 in 2007, ImageReady was officially retired and its functionality integrated into Photoshop. In Photoshop, the first step is to load up all the separate images as layers, in order, with the first image in the animation preferably at the bottom. Or if you are creating the animation from scratch, start with the first frame, duplicate the layer and change the image incrementally, duplicate this new layer and so on (Fig 6.3). In this example we start with a background layer containing a photo of the sea plus a text layer containing the title of the website. We aim to create a simple fade-in from the background photo with no text, to text at 100% opacity (layer 1), in three stages: 25% (layer 4), 50% (layer 3) and 75% (layer 2). In the Layers palette, uncheck the eye icons of all the layers except the one that you'd like to become the first frame of the sequence. In the Window menu, select Animation, and you should see your first layer loaded as the first frame in the animation window that appears. To set the time for each frame, click the bottom of frame 1 in the animation window: this will pop up a menu showing times in seconds. Next create a new frame using the button next to the Trash and select the layers you need from the layers palette: in this example that is the background plus layer 4, the 25% text. In the Layers palette, deselect the layer we just used for frame 1, by clicking on the eye, then select the next layer in the sequence for frame 2, in this case layer 3, the 50% text. This will put the contents of the second layer in the sequence into frame 2. And so on until we have five frames. We want our fade-in to happen once only, so change `forever' to `once', bottom left, otherwise it will loop indefinitely (Fig 6.4). You can test the animation by hitting the play button at any time, and the transitions between frames can be made even smoother by adding Tween frames, using the Tween button (the `chain' icon at the bottom of the Animation palette). When you are happy with the order and time settings of the frames, go to `Save for Web & Devices', and choose to save as a GIF. Because GIFs are better at flat colours than JPEGs, we will need quite a large indexed colour palette to reproduce all the subtle tones in the image, so be aware this will consequentially bump up the file size. The five frames used in the animation are simulated in Fig 6.5. For an example of the successful use of animated GIFs see Figs 6.6 and 6.7. Add a favicon A favicon (short for favourites icon) is the tiny icon you sometimes see when you add a web address to a bookmark list or see the URL in your browser's toolbar. They were introduced by Microsoft in Internet Explorer 4 and are generally 16 x 16px. Having one can help make your website memorable. A file called favicon.ico is placed in the root directory of your website and accessed by code in the <head> section of the HTML: <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" /> The icon is best designed as a .png and then converted to .ico using a Photoshop plug-in or a website generator such as www.genfavicon.com or www.favicon.co.uk.
