Optimizing and Exporting Images in Illustrator

We will use a couple of different export options in Illustrator to optimize the images for our site. Using Illustrator's Export menu options will ensure that our graphics are web ready. To start, we'll need to select the artboard with the image we want to export. We'll be working with the logo first.

Step1. Activate the Selection tool.

Step2. To select the first artboard to export, in the Artboard panel,

Double-Click the Logo artboard

We'll start off with Illustrator's Save For Web (Legacy) option, to see how that works.

Step3. To begin the optimization process, in the Menu bar,

Click File, Point Export, Click Save for Web (Legacy)...

The Save for Web window opens:

Here, we can experiment with different file formats and optimization settings, and then export the images in our chosen file format.

NOTE: An additional dialog box indicating that we should try out "Export For Screens" might pop up when the Save For Web dialog box opens. To close this, in the lower left corner of the dialog box, Click Close.

To determine whether our logo is best suited to be exported as a JPEG or PNG file, we'll want to explore the different options available to us and compare the results. Keep in mind, for images we want to use on the web, it's best to have a small file size while still keeping our images at a good quality. Let's compare a JPEG version of our banner image with a PNG version.

Step4. To see two image previews at the same time, at the top of the Save for Web window,

Click 2-Up

We now see two previews of our image — one is the original Illustrator file, and the other is a GIF preview. Let's switch our views to a JPEG preview and a PNG preview.

Step5. To switch to a JPEG preview, in the Save For Web window,

Click anywhere in the left preview image, Click, Click JPEG High

Step6. Repeat step 5 for the preview on the right, selecting PNG-24 from the Preset dropdown.

Now we see previews of our banner image in the two different file formats. Let's zoom in to compare the quality of the images.

Step7. To zoom in to see the logo better, in the Tools panel on the left side of the window,

Click, Click the image until it is visible in more detail

As you can see, the JPG image is far lower in quality, despite the similarity in image sizes. Also, you can see that the PNG image includes transparency, which is what Hannah was looking for in a logo. Since the PNG version looks better and also includes transparency, we'll save that version.

Step8. To start the process of saving the PNG image,

Click the right preview image

Step9. To save the logo image as a PNG,

Click Save

A dialog box will open, asking where we would like to save our files. We will save our files to a folder within the Bunny Trails Site folder we have been working with today.

Step10. Navigate to the epclass folder.

We want to save this document in the Bunny Trails Site subfolder of the epclass folder.

Step11. To open the correct subfolder,

Double-Click the Bunny Trails Site folder

Step12. To open the images subfolder,

Double-Click the hannah_website folder, Double-Click the images folder

Now that we have specified the Save In location, we need to specify the filename.

Step13. To name our file, in the File name field,

Press & Drag to highlight text, type: logo.png Enter

NOTE: Ensure the filename is typed exactly as seen in the step - this will ensure our images will display correctly when we preview them in the finished website.

Our logo image is now saved.

Because we cannot export all of our graphics at once, we will need to go through the process of exporting each graphic separately. We'll repeat this process for each of the icons we've created.

Exporting Our Icons

Next, we will export our icons using Illustrator's Export As option. As the icons are relatively simple and are only composed of a few colors, we'll export these as PNG files as well.

Step1. To start the process of exporting the icons, in the Menu bar,

Click File, Point Export, Click Export As...

The Export As dialog box will open. We'll need to specify a few settings in this window before we move on.

Step2. If necessary, navigate to the images folder inside the hannah_website folder.

Step3. To name our files, in the File name field, type:

icon

Step4. To choose the PNG file type, in the Save As type field, if necessary,

Click, Click PNG

Step5. To indicate that we want Illustrator to export each individual artboard as its own file,

Click the checkbox next to Use Artboards

Step6. To indicate we want to export a range of artboards, in the bottom section of the Export As dialog box,

Click the Range radio button

Step7. To specify which artboards we want to export, in the Range field, type:

3-4

Step8. To continue the export process,

Click

Illustrator will open the PNG Options dialog box:

From here, we can indicate our desired resolution, any anti-aliasing options, and indicate whether we want a transparent background for our images or not. We can also see a preview of the first image we're exporting.

Step9. To indicate that we want a transparent background for our icons, if necessary,

Click, Click Transparent

The preview at the bottom of the window will indicate we now have a transparent background for our images. We're now ready to finish the export process.

Step10. To complete the export process,

Click

Our files will export to the folder we specified, and their names will be icon_Bone.png and icon_Doghouse.png. Now that all of our Illustrator graphics are exported, let's export the graphics we made in Photoshop now.

Step11. Save the document and close Illustrator.