What the effect does
"Bevel" makes a flat object appear three-dimensional, as if it is raised from the side or pressed into it. The edge on the light side receives a bright highlight, the lights, and on the opposite side a dark highlight, the shadow.
Technically, Stylo draws two shadows inward on top of each other: first the shadow, then the lights. Both are on the surface of the object, thus over fill, gradient, or background image and under the border. Because the lights brighten and the shadow darkens, at least one of the two highlights is visible on almost any object color.
You can find the effect in the dialog Object Shadow/Effects: select Bevel at the top right, check Active, set values, and apply with Assign. As soon as you change a value, Active is automatically set. The tab has three areas: the shape of the edge, below Lights and Shadows each with its own mode, opacity, and color. The eye symbol at the bottom left shows a preview, the arrow next to it resets the values.
Stylo offers the edge in one form: inward and softly blended. It can be combined with other effects. Inward, Stylo draws in this order: shadow inward, glow inward, bevel, shine.
Parameters at a glance
Six values determine the shape of the edge, three more for the lights and the shadow. Size, angle, and height have the strongest effect.
| Parameter | Effect | Typical Range |
|---|---|---|
| Direction | Up: The object appears raised, the lights are on the light side. Down: Lights and shadows swap sides, the object appears pressed in. | mostly Up |
| Size | How wide the edge is. Small = narrow, sharp edge, large = wide, soft curve. | 0.5–2 mm |
| Softening | Makes the edge softer; the offset of the highlights remains the same. | 0–1 mm |
| Depth | Enhances lights and shadows together. 100% leaves the two opacities as they are; higher values increase them to full coverage. | 50–200 % |
| Angle | From which direction the light comes: 0° = top, clockwise, 90° = right, 180° = bottom, 270° = left. | 300–345° for light from the top left |
| Height | How high the light is. Low = clear relief with distinct light and shadow sides, 90° = light from directly above, no relief anymore. | 20–45° |
| Lights: Mode, Opacity, Color | The bright highlight. Negative multiply brightens and disappears on white. | Negative multiply, 50–90 %, white or light object color |
| Shadows: Mode, Opacity, Color | The dark highlight. Multiply darkens and disappears on black. | Multiply, 50–90 %, black or dark object color |
Example rows
In each row, only one value changes. All others are set to: Direction Up, Size 2 mm, Softening 0 mm, Depth 100%, Angle 330°, Height 30°, Lights White in Negative multiply mode with 75%, Shadows Black in Multiply mode with 75%, Object Blue 30 × 17 mm on a white background.
Direction
Up raises the object: bright at the top left, dark at the bottom right. Down swaps the sides, the object appears pressed into the side. On light gray, almost only the shadow carries the effect, as the lights can hardly brighten there anymore.
Size
With 0.5 to 1 mm, a narrow, clear edge like that of a button is created. From 2 mm, it becomes a wide curve; at 4 mm, it almost reaches the middle of this object and appears more like a gradient.
Softening
Softening takes the hardness off the edge and makes lights and shadows paler. Even 0.5 mm is enough for a softer appearance; from 2 mm, the edge loses its shape.
Depth
Depth only regulates the strength, not the shape. Below 50%, a subtle relief remains; above 100%, lights and shadows become stronger up to full coverage.
Angle
The angle indicates the direction from which the light comes: The lights move to this side, the shadow to the opposite. 180° (light from below) makes a raised object appear pressed in, as the eye expects light from above.
Height
With flat light (10° to 30°), the light and shadow sides are clearly separated. As height increases, both come closer together; at 90°, only a uniform, grayish highlight remains all around, without relief.
Object color
The object color determines which highlight is visible. On white, the lights disappear, the edge only lives from the shadow. On black, the shadow disappears, only the lights remain. On medium colors like blue, both are effective.
Color and use
From left: Button in red with rounded corners, size 1.5 mm, softening 0.5 mm. The same button with direction Down appears pressed, for example, for an active state. Gold plaque: fill #C9A227, lights light yellow #FFF3B0, shadows dark brown #5A3D00, size 2.5 mm, softening 0.5 mm, depth 120%; colored lights and shadows appear more metallic than white and black. Embossing: light gray box on the same gray side, size 1 mm, depth 60%, height 40°; the object stands out only by the edge.
Recipes
These combinations are a good starting point; fine-tuning is usually done only through size and depth. The angle is set everywhere to 330° (light from the top left), lights in Negative multiply mode, shadows in Multiply mode, both at 75%.
| Effect | Object Color | Direction | Size | Softening | Depth | Height | Lights / Shadows |
|---|---|---|---|---|---|---|---|
| Button, e.g. Buy button or interrupter | colored | Up | 1.5 mm | 0.5 mm | 100 % | 30° | White / Black |
| Pressed button, e.g. active state | colored | Down | 1.5 mm | 0.5 mm | 100 % | 30° | White / Black |
| Button with clear edge, e.g. price field | dark | Up | 0.8 mm | 0 mm | 150 % | 30° | White / Black |
| Soft cushion, e.g. info box | colored | Up | 3 mm | 1 mm | 80 % | 45° | White / Black |
| Metal, e.g. gold plaque | Gold | Up | 2.5 mm | 0.5 mm | 120 % | 30° | Light yellow / Dark brown |
| Embossing, e.g. seal in the side color | light | Up | 1 mm | 0 mm | 60 % | 40° | White / Black |
Tips:
- The edge needs a surface: fill, gradient, or background image. An object without fill does not get a bevel. If only lines are selected, the dialog hides the tab.
- In text frames, the edge is on the frame surface, never on the text.
- Keep the angle of all objects in a display the same, even between bevel, inner shadow, and shine. Otherwise, the light directions contradict each other.
- On white surfaces, only the shadow works, on black only the lights. This is usually enough for a relief; to increase contrast, increase the depth.
- Lights and shadows in a light and a dark variant of the object color appear more elegant than white and black, which cloud the surface gray.
- Size does not scale with the object: Small objects need smaller values, otherwise the edge becomes a gradient over the entire surface.
- The fill opacity of the object also affects: An object with 50% fill only gets half the edge.
- Effects do not work on groups. Select the object in the group or ungroup it.
Comments
0 comments
Please sign in to leave a comment.