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