Close

Photoshop Export panel Instructions

1

Content

Demo videos

Installing Extensions for Photoshop CC2015

Download the zip file and unzip it.

OSX

Copy the CC2015 extension folder to
/Library/Application Support/Adobe/CEP/extensions/

Windows

Copy the CC2015 extension folder to the appropriate directory.
Windows 64: C:Program Files (x86)Common FilesAdobeCEPextensions
Windows 32: C:Program FilesCommon FilesAdobeCEPextensions
If the AdobeCEPextensions folder does not exist, you can create it.

Restart Photoshop. You’ll find the extension at Window > Extensions > Name of the Extension

Do not modify the extension folder. It will cause a  “The extension could not be loaded because it was not properly signed” error.

Only selected switch

onlySelected


If the “Only Selected” switch is off, every layer and group will be exported when you click the “Export Assets” button.

If the “Only Selected” switch is on (blue), only the selected layers and groups will be exported when you click the “Export Assets” button.



Image format checkboxes

formats


Here you can select the format or formats that will be exported. The available formats are .png, .psd and jpeg.

Update: We recently added the .svg format as well.

None of the three formats compress the images. Check the Save for web section for more info on image compression.



Size checkboxes

size


There are 3 checkboxes for predefined sizes , @1x, @2x and @3x

There is a checkbox for exporting at a custom size. This checkbox is accompanied by a text box in which you can input the desired size.



How to change the crop bounds

crop_Document

layers


You can change the bounds of an asset to be cropped to whatever size you want.

  1. Create a group with the name of your asset.
  2. Inside your group you can place all the layers you want to appear in your asset.
  3. Inside your group place a shape layer with the “#” character in front of its name. This layer is going to be the bounds of your asset. Your asset is going to be cropped at whatever size the #Bounds layer is.
  4. Select your folder.
  5. Press the Export Assets button.



Create assets sheet

createSheet

This is the second of two sections included in this panel. With this section you can create a sheet with existing assets. All assets will be automatically organized with the correct structure and naming in the layers panel,  making it easy to modify and export the assets again.



To create a sheet click the Create Sheet button and select the folder that contains your assets.



Margins and column text boxes

createSheetChecks


There are 2 Margin text boxes, one for setting the horizontal spacing and one for the vertical spacing of the assets that will be added to the sheet.

The “Column” text box allows you to input the number of columns in which you wish to arrange your assets on the sheet.

  • H – Margin = 20 px
  • V – Margin = 20 px
  • Number of columns = 6

 

The following image shows a sheet created with the default values.

importedSheet

This next image shows how the corresponding ready-to-use layers panel is automatically organized, named and structured.

importedLayers



Settings

settings

Note: If you don’t see the top bar of the panel just resize your panel vertically to make it fit.

Light angle and altitude checkboxes

light


These checkboxes are used when you have styles that use Global Light applied to your layers, for example, the Drop Shadow Style. If you don’t have styles with Global Light or the Light Distance is 0;  these settings are ignored.

All your assets will be exported with the Global Light values in the panel.

The default values are:

  • Light Angle: 90
  • Light Altitude: 30



Crop checkbox

crop


If the “Crop” checkbox is not selected, all the layers and/or groups will be exported at the full document size.

If the “Crop” checkbox is selected, all the layers and/or groups will be cropped and exported at their content maximum size, including applied effects.



Save for web checkbox

saveForWeb


The “Save for Web” checkbox only affects the .jpeg format.

If the “Save for Web” checkbox is selected, the .jpeg assets will be 60% compressed.