Monday, August 3, 2015

Produce A Flashing Icon

Create a flashing web icon with graphic software.


Website designers and developers often use icons to aid in navigation on a website. The simplest way to create a flashing icon involves the use of an animated GIF (graphics interchange format) file. You can easily create an animated GIF by creating or purchasing graphics and editing them in a graphics editor such as Adobe Photoshop, GIMP or Paint Shop Pro.


Instructions


1. Create the still images that will comprise your animated GIF. Design the images from scratch using your graphics editor or purchase images from a stock photography website such as Getty Images or iStockphoto (see Resources). Access the "Illustration" category of stock photography websites and search for relevant keywords, like "button" or "icon." Ensure that you have permission to use any images you purchase for online use. Choose or create an image for both the on/flashing and off/not flashing states of your icon.


2. Save your still images to your hard drive with a file type of .GIF or .JPG. If you purchased images in a different format, open the files in your graphics editing program and choose the "Save As" option from the "File" menu. Select .GIF or .JPG and save new copies of the files for use in your flashing icon.


3. Create a new file in your graphics editing program. Create a different layer for the on/flashing and off/not flashing states of your icon. Open the animation tools in your editor---Photoshop refers to this section as the "animation palette." Put the layers in the order you want them to appear. Save the file on your hard drive as .GIF. Give it a name you will recognize when you browse to it later.


4. Open the tool you use to upload images to your website server. Open the folder where you typically store images used on your website. Use your tool's upload capability to browse to the .GIF you created and upload it to your server. Make note of the URL for the image, now that you have hosted it on your server.


5. Edit your website by accessing the HTML for the page you wish to change. Locate the spot on the page where you wish to add your flashing icon. Use the "img src" HTML command to reference the URL to the image hosted on your web server. Wrap that command in the "a href" HTML command to link your icon to its intended action---for example, the web page to which you want visitors to go when they click on the flashing icon.