Docstoc

Graphic Design

Document Sample
Graphic Design Powered By Docstoc
					Graphic Design

ISC325
October 19, 2005
Today

 Review
 Web Graphic
    – F & F Ch. 4, HTML Tutorial 3
 Web Accessibility
 Other technical issues
Review

 Web Design with Tables and Forms
 Writing for the Web
 Color Harmony
Web Graphics

 Color Displays
 Screen resolution
 Graphics and network bandwidth
 Graphic File Formats
Color displays
  Pixels and color depth




     http://www.webstyleguide.com/graphics/displays.html
http://www.webstyleguide.com/graphics/displays.html
http://www.webstyleguide.com/graphics/displays.html
http://www.webstyleguide.com/graphics/displays.html
                    Color depth and graphics files




                                                      True-color: Red, Green, and Blue

     256-color palette




http://www.webstyleguide.com/graphics/displays.html
Screen Resolution
   Images for Web pages are always limited by
    the resolution of the computer screen
   Resolution: The number of pixels a screen
    can display within a given area.
   Most personal computer’s resolutions from 72
    to 96 pixels per inch (ppi)
   It is safe to assume that most users fall into
    the lower end of the range, or about 72 to 80
    ppi
   Resolution – 72 dots per inch
 Graphic File Formats
GIF                     JPG                    PNG
(Graphics               (Joint Photographic    (Portable Network
Interchange Format)     Experts Group)         Graphics)

8-bit (256 colors)      24-bit (true color)    8-bit
color palettes          Lossy compression      16-bit grayscale
Lossless                                       24-bit true color
compression                                    Lossless
                                               compression
clip art images, line   Photographic images
art, logos, and icons   No transparent color
Interlaced GIF          No animation
Transparent GIF
Animated GIF
Interlaced and Noninterlaced
GIFs
 Interlacing refers to the way the GIF is saved by the
  graphics software.
 Normally, with a noninterlaced GIF the image is
  saved one line at a time, starting from the top of the
  graphic and moving downward.
 With interlaced GIFs, the image is saved and
  retrieved “stepwise.”
    – for example, every fifth line of the image might appear first,
      followed by every sixth line, and so forth through the
      remaining rows
   Interlacing is an effective format if you have a large
    graphic and want to give users a preview of the final
    image as it loads.
          Noninterlaced Graphic
This figure shows how
a noninterlaced GIF         top appears
appears as it is slowly            first
retrieved by the Web
browser.
                                   Image
If the graphic is large,    appears one
it might take several      line at a time
minutes for the entire
image to appear, which
can frustrate the
visitors to your Web       entire image
page.                       is retrieved
         Interlaced Graphic
This figure shows the
effect of interlacing,
which is when the
graphic starts out as a    a rough image
blurry representation of     appears first
the final image, then
gradually comes into
                            image starts
focus-unlike the           to show more
noninterlaced graphic,             detail
which is always a sharp
image as it’s being
retrieved, although an     final image is
incomplete one.                 crisp and
                                  detailed
Transparent GIF

   Pick colors from the color lookup table
    of the GIF to be transparent by using
    image-editing software like Photoshop




     http://www.webstyleguide.com/graphics/gifs.html
Animated GIF
 Combine multiple GIF images into a single file to
  create animation
 Animated GIFs are an effective way to compose slide
  shows or to simulate motion.
 Animated GIF files are typically larger than
  static GIF images.
 The use of animated GIFs can greatly
  increase the size of a Web page.
 Be careful not to overwhelm the user with
  animated images.
          Animated GIF

             http://www.wigglebits.com/animation.ht
              ml
                                      What do you need to make an
                                         animated GIF?

                                      1.   A series of pictures (GIFs ) that
fellow1.gif fellow2.gif                    make up the frames of the
                        fellow3.gif        animation
                                      2.   A program that will put the GIFs
                                           together and display them in the
                                           order you specify.
 Animated GIF Programs
This figure shows a list of programs available on the Web that you can
                use to create your own animated GIFs.
         Animated GIF Collections
If you don’t want to take the time to create your own animated GIFs, many animated
  GIF collections are available on the Web. This figure shows a list of a few of them.
JPEG files

   Create images with the full 16.7 million
    colors
    – Good for photographs and images that
      cover a wide spectrum of color
   Control the size of a JPEG with the
    degree of image compression
    – But, for a image covering large sections
      with a single color, the GIF format will be
      better.
Summary of File Formats
 Uses for GIF and JPEG files
 Gif files
    – The most widely supported graphics format on the
      Web
    – Supports transparency and interlacing
   JPEG
    – Huge compression rations: faster download
      speeds
    – Excellent for most photographs and complex
      images
    – Supports full-color (24-bit, “true color”) images
Good Design

   Clean and clear – alt descriptions for graphics
   Use of dramatic color and strong alignment of
    navigation
   Simplicity
   Consistency and repetition from page to page
   Good use of white space
   Example:
Examples

 Las Campanas
  http://www.lascampanas.com
 New Mexico Internet Professionals
  Association http://www.nmipa.org
Web Development:
Technical aspects
Web Development

 HTML Coding
 Using Web Development Tool such
  Macromedia Dreamweaver
 Accessibility
    – Using a validator for web site quality
    – Web standards
   File Management
Accessibility

 To ensure that your pages are accessible to
  all users.
 To check the accessibility of your pages you
  can use a tool like Bobby
  (www.cast.org/bobby).
 Viewable with any browser: Accessible site
  design guide
  (http://www.anybrowser.org/campaign/abdesi
  gn.shtml)
Tools for Accessibility
   Bobby - Analysis of Accessibility (http://webxact.watchfire.com/)
    from CAST: A web-based tool that analyzes web pages for their
    accessibility to people with disabilities.
   Accessibility by People with Disabilities
    (http://www.state.fl.us/dms/tools/standards/standards.html#ada)from
    DMS Web Design Standards
          Recommended accessibility guidelines for website development
    adopted by the Department of Management Services.
   Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/) from
    W3C World Wide Web Consortium
    Resources on Web Accessibility including introductory how-to's,
    coding references, and current news and proposals.
   Color Deficient Vision (http://www.visibone.com/colorblind/) from
    VisiBone. About 8% of men and 0.4% of women have some form of
    color blindness. This web page contains resources for designing a
    website that will assist color-blind people by avoiding website color
    distinctions
Using a validator
   Validation
    – The process of cleaning up your code
   Validators
    – Doctor HTML
      (http://www2.imagiware.com/RxHTML)
    – WDG Web Design Group Batch Validator
      (http://www.htmlhelp.org/tools/validator/batch.html
      )
    – W3C Validator (This should be your first stop)
      (http://validator.w3.org)
    – W3C CSS Validation Service
      (http://jigsaw.w3.org/css-validator/validator-
      uri.html)
Web Standards

 There are standards related to hardware,
  software, graphics, email, and almost
  everything related to the Internet.
 Standards and Communication:
  http://www.wigglebits.com/standards.html
 Web Standards Project:
  http://www.webstandards.org
File naming
   Keep file names very short and descriptive
    – Less than 8 characters plus a file extension
 All lowercase letters
 Do not include any spaces: if you want to
  separate words use a dash – or underscore
  _.
    – Spaces will turn into “%” in browser windows
 Don’t move files around or the links and
  images may not function properly
 Images should be saved as gif or jpgs
An image file   A hyperlink to another page
                Directory (Folder)
                        Home directory



   Mail         Public-html


  myweb.htm       images         projects   ISC325   resume
Your homepage    Image folder




                 represents a folder (directory)
Linking folders

   Linking inside a folder
    – “foldername/filename”
   Linking outside a folder
    – “../myweb.htm”
    – “../../index.html”
   Linking files in same folder
    – “filename”
Next time

   Topic
    – Evaluation & Maintenance

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:14
posted:5/14/2012
language:English
pages:38