Saving the logo for print and web use

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

Now that we've made our logo, we'll want to save it in a few different formats so we have a version available for a number of different uses.

Understanding file types for print and web graphics

When saving a file for use outside of Illustrator, the file type we choose depends on what we’re planning on doing with the image once it’s done — if we want to share the image on the web, we’ll need to save it in a different format than we would if we wanted to print the image. There are certain file types that are better for print, and others that are better for web or screen graphics.

Another thing to think about when saving a file is the compression type each file type uses. There are two main categories of file compression: lossless and lossy.

Lossless image compression keeps all of the original image information when compressing a file, resulting in high quality images — however, images saved using a lossless file format result in larger file sizes than lossy file formats. Lossless compression is ideal when working with images with a high amount of detail or images that will be printed, as all of the original image information will be preserved.

Lossy image compression, on the other hand, results in smaller file sizes by removing some of the original image information. This can sometimes result in lower-quality images, depending on how aggressively the image is compressed. However, images saved in a lossy file format will typically have smaller file sizes than lossless images. This can be helpful when working with images for web use, as smaller files will load more quickly.

The following table outlines some of the more popular image file types, where they’re best used, and describes what some of their main characteristics are.

Comparison of image file types
File type	Compression used	Best used for...
GIF (Graphics Interchange Format)	Lossless	Web/screen graphics, specifically graphics with a limited amount of colors or graphics that need transparency.
24-bit PNG (Portable Network Graphics)	Lossless	Either web/screen or print graphics. For web/screen, PNG supports transparency and larger amount of colors than GIF or 8-bit PNG. For print, can be used for detailed images — main limitation is the fact that PNG files use the RGB color space, so colors may look different printed than on screen.
JPG/JPEG (Joint Photographers Expert Group)	Lossy	Web/screen use, specifically for highly-detailed images, such as photographs or images with texture variation or gradient color transitions.
EPS (Encapsulated PostScript)	Lossless	Print use, especially when you may need to edit or scale a graphic later on.

For the finished logo, we’ll save two separate versions of the file: one for print use and one for web use.

Saving the logo for print use

We’ll use the Save As command to save a print version in the EPS file format, so the document can be edited later on as needed and scaled to a larger or smaller size. In order to make sure we only save the finished logo, we’ll indicate to Illustrator that we want to save artboards as separate files and choose to save only the Final Logo artboard.

In the Artboard panel, ensure that Final Logo is the active artboard.
To start the process of saving the final logo graphic, in the Menu bar,
Click File, Click Save As…
Navigate to the Illustrator Basics folder on your computer.
To change the file type to Illustrator EPS, in the Save as type: drop down,
Click , Click Illustrator EPS (*.EPS)

NOTE: While the file type is listed as Illustrator EPS, the EPS file we’re about to save will be editable by any vector graphics editing program.

To indicate that we want to save the artboards in the document as individual images, near the bottom of the Save As dialog box,
Click the checkbox next to Use Artboards
To indicate that we want to export a range of artboards from our document,
Click the radio button next to Range:
To indicate the specific artboard to export, in the Range: field,
Press & Drag value, type: 4
To finish saving the file, in the lower right corner of the Save As dialog box,
Click
To accept the default settings for saving an EPS file, in the EPS Options dialog box,
Click

We now have an EPS version of our completed logo that we can use for printing, saved with the file name Logos_Final Logo.eps.

Saving the logo for web use

For exporting a web-friendly version of the logo, instead of using Save As, we'll need to use a different option. When saving a file using Save or Save As, Illustrator has a limited number of file formats available for us to use. However, when using the Export As function to save an image, we have a wider variety of file types to use, including multiple file types that are usable on the web. The Export As dialog box offers basic options for exporting graphics that will help us optimize the logo for web use. We’ll save our finished logo as a PNG file with a transparent background.

NOTE: If you would like more control over how your graphic is exported, you can use the Save For Web (Legacy) option in the Export menu. To learn more about using Save for Web (Legacy), view the page Optimizing and Exporting Images in Illustrator from the IT Training course Creating Graphics for the Web.

To start the process of saving the logo as a PNG file, in the Menu bar,
Click File, Point Export, Click Export As…
Navigate to the Illustrator Basics folder on your computer.
To name the file, in the File name: field of the Save As dialog box,
Press & Drag value, type: Final Logo
To change the file type to PNG, in the Save as type: drop down,
Click , Click PNG
Confirm that the Use Artboards checkbox is still checked, and that the Range: radio button is selected.
Confirm that the value in the Range: field is 4.
To continue saving the file, in the lower right corner of the Save As dialog box,
Click
To optimize the resolution for screen use, in the Resolution: drop-down menu, if necessary,
Click , Click Screen (72 ppi)
To indicate we want the background to be transparent, in the Background Color: drop-down menu, if necessary,
Click , Click Transparent
To finish exporting the file as a PNG, at the bottom of the PNG Options dialog box,
Click

We now have a PNG version of our logo that we can incorporate into a website or share online, with the file name Final Logo.png.

NOTE: To learn more about using Illustrator to create web graphics, consider enrolling in the course Creating Graphics for the Web, which discusses the creation of web graphics in Illustrator in more depth.

We've completed saving our logo in both a print-ready and web-ready format. At this point, we can close the file and close Illustrator.

To save the file, on the keyboard, press:
Control key + S
To exit Illustrator, in the Menu bar,
Click File, Click Exit

UITS IT Training Content Library

Saving the logo for print and web use

Available Files

Need help with the available files?

Understanding file types for print and web graphics

Saving the logo for print use

Saving the logo for web use

Saving the logo for print and web use

Available Files

Need help with the available files?

Understanding file types for print and web graphics

Saving the logo for print use

Step 1. Save a copy of the logo as an EPS document.

Saving the logo for web use

Step 1. Use the Export As function to export the logo graphic as a PNG with a transparent background.

Step 2. Save the file, then exit Illustrator.