If you’re new to Ceros, or even if you’ve been with us for years, there are some helpful tricks to set yourself up for success when designing in an external application like Photoshop, Illustrator, or Sketch. Below are some of these best practices to keep in mind!
Where to start?
Before you even begin designing your experience, it’s important to think about where you want your final piece to live so you can determine an appropriate size. Will this piece be standalone, or will it be embedded within your site? Once you answer this, you can better determine the size of your experience.
Standalone
When creating standalone experiences in Ceros, you have the freedom to create whatever size experience you want. However, two common standalone layouts we use quite often are full bleed (think landing page/microsite/presentation) and more infographic-like (think tall and narrow). If you want a full bleed experience where the content fills the screen and flows all the way to the edges, we recommend 1280px width x 720px fold x whatever height you need. You can also set your Browser Scaling to “Full Width” to ensure that your experience fills the full width of any browser it’s opened on. If you want a narrower experience that looks more like an infographic with a gutter on either side, we recommend an 800px width and a fold line of ~1200px, to create a vertical viewing area. As a general rule of thumb, we recommend keeping experiences under 30,000px tall to avoid any performance disruptions.
Embedded
If you are embedding a Ceros experience within your site, it’s important to know the dimensions of the iframe area it will be placed into so you can design with those constraints in mind. If you don’t know these dimensions, you can always ask your web team or use the Developer Tools in Google Chrome to determine the size. To figure out these dimensions in Google Chrome:
- Navigate to a similar page on your site, right-click anywhere on the page, and select Inspect from the dropdown
- Select the arrow icon and then hover over an area that is similar in size to where you will embed your Ceros experience
- Dimensions should appear when you hover over the area. Use these dimensions as your canvas dimensions in Ceros
One other thing to keep in mind prior to designing your experience is how you plan to import your content into Ceros. When creating a new experience in Ceros, you can start from a few different places. The first (and most common option) is to start from a blank canvas and pull in individual assets created from a design tool. You can export the assets individually from your design file and drag and drop or copy and paste them right into your Ceros canvas.
Another option is to import your entire design file (Photoshop, Illustrator, or Sketch) right into the Ceros studio. This option can save you a ton of time, but there are some aspects of a design file that might not translate properly into Ceros.
For a detailed explanation of this feature, please see our article on Ceros Import, or watch our video series on Importing Your Design Files.
When designing in Photoshop
Photoshop is an incredible tool for creating your visions, which is why our entire Professional Services team uses it in combination with the Ceros platform. But before you set up your Photoshop canvas to match the dimensions you determined above, it’s important to know that Ceros is automatically set up for Retina displays.
When you create your Photoshop canvas, you’ll want to ensure that you do so at double the dimensions of the Ceros canvas (your resolution can stay at 72ppi).
For example:
If you determined your Ceros experience should be 1280px wide, you will need to set up your Photoshop canvas at 2560px wide.
If you would prefer to design at the actual size, you can do so by increasing your resolution to 144ppi.
Additionally, since Ceros is intended to produce animated interactive content, you should design with that in mind by separating out individual assets that will be the target of an interaction, or that you intend to animate.
For example:
When animating a chart object, we would likely save each pie slice or bar object as a separate image so you can cascade them using animations.
When designing in Illustrator or Sketch
For Illustrator and Sketch, you can set up your design canvas at the same size as your desired Ceros canvas.
Note: For best results, we suggest keeping your canvas under 1500px wide in Ceros.
Exporting individual assets
If you choose the first method of exporting assets to then import into Ceros rather than importing a full design file, this section is for you! After you create your assets in Photoshop, Illustrator, or Sketch, you’re going to want to export the individual images/assets so you can bring them into Ceros. Note: You should export images from Illustrator at 2x. Depending on your plans for the assets, you could do this in a few different ways. If you plan on animating the asset or having it be a part of an interaction, we recommend you export each object (or layer) as its own image file. We suggest that you use .jpg for all images that don’t require transparency, and .png for any images that do.
Currently, the Ceros platform accepts most file formats, including (but not limited to) JPG, PNG, SVG, GIF, MOV, MPEG, MP4, and AVI. These assets can also be copied and pasted right from a design tool, your browser, or your desktop, right onto your Ceros canvas.
Creating in Ceros
After you’ve finished designing your assets, it’s time to create your Ceros experience! When creating in Ceros, we recommend following this path:
- Regardless of if you choose to import a full design file or individual assets into Ceros, we also recommend exporting a jpg of your entire design to use as a framework for placing everything on your design, and then deleting the placeholder jpg once your assets have been arranged. (Think of this like an old-school color-by-number)
- We also recommend that you create text elements in the Ceros Studio (rather than using image files of text) to ensure that the copy is crawlable by search engines. If you’re using a custom brand font, make sure to import your font file into Ceros prior to importing your design so that you can use it in your experience. Using live text within Ceros makes it easier to update in the future and hand it off to other team members if need be.
- After you’ve created the layout of your experience, you can begin adding Hotspots and Interactions to your experience. In short, these Hotspots are invisible clickable areas on the canvas that a user can interact with to trigger an action.
- Finally, once you have your interactions set up and working correctly, you can then add the finishing touch of Animations. These generally take the least amount of time in the production process.
If you have any questions or concerns about designing for Ceros or creating your experience, please reach out to us through the chat widget and we'll be happy to help! For a deeper dive into best practices for creating experiences in Ceros, be sure to check out our Video Lessons.