Exporting Asset Cheat Sheet

4 Minute read

Reading Time: 4 minute

Before you begin bringing your content to life in Ceros, you may want to first create a design in another tool such as Photoshop or Illustrator. We love this idea, in fact, we do the exact same thing when building our own Ceros content! Below we have put together a helpful cheat sheet to help you navigate how to export content from your favorite design tool.

Jump to a section…

When, why, and how would I export this file type…

PNG:

  • Export an asset as a PNG if the file requires any transparency
  • Export the image at 2x the desired dimensions to account for retina screens and avoid any pixelation/distortion

JPG/JPEG:

  • Use these for rectangular assets with no opacity
  • Export that image at 2x the desired dimensions to account for retina screens and avoid any pixelation/distortion
  • Use JPG/JPEGs for images, full background images, and placeholders
  • JPG/JPEGs are some of the smallest file sizes, so your experience will load quicker when using these

GIF:

  • Use for animated graphics
  • Export these files at 2x the the desired dimensions to account for retina screens and avoid any pixelation/distortion/dithering (gifs should not be over 10 seconds for maximum optimization purposes)
  • Use these sparingly as animated GIFs can be incredibly large and may cause load times or slower performance. We recommend optimizing GIFs before importing into the studio

SVG:

  • Use for vector files that you want to scale without pixelation
  • Can be exported at any scale
  • Color can be changed in the studio in the shape tab of the Inspector Panel—any solid part of the SVG will be changed to your color selection

Note: PNG, JPG, and GIF asset ratios can be locked and unlocked—the asset’s dimensions can be adjusted individually and proportionally together. SVG aspect ratios are locked in Ceros (you cannot edit the dimensions individually).

MP4:

  • Use this file format for any video files being uploaded into the studio, you can also use these as background videos or for a sound clip
  • Export MP4s at 1x the desired dimensions, and adjust the max and min refresh rate/audio settings to optimize them for the studio (these settings will differ depending on what tool you are exporting from)
  • Video aspect ratios are locked in Ceros and the dimensions cannot be edited individually

Exporting best practices if you are using…

Adobe Photoshop:

  • Make sure that the canvas size is 2x the desired dimensions of the Ceros canvas
  • The resolution should be 72 DPI
  • The color mode should be set to RGB
  • Tip: save your entire canvas as a flat JPG image, which you can use as a placeholder image in the studio to align the individual assets to

Note: We cannot export layers with Blend modes applied (multiple, burn, overlay, etc.) unless it is intended to be exported with the layer(s) that are associated with each other. These images will need to be flattened before they are brought into Ceros.

Photoshop Export Method 1:

  • Right click on the asset or group in the Layers Panel
  • Navigate to “Export As…”
  • Select the appropriate file type and double check to make sure the dimensions are correct
  • Click export
  • Choose the destination

Photoshop Export Method 2:

  • Right click on the asset or group in the Layers panel
  • Navigate to “Quick Export as PNG”
  • Choose the destination

Adobe Illustrator:

  • File can be 1x or 2x the desired dimensions it will be in the Ceros Studio
    • If designed at 1x the resolution, export at 2x
    • If designed at 2x the resolution, export at 1x
  • The color mode should be set to RGB
  • Save the entire artboard as a JPEG image, which will act as a placeholder image in the studio to align the assets to (repeat if necessary for Hover States, Popup States, Carousels, etc.)
    • Click File > Export > Export As, select JPEG and check “Use Artboards”, select your destination

Asset Export Panel:

  • Select the asset on the canvas
  • Right click anywhere and select Collect for Export > As Single Asset
  • Open the Asset Export Panel
  • Select the asset(s) [these will be indicated with a blue outline]
  • Select the appropriate file type and the correct scale (see above). Exporting as an SVG does not require a scale
  • Click “Export…”
  • Choose the destination

Adobe InDesign

  • InDesign is mostly used by Publishers/Print Industry for layouts and print media—we do not typically recommend working in InDesign
  • File should be 2x the desired dimensions it will be in the Ceros studio

Export:

  • Select the Asset on the canvas
  • Navigate to File > Export (CMD+E)
  • Select the appropriate file type and destination
  • Click “Save”
  • Change settings to the following:
    • Export:
      • Selection
    • Image:
      • Quality: Maximum
      • Resolution (ppi): 72
      • Color Space: RGB
    • Options: Enable Transparent Background if Necessary
    • Click “Export…”

Sketch:

  • File can be 1x or 2x the desired dimensions it will be in the Ceros Studio
    • If designed at 1x the resolution, export at 2x
    • If designed at 2x the resolution, export at 1x
    • Make sure the color mode is set to RGB—navigate to File> “Change Color Profile…” (Shift+CMD+K), select the RGB setting
  • Save the entire artboard as a JPG image, which will act as a placeholder image in the studio to align the assets to (repeat if necessary for Hover States, Popup States, Carousels, etc.)
    • Click File > Export (Shift+CMD+E) and select the artboard(s) you want to export

Export Panel:

  • Select the asset on the canvas
  • Navigate to the bottom right of the Sketch program and click “Make Exportable”
  • Select the appropriate file type and the correct scale (see above), exporting as an SVG does not require a scale
  • Click “Export [asset-name]…”
  • Choose the destination
  • Enable “PNG Exporting” or “Bitmap Exporting” at your discretion, though they are not required
  • Click “save”

Was this helpful?

6 2
6 out of 8 people found this helpful