- Developing a new website
- Scenario
- Working with thumbnails and wireframes
- Creating web assets using Adobe Generator (optional)
- Review questions
- Review answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating web assets using Adobe Generator (optional)
Adobe Generator is one of the new web-oriented tools that allow you to export web assets from a Photoshop file in a variety of sizes, resolutions, and even file types. Best of all, this feature works in real time, exporting image assets from your file based on user-specified attributes added to the layer name. In this exercise, you’ll export web image assets from a webpage mockup created in Photoshop.
Working with Adobe Generator
In this exercise, you’ll work with an Adobe Photoshop document to prepare assets for your web project.
Launch Photoshop CC or higher.
Open GreenStart_mockup.psd from the lesson04 folder.
The Photoshop file contains a complete mockup of the GreenStart site design, comprised of various vector-based design components as well as image assets stored in separate layers. Note the use of colors and gradients in the design.
Choose File > Save As. Name the file myGreenStart_mockup.psd.
If necessary, choose Window > Layers to display the Layers panel.
Observe the names and contents of the layers and layer groups.
The layers and layer groups are named for the webpage components.
Open the header layer group, and observe the contents.
The header group contains two text elements and four graphical elements. Often, it’s difficult to understand how a graphic component is built or for what purpose it is intended by looking at the layer names alone.
In the GreenStart layer, click the eye icon
to toggle the layer visibility off.The text “greenstart” disappears from the layer.
In the fern layer, click the eye icon
to toggle the layer visibility off.The image of the fern disappears. Using this method, you can identify each element of the header and see what role it plays in the creation of the overall design. The number and type of layers and the level of detail used here aren't necessary for a mockup that you merely want to use for a client approval. This file was set up specifically to create many of the final assets for the page design.
- Click the eye icon to toggle the GreenStart and fern layer back on.
)
)
)
)
)
Exporting assets from Photoshop
The fern layer will be used to create one component of the header background. Photoshop generates a web asset automatically if you add a file extension to the layer name.
Double-click to edit the name of the fern layer to fern.png, and press Enter/Return to complete the name.
When activated, Generator works in the background exporting assets in real time.
Choose File > Generate > Image Assets.
The next time you look at the Generate menu option, a checkmark will appear beside Image Assets, indicating that Generator is active.
Choose File > Open.
Navigate to the lesson04 > resources folder.
A new folder has been created and named myGreenStart_mockup-assets by Generator. Whenever you add file extensions to the layer names and enable Generator, it creates a folder and fills it with assets automatically, based on the layer names and settings.
Navigate to the myGreenStart_mockup-assets folder created by Photoshop.
Open fern.png.
The file contains the fern with a transparent background. Note how the image displays a drop shadow. The shadow is a permanent part of the image, no longer created by a Photoshop effect.
Choose Image > Image Size. Note the dimensions and resolution of the image.
Click OK to close the Image Size dialog.
Close fern.png.
)
)
)
)
Creating multiple assets using Generator
Generator can also modify the default export specifications and even create multiple assets at multiple resolutions.
Change the layer name fern.png to 200% fern.png+fern.jpg, and press Enter/Return to complete the name.
Choose File > Open.
If necessary, navigate to the myGreenStart_mockup-assets folder.
The folder contains two images: fern.png and fern.jpg, both created by Generator.
Select fern.png, and open the file.
The file contains the fern, but it appears twice as large as the previous image.
Open fern.jpg.
The file contains the same fern image, but at the original size. JPEGs do not support transparency, so the background is white. There’s no need for the JPEG version of the image. Generator can remove assets automatically, too.
Change the layer name 200% fern.png+fern.jpg to 150% fern.png, and press Enter/Return to complete the name.
The new specification creates a larger, higher-quality image that will display well in regular browsers and on the new crop of higher resolution devices. By your removing “fern.jpg” from the layer name, Generator automatically deletes the JPEG version of the file.
Choose File > Open. Navigate to the myGreenStart_mockup-assets folder.
The JPEG version of the file is no longer visible in the folder. As you can see, Photoshop generates assets based on the name of the layer. You can create an entire set of images for your site design from the layers in this file.
In the Layers panel, open the header layer group.
Change the name of the stripe layer group to stripe.png.
Open the sidebar2 layer group.
Change the layer shopping to shopping.jpg.
Change the layer biking to biking.jpg.
Choose File > Open. Navigate to the myGreenStart_mockup-assets folder.
)
)
)
)
)
The myGreenStart_mockup-assets folder now contains four image files. These files are identical to the ones you will use to build the site template and populate articles in upcoming lessons. As you can see, Generator offers some handy tools for turning this mockup into real web design assets, but the tricks don’t stop there. Photoshop and Dreamweaver have even more collaboration tools to offer, as you will see later.
Check out http://helpx.adobe.com/photoshop/using/generate-assets-layers.html to see a complete explanation of Adobe Generator and how to use it.