- Renaming layers and layer groups
- Evaluating and revising generated assets
- Generating multiple image sizes and formats from the same layer
- Preview images in a browser
Evaluating and revising generated assets
Look at the assets that were generated to ensure they meet your needs. You can quickly evaluate them using Bridge.
- Choose File > Browse in Bridge to open Adobe Bridge.
- Navigate to the Lesson13/13Working-assets folder.
- In Photoshop, rename the gallery1.jpg5 layer group to gallery1.jpg10. Then rename the logo.jpg5 layer to logo.jpg10.
- Rename the new-wing.gif layer to new-wing.png.
- Return to Bridge.
- Return to Photoshop, and rename each of the gallery layer groups, appending .jpg10 to each one to generate buttons the rest of the buttons.
There are three images in the folder: gallery1.jpg, new-wing.gif, and logo.jpg. Each of the images is surrounded by a white border. That’s fine for the buttons and the logo, because they’re on a white background on the site. But the New Wing artwork overlaps another image, so the white border won’t work. Additionally, the images all appear pixelated. The file sizes are currently very small, so there’s room to increase the file resolutions. You’ll return to Photoshop and generate the assets again, using different settings.
First, you’ll increase the quality of the gallery button and logo files from 50% to 100%.
Next, you’ll try a different format for the New Wing image. GIF images are saved with a white border, but PNG files have a semi-transparent background and shadows.
The images look better. Their files sizes are much larger, but they’re still reasonable for use on the web. These settings should work.
Generating assets is as simple as renaming layers and layer groups, but that renaming process can still be tedious if you have a large number of layers to rename. To reduce frustration, test your settings on a single layer or layer group first, before renaming them all.