HTML CSS IMAGES LINKS
 
HTML → Creating a Gif in Adobe ImageReady

Adobe ImageReady allows one to create, edit and optimize graphic content for the web.

  • Launch Adobe Image Ready.
  • File > New.
  • Name the new file "yourname." Remember not to include spaces in the file's name.
  • Specify the width to be 400 pixels and the height to be 60 pixels.
  • Make the background white (contents of first layer).
  • Click "OK."

    New Image Window

  • A canvas will appear (make sure it is set at 100%).

  • Click on the Type tool.

    type tool

  • Before typing in the name, select a font color.
  • Under the Window menu, choose "Show Swatches." The Swatches palette appears.
  • In the Swatches palette, click on any color to select it.

  • Make sure the color you have just selected appears as the selected color in the Text-Tool bar.

    Text Tool Bar Color

  • Click inside the canvas. A cursor will appear. Type in your full name.

    Higlighted text
  • With the Type tool still selected, highlight your name.
  • With the name highlighted, you can modify its appearance using the Text-Tool bar.

    Higlighted text
  • If you would like to reposition your type, use the Move tool.

  • Once you are satisfied with the look of your type, you can optimize the image.

    Optimizing images is a key function in ImageReady. Optimizing means compressing an image in order to reduce its file size while maintaining its appearance. The two types of compression that we are interested in are jpeg and gif.

    Above the image are four tabs:

    Tabs

  • Click on the "Optimized" tab.

    Tabs

  • From the Window menu, choose "Show Optimize."

  • Select "Gif" for format.
  • Note that at the bottom of the image Adobe ImageReady displays the optimized file size and the length of time it will take for the image to download.

  • Under the File menu, choose "Save Optimized As..." and save the gif as "yourname.gif."
  • You have now created a gif for the web. To test it, you need to embed the gif into an HTML page using the image tag.

    <img src="yourname.gif" alt="Your Name" width="400" height="60">

    Your Name

 
  back ↑