Σελίδες

Δευτέρα, 14 Ιουνίου 2010

Dreamweaver

Working with Adobe Generator Adobe Generator is one of the web-oriented tools that allows 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. Let’s take a closer look at this great tool. In this exercise, you’ll work with an Adobe Photoshop document to prepare assets for your web project. 1 Launch Photoshop CC (2017 release). 2 Open GreenStart_mockup.psd from the lesson04bonus/resources folder. P Note: The sample file used in this exercise requires the font Bree Serif, which you can download and install for free from Adobe Typekit. To access this font, and the entire Typekit library, choose Type > Add Fonts from Typekit in Photoshop CC 2015 or higher. The Photoshop file contains a complete mock-up of the GreenStart site design, which is composed 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. 3 Choose File > Save As and name the file resources/myGreenStart_mockup.psd. 4 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. P Note: This exercise should work with any version of Photoshop CC and the lesson- 04bonus lesson files. Be aware if you use a different version than the one pictured, the dialog and menu option may vary. E Tip: It’s a good idea to save the file under a different name so you can refer to the original assets should you make an error. © 2017 Adobe Systems Incorporated and its licensors. All rights reserved. ADOBE DREAMWEAVER CC CLASSROOM IN A BOOK (2017 RELEASE) B4-3 5 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. 6 In the GreenStart text layer, click the eye icon to toggle the layer visibility off. P Note: The motto text uses the font Lucida Grande, which may not be installed on every computer and is not available from Typekit. Feel free to substitute Arial or Verdana for this font in this exercise. The text “greenstart” disappears from the layer. 7 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 mock-up 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. 8 Click the eye icon to toggle the GreenStart and fern layers back on.