Animated with Picasion

Although web designers tend to dislike them, animated icons and buttons can really hit the spot when it comes to creating simple moving images. Some people also like to use them in email signatures. To achieve this effect you will need to use an animated GIF. This is a graphics file format that stores a sequence of photos that can be ‘chained’ together to form the electronic equivalent of a flipbook that mimics movement when played back. By choosing pictures carefully and then going to the Picasion website, it is possible to create smooth animated sequences that are both fun and effective. This Workshop explains how to choose suitable images and turn them into an animated GIF that can be used on a website, blog or as a forum icon.

We are going to start by creating a picture for an online-forum profile. This picture will appear next to any contribution we make on the forum and so other users can quickly identify our posts. Each forum has its own rules that determine the maximum file size and preferred dimensions for pictures like this, so check first to see what is allowed. We have four photographs of one of our writers showing his face as expressionless, starting to smile, smiling and, finally, grinning: we are going to use the Picasion website to combine them into a single animated GIF to create the impression of movement.

After checking the rules of the forum we are going to post on, we know the preferred picture size is 115x140 pixels, with a maximum file size of 51KB, so we need to make some changes to these four pictures. Using a photo editor (the one shown here is the excellent Photo Filtre, free from www.snipca.com/x253) we crop the photos into portraits and then reduce their size to the correct dimensions. Then we save them as either JPEG, GIF or PNG files, numbered in sequence order.

With the photos prepared, launch a web browser and go to www.picasion.com. When the site loads click the top Browse button and use Windows Explorer to navigate to the first of the photos that will be used to create the animated GIF sequence. Just select the picture and click the Open button, then add the next picture in the same way. If you need to add more than three just click the ‘Add one more picture link’ to open another empty picture box and keep adding more.

To ensure the pictures are the right dimensions, open the dropdown menu underneath Size, select Advanced and then type in the width specified in the forum where they are going to be used. Since this sequence of photos shows someone smiling, it will be better if we speed up the playback to make it look more natural. To do this, open the Speed dropdown menu and choose Faster. To upload the photos in Picasion and assemble them into a single animated GIF, click the Create animation button.

When the pictures have finished uploading, the animation will appear in the main Picasion window and start to play back immediately. To keep the animation safe, click the ‘Save this animation’ link at the bottom of the screen and choose a destination on your PC. When it has finished downloading, find the animated GIF and double-click it; here the GIF is playing back in the Windows Picture and Fax Viewer. To check the size, right-click on the picture file icon and choose Properties.

Although they share some of the same characteristics, every forum is slightly different. Here, we have visited a forum we use regularly, signed in and viewed our control panel (often called a profile or user account), and then clicked the Browse button to upload our newly created animated GIF. After locating the photo on the hard disk, we can then click the Upload Avatar button (this is a fancy name for the picture we are using to represent our profile). From now on, whenever we contribute to the forum, our animated picture will appear next to our posts.

The animated GIF can be used elsewhere thanks to the HTML code that Picasion generates to go alongside it. Flip back to the Picasion website, highlight everything that appears in the HTML code field, right-click on it and choose Copy. As an example, we signed into one of our blogs at www.blogger.com. We clicked on Layout, Add a Gadget and then chose HTML/Javascript. This displays an empty window into which we have pasted the code using right-click and then Paste.

As well as getting pictures from the hard disk, Picasion can also import photos directly from popular online photo libraries like Picasa (www.picasaweb.com) and Flickr (www.flickr.com). For example, return to the Picasion home page and then click the ‘Import images from Flickr’ link. Flickr organises photos by user name and tags so you will need to know both to find the pictures you want (find out more by visiting www.flickr.com and having a look round) ­ then just click ‘Get pictures’.

It’s important to make sure you have permission to use any photos grabbed from Flickr or Picasa. We are using ones from our own library of photos. When the pictures appear as a strip of thumbnails just select the ones you want to use as part of the animation by putting a tick in the empty box in the top left-hand corner of each one. Once that is done, choose a size and animation speed and click the Create animation button.

Once Picasion has created the animation, it can be saved to the hard disk, or the accompanying code copied to a blog, or any popular web-editing program. By choosing a slower speed for the animation to play back it is possible to create simple self-running slideshows that are really effective. The only downside of Picasion is that it puts little Google adverts above and below the finished animation, though they are pretty unobtrusive.

Wallpapers that Change Automatically

The Windows XP wallpaper, a blue sky over green fields, is familiar to most computer users but that doesn’t mean we have to look at it all the time. It’s easy enough to change wallpapers and use photos stored on the hard disk or grabbed from websites, but it requires effort to track down good ones after an initial burst of enthusiasm for something new.

This Workshop explains how to change that by installing a simple free program, John's Background Switcher, that will deliver attractive new Desktop backgrounds automatically as individual images, scrapbooks or full-screen collages.

As we will show, these pictures can be stored on your computer or retrieved from free internet photo libraries and this opens up endless possibilities for giving your desktop that personal touch.

First, follow step below to download John's Background Switcher.

Go to www.johnsadventures.com by entering this address in your browser or clicking the link in the intro. Click the My Software link at the top and when the page loads, choose John’s Background Switcher. Scroll down the screen to the ‘Download the installer’ link and click that once. Ignore any security warnings and click Save. Choose a location for the download, such as the Desktop, and then click the Save button again to copy the file to your PC.

Find the Switcher Setup icon and double-click it. Ignore the Open File Security Warning dialogue and click Run. Follow the instructions to set up the software, accept the licence agreement and then when the last dialogue box appears, leave the two options there ticked and click the Finish button. After a second the ‘What’s New’ text file will open along with the Options dialogue where Background Switcher stores all its important settings. To get started straight away, click Yes to have the program use its default sources for photographs.

By default, Background Switcher will take photos from several sources on the free Flickr photo-sharing service and then display them full-screen, one after the other, changing every hour. For fun, we’re going to set pictures to change every minute so we get a better sense of what’s on offer. Open the dropdown menu and select 1 minute. We’ll explore other online sources of photos in the panel you'll see on the left and play with some of the settings a bit later on.

Click the OK button to confirm the change and have a read through the What’s New file; then close it by clicking the ‘X’ in the top right-hand corner. Move the mouse pointer down to the Windows Notification Area at the bottom right of the Taskbar, find the new Background Switcher icon there and right-click on it once to open the menu. From here it’s easy to move back and forth between wallpapers, save a particular image to disk, mark it to be ignored in future by selecting Never Show Again, and so on.

We’re going to use some of our own photos with Background Switcher. With the menu still open, move the mouse pointer to Settings and left-click. When the dialogue box opens, make sure Flickr is selected as the photo source in the left-hand panel and click Add. We’ve got a free Flickr account (set one up by visiting www.flickr.com) so we’re going to pull photographs down onto our test PC’s Windows Desktop from that. At the Photo Selection dialogue box we choose ‘A Specific Person’ from the dropdown menu, then type in our user name and click OK.

Click OK to confirm any changes. From now on, our own photos stored on Flickr will be mixed in with those taken from Background Switcher’s default selection. Look carefully at the top-right corner of this screen, it says ‘Sunset over lake’ by Adurman (that’s our account name). Let’s try something else. Right-click the Background Switcher icon again and choose Settings. This time, click the Folders icon on the left. This lets the program display pictures stored in any folder on the PC. The default is My Pictures, which is fine, so we click OK.

Background Switcher has some other interesting ways to showcase pictures. Open the Settings dialogue again and either stick with the same photo source, or switch to another. Then, find the Photo Options heading in the dialogue box. Open the dropdown menu and choose one of the other available layouts. Here we’re going to pick ‘thumbnail mosaic’. Click OK to confirm and after a moment, the Desktop fills with tiny pictures. (We’ve re-opened the Settings dialogue here to show the chosen option and the effect when it’s applied.)

Experiment with different layout styles by picking from the Photo Options list (the one in the background to this screen is ‘snapshot scrapbook’) and then go back to the Settings dialogue box and choose More Settings from the left-hand panel. From here it’s possible to alter the way Background Switcher behaves in all sorts of useful ways -­ the orientation of the photos, for example -­ as well as adding useful extras. Here we’re going to include a static three-month calendar on the Desktop.

Stay in the More Settings dialogue for a moment and click the next option down in the left-hand panel -­ Montages. Here Background Switcher provides the settings to change the individual size of the thumbnails themselves as well as those used in the scrapbook layout. It’s also possible to select a random background picture and add an effect such as monochrome or sepia. Here we’ve selected a random background and turned the effect off. Click OK to confirm the changes.

And here’s the result of our changes. Notice that the mosaic has been replaced by an attractive scrapbook-style arrangement with pictures scattered across the screen. This also features a calendar for the current month (larger and to the left) as well as two months ahead as specified in Step 8 (this is for reference only, it’s not a ‘live’ calendar). This kind of flexibility makes Background Switcher a genuinely powerful way to spice up any Windows Desktop.

Background Switcher is also smart enough to gather pictures from other sources, notably the Yahoo search engine and any site that has an RSS feed designed to push information over the internet to a PC. Let’s start with Yahoo. From the Settings dialogue, click the Yahoo button in the left-hand panel. After that, click the Add button and then type in a search query, for example ‘cat’, and then click OK. Again, we’ve re-opened the dialogue box to show the setting and the result.

Don’t just stick with a single search item. Instead, add as many to this list as you like. Here, for example, we’ve continued the pet theme by adding dog, horse and cow in exactly the same way as described in the previous step. Using the Yahoo search engine in this way limits the layout options offered by the program, restricting them to variations on a single image displayed at full screen as shown here.

Background Switcher also supports RSS feeds, which are often a good source of unusual or more up-to-date photographs. With the Settings dialogue open, click the RSS Feeds button in left-hand panel and then click Add. The Add/Edit Feed dialogue has some suggestions so click on one to open a web browser and go to the site. We’ve chosen Photobucket, home to a wide selection of great-looking photos on all sorts of subjects. When the site loads, we find a photo category we like (funny signs) scroll to the bottom and click the RSS icon.

When the RSS web page loads, right-click on the address in the Address or Location line at the top (where the ‘http://’ is) and choose Copy. Go back to Background Switcher and right-click in the empty URL box and choose Paste. Click the Test button to confirm the address is correct and that the feed works and then click OK and then OK again. Click OK twice more to close all the dialogue boxes. Again we have re-opened the Settings dialogue to show both the RSS feed and the photos it produces.