cetak ini coy
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.
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.
0 komentar :
Post a Comment
Your comments are inputs for our