Graphics and the web
1 / 24

Graphics and the Web - PowerPoint PPT Presentation

  • Updated On :

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Graphics and the Web' - Jeffrey

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Graphics and the web l.jpg

Graphics and the Web

Visual Design, Ch. 6

CIS 311 – graphics.ppt

Graphics l.jpg

  • 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


What qualifies as graphics on web l.jpg

  • Backgrounds

  • Pictures

  • 3-D graphics

  • Charts

  • Computer-generated graphics, drawings, etc.

  • Clip art

  • Buttons

  • Anything else?

  • Animated GIFS?

What qualifies as Graphics on Web?

Principles of using graphics l.jpg

  • 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

Terms regarding graphics l.jpg

  • 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

Acquiring images l.jpg

  • 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

Issues image resolution l.jpg

  • 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

Image formats for the web jpeg l.jpg

  • 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:


Image formats for the Web: JPEG

Image formats for the web gif l.jpg

  • Graphics Interchange Format

    • Compression works best for images with large areas of flat color


  • 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

Image formats for the web png l.jpg

Image formats for the Web: PNG

Issues color color palettes l.jpg

  • 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

Editing images l.jpg

  • Importing – start with high quality images on the screen,

    • 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

Editing images13 l.jpg

  • Exporting images – on the screen,

  • Sharpen the image the last step before exporting


  • 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

Editing images image effects l.jpg

  • Filters: on the screen,

  • Adjustment layers:

  • Styles:

  • Actions –macros to alter images:

  • Creating & exporting animations:

Editing Images: Image effects

Editing images logos background images l.jpg

  • Logo design on the screen,

    • 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

Editing images animation l.jpg

  • 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

File size images l.jpg

  • Smaller Image Files hasten download with timer

  • 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

Graphics file compression l.jpg

  • Always preserve the original image – archive it with timer

    • 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

Develop workflow methods l.jpg

  • Buy high, sell low with timer

    • 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

Develop workflow methods20 l.jpg

  • Protect the original copy - with timer

    • 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

Develop workflow methods21 l.jpg

  • No Late Projects accepted with timer –

    • 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

Accessible images l.jpg

Accessible images

Test your website l.jpg

TEST your Website

Slide24 l.jpg

  • Midterm exam: Tuesday, Feb 9 developers toolbar testing tools

  • Exam Review will be posted later this week.

  • NO project due next week.

  • No quizzes due next week.