1 / 24

Graphics and the Web

Graphics and the Web. Visual Design, Ch. 6 CIS 311 – graphics.ppt. What are graphics? How do you use graphics on the web? Terms about graphics Issues in using graphics Acquiring graphics Editing graphics Types of graphic compression for the web

Download Presentation

Graphics and the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Graphics and the Web Visual Design, Ch. 6 CIS 311 – graphics.ppt

  2. What are graphics? • How do you use graphics on the web? • Terms about graphics • Issues in using graphics • Acquiring graphics • Editing graphics • Types of graphic compression for the web • Workflow methods for successful use of graphics on your website Graphics

  3. Backgrounds • Pictures • 3-D graphics • Charts • Computer-generated graphics, drawings, etc. • Clip art • Buttons • Anything else? • Animated GIFS? What qualifies as Graphics on Web?

  4. Avoid gratuitous graphics • Save images in the appropriate format • Reuse graphics • Reduce Image size • Use height & width attributes appropriately • What’s wrong with increasing image dimensions in HTML tag? Reducing image dimensions? • Make the images accessible: How? Principles of using Graphics

  5. Graphic types: • content? Has graphic some meaning for the page? • Or is graphic thematic/decorative? • Anti-aliasing –gets rid of the “jaggies” • Transparency of background – transparent GIF & PNG images • Can use Matte color for jpegs in Photoshop “save for web” • Interlacing – downloads successive versions of images – not used much with broadband Terms regarding Graphics

  6. Stock photos – do not use for this class • Screen captured images • Import photos from digital camera • Can choose file dimensions & resolution on camera – imported as JPEGs which are already compressed by camera • Raw format includes much all the information the camera records – Digital SLRs / some high-end non digital SLRs • Do not take images from internet sites unless you have specific permission – • check copyright for site & licenses governing uses of its content. Acquiring images

  7. Computer screen is low resolution: 72 dpi • Image memory size varies depending on compression and file format • Web color on client varies depending on: • bit-depth settings of computer • Color calibration & gamma default settings of monitor • Operating system, Web browser Issues: Image Resolution

  8. JPEG (Joint Photographic Experts Group) • Photos with smooth tonal/value transitions • Preserves the outline of the image • Blurs crisp edges between colors • Reduce JPEG file size by: Cropping out nonessential content Reducing color palette in image • Blurring background or selecting most important areas before compressing • Decreasing the image dimensions • Compression overview: • http://www.csupomona.edu/~llsoe/42101/photoshop/compression.htm Image formats for the Web: JPEG

  9. Graphics Interchange Format • Compression works best for images with large areas of flat color • http://www.csupomona.edu/~llsoe/42101/photoshop/compression.htm • Restricted to 256 colors • Doesn’t work well for photos unless you want special effects • 256 color photo is much larger than more compressed JPEG • Indexed color: 256 down to 2 colors, displayed in color palette in Save-for-web window in Photoshop • Supports transparent backgrounds • Can be used to create animated gifs • 216 web-safe colors – why was this color palette created? Image formats for the Web: GIF

  10. Newer format – still not widely used – value is similar to GIF – flat images, not photos • Advantages of PNG • 256 colors • True color, which offers 16.8M colors, like JPEG • True grayscale color • Provides indexed transparency & alpha transparency (not much supported, large file sizes) Image formats for the Web: PNG

  11. In an interactive product when you have more than one image on the screen, • each image may use a different palette of colors • all of the colors in both images may not be the palette in use • Good ways to limit image file size • reduce the color palette – minimize the range of colors: • All reds/oranges or All greens/blues, • but NOT red, orange, green, blue, yellow, etc. Issues: Color & color Palettes

  12. Importing – start with high quality images • More to work with • High resolution images allow you to crop • Use layers to edit images • If each change is done in a layer, you can turn layer visibility on and off, move layers up and down the stack • Save psd (Photoshop) version of file to preserve all your layers for later use • Export files using “save for web & devices” • Turn on layers you want to use in final image Editing images

  13. Exporting images – • Sharpen the image the last step before exporting • http://www.csupomona.edu/~llsoe/42101/photoshop/index.htm#sharpen • Photoshop optimizes images better than you probably can do manually via File> “save for web” window • Can scale file dimensions down by % • 4 windows allow you to view results of various levels & types of compression • Can compare differences between different file formats • Select the one you want and click “save” Editing Images

  14. Filters: http://www.csupomona.edu/~llsoe/42101/photoshop/index.htm#filters • Adjustment layers: http://www.csupomona.edu/~llsoe/42101/photoshop/adjustmentlayers.htm • Styles: http://www.csupomona.edu/~llsoe/42101/photoshop/styles.htm • Actions –macros to alter images: http://www.csupomona.edu/~llsoe/42101/photoshop/actions.htm • Creating & exporting animations:http://www.csupomona.edu/~llsoe/42101/photoshop/animation.htm Editing Images: Image effects

  15. Logo design • Graphics & text • Image effects • Background images for web pages – can be inserted on the stylesheet • Do not overwhelm the text & images on page so tone the background image down • Outline the text • Tile the background image in CSS • repeat-x, repeat-y, repeat • Insert background image inside a <div> tag Editing Images: Logos & Background images

  16. Can be done with JavaScript which rotates a series of images with timer • Photoshop has an animation window • Export animated GIF, which is a single file • Flash animation • Flash will export animated GIFs & FLV video • Also can export SWF files, which are much smaller than animated GIFs and which can contain MP3 sound files, and video • Flash also streams FLV files you export from other applications Editing images: Animation

  17. Smaller Image Files hasten download • Reduce Image File Size for the Web • Reduce number of colors • Reduce image dimensions • Blur unimportant areas of image • Select important areas before compressing to increase their quality • Compress to reduce color depth • To check download speed of a page in Web Developers Toolbar: Tools>Speed Report File size: Images

  18. Always preserve the original image – archive it • Do not compress an image & then compress the compressed image again – degrades • Always compress from an original version of the image (psd) • Types of image files: • Vector – described by mathematical algorithms so increase & decrease in size gracefully: Flash, Illustrator • Bitmapped/raster images – described by pixels. Photographic images (JPEGs) and graphics images (GIFs) • Degrade when scaled up or recompressed Graphics File Compression

  19. Buy high, sell low • Digitize images, sound, video at highest possible resolution & reduce it later • Digitizing at low resolution saves memory & storage up front, but loses too much data • Save the best for last • Reduce the resolution of the content last, after you’ve done your editing and altering • Compress from the high quality version – otherwise the file degrades rapidly if you recompress previously compressed documents Develop workflow methods

  20. Protect the original copy - • Archive a copy of the original media file (uncompressed psd file) • Keep an audit trail • Use Adobe Bridge to manage files • If you use non-original content, CHECK that you have permission & save that information • List file & its source in your sourcelog document • Keep a record of changes you make to a file • In Photoshop, make each alteration a separate layer & save the PSD version which preserves all the layers • Save versions so you don’t have to go back to beginning Develop workflow methods

  21. No Late Projects accepted – • put up what you have finished and start uploading early! • Do the requirements first – then add bells and whistles if you have time • Don’t change the content of your project until AFTER I tell you I finished grading the project. Develop workflow methods

  22. Create “alt” text that actually describes image & what its meaning is • convey information contained in the image in alternative format so that disabled person has access to it • Use textual descriptions of charts & graphs • Decorative graphics can have null alt text: alt=“” Accessible images

  23. Easiest: Test & fix as you build pages & site with web developers toolbar testing tools • After you upload to www, test the site (links, graphics, CSS, XHTML, etc.) • Be sure that your images show on the web – • file path may be pointing to your hard drive TEST your Website

  24. Midterm exam: Tuesday, Feb 9 • Exam Review will be posted later this week. • NO project due next week. • No quizzes due next week. Next

More Related