We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published bySimon Nichols
Modified over 5 years ago
© 2011 Delmar, Cengage Learning Chapter 13 Preparing Graphics for the Web
Objectives Create slices Specify slice type and slice options Use the Save for Web & Devices dialog box Create an image map Export Illustrator graphics for the web © 2011 Delmar Cengage Learning
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 © 2011 Delmar Cengage Learning
Create Slices Resolution is essential consideration when using bitmap graphics. –Standard resolution of a bitmap graphic is 72 pixels © 2011 Delmar Cengage Learning
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. © 2011 Delmar Cengage Learning
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. © 2011 Delmar Cengage Learning
Create Slices Artwork divided into slices © 2011 Delmar Cengage Learning
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. © 2011 Delmar Cengage Learning
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 © 2011 Delmar Cengage Learning
Create Slices Slice 3 was created with the Slice tool; slices 1,2, and 4 were generated automatically. © 2011 Delmar Cengage Learning
Create Slices Use standard ruler guides to define how you want artwork divided into slices © 2011 Delmar Cengage Learning
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. © 2011 Delmar Cengage Learning
Create Slices Using guides and combining excess slices is simplest, most straightforward, hassle-free method for making sliced artwork. Slices can be combined easily © 2011 Delmar Cengage Learning
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 © 2011 Delmar Cengage Learning
Specify Slice Type and Slice Options 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 © 2011 Delmar Cengage Learning
Specify Slice Type and Slice Options Message text box Alt text box Slice Type list arrow © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box Optimization is a process which reduces file size through standard color compression algorithms. In the Save for Web & Devices dialog box, select options for previewing images. © 2011 Delmar Cengage Learning
Use the Save for Web & Devices 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 © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box 2-up display presents two versions of artwork – original and optimized. 4-up display presents original beside three optimized versions. © 2011 Delmar Cengage Learning
4-Up Display in the Save for Web & Devices dialog box Use the Save for Web & Devices Dialog Box © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box 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. © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box 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. © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box A GIF file with too few colors available to render the image adequately © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box Choose level of compression in JPEG format by specifying JPEG’s quality setting. When compression is too severe, it results in problems with image. © 2011 Delmar Cengage Learning
Use the Save for Web & Devices Dialog Box A JPEG with compression that is too severe © 2011 Delmar Cengage Learning
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. © 2011 Delmar Cengage Learning
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 © 2011 Delmar Cengage Learning
Create an Image Map © 2011 Delmar Cengage Learning Current fill color button Out of Web Color Warning button In Web Color button
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. © 2011 Delmar Cengage Learning
Create an Image Map © 2011 Delmar Cengage Learning Image maps enable you to define odd- shaped areas of an image as links to a URL.
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. © 2011 Delmar Cengage Learning
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 © 2011 Delmar Cengage Learning
Export Illustrator Graphics for the Web Set options for your export in the SWF Options dialog box. © 2011 Delmar Cengage Learning
Export Illustrator Graphics for the Web 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. © 2011 Delmar Cengage Learning
Export Illustrator Graphics for the Web 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. © 2011 Delmar Cengage Learning Creates an animated SWF fileClick for Advanced options
Export Illustrator Graphics for the Web 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. © 2011 Delmar Cengage Learning Creates an animated SWF file.Click for Advanced options.
Export Illustrator Graphics for the Web Non-blend artwork can be released to layers and used as an animation. You can rearrange layers by hand to achieve different effects. © 2011 Delmar Cengage Learning
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
Designing Scenes for Macromedia Flash MX 2004 – Lesson 41 Designing Scenes for Macromedia Flash MX 2004 Lesson 4.
Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
© 2011 Delmar, Cengage Learning Chapter 7 Importing and Modifying Graphics.
Importing and Modifying Graphics
© 2010 Delmar, Cengage Learning Chapter 7: Importing and Modifying Graphics.
Iframes & Images Using HTML.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Adobe ImageReady 3 Foundation Level Course. What is ImageReady? ImageReady is a graphics program that offers several tools tailored to efficiently prepare.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Foundation Level Course
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Saving a Word Document as a Web Page
Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX GETTING STARTED WITH.
Adobe Photoshop 6 Advanced Level Course. Easy Fixes Photoshop is the best tool to fix old, torn and faded photographs, and can fix almost all flaws in.
© 2020 SlidePlayer.com Inc. All rights reserved.