💾 Archived View for mirrors.apple2.org.za › archive › apple.cabi.net › Graphics › HITECH2.TXT captured on 2024-06-16 at 14:00:59.
⬅️ Previous capture (2023-01-29)
-=-=-=-=-=-=-
---------------------------------------------------------------------------
Art Guild Tutorial
"Basic High Tech Effects, Part 2"
by Dave Seah (1/19/91)
Apple II Art & Graphics Forum (keyword:AGR)
---------------------------------------------------------------------------
Welcome Back!
This tutorial picks off where Part 1 left off. In this document, I
will introduce some more "basics" that you'll be able to stash in your
arsenal of dirty graphics secrets.
"Dave's Glossary" will be expanded upon in this tutorial, but it will
not stand alone. If you haven't seen the glossary from Part 1, you
should definitely grab it for handy reference if you feel
uncomfortable with the terminology.
And now...introducing "frames" and "bars"!
The Dark Truth about Frames
Frames are a big, big part of high tech graphic screens. This comes
from current trends in real-life electronic equipment front-panel
design. If you take a good look at any gizmonic stereo component, you
will notice that the knobs, buttons, and LCD displays are usually
arranged in blocks. Indeed, you could draw a rectangle around the
groups of various controls. Take another look at any modern aircraft
cockpit, and you will again note the abundance of blocked-off
controls. More importantly, there are several small CRT displays
scattered about. The rectangle is a dominant part of high tech
control design.
You can make a basic frame by just "hollowing-out" a rectangle, then
applying the basic shadow/highlight techniques to it. Apply the
normal highlights and shadows to the outside edge, and use the inverse
shadowing on the inside edge (the "hole"). Voila! A frame!
Some Tips for Making Frames
TIP #1: Keep it symmetrical!
Nothing looks quite as lame as a frame that isn't symmetrical. Make
sure that both sides have the same width. Use the Magnify Mode of
your paint program to make sure they are the same width. Check the
top and bottom, though these aren't quite as critical. If you want to
make an asymmetrical frame, make it OBVIOUS that you intended it to be
that way by making one side much wider than the other.
You may find that the shadowing of some edges will appear to make one
side look a little skinnier than the other. If it really bothers you,
you can make the offending "leg" wider.
TIP #2: Watch the frame thickness carefully!
Remember to keep more "empty space" inside the frame. If you draw a
hefty, thick-walled frame, you may wind up with a "retro-tech" style
that would be at home on a box stuffed with vacuum tubes. Tutorial
Picture 2A shows a red frame that is pretty chunky...would you want
something like that on your Mercedes? The other frames are slimmer,
yet define the rectangular space inside without overwhelming it as
does the red frame.
TIP #3: Build on the Basics
Frames become really exciting if you can go beyond the simple
rectangle. Put slight flanges around the corners, or put another
rectangle inside the hole. Hollow-out some chunks from one side of
the frame. What you want to achieve is a semblance of
three-dimensionality, so apply highlights and shadows to all edges.
You can also build up the edges, as shown on two variations of the red
frame in Tutorial Pic 2A. This pic also shows the progression from a
very simple frame to a somewhat more complex one. The addition of
Sparkles and some simple shading can really make a difference.
So I have a Frame...Now What?
Use frames for fake monitor screens, and fill them with interesting
text. Whatever you do, don't use the Shaston 8 font ANYWHERE on your
screen...you don't want to make your screen look like a IIGS
application. Check out Tutorial Pic 2A for the font I like to use. I
like fonts made out of slender strokes because they are more
reminiscent of character displays one might see on a piece of
electronic equipment.
If you plan to put something in a frame, keep it centered or try to
fill most of the area inside. High-Tech is all about efficient use of
space.
You can put several frames inside or next to each other to create a
kind of control panel. Important Tip: Leave a black one-pixel gap
between to adjacent frames. This helps define the edges. Note that
most objects in both tutorial pictures follow this tip.
The six numbered gray frames in Tutorial Picture 2A start with (1) a
basic, unshaded frame. (2) Basic highlights and shadows are applied
with techniques discussed in Part 1 of this tutorial series. (3) A
dark rectangle box is added inside. Note that there is a one-pixel
gap between the inner and outer frames. I decided at this point that
I'd like the shadows to be a little darker (4). To make the inner
frame stick out a little more, I added a straight vertical highlight
it (5). Finally, I added "sparkles" to the upper-left corners of the
inner and outer frames (6).
Yet Another Kind of Widget: Bars and Pipes
The other basic high tech widget I will discuss is the ubiquitous Bar.
These are ludicrously simple to make.
STEP 1: Define a palette of 5 grays.
Try using the "spread" function of your paint program to generate a
range of evenly-mixed grays. I'll call the lightest one GRAY1, and
the darkest shall be called GRAY5.
STEP 2: Draw a horizontal line in GRAY5 (the darkest)
STEP 3: Draw a horizontal line just above it in GRAY4
STEP 4: Draw a horizontal line above the last one in GRAY3
STEP 5: Draw a horizontal line above the last one in GRAY2
STEP 6: Draw a horizontal line above the last one in GRAY1
At this point, you should have a shaded bar, with the brightest gray
at the top fading into the darkest gray at the bottom. If the left
and right edges are not even, even them out. One can't be sloppy when
doing high-tech effects!
STEP 7: Draw another horizontal line above the last one in GRAY2
STEP 8: Draw a horizontal line above the last one in GRAY3
If you stopped at GRAY3, you should see a shaded, highlit bar. Note
that the long horizontal highlight is not centered...that's because
the light source at the top of the screen is shining straight down at
you.
If this doesn't float your boat, you can insert STEP 9 and 10. You
will end up with the highlight centered in the middle of your bar.
To make a vertical bar, just follow the directions and use vertical
lines. For a light source at the upper-left of the screen, position
the GRAY1 highlight to the left of your bar. If you don't care about
light sources, just use the center-highlighted kind of bar. Both look
good.
You can use fewer or more colors in making your bars. You should
experiment with the differences of shades between each gray. I like a
very bright highlight (GRAY1 is nearly white), and a very dark GRAY5
(almost black). The number of grays is entirely variable. The more
grays you use, the "smoother" the bar may look. With very big bars,
this can be critical.
Tips for "rounder" Bar Construction
TIP #1: Use Less Area on the Edges
You should be aware that the distribution of grays is NOT linear for a
round bar. In a really big bar, there will be more GRAY4 than GRAY5.
This is rather hard to explain, so I'll refer you to the diagram in
the tutorial picture. If you are not drawing round bars, then never
mind.
TIP #2: Adjust the Color Spread
You can also compensate for this by having a non-linear spread of
grays. There are 16 possible pure gray levels on the Apple IIGS.
Arbitrarily calling 16 the brightest level, compare the "linear"
spread to the "weighted" spread:
LINEAR WEIGHTED
GRAY1: 13 13 *note* to get gray,
GRAY2: 11 12 set red, green, and blue
GRAY3: 9 10 level all equal.
GRAY4: 7 8
GRAY5: 5 5
Use of the WEIGHTED scale grays should look "rounder" than the LINEAR
scale grays. This is related to the non-linear change in angle of
reflection between the light source and the screen plane.
Does this just confuse the heck out of you? The way I usually do it
is by spreading a palette of grays evenly. I then draw the bar, and
then tweak each individual gray until it "looks right". The important
thing to remember is that the DARK EDGE of the bar should be a bit
more dark than it would be if you just used the LINEAR brightness
scale.
Tutorial Picture 2B shows five large cross-sections of a bar. "A" is
a magnified view of the standard Center Highlighted bar, with an
evenly-spread palette of grays. "B" shows the same bar with a
weighted palette of grays. The weighting was done by eye. "C" shows
a more accurate distribution of grays using the evenly-spread palette,
while "D" shows the same thing with the weighted palette. "D" was
lightly dithered to produce "E".
In Summary...
I've attempted to introduce two more basic widgets that are useful in
constructing high-tech displays: The Frame and The Bar. I've
presented some potentially confusing concepts in this tutorial. If
you are a bit bewildered, just look at the accompanying tutorial
pictures and try to emulate what you see. The important things to
remember are:
Frames: Keep lighting direction consistent.
Be symmetrical.
Make frames slim.
Bars: Make edges of bar darker than the middle.
Keep the center highlight off-center, towards
the imaginary light source.
In Part 3, we'll finally get to the Construction Phase of this
tutorial. From basic components, we will make a screen that looks
halfway decent.
---------------------------------------------------------------------------
Dave's Glossary
Dithering
A finely-interwoven pattern of two colors will appear to "blend" into
a third color. Dithering refers to the construction of this pattern.
It is a useful trick when you need an extra color but don't have any
more spaces for defining them.
Linear
An example of a linear scale would be a ruler. Each little mark is a
fixed, constant distance from the previous mark. A non-linear scale,
on the other hand, does not have that feature. Linear = straight.
linear: 2 4 6 8 10 12 14 ...
non-linear: 2 3 5 8 12 17 23 ...
Ray Tracing
A technique of calculating the lighting of a scene. Very loosely, it
involves modelling your objects mathematically, and computing the
paths of individual light rays bouncing off of objects to figure out
what is lit and what is not. While capable of producing very
realistic-looking pictures, it takes a lot of computer time to do.
Widget
Nothing more than an "thing" that has been drawn on the screen. By
widget, I usually mean a distinct object that can be treated as a
basic component. Widgets are the Tinkertoy parts and Lego bricks that
make up Dave's High Technology Graphics multiverse.
---------------------------------------------------------------------------
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 distributed other BBSs and Computer Services provided
that it is uploaded 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
---------------------------------------------------------------------------