​1996

Drop shadows under text and images is a familiar sight in magazines and all over the Web. As soon as I started working on web design, I realized I needed to know how to create them. There are probably volumes on how to do this in Photoshop, but at the time I didn't have Photoshop. I had the next best thing -- Photogenics on the Amiga. The shadows on the title above and the EMail and Home buttons below are an example of the shadow effect.

Making translucent, soft-edged drop shadows in Photogenics isn't really that hard; it just takes a few steps. It's easy to change the shadows to make them darker, softer, sharper, translucent, lower, or whatever else you want a shadow to do.

As promised, an ARexx script to do the steps below is now available. See DropShadows.rx further down this page.

To start off, you'll want to download these two images: The Shadow, Inc. logo and an Alpha Channel for the logo. These are both simple JPEGs -- just use your browser to grab them right from the page, or click here to download the images as IFFs in a LHA archive. The images were generated in about 10 minutes with Lightwave, which is well suited to Photogenics. Since Lightwave saves Alpha Channels, it's images are easy to compose in Photogenics, and adding a shadow on a flat background in Photogenics. is much easier than trying to get the diffuse and luminosity settings balanced in Lightwave.

This is the first step: to pick your logo, and make an Alpha Channel of it. The easiest way is to use the Area Fill tool to select the area around you logo and invert the Paint Layer, and then send the paint layer to the Alpha Channel. This does cause some problems with anti-aliased logos, since you tend to loose a little of the logo during the selection. That isn't too important for this, though. Of course, you can avoid all that by just downloading the Shadow, Inc. logo and Alpha Channel above.

Select the Shadow, Inc. Alpha Channel image, and Clone it. Rename it to RealShadow so it won't get confused with the other images. Change the Paint Mode to Negative, and Fill Screen (the white square over the Fix button), so you have black text on a white background, and Fix it down. This will become the shadow.

The next thing you want to do is decide how translucent you want the shadow to be. Select Fill Screen again and change the Mode to Brighten. You probably won't see too much of an effect until you change the Brightness Options to 80 or so. I used 130 for this example. Don't forget to Fix it. Of course, leaving the shadow black will make it completely solid (no transparency).

Now to make the shadow fuzzy. Select Fill Screen again, and change the mode to Defocus. This will soften the shadow, making the edges much more fuzzy. You can toy with the Options to increase or decrease the blurring, but I usually find the default 2 is fine. If you don't like Defocus, you can try the Blur mode or Gaussian Blur from the Image menu, Blur submenu. Fix it down when you like it.

The reason you do the defocusing after the brightening is because when you brighten a defocused image, it tends to severly reduce the defocusing effect. Defocusing after brightening is much more pleasant looking.

Normally, you don't want the shadow directly under the logo; you generally want that generic upper-left key light that every graphical design layout in the universe uses, from magazines and web pages to GUIs on computers (just look at your Amiga GUI -- the "light" is from the upper-left). The way to do that is easy: the Roll mode. Click Fill Screen again, and select the Roll mode. Change it's options to -5 X and -5 Y. For some reason, Photogenics moves positive values to the left and top instead of the right and bottom like every other program on the planet, but it's not too much of a pain. I wouldn't bother with a Rolled example image -- you wouldn't see much. Obviously, the larger the number you feed it (well, I guess since they're negatives it's the SMALLER the number), the further the shadow gets from the logo. Usually 5 to 10 pixels is sufficient. Remember to fix it down when you're done.

And now for the final step: the composite. Select the Alpha Channel image and drag it into the Alpha Channel box. If you forgot to fix down the Roll from the last step, you'll see a really cool emobss-like effect on you shadow image. Remove the Alpha image and Fix down the Roll on the Shadow, and then put the Alpha back.

Drag the Shadow into the Secondary Image box. Select Invert Alpha from the Alpha/Paint Layer menu, so the Alpha will protect the logo and keep the shadow where it should be. Select the logo image (Shadow, Inc.) as your Primary Image (just click on it).

Change your mode to RubTexture, and click on Fill Screen on last time. Since a texture is just lights and darks, RubTexture nicely places the shadow over the background and under the logo. If you had a grey background, you could also use RubTint. With no background (just white), RubThru would be just as good, too.

There you go -- a nice, translucent, soft-edged shadow effect. If the shadow is in the wrong place, just remove the Alpha Image, select the Secondary Image (the shadow) and Roll it a little more. Then just fix it down and put the Alpha back, and the Primary Image (the logo) will update itself.

You may have noticed that it is difficult to change the brightness and softness of the shadow once you've gotten this far, unless you saved every step along the way. The ARexx script below helps a bit, and makes the process a bit easier in general.

DropShadow.rx

DropShadow.rx is an ARexx script that does the above in just one step. The script is currently fairly simple, with no GUI. It requires a mask to be in the Alpha Channel, set up as normal (White is solid, Black is transparent), and the image you want to add a shadow to selected. Then run the macro, and it creates the shadow from the mask image as described in the tutorial, boosting it's brightness and defocusing it twice, and finally rolling it 5 pixels down and to the right. Lastly, it is RubTextured into the main image. Since that is the last step, you can undo the shadow if you don't like it. When finished, the script restores the Alpha buffer to it's original contents, and leaves the secondary buffer empty. The shadow image itself is closed.

Installing the script is very simple: Copy the script to Photogenics:Data/Scripts/. Then simply select Install Script from the Macro menu in Photogenics, pick DropShadow.rx from the file requester, and pick which function key you'd like to assign it to (I like F10). That's it.

Click here to download DropShadow.rx (3 KB)