2

When I am designing a mockup in Photoshop CC (a website for example), I typically have each element of the website on an individual layer. This is both for production of creating the assets for development and ease of use within photoshop (editing the actual mockup).

When it comes time to create the assets for production, I would copy them, create a new file, paste and save them as needed. However, is this actually efficient and it begs the question of what are other ways of accomplishing this task.

What are efficient workflows for exporting assets from a design mockup in Photoshop CC that are different from previous versions of photoshop. Are there plugins that can assist and are there downsides? Sometimes plugins are not as controllable as manually control for example.

Here are some I can think of with consideration of transparencies etc:

  1. As mentioned above, Copy the layer, open a new file, paste and save
  2. Ctrl Click the layer tile, crop, save, Undo the crop (not generally "safe")
  3. Convert the layer into a smart object, open it, save

Others?

  • There are already several answers to variations of this question. None of them include the new workflows available in Photoshop CC, however, so if that's the version you're using, update the question to reflect that. Otherwise we'll close this as a duplicate. – Alan Gilbertson Mar 27 '14 at 3:55
  • I am using CC and will update accordingly. – Javi Mar 27 '14 at 4:41
3

Photoshop CS6 (Creative Cloud version) introduce a new feature called "Generate" (File > Generate > Image Assets). In Ps CC this also allows creating an Edge Reflow project, although that function remains incomplete while Reflow is in Preview status.

Generate works with layers that are specially named to indicate the image type that Ps should export. Instead of naming a layer "logo," you might name it "logo.png" to have it export as a png. Naming conventions allow you to specify the compression for a jpeg, the bit depth for a png, etc.

Activating the Image Assets feature is as simple as choosing it from the menu. Ps CC creates a new folder called [filename]-assets immediately, and exports any specially named layer (as above) instantly and automatically. This is transparent to the user. Any updates to a layer are immediately updated in the assets folder.

The Ps layers can be smart objects, regular raster layers, shape layers, anything that can be turned into an image.

So far, so fantastic, but cries of "Moar! Moar!" were heard in the various Adobe forums, because all that special naming was tedious. (How easily we are spoiled.) So the indefatigable Russell Brown got to work, and now the most efficient way to use Generate (Ps CC only) is in conjunction with the Adobe Layer Namer extension. This monster of designer decadence renames layers for you, based on your selection of JPG (with a slider to select compression), PNG (with radio buttons for 8, 24 or 32 bit) or GIF. As a bonus, there's a "2x" checkbox that will generate a second image at double the resolution, for High DPI displays.

The best way to wrap your wits around all this is to watch the tutorial video for the Layer Namer. It's frankly much easier to show than to explain.

Layer > Copy CSS, Generate and the Layer Namer have made Photoshop a far more efficient web design tool.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.