Wide's World

To Bevel Or Not To Bevel

by

Widearea

Porno-Graphix

This week we will look at creating some bevel effects. The bevel is a method of simulating dimension by using dark and light edges to create the illusion of three-dimensional space on a two-dimensional graphic image. The principle can be applied to many graphic forms, such as shapes and text. The effect of dimension can be used to enhance the impact of our graphics, and is commonly seen in interface design, rollovers, and so on.

Much like any graphic creation technique, there are many ways to achieve the effect. The method you choose will depend on your prowess and preferences with your software, etc. The best thing to do is find the method that offers the easiest and most time-saving techniques for your personal style and preference. The basic idea, however, is to create an outer edge and an inner edge, where the color values of the respective edges creates the illusion of light striking a real, 3-dimensional surface. OK, enough of this, let's get to the methods.

Tools from the toolbar

Most of the tools required this week have been used in previous Wide's World articles, but we will also use the polygonal lasso tool. You will also need the marquee tool and the type tool, and you should understand the basics of the layer palette as well.

Beveled Square Button
To make it easy we will make a simple square beveled button to illustrate the basic principle.
1. Select File -> New and create a new file for our button image. In this example it is 100 pixels x 100 pixels.
2. Click on the foreground swatch in the toolbar to select the fill color for your button.
3. Select Edit -> Fill to fill the canvas with your background color.
4. Select Filter -> Noise -> Add Noise. Set your preferences in the dialog box. In this example we used amount-30 pixels; distribution-Gaussian. This will create a basic texture for our button. Note: you can paste any texture or color in there, and as well you should. This step is not necessary, but should serve to inspire your originality.
5. Create a top portion for your button by selecting an area inside the button background, leaving an edge around the perimeter for our lighting effects. Select the rectangular marquee tool in the toolbar. Click and drag in our canvas to create a square inside our button image. You can hold down the shift key as you do to constrain the marquee, retaining the square shape.

6. With this layer active, Select Edit -> Copy.
7. In the layer palette, select New Layer from the upper right of the palette window. Name the layer in the dialog box's title field so you can tell what the hell you are doing.
8. With the new layer active, Select Edit -> Paste. This will create the top layer for our button described in step 5. Double click the layer in the layer palette window to name it.
9. Re-select the button background layer in the layer palette window. Click and hold the lasso tool in the toolbar to select the polygonal lasso tool.
10. Click in the canvas layer's lower left hand corner to begin creating a selection with the polygonal lasso tool. Click a second time at the upper right hand corner. Click a third time at the lower right corner, then complete the selection at its origin. This will create a diagonal marquee selection inside the button background layer. The idea is to simply select the outer edges of our button.

11. Select Image -> Adjust -> Brightness/Contrast and use the slider bar to either darken or lighten the diagonal selection in the "Brightness" slider. Note the number of your final selection. In our example we use 50. The idea is to darken or lighten the button background layer to create the effect of light and dimension to your button's outer edges. Select "Enter/OK".

12. Select Select -> Inverse ->.
13. Select Image -> Adjust -> Brightness/Contrast and use the slider to lighten or darken the selection, doing the opposite of what you did in step 9.

14. Select Select -> Deselect to deselect upper selection.

15. Save file.

Beveled Text
The following effect uses the Photoshop Gaussian Blur filter to create the effect of beveled text.
1. Select File -> New and create a new file large enough to fit our type element. The example shown is 200 pixels x 50 pixels.
2. Select Edit -> Fill to fill our canvas with the appropriate background color. In this example we'll use black.
3. Select the type tool from the toolbar. Click inside the canvas area to bring up the type dialog box. Select a font style and color, etc. for your type layer and type in your text. Note: A rounded typeface or one with serifs will tend to yield better results than sans serif, or block letter forms. Position the type in the middle of the canvas with your mouse by clicking and dragging inside the image area. Click "Ok/Enter."
4. Select Layer -> Type -> Render Layer (Mac) or Layer -> Type -> Convert to Shape (WIN).
5. Select Layer -> Duplicate Layer to copy the type layer.
6. CTRL/COMMAND Click in our new active type layer in the palette window to select the type element, creating a marquee selection of the type.
7. Select Select -> Select Inverse.

8. Select Edit --> Fill and use black or your previously selected background color.
9. Select Select -> Deselect to deselect the new layer.
10. Select Filter -> Blur -> Gaussian Blur. Enter a value for blur, depending on image size. In this example we used 2.

11. Select Filter -> Other -> Offset and enter values to offset your bevel layer a few pixels up and a few pixels right. In our example we used 2 and -2. You could also manually position the top blur layer's offset value by using the mouse.
12. Hold down the ALT/OPTION key and click precisely between the two type layers in the layer palette window. You will see the special cursor when you hit the "hot zone" between the layers as you hold down the ALT/OPTION key as you click.

This action joins the two type layers as one, creating the desired effect.

Continued ..