Saturday, January 26, 2019

Adobe Photoshop Tech Tip: Saving for the Web Feature:

Illustrators, or designers that use Photoshop and Illustrator for print, sometimes struggle when converting their files for web use. Here is a general rule of thumb for the differences between preparing files for print versus for the web:

Print: highest quality settings possible to match your printer's settings
Web: highest quality possible without sacrificing download speed.

Adobe Photoshop has a Save for Web feature that allows you to prepare files for online use. You can choose from the following file extensions to save your work:

GIF: for hand drawn illustrations that are scanned or animated GIFs
PNG: for use when needing to save a file with transparencies
JPG: great for photos and common web format.

For this example, I am using an Illustrator file that I opened in Photoshop. Normally, I take a screen shot of an Illustrator file and open it in Photoshop. In Photoshop, choose File > Save for Web:

Save for the web feature in Photoshop

This will open your file in a new window. From here, you can choose your options in the top right, use preset features in Photoshop, or create your own settings.

Save for the web feature in Photoshop

In the lower left, it will give you the current status, as well as the download speed. You can change the download speed as needed. Also, I choose "progressive" under the format selections. This puts a snapshot image online of your image as it downloads. For me, I find the JPEG 80 percent settings to work just fine.

Choose save when you are ready, and it will save a copy of your work.

There are other settings you can experiment with, such as the 2 up and 4 up tabs, which will allow you to preview multiple settings simultaneously. This is just a quick way for "non web" designers to save images for the Web. Enjoy!

No comments:

Post a Comment