💾 Archived View for mirrors.apple2.org.za › archive › apple.cabi.net › Graphics › HITECH1.TXT captured on 2023-01-29 at 04:40:04.
-=-=-=-=-=-=-
----------------------------------------------------------------------
Art Guild Tutorial
"Basic High Tech Effects, Part 1"
by Dave Seah (1/4/91)
Apple II Art & Graphics Forum (keyword:AGR)
----------------------------------------------------------------------
Introduction
When it comes to making slick graphics of neat technical widgets
and ultra-cool splash screens, there are a few rules that I like
to follow. In this small tutorial, I'll present you with a few
simple rules to follow that will help make professional-looking
screens! There are lots of other interesting things you can do
in the area of special effects and color trickery, but we'll save
those for another day. You might not out-do the FTA graphic
artists today, but it's certainly a start!
Hey, I don't understand some of the jargon already!
Not to worry! I've included a handy glossary of terms at the end
of this file. If you have any further questions, hesitate not
to send them to me, AFC DaveS, on America Online. Better yet,
post your questions in the Art Guild! It's socially responsible!
Starting Out: Use a black background!
STEP 1) Make the background black.
Without a doubt, black is one of the best colors you can use as
your background. It's hip, urban, and high tech. It's the
traditional CRT background color, and it makes colors jump right
out at you. In fact, I'd say 90% of all high-tech pictures use
black for their background color.
Why? Black has a few things going for it. As mentioned before,
a black background will make other colors leap right out at you.
A red square on a black background will look more vivid and
saturated than if you had used a white background. Black is also
a very "distant" color. It's the color of infinity and endless
space. Colors have a subjective order: "warm" colors like red
and orange look closer than "cool" colors like blue or purple.
Black is way, way in back. Your objects will not blend into the
background, unless you use a very dark color.
The Straight Line: More important than a lot of things!
STEP 2) Draw Some Solid Shapes out of Straight Lines
High-tech relies a lot on uniformity and consistency. Things
have to be straight and defect-free. This imposes a special
problem on us when drawing on the computer. When using the
Straight Line Tool in your favorite paint program, you may have
noticed that the resulting line is somewhat bumpy. You can see
the "steps" in the line: a byproduct of the discrete nature of
pixels and computer displays.
We will restrict ourselves to using horizontal, vertical, and 45
degree lines for this tutorial. These are the most uniform,
"perfect" lines one can attain on the Apple IIGS, in my humble
opinion. Nothing else looks quite as sharp. The Tutorial
Picture shows a polygon done with only "perfect" lines, and a
couple that weren't.
Using only straight lines, try making some shapes. Fill these
shapes in with solid, bright red. Make sure the corners are
sharp and don't stick out in un-cornerish ways. High-tech
requires sharp corners. You can blunt the corners or round them
if you like, but make sure they look good. Avoid single pixels
jutting out from a corner or side. This looks sloppy, which is
something to avoid in this style of art.
Highlights and Shadows
STEP 3) Highlight and Shadow the Edges
Once you have created your basic shapes, you'll want to make them
look a little more three-dimensional. The accepted way of doing
this is by highlighting the shapes. Basically, one decides that
there is one light source positioned in a corner of the screen.
Then, the light will reflect off those edges that are directly
exposed. The edges that are facing away from the light will be
in shadow. Check out the tutorial picture for examples of a
highlighted cube and polygon.
For basic highlighting, you need three shades of the same color.
We'll assume Light Red, Red, and Dark Red for this example. You
draw the object in Red. Assuming that our imaginary light source
is at the top left of the screen, all the edges facing to the
left and top of the screen will be drawn over with Light Red.
All edges facing the right and bottom of the screen will be drawn
over with Dark red. Try it with a square. Apply this same
formula to all edges.
But what about those pesky diagonal lines? For the case of the
light source in the upper left, diagonal lines that run from the
upperleft to lowerright (ie: \) shouldn't get any shadowing OR
highlighting. You can choose to leave those edges in Red, or
arbitrarily make it light or dark. Just be consistent with all
other such diagonal lines. Remember, high-tech is all about
consistency. Or pretend that your light source is really more
"up" than it is "left" and highlight accordingly. See the
tutorial picture for an example.
You'll run into a dilemma at the corners of objects. For
simplicity, consider a square. The upper right corner could
either be dark or light red. Which to choose? The same problem
exists at the lower left corner. You can go one of two ways.
Method 1:
Leave them Red and don't highlight or shadow them. This
looks OK, but bothers some people.
Method 2:
The light source is really more "up" than"to the left", so
make the upper rightcorner highlit and the lower left
cornershadow.
In all probability, no one will notice which method you use
unless you are making your edges more than a pixel wide.
For extra sparkle, you can perform more highlighting trickery.
Mix two more colors: a Very Light Red and a Very Dark Red.
Apply the Very Light Red to the upper left corners of your
objects, and the Very Dark Red to the lower right corner. If you
don't like the effect of the Very Dark Red (like, the corner
might disapear if the red is too dark), you can choose not to use
it. You'll find, though, that the Very Light Red makes that
upper corner really sparkle. The effect is especially pronounced
if you sparkle several objects. Just remember: ONLY the upper
left corner.
The Inverse Shadow Trick
You may have wondered what would happen if you placed the
imaginary light source at the bottom of the screen. Our everyday
experience makes us expect that the light source (ie: the sun) is
somewhere above us. This expectation is so strong that when we
see the opposite lighting, we see "inverse objects" that "go
into" the screen instead of "sticking out". For example, when
you drew the square with the edge highlighting, you probably
perceived it as having a form "sticking out" of the screen. If
you swap the highlight and shadow colors on the edges, you will
see the square looking more like a tray or depression. Neat,
huh? You can use this effect for making "pushed in buttons" and
slots and all kinds of things.
If you didn't want this effect to happen, you should provide some
kind of context in the picture to show where the light is coming
from. In other words, show the lightbulb (making it look as cool
as possible). If you don't show a light source, people will
automatically, if not consciously, assume that the light is
coming from above. Showing lighting like this is best left to a
whole new tutorial, but feel free to experiment.
Concluding Remarks
Hopefully, you have an idea of how basic highlighting works in
the realm of high-tech pictures. I have uploaded a picture to
the Art Guild called "MEK Arcade Game Screen" that demonstrates
the techniques discussed in this tutorial. In the next part of this
series, I will discuss aspects of screen design and color usage
that you may adopt or disregard altogether. After this point,
it is up to you, the artist, to make up your own rules and
techniques. Another excellent source for ideas are the numerous
programs from various programming groups such as the FTA, the
DYA, and others. Observe and learn!
The information presented in this tutorial is meant to be taken
as a guideline. In summary:
1) Use a Black Background
2) Keep Lines Straight and Clean
3) Keep Highlighting and Shadowing Consistant
That's all till next time!
----------------------------------------------------------------------
Dave's Glossary
Contrast
My Definition: The difference in perceived color and brightness.
Bright Red and Green right next to each other would be high
contrast. Black and White are high contrast. Deep Purple and
Dark Blue, on the other hand, are not.
CRT
Cathode Ray Tube...the engineering term for "monitor"When writing
about high-tech effects, it's hard to avoid using obscure
acronyms.
Discrete
"Individually distinct". The pixels on the screen do not run
together, but are separate and placed on a very rigidly ordered
grid. If you try to draw a picture on a piece of graph paper
only by filling in squares, you'll have a similar problem.
DYA
"Digital Youth Association", a programming group based on America
Online in AGR's Direct Connect Area.
FTA
The "Free Tools Association" is a programming group based in
France, known for their stylish use of graphics sound and
animation in their demo programs. "Nucleus", "Modulae", and "The
X-Mas Demo" are three examples you may have already seen.
Highlighting
Simulating the effect of light reflected off of an object. In
this tutorial, we assume the light is coming from one direction.
High Tech
By this, I mean a certain class of picture that features"high
technology" features like consoles full of buttons, computer
screens, metal plates, LEDs, and those kind of things.
Light Source
The place where all the light is considered to be coming from. In
this tutorial, I pretend the light source "in my computer screen"
is positioned somewhere above and to the left of the objects I am
drawing. If you have a lamp next to your IIGS, shine it on the
monitor from the side, and you'll see that the closer edges get
lit more than the farther edges. (no, not the objects you drew on
the screen, you silly person)
Saturated
A saturated red looks "very, very red", as if it was "saturated"
or "soaked" with dye. Firetruck Red would be a more saturated
color than Tea Rose Pink. A desaturated color is just the
opposite: It looks washed out.
Splash Screen
The "title picture" of an application, designed to look really,
really cool. Good place to put your name!
----------------------------------------------------------------------
About the Author:
Dave Seah is currently a graduate student of Electrical and
Computer Engineering at the University of Rochester in upstate
New York. His research interest lies in creating symbiosis
between the creative process and engineering, primarily within
the fields of computer graphics and user interface design.
Dave is a forum consultant for the Apple II Art & Graphics Forum
on America Online. He helped found the Apple II Art Guild, a
section of the Forum dedicated to exploring user-created computer
graphics.
US Mail: Email:
701 Goler House Internet: seah@ee.rochester.edu
Rochester, NY 14620 America Online: AFC DaveS
----------------------------------------------------------------------
This Tutorial may be uploaded to other BBSs and Computer Services
provided it is provided in whole, unedited form.
Copyright (C) 1991 by Dave Seah & Three Legged Cat Productions
All Rights Reserved
----------------------------------------------------------------------
America Online
Winner of the 1990 Apple II Achievement Award
for Best Apple II Online Service
Call 1-800-227-6364 for Signup Information
----------------------------------------------------------------------