--------------------------------------------------------------------------- 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 ---------------------------------------------------------------------------