Import from Adobe Photoshop

Individual standard images can be added by creating new image element from the Create panel. Apart from this option the Coherent Editor has also an unique feature that allow you to import assets from Adobe Photoshop even faster.

This method provides two main benefits:

  • you can import multiple image assets with one action
  • you can keep the positioning of UI elements that was set in Adobe Photoshop

To use the method you just need to follow a few basic steps:

  1. Create your UI assets in Adobe Photoshop
  2. Convert them to slices and export them as HTML page
  3. Open the exported HTML page in the Coherent Editor

Detailed instructions

Creating slices

After you've created your UI assets in Adobe Photoshop you need to convert them to image slices. To do this you can either use the slice tool

and create slices by drag and drop for each UI element that you want to have as separate image file. Rectangle box marks each of the create slices. More information about the Slice tool can be found in the Adobe Photoshop official documentation.

The other option is to create the UI elements as layers and then convert each of them to slices by selecting "new layer based slice" from the "layer" menu. More information about the "layer" menu can be found in the Adobe Photoshop official documentation.

To make the process easier for many layers you can use the actions panel to record the "new layer based slice" action for one layer and then replay it for the rest.

Export as HTML

Once the individual UI elements are set as slices the composition can be exported as HTML page by selecting Save for web from the File/Export menu.

In the window that pops up, select "User slices" - "All user slices" so that there are no unnecessary slices and then

choose "save" and select the uiresources folder in the main folder of the Coherent Editor.

Then simply open the newly created HTML from the file/open menu of the Coherent Editor

Important "Save for web" settings

To ensure optimal results there a few settings in the "Save for Web" window that need to be set. First open the settings windows select them from the top-right corner of the window. From the menu that appears select "edit output settings"

Then select the "slices" settings and select "Generate CSS" by "ID". This will ensure that there are separate styles for each of the UI elements.

You can select each of the slices in the viewport of the "Save for Web" window then select the output format from the present menu.

More information about the "Save for Web" export option can be found in the Adobe Photoshop official documentation.