Choose File > Open. In the Open dialog box, navigate to the Lessons > Lesson16 folder. Select the L16_start2.ai file, and click Open.

Choose File > Document Color Mode, and you will see that RGB Color is chosen.

When designing for onscreen viewing (web, apps, etc.), RGB (Red, Green, Blue) is the preferred color mode for documents in Illustrator. When you create a new document (File > New), you can choose which color mode to use with the Color Mode option. In the New Document dialog box, choosing any document profile except Print sets Color Mode to RGB by default.

Select the Selection tool (), and click to select the Earth icon in the middle of the page. Press Command and + (macOS) or Ctrl and + (Windows) several times to zoom in closely to the selected artwork.

Choose View > Pixel Preview to preview a rasterized version of the entire design.

Choose View > Fit Artboard In Window.

With the Selection tool () selected, click to select the blue button shape with the text “SEARCH” on it.

Press Command and + (macOS) or Ctrl and + (Windows) several times until you see 600% in the View menu in the lower-left corner of the Document window (in the Status bar).

By zooming in to at least 600% and with Pixel Preview turned on, you can see a pixel grid appear. The pixel grid divides the artboard into 1-pt (1/72-inch) increments. For the next steps, you need to see the pixel grid (zoom level of 600% or greater).

Press Delete or Backspace to remove the rectangle.

Select the Rectangle tool () in the toolbar. Draw a rectangle roughly the size of the one you just deleted.

You might notice that the edges of the rectangle look a little fuzzy. That’s because Snap To Pixel is turned off in this document, so the straight edges of the rectangle aren’t snapping (aligning) to the pixel grid by default.

Press Delete or Backspace to remove the rectangle.

Choose View > Snap To Pixel to turn on Snap To Pixel.

Now, any shapes that are drawn, modified, or transformed will snap to the pixel grid, if possible. By default, Snap To Pixel is turned on when you create a new document that uses the Web or Mobile document profile.

With the Rectangle tool selected, draw a simple rectangle to make the button, and notice that the edges appear cleaner.

The vertical and horizontal segments of the drawn artwork snap to the pixel grid. In the next section, you’ll see that you can snap existing artwork to the pixel grid. In this case, I had you redraw the shape just to see the difference.

Click the Arrange button in the Properties panel and choose Send To Back to arrange it behind the “SEARCH” text.

Select the Selection tool, and drag the rectangle into position as you see in the figure.

As you drag, you may notice that the artwork is snapping to the pixel grid.

Press Command and – (macOS) or Ctrl and – (Windows) once to zoom out.

Select the Selection tool (), and click to select the blue stroked rectangle surrounding the rectangle you drew.

Click the Align To Pixel Grid button in the Properties panel to the right (or choose Object > Make Pixel Perfect).

The rectangle was created when View > Snap To Pixel wasn’t selected. After you aligned the rectangle to the pixel grid, the horizontal and vertical straight edges were snapped to the closest pixel grid lines. Live Shapes and Live Corners are preserved when this is done.

Objects that you pixel-align that have no straight vertical or horizontal segments are not modified to align to the pixel grid. For example, because a rotated rectangle does not have straight vertical or horizontal segments, it is not moved to produce crisp paths when the pixel-aligned property is set for it.

Click to select the blue “V” to the left of the button. You may need to scroll to the left. Choose Object > Make Pixel Perfect.

You will see a message in the Document window: “Selection Contains Art That Cannot Be Made Pixel Perfect.” In this case, this means there are no vertical or horizontal straight edges to align.

Click the blue square surrounding the “V” (see the figure). Press Command and + (macOS) or Ctrl and + (Windows) several times to zoom in closely to the selected artwork.

Drag the top bounding point up to make the square a bit larger.

After dragging, notice that resizing the shape using the corner or side handles only fixes the corresponding edges (snaps them to the pixel grid).

Choose Edit > Undo Scale so it remains square.

Click the Align To Pixel Grid button in the Properties panel to ensure that all of the vertical or horizontal straight edges are aligned to the pixel grid.

Unfortunately, when aligning something that small, it may move. In this case, it is no longer aligned with the center of the “V.” You will need to align the “V” with the square.

Press the Shift key, and click the “V” to select it as well. Release the Shift key, and click the edge of the square to make it the key object.

Click the Horizontal Align Center button () and the Vertical Align Center button () to align the “V” to the square.

Choose Select > Deselect (if available) and then choose File > Save.

Choose View > Pixel Preview to turn it off.

Choose View > Fit Artboard In Window.

Choose File > Export > Export For Screens.

In the Export For Screens dialog box that appears, you can choose between exporting artboards and exporting assets. Once you decide what to export, you can set the export settings on the right side of the dialog box.

With the Artboards tab selected, on the right side of the dialog box, ensure that All is selected.

You can choose to export all or a specific range of artboards. This document has only one artboard, so selecting All is the same as selecting a range of 1. Selecting Full Document will export all artwork in a single file.

Click the folder icon () to the right of the Export To field. Navigate to the Lessons > Lesson16 folder, and click Choose (macOS) or Select Folder (Windows). Click the Format menu, and choose JPG 80.

In the Formats section of the Export For Screens dialog box, you can set a Scale factor for the exported asset, create (or in this case edit) a suffix for the filename, and change the format. You can also export multiple versions with different scale factors and formats by clicking the + Add Scale button.

Click Export Artboard.

The Lesson16 folder should open, and you should see a folder named “1x” and, in that folder, the JPEG image.

Close the folder, and return to Illustrator.

With the Selection tool () selected, click to select the artwork labeled “VENUS” toward the middle of the artboard.

Press Command and + (macOS) or Ctrl and + (Windows) several times to zoom in to the artwork.

Press the Shift key, and click to select the artwork labeled “EARTH” to the right of the selected artwork.

With the artwork selected, choose Window > Asset Export to open the Asset Export panel.

The Asset Export panel is where you can save content for export now or later. It can work in conjunction with the Export For Screens dialog box to set export options for the selected assets, as you’ll see.

Drag the selected artwork into the top part of the Asset Export panel. When you see a plus sign (+) appear, release the mouse button to add the artwork to the Asset Export panel.

The assets are tied to the original artwork in the document. In other words, if you update the artwork in the document, the corresponding asset is updated in the Asset Export panel. Every asset you add to the Asset Export panel is saved with the panel and will stay there until you delete it from either the document or the Asset panel.

Click the name of the item in the Asset Export panel corresponding to the VENUS graphic and rename it Venus. Click the name of the item in the Asset Export panel corresponding to the EARTH graphic and rename it Earth. Press Return or Enter to accept the last name.

The asset name that appears is based on what the artwork is named in the Layers panel if you drag the asset into the panel. Also, how you name assets in the Asset Export panel is up to you. I name them so I can more easily keep track of what each asset is used for.

Click the Venus asset thumbnail to select it in the Asset Export panel.

As you add assets to the panel using various methods, you will need to first select the assets you’d like to export.

In the Export Settings area of the Asset Export panel, choose SVG from the Format menu, if necessary.

SVG is perfect for a website, but sometimes a co-worker may ask for a PNG version or other format of the same logo as well.

Click the + Add Scale button to export the artwork in another format (in this case). Choose 1x from the scale menu so the asset is exported at 100% of the size of the artwork on the artboard and ensure that Format is set to PNG.

In this case, an SVG file and a PNG file will be created for every selected asset in the Asset Export panel. You can also set a scale (1x, 2x, etc.) if you need multiple scaled versions of the selected assets—perhaps for Retina and non-Retina displays for raster formats like JPEG or PNG. You can also add a suffix to the exported filename. A suffix could be something like “@1x” to indicate the 100% scaled version of an exported asset.

With the Venus thumbnail selected at the top of the Asset Export panel, click the Export button at the bottom of the Asset Export panel to export the selected asset. In the dialog box that appears, navigate to the Lessons > Lesson16 > Asset_Export folder, and click Choose (macOS) or Select Folder (Windows) to export the assets.

Both the SVG file (Venus.svg) and the PNG file (Venus.png) will be exported to the Asset_Export folder in separate folders.