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.The Present And Future Of Adobe Fireworks.Switching From Adobe Fireworks To Sketch: Ten Tips And Tricks.Let’s begin! Further Reading on SmashingMag: Some of these tips are just quick explanations of features that you might not be aware of, while some are techniques and methods to improve the default visual results. In this article, I’ll share some tips that I use in my work in Adobe Fireworks that could help improve the quality of your designs and workflow. Fireworks does have a slightly different workflow and requires a slightly different approach than you may be used to. However, most designers who have been using Photoshop for years may find Fireworks a bit awkward at first. While certainly not as well known as Photoshop, Adobe Fireworks is a great tool for creating user interfaces, website designs and mock-ups, wireframes, icons and much more.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |