Before you begin bringing your content to life in Ceros, you may want to create a design using Photoshop or Illustrator. We love this idea, and we do the same thing when building our own Ceros content! When bringing these designs/assets 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 that covers all of the media types/design files that the Ceros Studio natively supports:
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 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 them 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, and 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 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…”
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”
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 a Project folder that you’d like to create your experience in, either drag and drop your file into the folder or click Import to select your design file from your computer.
