Web Publishing Graphics I

Week 5 - Presentation 1

Veronica Noone

Overview

Different Types of graphics Adobe’s “Save for Web” feature Compression Options Transparency Our Graphic Goal Examples ImageExample demo

What’s Different?

The graphics on these pages have different purposes can you describe how they are being used?http://www.moma.orghttp://www.rollexband.com

Online Graphic Types

Content GraphicsRepresent the data or IS the dataGraphics, illustrations, maps, etc

Eye CandyPurely for embellishment

Navigational GraphicsButtons, icons, etc

Before we put them online…

There are a few things we need to know about exporting graphics for the web.

“Save for Web…” Feature

Web Image Formats

JPEG Better compression for?

GIF Better compression for?

PNG What is this?

We’ll go over more in a bit when we explore some settings.

Matte Color &Transparency

What’s the difference with the following graphics?

Let’s take a look in Dreamweaver…

Our Goal

Use graphics to enhance the visual experience of our web pages without compromising the content, speed and accessibility of our pages.

How do we do this?

Avoid Gratuitous Graphics

Graphics should have a purpose Avoid Navigational Images

WHY?

http://www.alser.co.uk/ http://www.co.yakima.wa.us/

Reduce, Reuse, Recycle

It’s not just for mother earth!

Browsers Cache Images should be the size they are to

be displayedDon’t change the width and height in

HTML

Background Images

Backgrounds should be used to enhance the design not be the focus of attention.

CSS Background-image is more then just for Backgrounds!

Tiling - Full screen – div backgrounds

Background Image Examples http://worldwidewebdesign.com/style/bkgnds.html http://www.csszengarden.com/?cssfile=081/081.css http://www.csszengarden.com/?cssfile=063/063.css http://www.csszengarden.com/?cssfile=040/040.css http://www.csszengarden.com/?cssfile=041/041.css http://www.csszengarden.com/?cssfile=069/069.css http://www.csszengarden.com/?cssfile=066/066.css http://www22.verizon.com/ http://espn.go.com/

Keep in mind…

It’s all about pixels! File naming for sanity NO SPINNING GLOBES Use CSS elements along with

optimized graphics

Let’s take a look…

Download the ImageExample Zipped Site from the calendar

Save it to the desktop Create a local site to explore for the

demonstration