Chapter13
-
Upload
tracie-king -
Category
Education
-
view
172 -
download
1
description
Transcript of Chapter13
![Page 1: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/1.jpg)
Chapter 13
Preparing Graphics for the Web
![Page 2: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/2.jpg)
Objectives
• Create slices• Specify slice type and slice options• Use the Save for Web dialog box• Create an image map• Export Illustrator graphics for the web
![Page 3: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/3.jpg)
Create Slices
Essential consideration for web graphics• Graphics must be created in Web Safe RGB color. • Color you see on the artboard is not necessarily
the color in the web browser.– Appearance affected by color choices, file format, and
degree of compression
![Page 4: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/4.jpg)
Create Slices
• Resolution is essential consideration when using bitmap graphics.– Standard resolution of a bitmap graphic is 72
pixels
![Page 5: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/5.jpg)
Create Slices
File size and display considerations:• JPEG and GIF both reduce file size significantly
with different processes.• Experience and understanding required to
choose correct format and degree of compression.
![Page 6: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/6.jpg)
Create Slices
Understanding sliced artwork• File size is a fundamental consideration when
creating graphics for the web.• Illustrator allows you to divide the artwork
into slices.
![Page 7: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/7.jpg)
Create Slices
Artwork divided into slices
![Page 8: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/8.jpg)
Create Slices
• Web pages contain many different elements, such as HTML text and bitmap images.
• If you use slices to divide different elements, you can output them differently.
![Page 9: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/9.jpg)
Create Slices
• The Make Slice command creates a slice whose dimensions match those of the bounding box of the object.
• The Slice tool allows a rectangle to be drawn anywhere on the artboard.– If artwork is moved, slice doesn’t move
![Page 10: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/10.jpg)
Create SlicesSlice 3 was created with the Slice tool; slices 1,2, and 4 were generated automatically.
![Page 11: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/11.jpg)
Create Slices
Use standard ruler guides to define how you want artwork divided into slices
![Page 12: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/12.jpg)
Create Slices
• When you apply Create from Guides command, Illustrator generates slices for each area defined by guide.
• You can select each slice with the Slice Selection tool, which means slices can be easily combined.
![Page 13: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/13.jpg)
Create Slices
Using guides and combining excess slices is simplest, most straightforward, hassle-free method for making sliced artwork.
Slices can be combined easily
![Page 14: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/14.jpg)
Specify Slice Type and Slice Options
• Slice type and options assigned to them determine how artwork contained in a slice will function on a web page.
• Three slice types you can specify in the Slice Options dialog box:– Image (if content will be linked)– No Image– HTML Text
![Page 15: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/15.jpg)
• If you specify slice as an Image slice, set options in the Slice Options dialog box for:
• Name – slice name is used as file name• URL – makes slice a hotspot on the web• Target – specifies frame you want link to target • Message –will appear in status bar of browser• Alt – for sight impaired Web surfer• Background – specify a color for background • Text – enter text in Displayed in Cell text box
Specify Slice Type and Slice Options
![Page 16: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/16.jpg)
Specify Slice Type and Slice Options
Message text box
Alt text box
Slice Type list arrow
![Page 17: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/17.jpg)
• Optimization is a process which reduces file size through standard color compression algorithms.
• In the Save for Web dialog box, select options for previewing images.
Specify Slice Type and Slice Options
![Page 18: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/18.jpg)
Use the Save for Web Dialog Box• Tabs at the top of image area define display
options.– Original display presents artwork with no
optimization– Optimized display presents artwork with current
optimization setting applied
![Page 19: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/19.jpg)
• 2-up display presents two versions of artwork – original and optimized.
Use the Save for Web Dialog Box
![Page 20: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/20.jpg)
• GIF is standard file format for compressing images with flat color.
• Provides effective compression for the right type of artwork.
• Generally has no noticeable effect on image.
Use the Save for Web Dialog Box
![Page 21: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/21.jpg)
File Optimization• GIF compression works by lowering number of colors
in file. The trick is to lower the number of available colors without adversely affecting appearance of image. Good for line art and logos.
• JPEG is standard file format for compressing continuous-tone images, gradients, and blends.
Use the Save for Web Dialog Box
![Page 22: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/22.jpg)
A GIF file with too few colors available to render the image adequately
Use the Save for Web Dialog Box
![Page 23: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/23.jpg)
• Choose level of compression in JPEG format by specifying JPEG’s quality setting.
• When compression is too severe, it results in problems with image.
Use the Save for Web Dialog Box
![Page 24: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/24.jpg)
A JPEG with compression that is too severe
Use the Save for Web Dialog Box
![Page 25: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/25.jpg)
Create an Image Map
• Because of inconsistency of document color appearance, Illustrator offers a Web Safe RGB mode in the Color panel and a web swatch library.
![Page 26: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/26.jpg)
Create an Image Map
• Web swatch library contains predefined colors coded to be recognized by most computer displays, and common Web browser applications.
• When color is critical, think of the Web safe gamut as a safe bet for achieving reasonable consistency
![Page 27: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/27.jpg)
Create an Image Map
Current fillcolor button
Out of Web Color Warning button
In Web Color button
![Page 28: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/28.jpg)
Create an Image Map
• Image maps allow you to define an area of an illustration as a link.
• When user clicks area of image defined as a link, browser loads linked file.
• Image maps store artwork and links in a single file.
![Page 29: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/29.jpg)
Create an Image Map
Image maps enable you to define odd-shaped areas of an image as links to a URL.
![Page 30: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/30.jpg)
Create an Image Map
• Attributes panel contains Image list arrow, which allows you to choose shape for your image map.– Enter a URL for the link
• The linked area that the user clicks is called a hotspot.
![Page 31: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/31.jpg)
Export Illustrator Graphics for the Web
• SWF is an acronym for Shockwave Flash.• SWFs can be exported and placed in Adobe
Flash or opened directly by a web browser.– Internet Explorer– Firefox
![Page 32: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/32.jpg)
• Set options for your export in the SWF Options dialog box.
Export Illustrator Graphics for the Web
![Page 33: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/33.jpg)
• You can use Illustrator graphics as animations for the web or in Flash.
• Use the Blend tool to create a blend and then export it as an animation.
Export Illustrator Graphics for the Web
![Page 34: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/34.jpg)
• You must choose the AI Layers to SWF Frames in the Export As text box, even if you did not use layers in your Illustrator artwork.
Creates an animated SWF file
Export Illustrator Graphics for the Web
![Page 35: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/35.jpg)
• To export non-blend artwork as an animation you must separate the components of the artwork on separate layers.
• Use the Release to Layers command on the Layers panel.
Export Illustrator Graphics for the Web
![Page 36: Chapter13](https://reader033.fdocuments.in/reader033/viewer/2022061115/54627a86af7959f61b8b7a11/html5/thumbnails/36.jpg)
• Non-blend artwork can be released to layers and used as an animation.
• You can rearrange layers by hand to achieve different effects.
Export Illustrator Graphics for the Web