graphics and the web l.
Skip this Video
Loading SlideShow in 5 Seconds..
Graphics and the Web PowerPoint Presentation
Download Presentation
Graphics and the Web

Loading in 2 Seconds...

play fullscreen
1 / 24

Graphics and the Web - PowerPoint PPT Presentation

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

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
  • Workflow methods for successful use of graphics on your website
what qualifies as graphics on web


  • 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

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

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

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

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

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

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

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
issues color color palettes

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

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
editing images13

Exporting images –

  • 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


  • Adjustment layers:
  • Styles:
  • Actions –macros to alter images:
  • Creating & exporting animations:
Editing Images: Image effects
editing images logos background images

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
editing images animation

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

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
graphics file compression

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
develop workflow methods

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
develop workflow methods20

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
develop workflow methods21

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
accessible images

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
test your website

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

Midterm exam: Tuesday, Feb 9

  • Exam Review will be posted later this week.
  • NO project due next week.
  • No quizzes due next week.