About this lesson
This is an advanced technique for those who want to design their web pages primarily in Photoshop.
There are no related exercise files for this lesson, or we cannot provide them due to copyright issues.
Export your layers as individual web components.
When to use
This is an advanced technique for those who want to design their web pages primarily in Photoshop. The generator allows you to export the document as web page images so that changes to each layer will be updated automatically.
Turn on generator
- With the design that you want to export images for, go to Menu/file/Generate/Image Assets.
Convert layers into images
- Select the layers that you want as a separate image.
- Command or Control + G to group them.
- Rename the grouped file with a web compatible extension.
- Examples: .png, .jpg.
- This will generate a folder (in the same place as the file is saved) with the layers saved as web reedy image.
Specify image quality
- With files types like jpg you can specify the level of quality (file size) required by adding a number after the extension.
Save the layer ‘Bagel’ as ‘Bagel.jpg6’ will save the image as a JPG at 60% quality.
- Now that the generator is running, any changes that you make in the Photoshop document will now update the file images automatically as well.
Adding a 2nd retina quality image
- Save the layer ‘Bagel’
- As ‘Bagel.png,200%Bagel2x.png.’ will save the image as a png quality, as well as a high quality version for retina displays.
Lesson notes are only available for subscribers.