Generating multiple image sizes and formats from the same layer
If you’re preparing images for print, you know how people will view them, and you can be sure that one size and format will work well. However, the web is a very different environment. People view websites on a variety of devices, from cellphones to desktop computers, and webmasters construct their sites in different ways. You often need to provide the same image in multiple sizes and formats, so that the appropriate one is available for any particular viewing environment.
You can use Adobe Generator to create multiple versions of a single asset by adding image file names to the layer or layer group name. You need only separate them with a comma for Generator to recognize that you want to generate multiple assets.
For this project, you’ll generate multiple versions of the logo so that it can be used on various sites that promote the museum.
- In the Layers panel, rename the logo.jpg10 layer with the following name: 300% logo_8.jpg, 100% logo.gif, 50% logo.png24.
Photoshop generates a logo_8.jpg that is an 80% quality JPEG image scaled to 300%, a logo.png file that is a 24-bit PNG image scaled to 50%, and a logo.gif file that is a GIF image scaled to 100%.
The first image is a larger version of the logo that will work for a full-page web banner. Because the original logo layer is a Smart Object, it can be resized to 300% without losing resolution.