Transcript Designing the User Interface - Northern Illinois University

Graphics
Part III
1
copyright Penny McIntire, 2009
Acquiring Images
• Stock photos and clip art: some for
free, some for a one-time license for a
single image, some by subscription to
an entire database of photos.
– iStockPhoto.com – cheap images, and you
can contribute your own, too. Can search
on terms like “eagle” or “happy” or
“green.” Over 5 million images.
• Never use an image “borrowed” from
other web sites without permission.
2
copyright Penny McIntire, 2009
Acquiring Images
• Google’s advanced image search page,
http://images.google.com/advanced_im
age_search, can filter for images that
are tagged for reuse, under “Usage
Rights.” See
http://www.google.com/support/webse
arch/bin/answer.py?answer=29508 for
more info.
3
copyright Penny McIntire, 2009
Acquiring Images
• Screen capture utilities: some free,
some fairly cheap.
– Allows easy editing and cropping of the
image.
– I use SnagIt, http://www.techsmith.com/
• Digitizing: capturing an image from the
real world by scanning an image or
taking a photo with a digital camera.
4
copyright Penny McIntire, 2009
Scanners
• Flatbed scanners are cheap these days, often
below $100.
• However, really high quality scanners are
more expensive.
• Some flatbed scanners include negative
scanners.
– I have not been impressed with their quality.
– Dedicated transparency (i.e., negative) scanners
offer the highest quality, but they are expensive
and overkill if the images are to be used only on
the web.
5
copyright Penny McIntire, 2009
Scanners
• What indicates a high quality scanner?
• Not resolution – they all have resolution high
enough to hang your computer.
• Instead, it’s the luminosity /Dmax rating: how
well it can pick out detail in areas of shadow.
– Our eyes are much better at picking out that detail
than either scanners or cameras.
– The luminosity rating is usually only available
under technical specs on the product web page.
6
copyright Penny McIntire, 2009
Scanners
– Luminosity ratings:
• 3.0 luminosity rating – low-end scanners, with
less accurate shadow detail.
• 3.3-3.4 luminosity rating – fairly good shadow
detail
• 3.6 luminosity rating – high-end, professional
quality scanners, with very good shadow detail.
7
copyright Penny McIntire, 2009
Scanners
• Scanner resolution settings
– Option 1: Scan at the highest possible
settings for resolution and color, and then
downsize it in an image editor.
• Keep the original large file in case you need a
different size in the future.
– Option 2: If the image is to be used only
for the web, scan at a setting that gives
you the exact number of pixels you need
for the web image.
8
copyright Penny McIntire, 2009
Scanners
– How to calculate? Let’s try an example with a
target size of 200 x 300 pixels.
Target
number of
pixels
Original
image,
in
inches
Scanning
resolution
DPI
width
200
÷
4
=
50
height
300
÷
6
=
50
9
copyright Penny McIntire, 2009
Scanners
– Let’s try the same size original, but this time with a
target size of 600 x 900 pixels…
Target
number of
pixels
Original
image,
in
inches
Scanning
resolution
DPI
width
600
÷
4
=
150
height
900
÷
6
=
150
10
copyright Penny McIntire, 2009
Scanners
– Again, the same size original, but this time with a
target size of 400 x 500 pixels…
Target
number of
pixels
Original
Oops.
This
image,
won’t work.
in
inches
Scanning
resolution
DPI
width
400
÷
4
=
100
height
500
÷
6
=
83
11
copyright Penny McIntire, 2009
Scanners
– Problem: the target size has a different aspect
ratio than the original.
– To fix, crop off an inch from the original before the
scan, so it’s the same aspect ratio as the target:
Target
number of
pixels
Original
image,
in
inches
Scanning
resolution
DPI
width
400
÷
4
=
height
500
÷
6 5
=
100
83 100
12
copyright Penny McIntire, 2009
Scanners
– Alternately: scan the unchanged original at the
higher resolution (100 DPI), but after the scan,
crop off the extra 100 pixels on the width.
Target
Crop 100
number of
pixels after
pixels
the scan.
Original
image,
in
inches
Scanning
resolution
Use
the DPI
higher
DPI.
width
400
÷
4
=
height
600 500 ÷
6
=
100
83 100
13
copyright Penny McIntire, 2009
Scanners
– As discussed earlier, the one thing we should not
do is simply squash the 600 pixel width down to
500 pixels – that would distort the image.
– Don’t squash or stretch the aspect ration so much
as a single pixel, either in your image editor or
(even worse!) in the browser, or you’ll loose points
in this class.
14
copyright Penny McIntire, 2009
Digital Cameras
• Skip to end of cameras… slide 22
• Types of digital cameras:
– PHD (“Push Here Dummy”) cameras: pocket
cameras.
• Fully automatic controls for exposure and focus, often
with with some program modes as well: portraiture,
landscape, night scenes, sports, etc.
• Even cheap digital cameras can do an adequate job for
web photography, because the web is such a low
resolution medium.
15
copyright Penny McIntire, 2009
Digital Cameras
– SLR (single lens reflex) cameras: switchable
lenses.
• More powerful, more versatile, more expensive.
• Can buy different lenses for different purposes.
• Variations on fully automatic controls, fully manual
controls, program modes – make sure the camera you
buy offers what you need.
16
copyright Penny McIntire, 2009
Digital Cameras
• Brief course in photography first…
• Focus: making sure the lens is focused for the
correct distance of the photographic subject.
– Depth of field: area of good focus varies with other
camera settings.
– Manual focus: the photographer adjusts the focus
while looking through the viewfinder.
– Automatic focus: the camera sets the focus, based
upon the area of focus you have chosen in the
viewfinder.
17
copyright Penny McIntire, 2009
Digital Cameras
• Exposure: the amount of light allowed to fall
on the image sensor. Controlled by the
interaction of aperture and shutter speed:
– Aperture: the opening that allows the light to
enter, which can be adjusted to larger or smaller.
• A larger aperture gives more light and a smaller depth of
field (small objects, portraits, with backgrounds blurry).
• A smaller aperture gives less light and a longer depth of
field (landscape photography).
18
copyright Penny McIntire, 2009
Digital Cameras
– Shutter speed: how long the shutter stays open.
• A longer exposure (slower shutter speed) gives more light
but blurs any movement in the subject (a steamy-looking
waterfall or motion trail on a race car).
• A shorter exposure provides less light but stops motion
blur (sports photography).
– Aperture priority setting: you set the aperture size
to get the effect you want, the camera decides the
matching shutter speed.
– Shutter priority setting: you set the shutter speed
to get the effect you want, the camera decides the
19
matching aperture setting.
copyright Penny McIntire, 2009
Digital Cameras
• Desired features in a digital camera:
– The more megapixels, the better.
– Zoom: built into the camera for a PHD, built into
the lens for an SLR.
• Optical zoom – built into the lens, rather than digital
zoom, which is just software.
– The higher the allowed optical zoom number, the better.
– Digital zoom is of little value; use an image editor instead.
– A high zoom setting shortens the depth of field.
• Wide angle zoom – more of the image fits into the saved
picture.
– The smaller the number allowed, the better.
– A low wide-angle setting appears to shorten distances.
20
copyright Penny McIntire, 2009
Digital Cameras
– Built-in or externally-mounted flash. The former is
more convenient, but the latter gives more
powerful and controllable light.
– Size of the LCD viewer – larger is better, but
shortens battery life.
– Viewfinder/eyepiece: Gives better preview for
those of us with less than perfect vision, but no
longer available on some cameras.
– Weight of the camera and lens: the lighter the
better, but a tradeoff with features.
• SLR cameras with large zoom lenses are usually heavy.
– All kinds of other bells and whistles on high-end
cameras, many of which I would never figure out 21
how to use.
copyright Penny McIntire, 2009
Creating and Editing Images
• Capture images with a camera or
scanner, then use image editing
software to correct flaws or enhance
the image with artistic effects (make a
gray sky blue).
• Use image editing software to create an
image from scratch – even people with
no drawing skills are capable of
producing professional effects.
22
copyright Penny McIntire, 2009
Creating and Editing Images
• Adobe is the giant of the image-editing
industry:
– Adobe Photoshop – most expensive, most
powerful, hardest to master, highly
pluggable (third party filters can be
purchased and added on). PSD file format.
– Adobe (formerly Macromedia) Fireworks –
cheaper, quite powerful, easier to master,
uses the same plug-ins as Photoshop. PNG
file format.
– Free 30-day downloads at adobe.com.
23
copyright Penny McIntire, 2009
Creating and Editing Images
• Layered images
– Virtually all image editors use layers, one
layer per element (shape, text element, or
embedded bitmap), so that we can
manipulate each shape independently.
– Show and hide elements before exporting:
• One file with three layers: “up” button shape,
“down” button shape, one text label.
• Hide “down” button when exporting “up”
image, and vice versa.
24
copyright Penny McIntire, 2009
Creating and Editing Images
25
copyright Penny McIntire, 2009
Creating and Editing Images
– By including both the “up” and “down”
images in the same file:
• Assuring alignment and consistency.
• Fewer files to manage.
• Easier to update.
26
copyright Penny McIntire, 2009
Creating and Editing Images
• Exporting images
– When exported to a JPG, GIF, or PNG, we
are converting all elements in the original
file to bitmapped formats, termed
flattening the file.
– Use the Optimize panel, then either
“export” or “save as,” depending upon the
program and the export format you need.
– The flattened version can no longer be
manipulated like the original – layers are
lost, and bitmaps don’t scale well.
27
copyright Penny McIntire, 2009
Creating and Editing Images
– That’s why we are careful to maintain the
original files, for later editing.
– Whatever you do, don’t store your original
master files on oldMP, or you will quickly
run out of server space.
• Instead, maintain the originals on your own
computer or on your own network drive.
• Note: You won’t get an error message if you
run out of oldMP space – the images just won’t
copy over, or they “copy” but with a file size of
zero.
28
copyright Penny McIntire, 2009
Dingbat /Symbol Typefaces
• Typefaces that include symbols instead
of letters and numbers.
• Should not use in traditional HTML
content, because the visitor might not
have that particular typeface.
• Great to use in images, however.
• For tiny elements, like a tiny circle,
dingbats will be less pixelated than the
version drawn with a shape tool…
29
copyright Penny McIntire, 2009
Dingbat /Symbol Typefaces
30
copyright Penny McIntire, 2009
Dingbat /Symbol Typefaces
• Can use as bullets, horizontal rules,
patterns, or embellishments:
t Item 1 tttttttttttttttt
t Item 2
t Item 3
tttttttttttttttt
tttttttttttttttt
tttttttttttttttt
31
copyright Penny McIntire, 2009
Dingbat /Symbol Typefaces
• Tweaked dingbats dotting the “i”s
below:
32
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• Effects and filters can be great fun, but
be careful because they are often
overused.
• Some possibilities…
33
copyright Penny McIntire, 2009
outline, no fill
embossed
outline, solid fill
drop shadow
twist and fade
linear gradient fill
inset bevel
Eye Candy’s chrome
texture fill
Eye Candy’s fur
glow
Effects, Filters,
Textures, and Patterns
• Don’t go overboard with effects; the
trend on the web these days is lighter,
more subtle, and more graceful:
– For instance, instead of heavy, 10-pixel
bevels, many sites are using 2-3 pixel
bevels.
old school
new school
35
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• Bevel filter – used on buttons that are
links but avoid elsewhere; only if it is
clear the element is not a link.
– Bevel a photo, for instance, and visitors
might think it is a clickable image.
• Shadow filter – also overused, but nice
nonetheless.
– Shadows look best on monitors that
support 24-bit color – lower-res monitors
will dither the color.
36
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• What’s wrong with this picture?
37
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• All “light sources” from the same
direction.
38
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• When using lighting effects (like bevels
and shadows), make sure the light
source comes from the same angle for
every item on the page.
– Top left is typical for classical painting, and
the default in most image editing
programs.
– Don’t make a single copy of an image, add
lighting effects, then copy and rotate it.
– Instead, put lighting effects on after the
copy and rotate.
39
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• Posterizing:
– When an image, gradient, or drop shadow
exhibits banding instead of smooth color
transitions.
– Typically a bad thing.
– But can be done on purpose, for an artistic
effect, as in the Charles Schwab ads on TV,
or…
40
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
– Done deliberately by lowering the color
depth (only eight colors in the previous
image).
– Key to success: do it so strongly that it’s
obviously deliberate.
• Subtle posterization just looks like a low-quality
image.
42
copyright Penny McIntire, 2009
Effects, Filters,
Textures, and Patterns
• Edges for photos, some manual, some
plug ins:
feathering
rounded outline
torn paper
43
copyright Penny McIntire, 2009
Logo Design
• Also called a trademark or just a mark.
• Must be:
– Simple and distinctive enough for strong,
identifiable visual impact. (Nike “swoosh”)
– Timeless – too expensive to redesign often.
– Compact and versatile: color version,
grayscale version.
– Unique – cannot violate any other
organizations trademark design.
44
copyright Penny McIntire, 2009
Logo Design
– Universal and not offensive to some groups
(flip-flop example).
– Descriptive:
• Literally, such as the
peach in Peachpit Press.
• Figuratively, such as the
Before & After logo.
45
copyright Penny McIntire, 2009
Logo Design
– Added bonus if clever, because if the visitors
“get it,” they feel clever themselves, like this
Ravenswood logo (ignore the fact it’s a bad
scan, please):
46
copyright Penny McIntire, 2009
Logo Design
– If you can’t find literal or figurative references
for inspiration, try a purely typographic
manipulation:
47
copyright Penny McIntire, 2009
Logo Design
– Finally, create multiple variations of the logo
– the more the better.
– A logo must be very simple and tightly
constructed and simple to be effective.
• Ask, “What can be removed?”
• Distill to the very essence.
• For instance, the peach on the Peachpit Press logo
doesn’t show shading or shadows or leaves on the
branch…
48
copyright Penny McIntire, 2009
Design Inspiration
• See Jim Krause’s Idea Index: Graphic
Effects and Typographic Treatments.
• And here are some other inspirations…
49
copyright Penny McIntire, 2009
Graphics
• To be continued…
51
copyright Penny McIntire, 2009