Exporting Assets from a 1x Design

Topics Covered in This Photoshop for Web Design Tutorial:

Master Adobe Generator for streamlined image export workflows, create optimized PNG, GIF, & JPEG files directly from your designs, export PNG-8 with partial transparency for modern web graphics, learn the professional approach to exporting 1x & 2x graphics for responsive designs, troubleshoot why Photoshop sometimes exports low-resolution JPEGs and implement proven fixes

Exercise Preview

Exercise Overview

Photoshop offers multiple pathways for exporting graphics optimized for websites and user interfaces. While you've already explored Save for Web and Export As in previous exercises, Adobe Generator represents a more sophisticated approach to asset management. This powerful feature transforms your layer organization into an automated export system, eliminating the tedious process of manually exporting individual graphics from complex designs. For web professionals managing multiple breakpoints and asset variations, Generator becomes an indispensable workflow accelerator.

Naming Layers for Export

The magic of Adobe Generator lies in its intelligent layer naming system. By following specific naming conventions, you can transform any layer into an export-ready asset without leaving your design environment.

1. Begin by opening the NYC page from our earlier exercises. In Photoshop, navigate to File > Open or use the keyboard shortcut Cmd–O (Mac) or CTRL–O (Windows).

2. Navigate to Class Files > yourname-Photoshop for Web Class > Export Image Assets and double–click nyc-desktop.psd.

3. If guides are visible and distracting your view, press Cmd–; (Mac) or CTRL–; (Windows) to hide them, creating a cleaner workspace.

4. Let's start with the prominent taxicab photograph. Since this Photoshop file was designed at 1x resolution, we'll begin by exporting this photo as a standard 1x JPEG.

   Adobe Generator operates entirely through layer naming—there's no traditional interface to navigate. In the Layers panel, locate and rename the cab layer to cab.jpg.

   This simple naming convention immediately signals Photoshop to generate a JPEG file named cab.jpg from this layer's content. The file extension becomes both the export format and quality instruction.

5. In the Layers panel, expand the photos folder located toward the bottom of your layer stack.

6. Within this folder, rename the skyline layer to skyline.jpg

7. Web-optimized filenames follow strict conventions: lowercase letters, no spaces, and only alphanumeric characters with hyphens or underscores. Rename the Central Park layer to central-park.jpg to meet these professional standards.

   TIP: Streamline your layer renaming workflow by pressing Tab to advance to the next layer name, or Shift–Tab to return to the previous one.

8. Complete this section by renaming the bridge layer to bridge.jpg

Exporting the Assets

With your layers properly named, it's time to activate Adobe Generator's automated export system.

1. Enable Adobe Generator by navigating to File > Generate > Image Assets and checking this option.

   NOTE: While Adobe calls this technology "Generator," you'll notice this term rarely appears in Photoshop's interface. The menu item you just selected is the primary way to activate this powerful feature.

2. Observe Generator's behind-the-scenes work by switching to your Desktop (minimize or hide Photoshop temporarily).

3. Navigate to Class Files > yourname-Photoshop for Web Class > Export Image Assets.

4. Adobe Generator has automatically created a nyc-desktop-assets folder, intelligently named after your source Photoshop file. Open this folder to examine the generated assets.

5. Each renamed layer has been exported according to your specifications. To preview these files quickly:
   • Mac: Press the Spacebar to launch Quick Look for instant file previews.
   • Windows: Double–click files to open them in Photoshop or your default image application. Close when finished reviewing.

6. Notice that cab.jpg weighs in at approximately 600 KB—significantly larger than optimal for web delivery.

7. Keep this folder accessible on your desktop and return to Photoshop to optimize file sizes.

Changing JPEG Quality

Photoshop's default 90% JPEG quality produces unnecessarily large files for most web applications. Professional web workflows typically use more aggressive compression.

1. Photoshop's default 90% JPEG quality exceeds most web requirements. In the Layers panel, rename the cab.jpg layer to cab.jpg-65% to apply more appropriate web-optimized compression.

2. Return to the nyc-desktop-assets folder on your Desktop.

3. The file size has dropped to approximately 300 KB—a 50% reduction from the original 600 KB while maintaining excellent visual quality.

4. Verify the visual quality remains acceptable for your standards:

   • Mac: Press the Spacebar to preview the optimized file in Quick Look.
   • Windows: Double–click to open the file in your preferred application, then close when finished evaluating.

5. Maintain access to this folder and return to Photoshop for the next optimization technique.

Exporting a PNG-8 with Partial Transparency

Vector graphics and logos require different export strategies than photographic content. Let's explore PNG-8 optimization for graphics with limited color palettes.

1. In the Layers panel, expand the nav folder near the top of your layer stack.

   While the NYC logo would ideally be exported as SVG for web use, since it exists as a vector Smart Object, we'd need Illustrator for proper SVG generation (covered in previous exercises). Instead, we'll create a PNG using Adobe Generator—particularly valuable for HTML emails, mobile apps, and legacy browser support.

2. Navigate into the nav folder and rename the NYC Logo layer to nyc-logo.png-8

   NOTE: This logo's limited color palette makes PNG-8 the optimal choice. Using simply .png would default to PNG-32 (essentially PNG-24 with transparency), while .png-24 provides millions of colors without transparency support.

3. Switch to the nyc-desktop-assets folder on your Desktop.

4. A new nyc-logo.png file should now appear in your assets folder.

5. Preview this newly generated asset:

   • Mac: Press the Spacebar to open Quick Look preview.
   • Windows: Double–click to open in your default application, closing when finished reviewing.

6. Observe how PNG-8 maintains partial transparency—a significant advantage over GIF format. Both Generate Image Assets and Export As utilize identical optimization engines, ensuring consistent results across workflows.

   NOTE: Unlike Save for Web, both Export As and Generate Image Assets cannot specify custom color counts for PNG-8 or GIF files. All PNG-8 exports utilize the complete 256-color palette. When precise color control is required, use Save for Web or implement slicing techniques covered in upcoming exercises.

7. Return to Photoshop to continue the workflow.

8. Execute File > Save to preserve your updated layer naming structure.

Updating Graphics

One of Generator's most powerful features is its real-time asset updating. When source content changes, exported assets automatically regenerate without manual intervention.

1. Imagine your client requests the colorful NYC logo variant instead of the current version. In the Layers panel, ensure the nyc-logo.png-8 layer remains selected within the nav folder.

2. Navigate to Layer > Smart Objects > Replace Contents.

3. In the resulting dialog, browse to Class Files > yourname-Photoshop for Web Class > NYC and double–click NYC Logo.ai.

4. In the preview window, click OK to implement the change.

5. At the document's top, verify that the NYC logo now displays the vibrant, colorful version.

6. Without saving or performing additional actions, Generator has already updated your exported asset. Confirm this by returning to the nyc-desktop-assets folder on your Desktop.

7. Preview the updated nyc-logo asset by pressing Spacebar (Mac) or opening the file in Photoshop (Windows), then closing when finished.

   The logo has been automatically regenerated with the new colorful design. Adobe Generator continuously monitors your document, instantly exporting changes as they occur—a workflow revolution for iterative design processes.

Exporting 2x Assets

Modern responsive web design demands multiple asset resolutions for optimal display across standard and high-density screens. Generator excels at producing multiple variations from single layers.

This Photoshop file represents a 1x design baseline. Professional web development requires both 1x and 2x asset versions. Adobe Generator can simultaneously export multiple resolutions from identical layers using advanced naming conventions.

1. Begin with the logo optimization. The 2x version requires 200% scaling from the 1x baseline, necessitating specific scale instructions and @2x filename convention. Modify the nyc-logo.png-8 layer name by adding the following bold text, creating this complete layer name (include the comma):

   • nyc-logo.png-8, 200% nyc-logo@2x.png-8

   NOTE: Expand your Layers panel by dragging its left edge if the complete layer name isn't visible.

2. Apply the same dual-export technique to the cab.jpg layer. High-resolution images require additional compression to maintain reasonable file sizes (as demonstrated in earlier exercises). Rename this layer to:

   • cab.jpg-65%, 200% cab@2x.jpg-35%

3. Apply this pattern to all three layers within the photos folder, appending -65%, 200% filename@2x.jpg-35% to create these complete layer names:

   • skyline.jpg-65%, 200% skyline@2x.jpg-35%
   • central-park.jpg-65%, 200% central-park@2x.jpg-35%
   • bridge.jpg-65%, 200% bridge@2x.jpg-35%

4. Review Generator's output by navigating to File > Open.

5. Browse to Desktop > Class Files > yourname-Photoshop for Web Class > Export Image Assets > nyc-desktop-assets.

6. Select both resolution variants of the bridge photo for comparison. Click once on bridge.jpg, then Shift–click on bridge@2x.jpg.

7. Click Open to load both files.

8. Compare bridge.jpg and bridge@2x.jpg by switching between tabs. For accurate quality assessment, view both files at 100% zoom level.

   Both files should demonstrate excellent sharpness and appropriate compression at their respective resolutions—the hallmark of professional multi-resolution asset preparation.

9. Close both bridge.jpg and bridge@2x.jpg files.

10. Test another photo pair by navigating to File > Open.

11. Select central-park.jpg with a single click, then Shift–click on central-park@2x.jpg.

12. Click Open to load both variants.

13. Compare both central-park files, noting that the 2x version exhibits unacceptable blur—a quality issue requiring investigation and resolution.

Why Photoshop Sometimes Exports Low-Res JPEGs & How to Fix It

This quality degradation stems from a persistent Photoshop bug affecting JPEG-based Smart Objects. Understanding and resolving this issue is crucial for professional asset management workflows.

When photographs are originally placed as JPEG files, Adobe Generator often produces subpar 2x enlargements despite Smart Objects containing sufficient resolution data. This issue doesn't affect Smart Objects originally placed as Photoshop (.psd) files, clearly indicating a format-specific bug that has persisted across multiple Photoshop versions. The solution involves converting JPEG Smart Objects to PSD format before re-importing.

1. Close both central-park files to return to a clean workspace.

2. In Photoshop, ensure you're working in nyc-desktop.psd.

3. In the Layers panel, locate the central-park layer within the photos folder and double–click its layer thumbnail to access the Smart Object contents.

4. The source JPEG opens in a new Photoshop window. Navigate to File > Save As and configure these settings:

   • Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Export Image Assets.

   • Set Format (Mac) or Save as type (Windows) to Photoshop and click Save.

   NOTE: For future projects, convert pixel-based graphics to PSD format before executing File > Place Embedded (or Linked). This proactive approach prevents the JPEG bug while preserving layer structures that would be lost in flattened JPEG format.

5. Close the converted file, returning to nyc-desktop.psd.

6. Instruct Photoshop to utilize the new PSD file instead of the problematic JPEG. Ensure the central-park layer remains selected in the Layers panel.

7. Execute Layer > Smart Objects > Replace Contents.

8. In the dialog, navigate to Class Files > yourname-Photoshop for Web Class > Export Image Assets and double–click Central Park.psd.

   NOTE: The layer name retains its .jpg suffix since that specifies the desired export format, not the source file type.

9. Verify the fix succeeded by navigating to File > Open.

10. If necessary, browse to the nyc-desktop-assets folder within yourname-Photoshop for Web Class > Export Image Assets.

11. Select both central-park variants: click central-park.jpg, then Shift–click central-park@2x.jpg.

12. Click Open to load both files.

13. Compare the 1x and 2x central-park files, confirming they now exhibit professional-grade sharpness after Generator's automatic regeneration.

    NOTE: The skyline image suffers from the same JPEG-based bug, requiring identical treatment for optimal results. The bridge layer avoided this issue because it originated as a Photoshop (.psd) file.

14. Close both central-park files to complete the comparison.

15. Save and close nyc-desktop.psd to preserve your optimized workflow setup.