|  Scanning
Images into your Website
Assignment for Friday (due today): 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. (See
example)
(20 points)
Reading:
Web Graphics , pp. 51-64;
Dreamweaver MX, 73-78
Assignment: (Do after Class)
1. Go to Basic
Elements of a Webpage for Digital Design. Look at the
list of basic elements of a webpage. How many of these things
do you already automatically include in each of your webpages?
Print out of copy of this list and use it to help you create your
next student website: The Image Website.
2. Go to to American
News Sites on the Web site and look at some of the major
newspapers websites. How do they use images to drawthe reader
in and to tell a larger story? How do these sites useimages
to help create a focal point for that webpage?
3. Start thinking about what kinds of images you want
to use in your next website? What webgenre will you
design your Image website in?
4. Do you have pictures that you want to scan into the
web? Are there pictures that you want to take with
your camera to use in your next Image website? Would you
like to borrow the inexpensive Digital Camera that I have available
to loan to my Design students?
1. Basic Webpages that we will create in this class:
-
Student Design Portfolio Websites (due Jan. 30)
-
Webgenre Websites: Creating Genre Sites
(due March 3)
-
Image Websites: Using Images to Tell Stories on
the Web (due March 24)
-
Flash websites (due April 21)
-
Model Design Websites: Demonstrating Web
Design Fundamentals (due May 8th)
2. Basic
Elements of a Webpage for Digital Design
3. Model Websites for Web Genre sites
4. Creating Flash Buttons using Dreamweaver
- See Examples
of Flash Buttons
- Go to "Insert" on the Menu and select "Interactive
Images" and then select "Flash Buttons."
- Remember, that you need to copy these flash
buttons individually onto your website.
5. Image File Formats for the Web:
- GIF Format: The gif format is the the everyday
file format for all types of simple colored graphics and
line art. The gif format saves colors in an 8-bit
format. Use gifs carefully for animated gifs and
simple web graphics.
- JPG Format: Use jpegs for all 24-bit full-color
photographic images, as well as for more complicated graphics
that contain color gradients, shadows, and feathering.
- PNG Format: If web browsers support it, use
png as a substitute for gif. Because png does not compress your 24-bit images as well as jpg, do not use png for photos.
7. Dithering is caused when a web browser encounters
a color that it doesn't support, such as when you try to turn
a 24-bit photographic image into an 8-bit, 256-color image.
Dithered images often appear grainy and pixelated. See Lynch's Image
File Formats.
8. To Avoid Dithering,
use 216 web-safe colors in the
web color palette when you create
gifs and other simple images for the web. You can save
a gif file using
"Web Snap Adaptive," which will force the colors of
your image to match 256 colors without dithering. Dithering won't
occur in image files that use the 24-bit jpg format. But
if you try to transform a jpg file format image into a gif, dithering
can occur if you aren't careful.
9. Scanning Images for the Web
- See Example
of Scanned Images
- Scan at 150 dpi (dots per inch) when you
scan images into your computer. Remember,
web browsers will only portray images at 72 dpi,
so when you save the image for the web it will
reduce it from 150 dpi to 72 dpi.
However, if you want to clean up the image, scan the image at anywhere from 100 to 150 dpi. Remember to prepare the image for the web you
must first save the image at 72 dpi.
- Always save a scanned image as a "Tiff" file
format. Tiff files were invented for scanning. If you are scanning directly into Photoshop, you can save the file as a Photoshop (psd) file.
- If you have a choice of how many colors to scan in the image, don't bother scanning for more than "thousands" of colors. If the image is not a photo and has lots of broad, flat colors, you can get away with scanning for only 256 colors.
- After you have saved a scanned image on your local computer, make sure you put it in an original images folder so that you will always have access to the original scanned image. After you clean up and prepare the image, you will need to save it as a "gif" or
"jpeg" file. You must save the image for the web so that it will be "optimized" for the web.
10. Optimizing Images for the web in Fireworks
-
Go to File in Fireworks MX and select "Export Preview"
-
A Box will come up allowing you to select
either a jpeg or gif format for your image file.
Notice that you can adjust the quality of the
image from 1 to 100 percent. Remember,
the higher the quality, the bigger the image.
-
Be careful adjusting some of these image settings in Fireworks, some of these features are a little
technical. The easiest thing to do is to select
one
of the four versions of the image and save it.
-
When you adjust the image size, either resizing up or down, make sure that the image is set for 72 dpi,
constrain proportions is checked, and "resample
image" is set for "bicubic."
-
You will often find that your image file appears to be really large because it was scanned in at a larger size, let's 8 inches by 6 inches. You should always go to Image and select "image size" in order to check
to see what the actual size of the image is.
-
Never resize an image in "Indexed Color," but
in "RGB Color." To make sure the image is set for "RGB
Color" go to Image and then select "Mode" and make surethat "RGB Color" is selected.
-
Examples of edited images using Sara Beattie's Image
11. Scanning Images from Books or Magazines into the
web.
-
Scanning images from books or magazines can create unusual color shifts in the image because printing inks use "CMYK (Cyan, Magenta, Yellow, and Black )
colors."This problem creates unwanted dot patterns and moires, giving the image a pixelated look.
-
Before resizing your images, try to get rid of this
dot pattern or "moires."
-
In Fireworks go to "Filters" and choose "Blur" and then select "Gaussian
Blur." Set the blur setting to "1.2 pixels". This will cause the little dots to blur, which removes the "moires."
-
After adjusting the "Gaussian Blur," go to "Filters"
and select "Sharpen" to use the "sharpen filter" to
increase the contrast in the image, which corrects
for the little blur you added to get rid of the dot
patterns.
-
Now resize your image and save for the web.
- Remember to always scan large and to reduce
down rather than scanning small and enlarging
- Scan the entire image and then crop the
specific images you want to use.
12. Using Fireworks to Clean-up a Picture for the Web
-
In Fireworks, go to "Filters" and select "Adjust
Color." If you want Fireworks to automatically optimize
your image, then select "auto levels."
-
If you want to adjust the "Color Balance,"
"Brightness/Contrast," "Hue/Saturation," then
select and adjust these settings.
-
Remember, if you don't like a change you've made in Fireworks, you can always go to "Edit" and select "Undo," which will undo the action you just
did.
-
I am constantly using "undo" to fix bad adjustments I have made when cleaning up a picture.
13.Using Sharpening Effects and unSharpen Mask
- The Sharpen effect in the "Filters" menu
works
by changing some gray pixels in the image
to black or white.
- Be careful with sharpen. Although it may seem
that more detail is revealed, in fact some of
the detail is lost.
- The Unsharpen Mask adjusts the contrasts
levels of adjoining pixels where strong color
changes occur, giving the illusion of a
sharper, in-focus image.
- The three sliders in the Unsharpen Mask
adjust the degree of unsharpening
- The Sharpen Amount slider has values that
range from 1 to 500. The higher the amount,
the more drastic the change. Normally
you set this to 100 percent
- The Pixel Radius slider determines how far
out from the edge--1 to 500 pixels--the
filter will go. The higher the radius, the more
noticeable the change. Set his between
.06 and 2.0. I usually use about a 1.5 radius.
Experiment with this. How small the pixel
radius depends on the nature of the image.
- The Threshold slider determines which pixels
are affected by the contrast change. For
most images a value between 7 and 12 is about right. Some people use a very low threshold,
even a 0 threshold.
I use a 9 threshold.
14. Buying an Inexpensive Scanner
-
Images are portrayed on the web in only 72 dpi
(dots per inch) format.
-
Pictures in magazines and books use 300 dpi
format.
-
Gif files only can use an 8-bit color format. Jpeg
files can use up to a 24-bit color format.
-
A 48 bit Color Scanner will scan an image using
2 to the 48th power number of colors. So a
24 bit color scanner will scan at 2 to the 24th power.
-
If you intend to save an image in the GIF format, make sure you select indexed- or web-safe colors because the Gif format will only use 216 web-safe colors.
-
When a Color Scanner says it will scan images up to 2400 x 1200 dpi it scans images at millions of dots per inch. When a Color Scanner says it will scan at 600 x 600 dpi that is still scanning at 360,000 dots per inch, which is still very impressive.
-
If you want a scanner to scan images for the web and for the print media, you really don't need a scanner that scans more than 600 x 600 dpi.
-
So don't feel you have the buy the 48 bit 5200 x
1200 dpi scanner when a 24 bit or 32 bit 600 x 600 scanner is
good enough for most web and print medium scanning.
15. Creating Text Paths in Fireworks
- See Examples
of Text Paths in Fireworks
- Scanned image with text on paths
- See Example of Advertisement using
flowing text
- See Roses
advertisement using the low source-
high source trick.
- See low
source roses version.
- In order to create text that flows around
a path, you must first create a path.
- Create a path using the Vector Ellipse Tool.
- Now create a line of text just above this path.
- First select the path and then select the
text, so that both are selected.
- Now go to the "Text" menu and select
"attach to path."
- You can adjust how the text flows around
the path by going to the "Text" menu and
selecting "allign."
- You can also make small changes in how the
text follows the path by selecting the text
and then using the space bar to move the
text just a little bit.
|
