graphic design
Download
Skip this Video
Download Presentation
Graphic Design

Loading in 2 Seconds...

play fullscreen
1 / 38

Graphic Design ISC325 October 19 - PowerPoint PPT Presentation


  • 293 Views
  • Uploaded on

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

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

PowerPoint Slideshow about 'Graphic Design ISC325 October 19' - JasminFlorian


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
graphic design

Graphic Design

ISC325

October 19, 2005

today
Today
  • Review
  • Web Graphic
    • F & F Ch. 4, HTML Tutorial 3
  • Web Accessibility
  • Other technical issues
review
Review
  • Web Design with Tables and Forms
  • Writing for the Web
  • Color Harmony
web graphics
Web Graphics
  • Color Displays
  • Screen resolution
  • Graphics and network bandwidth
  • Graphic File Formats
slide5

Color displays

Pixels and color depth

http://www.webstyleguide.com/graphics/displays.html

slide10

Color depth and graphics files

True-color: Red, Green, and Blue

256-color palette

http://www.webstyleguide.com/graphics/displays.html

screen resolution
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
interlaced and noninterlaced gifs
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

top appears first

Image appears one line at a time

entire image is retrieved

Noninterlaced Graphic

This figure shows how a noninterlaced GIF appears as it is slowly

retrieved by the Web browser.

If the graphic is large, it might take several minutes for the entire image to appear, which can frustrate the visitors to your Web page.

interlaced graphic

a rough image appears first

image starts to show more detail

final image is crisp and detailed

Interlaced Graphic

This figure shows the effect of interlacing, which is when the graphic starts out as a blurry representation of the final image, then gradually comes into

focus-unlike the noninterlaced graphic, which is always a sharp image as it’s being retrieved, although an incomplete one.

transparent gif
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
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 gif19

fellow1.gif

fellow2.gif

fellow3.gif

  • What do you need to make an animated GIF?
  • A series of pictures (GIFs ) that make up the frames of the animation
  • A program that will put the GIFs together and display them in the order you specify.
Animated GIF
  • http://www.wigglebits.com/animation.html
animated gif programs
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
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
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
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
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
Examples
  • Las Campanas http://www.lascampanas.com
  • New Mexico Internet Professionals Association http://www.nmipa.org
web development
Web Development
  • HTML Coding
  • Using Web Development Tool such Macromedia Dreamweaver
  • Accessibility
    • Using a validator for web site quality
    • Web standards
  • File Management
accessibility
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/abdesign.shtml)
tools for accessibility
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 ConsortiumResources 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
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
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
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
slide35

An image file

A hyperlink to another page

slide36

Directory (Folder)

Home directory

Mail

Public-html

images

projects

ISC325

resume

myweb.htm

Your homepage

Image folder

represents a folder (directory)

linking folders
Linking folders
  • Linking inside a folder
    • “foldername/filename”
  • Linking outside a folder
    • “../myweb.htm”
    • “../../index.html”
  • Linking files in same folder
    • “filename”
next time
Next time
  • Topic
    • Evaluation & Maintenance
ad