Photoshop Generator Exporting Images for the Web

Background

Prior to the wide adoption of css based layouts, tables ruled the web. Every website was made of nested tables with more nested tables inside. Which made for a very difficult problem for designers to solve; How do you make better looking web sites?
At first the solution was to color the table rows and columns to add variations. Then image editors like Photoshop adapted a technique called slicing. Which allowed designers to separate their designs up into table like structures without effecting their underlying composition. One better, it also creates tables which allowed them to quickly create the initial page layout for developers to build on.

Fastforward to Today

The web has grown by leaps and bounds, faster computers, better internet access and higher demands on designers for better graphics. Images now play a critical role in telling the story of a design and a brand message. Though a lot of designs can be sliced and have been for years the pipeline is outdated and has an number of pitfalls.

  1. Slice Management
  2. Transparent Effects
  3. Updating Graphics

The Old Way, Slicing for Web

Slice Management is an interesting subject that I know i’ve grown to have a love hate relationship with. Depending on the type of design and the designer, you can get a series of photoshop files a few with labeled folders or one with design comps. Which works great for designing but not for slices which don’t respect folders or layer comps, so if you create a slice it will sample all visible layers.The traditional pipeline for slicing is:
  1. Hide or show layers associated with a specific slice.
  2. Select the slice tool create your slices and export for web.
  3. Delete those slices and start from the beginning and repeat for every design element and folder you need.
‚Äč
ps-cc-gen-slice
As you can see, doing this for hundreds of design elements can be very tedious. Not to mention if/when the designs are updated, you might be forced to redo the whole process again.

How to use Photoshop CC Generator

To enable Photoshop Generator go to the File > Generate >Image Assets

A check mark next to “Image Assets” indicates it’s enabled. If you don’t see it, click on Image Assets to enable. Once enabled, generator will begin working automatically, exporting any layer or layer groups that are tagged for export.

ps-cc-gen-enable

Tagging Layers for Export

The way CC Generator works is by exporting layers/groups with file extensions at the end. Say you had a layer named clouds and you wanted to export it as a png. You would do so by simply adding the extension .png to the layer name (i.e branch1.png). Anytime changes are made, the tagged layers will be automatically exported.
ps-cc-gen-add-layer-ext_2

Where are the images SAVED?

So you tagged the layers you wanted to save but where are the files exported? The depends; if you haven't saved your psd it will be saved to your desktop as {your-document-filename}-assets. How about if you already saved the file, then the folder will be saved along side your psd.
ps-cc-gen-save-local

Cheat Sheet

File Naming Conventions PNG:

example.png and example.png32 – Saves a normal 32-bit png file
example.png24 – Saves a 24-bit png image
example.png8Saves an 8-bit image

File Naming conventions Jpg

example.jpg – Saves a jpg file at 90% compression
example.jpg [1-9] – Saves images based on quality. Number Corresponds to percentage 7(70%)
example.jpg[1-100%] – Saves images based on compression percentage.

Gif naming conventions

example.gif – transparent gif with no options.