Join Jim Babbage for an in-depth discussion in this video Using Snap to Pixel, part of Fireworks CS5 Essential Training.
- View Offline
Sometimes when you scale a Vector object, your original nicely-defined hard- edged vector shape ends up getting a little bit blurry. Now fortunately, Fireworks can help out with this. We've got an example right here, this little divider graphic that would have been used, for example, on a Web page. It's been stretched a little bit, and you'll notice that we have all these anti-aliased pixel edges. It's not very attractive. It looks kind of blurry. So what we're going to do is we're going to use a really cool command to fix this problem. I'm going to go up to Modify > Snap To Pixel.
As soon as I do that, you see that the edges of the shape, along the outer edges, and also on the inside, snap to the nearest pixel, and we get nice crisp lines again. Now just to give you an example of this happening in action, I'm going to go ahead and Scale this object. I'm going to drag it up a little higher. As soon as I do that again, notice that Fireworks has tried to blend the edges, and it doesn't really look the way I like it to look. So once again, I can go into Modify > Snap To Pixel, and get a much crisper result.
We'll take a look at one more example here using the same object. I'm going to apply a Stroke. I'm going to apply - oh let's go with a nice bright green stroke, something that's easy to see. As soon as I applied that, you'll notice that we got this, again this Anti-aliased Edge here. So Modify > Snap to Pixel cleans up the Stroke, very, very defined now. If I go ahead and alter the Size of the Stroke, let's go from 1 to - Oh, let's say 2 pixels. Notice, again, what happens to the edges of the Stroke. We're getting that anti-aliasing. So once again, Modify > Snap To Pixel.
Now, granted, I am fairly zoomed in on this at about 400%, but let's take a look at this. I'll Undo that last change. Press Ctrl+Z or Command+Z. Let's go out to 100% and see what this looks like at 100%. We're getting a bit of edge softness. We don't see the same kind of banding that we saw earlier, but it's definitely not a crisp vector graphic. So even at 100%, the problem is noticeable. If I go up to my Modify > Snap To Pixel, you can see that the edges of the image become noticeably sharper, even when they're seen at regular magnification.
So Snap To Pixel is a really nice feature inside of Fireworks. If you're working with Vector graphics, especially rectangles with strokes, I think you'll find this tool coming in very handy.
- Customizing the workspace
- Working with pages, layers, and states
- Importing content
- Comparing bitmaps and vectors
- Creating and editing vector shapes
- Converting artwork into graphic, button, and animation symbols
- Animating in Fireworks
- Maintaining crisp text in web images
- Sharing content between pages
- Optimizing images for export
- Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst