Despite the fact that most of my icons are drawn in vector editors, their output is almost always in a bitmap format. Use Pixel Preview mode to understand how Illustrator divides objects into pixels.

In Adobe Illustrator you can open multiple windows of a single document at the same time. Each window can have different view settings. For example, you can set one window highly magnified for doing close-up work on some objects and create another window less magnified for laying out those objects on the page.

You can arrange multiple open windows to suit your needs, using options from the Window menu. Cascade displays windows stacked and descending from the upper-left to the lower-right of the screen; Tile displays windows edge to edge; Arrange Icons organizes minimized windows within the program window.

To create a new window choose Window > New Window:

You don’t need use Zoom in/Zoom out or turn on/turn off Pixel Preview mode if you want to magnify some icon or view 100% or preview how icon will appear when rasterized. Just open several windows for your document:

1.  In the left the biggest box we draw.

Choose the most convenient to work on the scale of an icon. There are several ways to zoom in or out of artwork.

Select the Zoom tool  Click in the center of the area that you want to magnify, or hold down Alt (Windows) or Option (Mac OS) and click in the center of the area that you want to reduce. Each click magnifies or reduces the view to the previous preset percentage.

Select the Zoom tool and drag a dotted rectangle, called a marquee, around the area you want to magnify. To move the marquee around the artwork, hold down the spacebar, and continue dragging to move the marquee to a new location.

Choose View > Zoom In or View >Zoom Out. Each click magnifies or reduces the view to the next preset percentage.

2.  In the upper right we see our work 100%.

To display a file at 100%, choose View > Actual Size, or double-click the Zoom tool.

3.  The lower right are looking to hit our line pixel or not.

If you move, add, or transform an object, the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.

Important: The pixel grid is sensitive to the ruler origin (0,0). Moving the origin of the ruler will change how Illustrator rasterizes artwork. 

pixel preview mode

To understand how Illustrator divides objects into pixels, open new wondow for file that contains vector objects, choose View > Pixel Preview, and magnify the artwork so that you can see its individual pixels.

pixel preview mode

Pixel Preview mode approximates how your artwork will appear when it is rasterized and viewed in a web browser. Also when you save artwork in a bitmap format, such as JPEG, GIF, or PNG, Illustrator rasterizes the artwork at 72 pixels per inch. You can preview how objects will appear when rasterized. This is especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized graphic.

These little tricks make the designing of Icons even easier.  😉

Windows Icon Design

0 thoughts on “Icon Design Tips: Multiple Windows And Pixel Preview Mode”

  1. I always loved visiting this specific web-site once
    a week or so since you do generally have got some excellent
    articles so well done from your followers! !

Leave a Reply

Your email address will not be published. Required fields are marked *