Optimizing and Exporting Images in Photoshop

Photoshop gives us a number of different methods for exporting our images. The Export option will help us decide on the best file format for our image and see how quickly our image will load on various connection speeds. We also have access to the more familiar Save for Web option, which functions the same way as Illustrator's Save for Web (Legacy) option.

Since we've finished creating the graphics we needed to make in Photoshop, we're now ready to optimize them and save them in a web-ready format. We'll use the Export option today to ready our images for the web.

Let's work on exporting our graphics now. We'll start with the shaped image.

Step1. Switch to the Photoshop window, if necessary.

Step2. Switch to the dog.psd tab, if necessary.

Step3. To begin exporting the shaped image, in the Menu bar,

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

The Export As dialog box opens, with the active graphic showing in the view screen:

From here, we can do a number of things with our image. We can change the image size and canvas size, and see how our image will look in different file formats. As we want to keep our transparent areas, we will accept the PNG format that Photoshop automatically chose. Then we'll export the file.

Step1. To complete exporting our image,

Click

Step2. To export our images to the right folder, in the Export to Folder dialog box,

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

Step3. Ensure that the filename in the File Name field is dog.png - if it is not, rename file to dog.png.

Step4. To finish saving the file,

Click Save

Photoshop will export our file according to the settings we chose, and will give our exported file the same name as our Photoshop document. Let's export our other image using the Save for Web option.

Exporting Images Using Save for Web

We've previously used the Save for Web option in Illustrator, and it works similarly in Photoshop. Let's now use it in Photoshop to export the rest of our images.

Step1. Switch to the banner.psd document tab.

Step2. To open the Save for Web dialog box, in the Menu bar,

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

Step3. Export banner.psd as banner.jpg, and save in the images folder inside the hannah_website folder.

Step4. Close Photoshop.

We have finished exporting our images. Now, let's look at the finished site.