Foundations of Web Design

Graphics

  1. JPEG (Joint Photographic Experts Group), file extension is .jpg or .jpeg

    • advantages: millions of colors due to 24-bit depth, good for full color photographs, "continuous tone" images, uses compression to reduce file size, better overall compression than GIF
    • disadvantages: lossy, not good for black & white or indexed color, slower to download due to decompression process
    • A JPEG optimizer can be used to decrease file size without having much of an effect on the quality of the image. See JPEG Wizard or JPEGCruncher
    • Activity: Use the Fireworks Export Preview to examine different levels of compression in a jpeg and the corresponding quality of the graphic.

  2. GIF - (Graphics Interchange Format from Compuserve) pronounced gif or jiff, file extension is .gif

    • advantages: lossless, good for indexed color, can be interlaced, can make one color transparent
    • disadvantages: limited 8-bit color depth, not good for lifelike photographs, <= 256 colors, may be dithered, no compression
    • interlaced GIF's - makes graphic "appear" to load faster giving user chance to stop download
    • transparent GIF's - can set one color as transparent to blend the image with the Web page background
    • GIF optimizers are programs and Web sites that can reduce a GIF's file size.

    • Activity: Make a transparent GIF with Macromedia Fireworks. Obtain a graphic from www.free-graphics.com if necessary. To copy a graphic from another Web pages, you simply right-click the graphic on a PC or hold down the mouse over a graphic on a Mac. Or, save one of these graphics - my house, my old house, Bausman Church, Insurance company

    • Activity: Use the Fireworks Export Preview to examine different numbers of colors in a gif and the corresponding quality of the graphic. Delete selected colors from the file and watch the resulting file size decrease.

    • Activity: Open a library graphic found in Flash (Window/Common Libraries/Graphics menu command) and use the File/Export Image menu command to export it as a gif, jpg and swf Flash movie file. Examine the file sizes of these three files and notice that the Flash file is much smaller since it is a vector-based graphic rather than a bit-mapped one.

    • animated GIF's

      • You can create animated GIFs which are supported by all browsers. Animated gifs have relatively small file size and they can be used effectively on a Web page or advertising banners.
      • Discuss frames and how they are different from layers
      • Examine the Fireworks Frames panel
      • You can create and export a simple animated gif by creating 2 or 3 frames by hand
      • Or, you can create an animated gif by using the Modify/Symbol/Tween Instances menu command between two symbol instance.
      • Activity: Create a 400 x 60 pixel banner as an animated gif by using the Modify/Symbol/Tween Instances menu command between two symbol instances
      • Follow this guide for creating animated gif's in Fireworks MX.
      • A great survey of different effects that can be achieved using animated GIFs can be found here. Animated GIF's can look like more sophisticated Flash animations but they have the advantage of working in any Web browser without a Flash plug-in.

      • Activity: Find an animated gif on an existing Web site, right-click the graphic and save it to your computer. Then open that file within Fireworks to see the animated gif's frames. You can analyze this animated gif that I use in my Final Project by saving it to your hard drive and opening the Frames panel in Fireworks.

      • Activity: Create an animated gif using the Tween Instance menu command in Fireworks. You could use this animated gif as an advertising banner in your Final Project web site.

          1. Build an animated GIF from scratch using Macromedia Fireworks.
          2. Choose File/New to create a new Fireworks document that is 100 x 100 pixels at 72 dpi with a transparent background.
          3. Choose the Insert/New Symbol menu command.
          4. Type the name symbol such as CompanyName.
          5. Click the Text tool (a capital A).
          6. Type Acme.com into the Text Editor.
          7. Format the text to bold and 12 font size.
          8. Close the Text Editor by clicking OK.
          9. Close the Symbol Editor.
          10. Choose the Window/Library menu command.
          11. Drag the entry for the symbol that you created (CompanyName) from the Library palette to the upper-left corner of your document.
          12. Choose the Modify/Transform/Numeric Transform menu command. Type 150.
          13. Shift/select both instances of your symbol. (Hold down the shift key and click on both instances.)
          14. Choose the Modify/Symbol/Tween Instances menu command.
          15. Set 10 Steps and checkmark the Distribute to Frames option.
          16. If necessary, choose the Window/Frames menu command to bring up the Frames palette and click the Frames tab.
          17. Click through the different frames to sort of preview your animated gif.
          18. Set No Looping in the lower left of the palette.
          19. Choose the File/Export Preview menu command.
          20. Choose the Animated GIF format under the Options tab.
          21. Click the Play button in the lower-right of the window.
          22. Select Index Transparency in the lower-left of the window.
          23. Click Export.
          24. Name the file appropriately such as companyanimatedfireworks.gif.
          25. Click Save.
          26. Save the original image (.png).
          27. Preview the animated gif in using the File/Open menu command in Netscape or Internet Explorer.
      • Activity: Create an animated gif by creating a simple animation with the Insert/Create Motion Tween menu command in Flash and exporting it as an animated gif. First, place a symbol in two different positions in two different keyframes. Then, use the Insert/Create Motion Tween menu command. You can change other aspects of each symbol in the keyframes such as color, brightness, and even shape.
  3. PNG - (Portable Network Graphics) pronounced ping, file extension is .png, an emerging format

    • advantages: not patented, 1-48 bit color depth, lossless compression, gamma correction
    • disadvantages: recent browsers only

  4. When to use GIF and when to use JPEG?

    • Use GIF for graphics with few colors
    • Use JPEG for images with high and subtle color variation
    • Read great comparisons between the two at Webmonkey

  5. Keep the size of each graphic as small as possible.

    • if scanning a graphic, scan at 72 ppi (pixels/dots per inch - typical screen resolution)
    • keep individual graphics to less than 40 kilobytes is a rule-of-thumb
  6. survey the Web for examples of JPEG's, GIF's, & PNG's

  7. issues in creating & converting graphics to Web-supported formats

    • To copy a graphic from another Web pages, you simply right-click the graphic on a PC or hold down the mouse over a graphic on a Mac. Of course, you cannot use a graphic copyrighted by others.
    • PC's and Mac's display graphics differently therefore gamma corrections are necessary to avoid the inevitable effect of having PC-created graphics appear to light on Mac's and the effect of having Mac-created graphics appear to dark on PC's
    • most graphics authoring programs (PhotoShop, etc.) allow you to "Save As.." JPEG & GIF
    • graphics conversion programs will allow you to convert graphics from one format to another (including formats that are not used on the Web) - PC users try ViewPro and Mac users may try GraphicConverter or DeBabelizer
    • You can find many good freeware & shareware graphics authoring, conversion, and viewer applications from sites such as http://download.com.

  8. Vector-based graphics (Flash-created) load more quickly than bitmapped ones (gif, jpg, png). However, the user must have the Flash plug-in to view the graphic.

  9. Image Slicing
    • Image slicing optimizes image file sizes. It also allows you to optimize the quality of different portions of a large, complicated image. It also results in quicker download times by allowing the browser to cache images more effectively.
    • Slicing a graphic in Fireworks basically amounts to cutting it up into several graphics that are then held together by an HTML table.
    • This technique is commonly used to create navigation bars, since each slice can have its own hyperlink. You create a graphic and then cut it into pieces that are then reassembled on a Web page using an HTML table. The graphic appears seamless in the Web browser but is actually made up of multiple pieces, each a separate file. Advantages include:
      • Creating a hyperlink from an entire image is easier than using an image map.
      • If a section of the graphic is updated frequently, such as today’s date, part of the graphic may be replaced rather than the entire graphic.
      • Individual parts of a graphic may be optimized, creating a better appearance.
      • The cumulative file size of all the pieces is usually smaller than the single, large graphic, because each piece may be optimized individually.
    • Slice a graphic along guides that you create by dragging from the rulers.
    • Slice a graphic using the Slice Tool.
    • Be careful to keep track of each slice (with appropriate names) and the corresponding HTML table when exporting sliced images


    • Activity: Use the Slice tool in Fireworks to slice an image. Then use the File/Export... menu command to export the sliced image along with supporting JavaScript and an HTML table. Note that you will need the HTML that is created from this export process since the HTML code for a table will have to be added to the Web page initially. If you are updating a sliced image you simply only need to update that particular sliced image. Since I created the Javascript mouseover on this page before Fireworks was available, I could not take advantage of its easy image-slicing feature. See if you can find the subtle problem in the resulting mouseover images.

  10. Generating Mouseovers (aka JavaScript Rollovers)

    • The effect of having a graphic replace another when the user moves his mouse over the graphic adds some interactivity to a Web page. The mouseover event in Javascript can be used to create this effect.
    • Fireworks can be used to create the graphics that go together to achieve this effect and the HTML and Javascript code that is necessary.
    • It is wise to use symbols as buttons for increased consistency throughout your web pages and web sites. A Fireworks symbol is stored in the document's Library.
    • Use the Edit/Insert/New Button menu command to bring up the Button Editor which allows you to create a button with up and over states.
    • Carefully export a button keeping track of its corresponding HTML along with its various images (up and over states).
    • You can also create the up and over state images for a button without using button symbols in Fireworks. Simply create an up state graphic and then duplicate that frame. In the second frame (the over state), change some aspect of the graphic. Then export each frame separately using the File/Export or File/Export Preview menu command. Be careful to name these two gif images appropriately. Then, use the Insert/Interactive Images/Rollover Image menu command in Dreamweaver to actually add the rollover to a web page. Follow this guide for using this method to create rollovers.

    • Optional Activity - Create the required rollovers for your Final Project web site using Fireworks Button Editor to produce the graphics as well as corresponding JavaScript:
      1. Create a new document in Macromedia Fireworks by choosing the File/New menu command.
      2. Set the graphic to be 100 x 100 pixels, 72 dpi, with a transparent background.
      3. Choose the Insert/New Button menu command.
      4. Read the instructions at the bottom of the window under each tab.
      5. Choose the Rectangle tool. Hold down the Shift key and draw a rectangle in the Button Editor.
      6. Click the Over tab and click the Copy Up Graphic button.
      7. Change the color of the rectangle which appears with the Fill Bucket tool.
      8. Optionally, click the Down tab and click the Copy Over Graphic button.
      9. Change the color of this rectangle as well.
      10. Click the Active Area tab and then the Link Wizard button.
      11. Click the Link tab and then enter a full URL Web address such as http://www.microsoft.com into the area marked with the chain link.
      12. Click the OK button.
      13. Close the Button Editor.
      14. Click the Preview tab and test your rollover.
      15. Choose the File/Export Preview menu command and click Export.
      16. Save the rollover gif with an appropriate file name.
      17. Save the accompanying (and necessary) HTML file in an appropriate directory (perhaps "One Level Up").
      18. Save the original (.png) file.
      19. Preview the rollover using File/Open Page in Netscape but be sure to open the .html file that was created by the Export process.
      20. View the HTML source of this Web page and if necessary copy the Javascript and the HTML table to the Web page where you plan to use the rollover graphic.

    • Recommended Activity - Create the required rollovers for your Final Project web site the using Fireworks Frames panel to create 2 images and then using Dreamweaver to create the corresponding JavaScript:

      1. Create a graphic in Fireworks using the Shape, Text, and other tools. If you use text in this frame, you should place the text in a second layer.
      2. Use the Duplicate Frame command in the Frames panel (look under the small black triangle in the upper-right corner.)
      3. In Frame 2, change some aspect of the graphic (text color, background color, etc.).
      4. With the first frame selected in the Frames panel, export the graphic as a gif or jpg. This will be used as the rollover's up state.
      5. With the second frame selected in the Frames panel, export the graphic as a gif or jpg. This will be used as the over state.
      6. In Dreamweaver, click your mouse where you would like to insert the rollover.
      7. Choose the Insert/Interactive Images/Rollover Image menu command.
      8. Click the Browse buttons to point to the upstate image as the "Original Image" and the over state image as the "Rollover Image".
      9. If desired (and it usually is), type a URL address for the web page that you would like the rollover to link to when clicked.
  11. Creating image maps
    • Use the Rectangle, Circle, & Polygon Hotspot Tools to create a simple navigation bar
    • You can Hide or Show image hotspots as you edit a graphic
    • Use the Property Inspector with a hotspot selected to make hyperlinks.
    • Be sure to add <alt> text to all images, especially for the sake of web page accessibility
    • Export an image map by carefully keeping track of its associated HTML source code & the assorted images.
    • Use Dreamweaver's "Insert Fireworks HTML" menu command to insert an image map into a web page
      (if time) Do tutorial on pp. 91+ with the foodtrain.png