|
Tonight your flat button stands up off the page. Two effects do it: a bevel
and a drop shadow. Before we touch either one, you need to understand the light,
because the light is the whole trick.
Where the light comes from
Look at the keys on your keyboard from an angle, or the OK button on any window on your
computer. On nearly every button on every screen, the light is pretend light coming from
the upper left. So the top and left edges catch it and look lighter, and the bottom
and right edges are in shade and look darker. That sloped, lit edge is a bevel.
On the GeoCities.us Homesteader button from the
clip art library, the bevel is a thin light line
along the top and left and a dark one along the bottom and right. On Dustin Mayfield's
chrome button from STARPORT, the whole capsule
is shaded like a rounded tube, light on top, with a dark rim all the way around. Same
light, same direction.
A drop shadow is a soft dark shape behind the button, a little lower and a
little to the right, as if the button were floating just above the page. Bevel and shadow
have to agree about the light. Light from the upper left means a light top edge, a dark
bottom edge, and a shadow down and to the right. If your shadow falls up and to the left,
your button looks lit from two places at once, and people's eyes will know something is
wrong even if they can't say what.
Tonight we start over with a fresh picture, because the shadow needs room that your
Lesson 1 button doesn't have. You'll do the bevel and the shadow first and the lettering
last, so the bevel can't tilt your letters.
You'll need: the color of the page your button will sit on. Mine sits on this
pale pink, which is red 255, green 204, blue 204. If you don't know your page's color,
look in your page's BODY tag for the BGCOLOR, and use the translation table in
Lesson 1, step 2.
| 1 |
Make a bigger picture.
File menu, New. Width 136, height 56, white background, 16.7 Million
Colors. The button itself will still be 120 by 40, the same as last time. The extra is
room around it. |
| 2 |
Paint it your page's color.
Set the foreground to your page's color, pick the flood fill and click once on the
picture, exactly like step 3 of Lesson 1. The whole picture turns pink (or whatever your
page is). This is new, and it's important. You'll find out why in Lesson 3. |
| 3 |
Draw the button's shape.
Click the selection tool (the dotted rectangle). In the little settings window, make sure
the selection type says Rectangle. Now move your pointer over the picture and watch
the status bar at the bottom of the screen. It shows where the pointer is, dots across and
dots down.
Put the pointer at 4, 4, hold down the left button, drag to 124, 44, and let
go. The ants march around a rectangle 120 dots wide and 40 tall. You've left 4 dots of
room on the top and left, and 12 on the right and bottom, because the shadow falls down
and to the right and it's going to need the space.
Didn't land it exactly? Click once outside the ants to let go, and try again. Close is
fine. Your visitors don't have rulers. |
| 4 |
Fill the shape.
Set the foreground to your button color (mine's 0, 102, 102), pick the flood fill and click
inside the ants. This time only the inside of the rectangle fills. A selection works like
masking tape: the paint only goes where the ants are. |
| 5 |
The bevel.
Leave the ants marching. Go to the Image menu, find the effects, and choose Inner
Bevel. A window opens with two little pictures, your button before and after, and a
lot of settings.
The first time, leave everything alone except one: Width, which is how wide the
sloped edge is. Try 6. Leave the light coming from the upper left. Click OK, then sit back
and look at it.
Don't like it? Undo, open Inner Bevel again, and try a width of 4, or 8. One change at a
time, every time, so you learn what each one does. |
| 6 |
The shadow.
Ants still marching. Image menu, effects, Drop Shadow. Here are the settings in
plain words, and where I start:
Color is the shadow's color. Black.
Opacity is how dark. Start at 60.
Blur is how soft the edge is. Start at 5.
Vertical and Horizontal offset are how far down and how far right the
shadow sits. Start at 3 and 3.
Click OK. The shadow is painted outside the rectangle, onto your pink. If you can't see
one, check that the offsets aren't negative numbers, which would hide it up under the top
left corner. |
| 7 |
Let go, then letter it.
Selections menu, Select None. Now do your lettering exactly like steps 4, 5 and 6 of
Lesson 1: white foreground, text tool, Antialias checked, Floating, drag it into place
and Select None. Center it on the button, not on the whole picture. The shadow side of the
picture is wider, so if you center by the edges of the picture your word will sit a hair
too far right. |
| 8 |
Save it.
Save As, Paint Shop Pro Image, and call it home2. Keep home1 too. You'll want to
look at them side by side. |
Now look at home1 and home2 next to each other. Same color, same word, and one of them
looks like it's sitting on the page while the other one looks like you could pick it up.
That's the whole lesson.
When things go wrong
"Inner Bevel is gray in the menu and I can't click it."
Your picture isn't full color. Go to the Colors menu, choose Increase Color Depth, and
pick 16 million colors. Then try again. (This happens a lot to people who opened a GIF
from somebody else's page to practice on.)
"My shadow is cut off on the right."
Not enough room. Start over with a wider picture, or drag a smaller rectangle in step 3.
"The bevel filled up the whole button and looks like a picture frame."
The width is too big for a button this small. Undo and try 4.
"The bevel went around the whole picture instead of the button."
The ants weren't marching when you chose Inner Bevel. You let go of the selection too
early. Undo, draw the rectangle again (it'll still be teal; that's fine), and then bevel.
"Can I make the shadow bigger?"
You can, but a big black shadow makes a button look like it's six inches off the paper.
On a page full of words, a little goes a long way. Same as with makeup, my mother always
said, and she was right about that too.
HOMEWORK
Make your three buttons from Lesson 1 over again, this time with a bevel and a shadow,
on your own page's color. Same size, same width of bevel, same shadow settings on all
three. Write your settings down on a piece of paper and tape it to the side of your
monitor. Mine says 6, 60, 5, 3, 3.
Extra credit: make one with the light coming from the lower right, just once, so
you can see for yourself why nobody does it.
|
|
Chrome buttons from STARPORT by Dustin Mayfield
Questions about Lesson 2? [email protected]
Last updated Sunday, September 19, 1999
|
GeoCities.us
» SoHo » Studio
