Posts tagged "Generator"

October 6, 2014

New Extract Assets for Generator in Photoshop CC

Extract Assets is a new feature in Photoshop that provides an interface on top of Adobe Generator to help automate the creation of assets  for web and screen design from Photoshop files. The Extract Assets command allows you to define which layer(s) you want to create assets for, their size, file format and saved location on disk. Extract Assets automates the renaming of layers using the Generator syntax. To use Extract Assets, open a PSD file and select the layers you want to create assets for.

2014_10Extract01

Then, choose File > Extract Assets (or use the keyboard shortcut Cmd + Option + Shift + W (Mac) | Ctrl + Alt + Shift + W (Win). The default file format is PNG but additional formats can be selected using the drop down menu to the right of the assets (PNG-8, PNG-32, PNG-24, JPG, GIF, and SVG are all supported). Once selected, additional file format specific settings can be chosen (for example, the compression level for JPEG files).

2014_10Extract02a

To set the resolutions for the assets that are created either click the Extract Assets resolution options across the top right of the dialog or, for additional options click the gear icon to the right of the options (or click the Settings… button in the lower left).

2014_10Extract03

Typically for screen design you will want to create assets in 1x and also a 2x version, but you can choose from any of the Asset Resolutions listed in the Settings dialog. Once an Asset Resolution is selected, add a Suffix for each resolution and folder name (to save the assets within their own subfolder).

In addition, you can turn on or off the automatic generation of assets when your Photoshop document is changed.  With automatic generation enabled, assets will be saved next to your Photoshop document in a folder named the same as your Photoshop document with -assets added. The assets in this folder will be continuously regenerated when any of the layers you want assets for are updated in that document.

2014_10Extract04

If you forget to select the layers (or want to make a change to the layers that you have selected), you can do so without having to back out of the Extract Assets dialog. To add another layer, select one or more layers in the Layers panel and then click Add to add the selected layers. To remove them, select them in the Extract Assets dialog and click the trashcan icon.

2014_10Extract05

Once you are ready to extract assets, click on the ‘Extract’ button and choose a location for your save assets. Once the assets are extracted, the operating system will show you the folder and all of the assets that have been created. If you prefer not to create the assets at that time, you can choose ‘Done’ to rename the layers using the Generator syntax). Click here for more information on the Generator syntax.

Note: assets and previews will not be generated if there is a comma in the layer name. In addition, each asset/layer must have a unique name to be created.

8:05 AM Permalink
September 18, 2014

49/50 – Automatic Asset Creator – Generator in Photoshop CC

If you need to automatically generate assets from individual (or groups of) layers in Photoshop, then you should check out Adobe Generator in Photoshop CC (File > Generate > Image Assets). By using specific parameters to name files, Photoshop can automatically create JPEG, PNG or GIF images.

For example, if you mock up a web page and then want Photoshop to export individual graphics, you can name a layer with the desired extension: banner.gif or photo.jpg or logo.png. If you need more than one version (different file formats for example) for the same layer, add a comma between the names:  photo.jpg, photo.png Note: you can also use the plus (+) symbol instead of the comma.

JPEG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency. If you need to set additional options for file formats, include them in the layer name as well:

• For JPEG files, set the compression quality by naming the layer (or layer group) to  photo.jpg5 or photo.jpg50% to give you an asset set to 50% compression quality.

• For PNG files, set the options for logo.png.8, logo.png.24, or logo.png.32

When exporting assets, if no size is determined, then the asset will be generated at the same size as the original. However, you are also able to  determine the size of the image that you want Photoshop to output using the layer name. The size goes at the beginning of the layer name and can be set in pixels, inches, percentage (%) and/or mm. Do not put a space between the numeric value and the unit of measurement. For example, 40px x 40px logo.png will generate an asset while 40 px x 40 px logo.png will not. You also need to leave a space between the size and the layer name. If you don’t add any units, then Photoshop will assume that you want pixels. For example:

200% banner.jpg will create a JPEG file that is 200% of the original

40 x 40 logo.png will create a png file 40 x 40 pixels (as would 40px x 40px logo.png)

2in x 60 graphic.gif will create a GIF file 2 inches by 60 pixels.

As you can see by the last example, you can mix the units of measurements. You can also use the question mark “?” to choose one dimension and simply have Photoshop resize the asset proportionally (similar to setting the long (or short) dimension of a file when exporting in Lightroom, Saving images in Camera Raw, or using the Fit Image option in Photoshop (File > Automate).

Before automatically generating assets, you must first choose File > Generate Image Assets. This “enables” Generator. Photoshop will save all of the necessary assets in a subfolder alongside the source PSD file. Note: If you have not saved the source file, then Photoshop will save the assets to the desktop.

A few last tips:

• Name a layer group to have all of the layers within the group saved as one asset.

• Do not use illegal characters (such as / \ : * etc) – no asset will be generated.

• If you clip a layer to a shape, name the topmost clipped layer to generate the asset.

• If your layer extends beyond the visible image area (or if it’s partially hidden by another layer), all of the content will be exported.

This help document is also informative: Generate image assets from layers in Photoshop CC

 

5:40 AM Permalink
October 15, 2013

Introducing Adobe’s Automatic Asset Creator – Generator

If you need to automatically generate assets from individual (or groups of) layers in Photoshop, then you should check out Adobe Generator in Photoshop CC (v14.1). If you name layers using specific parameters, Photoshop can automatically create JPEG, PNG or GIF images based on the layer/layer group name.

For example, if you mock up a web page and then want Photoshop to export individual graphics, you can name a layer with the desired extension: banner.gif or photo.jpg or logo.png. If you need more than one version (different file formats for example) for the same layer, add a comma between the names:  photo.jpg, photo.png Note: you can also use the plus (+) symbol instead of the comma.

JPEG assets are generated at 90% quality by default. PNG assets are generated as 32-bit images by default. GIF assets are generated with basic alpha transparency. If you need to set additional options for file formats, include them in the layer name as well:

• For JPEG files, set the compression quality by naming the layer (or layer group) to  photo.jpg5 or photo.jpg50% to give you an asset set to 50% compression quality.

• For PNG files, set the options for logo.png.8, logo.png.24, or logo.png.32

When exporting assets, if no size is determined, then the asset will be generated at the same size as the original. However, you are also able to  determine the size of the image that you want Photoshop to output using the layer name. The size goes at the beginning of the layer name and can be set in pixels, inches, percentage (%) and/or mm. Do not put a space between the numeric value and the unit of measurement. For example, 40px x 40px logo.png will generate an asset while 40 px x 40 px logo.png will not. You also need to leave a space between the size and the layer name. If you don’t add any units, then Photoshop will assume that you want pixels. For example:

200% banner.jpg will create a JPEG file that is 200% of the original

40 x 40 logo.png will create a png file 40 x 40 pixels (as would 40px x 40px logo.png)

2in x 60 graphic.gif will create a GIF file 2 inches by 60 pixels.

As you can see by the last example, you can mix the units of measurements. You can also use the question mark “?” to choose one dimension and simply have Photoshop resize the asset proportionally (similar to setting the long (or short) dimension of a file when exporting in Lightroom, Saving images in Camera Raw, or using the Fit Image option in Photoshop (File > Automate).

Before automatically generating assets, you must first choose File > Generate Image Assets. This “enables” Generator. Photoshop will save all of the necessary assets in a subfolder alongside the source PSD file. Note: If you have not saved the source file, then Photoshop will save the assets to the desktop.

A few last tips:

• Name a layer group to have all of the layers within the group saved as one asset.

• Do not use illegal characters (such as / \ : * etc) – no asset will be generated.

• If you clip a layer to a shape, name the topmost clipped layer to generate the asset.

• If your layer extends beyond the visible image area (or if it’s partially hidden by another layer), all of the content will be exported.

5:05 AM Permalink