Graphic Design - PowerPoint PPT Presentation

Graphic design l.jpg
Download
1 / 38

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

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

Download Presentation

Graphic Design

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 l.jpg

Graphic Design

ISC325

October 19, 2005


Today l.jpg

Today

  • Review

  • Web Graphic

    • F & F Ch. 4, HTML Tutorial 3

  • Web Accessibility

  • Other technical issues


Review l.jpg

Review

  • Web Design with Tables and Forms

  • Writing for the Web

  • Color Harmony


Web graphics l.jpg

Web Graphics

  • Color Displays

  • Screen resolution

  • Graphics and network bandwidth

  • Graphic File Formats


Slide5 l.jpg

Color displays

Pixels and color depth

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


Slide6 l.jpg

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


Slide7 l.jpg

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


Slide8 l.jpg

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


Slide10 l.jpg

Color depth and graphics files

True-color: Red, Green, and Blue

256-color palette

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


Screen resolution l.jpg

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 l.jpg

Graphic File Formats


Interlaced and noninterlaced gifs l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Examples

  • Las Campanas http://www.lascampanas.com

  • New Mexico Internet Professionals Association http://www.nmipa.org


Web development technical aspects l.jpg

Web Development: Technical aspects


Web development l.jpg

Web Development

  • HTML Coding

  • Using Web Development Tool such Macromedia Dreamweaver

  • Accessibility

    • Using a validator for web site quality

    • Web standards

  • File Management


Accessibility l.jpg

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 l.jpg

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 StandardsRecommended 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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

An image file

A hyperlink to another page


Slide36 l.jpg

Directory (Folder)

Home directory

Mail

Public-html

images

projects

ISC325

resume

myweb.htm

Your homepage

Image folder

represents a folder (directory)


Linking folders l.jpg

Linking folders

  • Linking inside a folder

    • “foldername/filename”

  • Linking outside a folder

    • “../myweb.htm”

    • “../../index.html”

  • Linking files in same folder

    • “filename”


Next time l.jpg

Next time

  • Topic

    • Evaluation & Maintenance


  • Login