![]() To create a triangle like the one on the left, we start by drawing a simple 7 × 7-pixel vector square using the Rectangle tool (found in the Tools panel, or simply press U). On the right, the triangle with an even width. On the left, the triangle with an odd width. Most of the time, you’ll want an odd number of pixels for the triangle’s base so that its middle falls on a half-pixel, resulting in a sharp arrow: To illustrate our new workflow, let’s draw a simple arrow like the one in Kickoff’s download button: You can easily transform it into a triangle! The Smart Polygon vector autoshape in Fireworks. The yellow control points allow for easy customization of width and height, thickness, type of head, roundness, arrow size and more. While Fireworks provides built-in arrow and polygon vector drawing features, I recommend going the customized route and drawing those vector shapes yourself. Triangles are everywhere in user interfaces: arrows in buttons, breadcrumbs, pop-over indicators and so on. The stroke is now a composite path that you can easily edit and even apply a gradient fill to.īonus tip: Should you later decide that you need to resize this shape (without distorting its perfectly rounded corners), the “9-slice scaling tool” can come to your rescue:ĭistortion-free scaling is easily achieved with the 9-slice scaling tool. Punch Paths will help us get a better-looking stroke.Īlternatively, you could select the two rectangles and go to Modify → Combine Paths → Punch. To achieve this, select the two rectangles and hit the “Punch Paths” tool icon in the Path panel: The purpose of the smaller shape (the one with the yellow-orange background) is to cut out (or “punch”) the interior of the red shape, resulting in a 1-pixel-wide object that can be used in place of a stroke. We’ll need two vector shapes to create our custom stroke. Put the smaller rectangle above the larger (you can verify that it’s above in the Layers panel), and make its border radius smaller by several pixels, as shown here: Start by drawing two rectangles with rounded corners, one of them 2 pixels taller and wider than the other. Outside (example 3) looks better for fine strokes than centered or inside.īut in such cases, I recommend a composite path instead of a stroke to get better control of the result and to be able to apply a gradient to it. Stroke can be set to different alignments in the Properties panel. But the best results are when the stroke is outside. ![]() The rounded corners look a bit too thick.įireworks lets you specify the stroke’s position: outside, centered or inside. Also, the effect from the Stroke tool isn’t always elegant - for example, when using an inset border with rounded corners. But one of the most important is missing: the ability to add a gradient to a stroke. The Power of Adobe Fireworks: What Can You Achieve With It?įireworks’ stroke feature gives the user quite a lot of options. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |