Introduction: Image Design for the Web
Assignment: (Do before Class):
Web Graphics , pp. 8-14, 20-44;
on the screen ; Html
Assignment for Friday: Create a webpage with at
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
1. Practice adding e-mail links on your webpages. Remember the code is mailto:e-mail address for example: mailto:firstname.lastname@example.org
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
3. Practice creating vector-based shapes and editing
and creating new images.
4. Practice creating buttons using the Effects menu
5. Try to add styles to some of the vector-based
you have created.
You can now buy copies of the 3 assigned books
from Barnes and Noble in Boulder at 30th and
- 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
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
- 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
- If you try to save an image using "save as",
Fireworks will save the image as a "png"
- 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
- 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
3. Examples of Feathered, anti-aliased,
aliased images, and transparent gifs.
- Examples of four versions of the
- 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
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
- 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
- Image Buttons Example
- See Buttons Example Page
- See Making
Buttons with Spot IT
- See Jessica
Fishkin's Ski Buttons
7. Using Fireworks
- Study diagram of Fireworks Toolbox and
- 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
- 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
- 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
- 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
10. See Lynch on Graphic image formats:.
- Examples of variation on Beattie's png
- Fixing Broken Images.
11. See Lynch on
12. See Lynch on
13. Creating vector-based shapes and adding styles to shapes
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:email@example.com
18. Creating Buttons with Fireworks. See
examples of buttons I made with
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.