Introduction to Image Design for the Web

Introduction: Image Design for the Web

Assignment: (Do before Class):
Web Graphics , pp. 8-14, 20-44;
Images on the screen ; Html and Graphics

Assignment for Friday: Create a webpage with at least
three different button styles you are considering using
for your Webgenre website. Put a workable
link to this page on your portfolio page.(20 points)

Assignment: (Do after Class)

1. Practice adding e-mail links on your webpages. Remember the code is mailto:e-mail address for example: mailto:cclewis@spot.colorado.edu

2. Study the Web-safe Color Chart and Paletteman Online Color Picker. Also see Web Design Color
Scheme Generator. Do you understand why it is important to create web-safe colors, so the colors
you use on your webpage won't dither?

3. Practice creating vector-based shapes and editing
and creating new images.

4. Practice creating buttons using the Effects menu bar.

5. Try to add styles to some of the vector-based shapes
you have created.

1. You can now buy copies of the 3 assigned books
from Barnes and Noble in Boulder at 30th and
Pearl Streets :

Web Page Design, by Brian Austin
Web Graphics, by Mary Lojkine
Dreamweaver MX 2004, by Nick Vandome

Go to the front of the store and ask at the main
counter for the larger order books being held
for "Professor Lewis".

2. Example of Flash buttons on webpage

Flash button html file
Flash button png file
You can always edit your button states
in the png file mode.
Remember to make sure that you have
selected the correct layer of the button you
want to edit-- the text or image layer.
Use Export to save the Flash button
When you create flash buttons like this,
you create 4 separate image files and
one html file. You must put all these
separate files on the web for your button
to work
Always save a basic version of your flash
button as a template for all the rest of the
similar buttons you make.
When you insert this flash button in
Dreamweaver, go to "Insert" and choose
"Image objects" and select "Fireworks html"
Make sure when you insert this flash button
that the image isn't linked to the "C" drive.

2. Examples of Web Genre sites
Pink Floyd and Company website
American Heart Association
Volvo.com
Volvo Flash site
Something Corporate
Shopbop.com
webmonkey.com
Freeskier.com
Lewis Flowers Web genre website

2. Using image effects to create simple borders
for images. ( Use A Photo Tour of Sewall )

Open an image in Fireworks.
See these examples: Flowersb.jpg
and Flowersc.jpg
Make the Canvas size a little bigger
than the image so that you can see
the outside borders on the image.
Select the image and choose "Effects."
Now choose "Outer Bevel." Make sure
your edge is small, such as 1 or 2 pixels.
For most image borders you should use
black as the border color.

3. Saving Images in Fireworks ((See Sewall Photos)

If you try to save an image using "save as",
Fireworks will save the image as a "png"
file.
In order to save the image as a "gif" or
"jpeg" file, you must use"export preview"
and choose what format you want to
save the file in.
Remember, photographs and images
with more than three or 4 colors should
be saved as "jpeg" files. Simple graphics
such as buttons can be saved as
"gif files."
Always try to compromise between the size
of the image file and its quality. A higher
quality file will always be a bigger file.
You can often compromise with images by
creating thumbnails of them and allowing
viewers to click on them to get the full
picture, knowing that it will take a little
while to download.
You can also use two versions of an image:
a "High Source" and a "Low Source". The
"low source" will load up quickly and then
slowly the "high source" image will fill in the
background, often before the viewer really
knows what is going on.
To feather images, you can use the "Select"
menu and then choose "Feather." Remember,
you can always adjust how much feathering
you want.

3. Examples of Feathered, anti-aliased,
aliased images, and transparent gifs.

Examples of four versions of the same images
Example of Transparent gif using a matte that is
the same color as the background of the page
You can use matte to set the background color
for both a gif and a jpg image.
Example of Interlaced gif
Example of Progressive jpg
Example of High source/Low source trick

4. Setting the Export Image options

First choose jpg or gif for the format
Examples of Dithering: dither.htm, dithest.htm
Then select quality, from 0 to 100 %
Now select "progressive" or "interlaced" image
For gif files, select "websnap adaptive"
For gif files, you can select the number of
colors that will be shown in the image.
If you select a small number of colors for a
gif file, be prepared to select dithering,
which reduces the color banding that occurs
when your browser can't match the color
selected.
Setting loss will blur the image and make it
smaller in size. Be careful when using a
high loss value.
For jpeg images, you can select smoothing,
which like loss for gifs, will blur the image
a little bit
When adjusting gif images, always do so
trying to balance quality with image size.
The smaller the image, the lower the quality.
After adjsuting all your settings in fireworks,
you can save those settings and use them
on a series of jpg or gif images. Near the
"Saved Settings" box, select "+" and save
your settings as a file.

5. Using "Filters" to adjust images in Fireworks

Using Adjust Colors options.
Using Sharp and Unsharpen mask
Using Blur and Gaussian Blur
Using the "Others" option. You can
select "convert to alpha" or "find edges."

6.. Creating Buttons using Fireworks

7. Using Fireworks

Study diagram of Fireworks Toolbox and
keyboard shortcuts
You must learn and understand the basic
limits of each individual piece of software.
Just because you can do something with
one piece of software doesn't mean that
it will work the same way on another software.
Larger lesson: Fireworks MX is not Photoshop 7.
You must learn to use both Fireworks MX and
Photoshop 7 separately. They both have
their own logic and layout.
Fireworks uses both vector-based graphics
and bitmapped-based graphics.
When using images in Fireworks, you are using
the bitmapped-based graphic.

2. Menu bars that I keep open when I am using Fireworks: Tools, Stroke, Tool Options, Optimize, Styles, and Layers.

3. You can reduce and increase the size of the menu bar by double-clicking on it. This is a neat trick.

8. Editing Images in Firewworks (See Sewall Photos)

You can cut and copy parts of an image only in
"bitmapped" mode. You select "bitmapped
mode" by selecting the bitmap image to
work on in Fireworks.
After copying the image in bitmapped mode, turn
bitmape mode off and paste that copy into your
larger image.
You can doubleclick on a bitmapped image to turn
bittmapping "on" or "off" for that image.
When you want to add "effects" or work with a
specific bitmapped image, you must first turn
bitmapping on.
Take advantage of paths and layers to add multiple
copies of images to a single, larger image.
By using paths and layers and the pointer, you
can move each image layer around the larger
image on the canvas.
Remember to use your arrow keys to move your
images around the canvas. The arrow keys give
you precise control over movement and placement.

9. Creating High-Source and Low-Source images in Fireworks.

Use the Optimize menu bar to adjust the
image qualities of your image in either jpeg or giff
formats. Using the jpeg format, save one version of
the image at 20 percent quality and the other
version at 80 or 100 percent quality. Use the 20
percent quality version as your low source image
and the 80 to 100 quality version as your high
source version.

10. See Lynch on Graphic image formats:.
Summary-File formats.

11. See Lynch on GIFs

12. See Lynch on JPEG graphics.

13. Creating vector-based shapes and adding styles to shapes

Vector-based shapes
Vector-based shapes with added styles

14. See my example of Single Pixel-Width Image Spacer GIFs and a webpage using the single-width image trick.

15. See Lynda Weimann on 1 ) The Browser-Safe Color Palette by Hue, 2) The Browser-Safe Color Palette by color value See a Web-safe Color Chart. Also see Paletteman Online Color Picker a great webpage color picker. Also see Web Design Color Scheme Generator

16. See Aligning Images in Webpages.

17. Adding a link that sends an e-mail message:

Insert link and type "mailto:cclewis@spot.colorado.edu

18. Creating Buttons with Fireworks. See
examples of buttons I made with Spot

19. When making images links, turn the hypertext border off, to "border = 0", so that you won't see a
black box around your linked image.