Workshop Five: Graphics and Visual Composition
Goals: To think about how graphics can contribute to the design and function of your site.
To familiarize you with one of
the premier tools for creating graphics for the Web.
Rationale: Adobe Photoshop is available on
Polaris--a shame if you don't at least get a taste of its capabilities. With
Photoshop, you can create very high quality image files to enhance your
site.
Beyond the technical issues of actually creating and importing such
images, there is the question of how to integrate them effectively; in Part One
we will consider that question.
Part One:
Below is the home page for a popular search
engine, Lycos (http://www.lycos.com/)
Just by looking at the page, can you tell which
of the page elements were generated in HTML and which were generated by graphic
editors? (If you can't, open this page in Composer or VisualPage to see what's
going on behind the scenes.)
Tools Chat Clubs Boards Email IM HomePages Guides Games Kids Music Travel more...
Find FTP Stocks News MP3 Yellow Pages People Maps Shop Gifts Auctions Banking Books
|
| |
Customize this page
Sign up | Log In to My Lycos
| |
|
 |
Arts & Entertainment
Music, Celebrities, Movies...
Autos
Parts, Repair, Buying...
Business & Careers
Jobs, Investing, Real Estate... Computers & Internet
Software, Internet, Hardware...
Games
Card, Computer, Arcade...
Health
Diseases, Women, Medicine...
Home & Family
Kids, Recipes, Gardens...
News
Newspapers, Weather, Breaking...
| |
Recreation
Food, Outdoors, Humor...
Reference
Education, Maps, Databases...
Regional
US, Europe, Asia...
Science & Technology
Biology, Astronomy, Earth...
Shopping
Valentines, Flowers, Electronics...
Society & Culture
Relationships, People, Women...
Sports
Football, College, Basketball...
Travel
Lodging, Destinations, Air Travel...
|
| Horoscopes Edit |
|
|
Libra
Family dynamics shape your movement through the world, and sometimes it's a good idea to go back to the source. It is never too late to mend fences with people you love... | | |
|
| Get Lycos in: |
|
| Europe: | Belgium, Denmark, France, Germany, Italy, Netherlands, Norway, Spain,
Sweden, Switzerland, UK |
| Asia Pacific: | Japan, Korea, Malaysia, Singapore |
| Americas: | Estados Unidos, Argentina, Brazil, Chile, Colombia, Mexico, Peru, Venezuela |
About Us - Advertise - Feedback - Help - Jobs - Privacy Vow
Add Your Site to Lycos - Affiliate Program - Free Lycos Software - Lycos Search for Missing Children
Copyright © 2000 Lycos, Inc. All Rights Reserved.
Lycos ® is a registered trademark of Carnegie Mellon University.
Our Privacy Vow - Terms and Conditions - Standard Advertising Terms and Conditions
Like most commercial Web pages in use right now,
the Lycos page minimizes the size of the graphics files to keep loading times
short and people at the site. Your research Web site is under no such commercial
compulsions, but it makes sense to keep graphic files small for all kinds of
reasons--including the fact that your server account is probably short on
space.
As the Web becomes more and more graphic
intensive, we feel impelled to make our pages more visually rich. Yet as
students of rhetoric, we resist doing things simply because we can; we select
tools with purpose and audience always firmly in mind.
So here's the question: why would you want to use
graphics at all? Well, like the Lycos site, there are certain prototypical
"informational elements" that simply become more useful, interesting,
and persuasive as graphics.
Photographs: a picture is worth... and
obviously, they're impossible in HTML.
Logos and headers: you just can't make a
distinctive and unique header or logo with "H1, H2" and so on.
Icons and navigation features:
ditto
Text: again, many of the fonts you might
want to use in a title won't work in HTML.
Now, assuming you do want to add graphical
elements to your page, the questions are: how many, what kind, and where?
Depending on the genre you're working in (technical, instructional,
institutional, experimental, academic, commercial), the answers will vary. But I
think there are two central questions you MUST ask yourself no matter what genre
you're working in:
1. Does the graphic help the user understand
something? (It could be content: "what is this?"; it could be
function: "where am I?", "how do I...?") If you can't answer
this question in the affirmative, it surely means the graphic is gratuitous.
2. Does the graphic work thematically
(does it contribute to the metaphor, does it enhance the mood or
"feel" of the site). Again, if it does not, why are you using it?
Exercise: Two research sites by graduate
students in English
Take a look at this
student site from the University of Minnesota. Pay special attention to the
graphics and their function within the site. (Note: the pages load slowly but
please be patient; try to look at most of them.)
After you've examined the above site, take a look
at this one from students at the
Georgia Institute of Technology. Again, pay special attention to graphics'
function within the site. (Note: these pages promote a cd-rom version of the
research topic, which you won't actually be able to view.)
After about 10 or 15 minutes we'll discuss them.
Part Two: If you've ever used a basic
Paint program (usually found in Accessories in Windows) you've got a taste of
what Photoshop can do. Paint allows you to create or place images on a
"canvas." You can makes shapes, fill them with colours, add text,
draw, and so on. But you are limited to one "layer," i.e., everything
you put on the canvas gets covered over by what you put on top of it. With
Photoshop, however, you can create multiple layers, each of which you can
control individually. All of the elements on the layers can also be controlled
individually. Eventually you'll "flatten" these layers into just
one, but during the process of design you have incredible control. Add to the
layering feature a myriad of artistic effects and you have far more creative
capacity than you'll know what to do with.
Here's an example of what you can do (seriously!)
with Photoshop, drawn from a site designed by one of our text authors:
Probably Lynch used at least three or four layers
to achieve these effects, and probably a lot more. Notice how the red line
runs under the picture of the heart and over the thoracic x-rays in the dark
background. Each of these elements (and probably the text too) was created on a
separate layer, then fused into one. It would be very difficult to achieve such
superimpositions in a non-paint program.
Why you might want to use Photoshop: in your Web
sites, many of you want to import graphics (either uncopyrighted clip art files or photos of your own) in order to modify
for your own purposes or to annotate them. With
Photoshop, you can import those graphics, then place text or other features on
top of them. This capability would be especially handy if you want to create hotspots
of specific items on the graphic to link to explanatory notes elsewhere in you site. (Run
your cursor over the left ventricle to see what I mean.)
Of course, you can also use Photoshop to design
your own original graphics, especially standard Web page items like navigation
bars, titles, logos, and so on. You might recognize the graphic below from the
online version of the Web Style Guide; it goes at the top of every page. The
forward and backward button are linked to the preceding and next page in the
topic series, while clicking the text sends you back to the home page. It's an
easy and effective way to create a consistent look and clear navigational
structure.
Finally, you can create graphic elements and
logos to extend a visual metaphor or theme across the site:
Part Two: Open Photoshop. (Type "finearts"
in Run in the Start menu). Under "File" click "New." You
will be presented with some options for the name of the file, the image size,
and the background. Just take the defaults, but make sure the Background is set
to Transparent.
Now you have a blank canvas on which you can
place another image or paint your own.
The tutorial
we're going to do will take you through the basic things you need to know to
use Photoshop successfully. Beyond that, though, you'll have to play around with
it to unleash some of its more esoteric functions.
