Designer Courses / Getting Started

Exporting from Photoshop

In this lesson we will explore how to export assets from Photoshop to be used in a Ceros Experience. For this lesson, we are going to be working with a demo Photoshop file you can download above. As a disclaimer, there is no one size fits all approach for how to set up assets for Ceros, so you may have to adjust these steps to fit your design.

Exporting Entire Photoshop File as One Image

Before you start importing individual assets, it is helpful to export the entire Photoshop file as a flat JPEG image, so when you are laying out your content in Ceros, you can simply line up the additional assets to their place on the canvas. To accomplish this:

  • Select file > export as > JPEG
  • In Ceros, adjust canvas to be 1200px x 3700px
  • Drag and drop the full image export to the canvas
  • Align to center and top of canvas
  • Lower the opacity to 50% and lock the image

Exporting Individual Assets

Starting in the header group of your Photoshop file:

  • Multi-select the down arrow and the first cloud image layer
  • Right click on one of the layers, and select Quick Export as PNG
  • Specify a directory
  • Select the mountain image and export it as a JPEG (since it doesn’t require any transparency)

Moving back to Ceros, locate these images on your desktop and drag them onto the canvas. You may have to do a bit of alignment and rearranging, but the mountain image and down arrow icon should be appearing correctly. There is a slight issue with the cloud object in this step. Because of the way the cloud was arranged on the canvas and the way we exported it, it’s actually being clipped to the size of the Photoshop canvas rather than exporting the entire asset size. We did this on purpose to demonstrate the different ways you can export an object.

The “Quick Export as PNG” option will automatically crop your images to the edges of the image. So in this case, since 1/2 of the cloud is only partially on the canvas, the quick export feature will clip only the visible section. Since we want the entire cloud object instead, we are actually going to convert both of the cloud images into a smart object, and then save the entire object as a PNG. To accomplish this:

  • Right click on the first cloud and select “Convert to Smart Object”
  • Once converted, double click on the layer icon to load up a full size version
  • Right click in new layer window and select “Quick Export as PNG”
  • Repeat these steps for the other cloud object

Now when we import these objects into Ceros, they will retain their entire shape. In the section two group, we have two different gradients that make up the background, as well as a few chart slices. Starting with the gradients, we can export the “Section 2 Gradient” as a JPEG as it doesn’t have any transparency. For the “Graph Gradient” use the quick export as PNG since it is semi-transparent. As you are working through your Photoshop file, ensure you export all files without transparency as JPEG to save on the overall weight of your Experience.

The final objects we have in this layer group are the chart objects. Much like we did with the cloud object, we want to ensure we isolate each of these images so we can preserve the PNG container. The only difference in this case is instead of using the quick export feature for the individual layer, we will want export the entire Photoshop file as a PNG. The reason for this is, if we used the “Quick Export as PNG” option, the bounding box would snap to the size of the pie object. Since we want to easily align these objects, and have them animate around the same center point, we need to retain the bounding box to the same size for each object.

  • Double click on the “Pie 4” layer icon to load it up in a new Photoshop window
  • Select File > Export as > PNG
  • Select directory and hit “Save”
  • Repeat above steps for 3 remaining pie objects

The remainder of the objects in the PSD all use the same techniques we’ve applied before, so go ahead and try to get all of these objects into Ceros. When you’re finished, you will have a nicely laid out Experience that is ready to have animations and interactions added to it.

We understand that no two Photoshop files are the same, and you may have specific questions about content you’ve created and how to get it into Ceros. As you come across these cases, please be sure to reach out to us in the chat widget and we’ll be happy to help.

Exporting from Photoshop