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! When bringing these designs into Ceros, you have a few options, you can either export your assets individually and import them into Ceros, or you can import your entire design file. Here’s a cheat sheet for when and how to do both:
Jump to a section…
- Exporting as a/an…
- Best Practices Exporting from…
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 Panelany solid part of the SVG will be changed to your color selection
Note: PNG, JPG, and GIF asset ratios can be locked and unlockedthe 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 the desired dimensions it will be in the Ceros Studio
- Images should be exported at 2x
- 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…”
- 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 RGBnavigate 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”
When importing an entire design file…
If you’ve created your design in Photoshop, Illustrator, or Sketch, you can import your entire design file right into Ceros. First, make sure you hard save the file to your computer. Then, in the project folder you’d like to create your experience in, either drag and drop your file into the folder or click 'browse' to select your design file from your computer.
