Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
Illustrator
Ceros Import is a powerful tool that enables you to drag and drop Photoshop, illustrator, and sketch files directly into the Ceros Studio. Importing your design file eliminates the need to upload individual assets into the studio and painstakingly align them on your canvas, allowing you to get right to the fun part of adding interactions and animations!
Before Importing from any design source, be sure to first upload the font used in your design into the Ceros studio. This will ensure that the font lives in Ceros so that your typography imports correctly.
In this lesson, we’ll import a file from Illustrator and outline some important things to consider when building. Let’s take a look at this Illustrator file that we’ll use for this import. You can see here that we have a map of the United States that is made up of individual vector objects for each state. In our layers panel you can see each of these layers clearly represented. To import this into Ceros, first save the file to your desktop, and then navigate over to the Ceros admin.
In our project folder in Ceros, we can go ahead and drag and drop our Illustrator file directly into the admin window. Once this loads up, we can then open our design in the Ceros studio. As you can see the file imported nicely, with each layer being converted into its own Group in Ceros. Additionally, each vector object has been imported as a path shape, to ensure you can easily make edits to these objects in studio. Now that our experience is set up, we’re free to add any animations or interactivity to our experience. A helpful tip is to use the search tool to isolate certain object types so you can easily make global edits, or apply object states in bulk.
Photoshop
Now that you’ve seen the process of Importing an Illustrator file into Ceros, let’s walk through how to pull in a Photoshop design. For this lesson, we’re going to use this Space-themed design, but feel free to use your own photoshop file if you have one handy.
Taking a look at this infographic in Photoshop, you’ll see that our design is composed of a variety of images, icons, and text boxes. Instead of importing each of these as individual assets and then replicating that design in Ceros, we’ll Import the entire file, which should save us a ton of time on the build. Keep in mind that your Photoshop layers will import into Ceros in the same organizational structure that you have in your Photoshop layers panel, so accurately labeling your sections and organizing your hierarchy prior to import is key.
To import this into Ceros, first save the file to your desktop. Navigating over to our project folder in Ceros, we can either drag and drop this file into our admin window, or click on the blue down arrow to choose a file that we’d like to import. Let’s drag and drop our Photoshop file into our project folder and open up our design in the studio.
As you can see, there are a few items that aren’t yet supported through import. Don’t worry, over the coming months we will continue to add more functionality. Additionally, if you run into a compatibility issue — you can always address those issues and then simply copy and paste the affected assets from Photoshop directly into the Ceros experience. No need to re-import the entire file.
Taking a look at our Ceros layers panel, you can see it mimics almost exactly the structure of our Photoshop file. We’ve also converted your text objects into live editable text in the studio. Just be cognizant that any vectors in our Photoshop design have been imported into Ceros as PNG files.
Sketch
Just like we’ve learned earlier in the Illustrator and Photoshop lessons, you can also import Sketch files directly into the Ceros studio. Let’s take a look at this demo experience we previously created in Sketch. Similar to our Photoshop design, our file here consists of a few images, vectors, and text boxes on the canvas. To import this file into Ceros, you’ll first want to save the file to your desktop, and then navigate over to your admin in Ceros.
Drag and drop the file from your desktop into your project folder, and click on the tile to open the design in the studio. Again, don’t fret if you have some compatibility issues here–you can always copy and paste the affected assets directly from Sketch into the Ceros experience at a later time— no need to re-import the entire file.
Taking a look at our layers panel in Ceros, you’ll see here that the order of our layers matches exactly how our layers are structured in Sketch. Keep in mind that similar to Illustrator, Vector elements in Sketch will import into Ceros as Path shapes, giving you the ability to edit them directly in Ceros.
Lastly, it’s important to note that Ceros will only import one page per Sketch, Photoshop, or Illustrator file. So if your file has multiple pages, you’ll need to separate these into their own individual files, and import them separately into Ceros.
Once your Sketch file is Imported into Ceros, you can begin adding your interactions and animations to really bring this design to life.
For more information on Ceros Import, as well as a list of design functions not currently supported in Ceros and best practices for optimizing your design files prior to import, be sure to check out our Educate article on Import.
Illustrator
Ceros Import is a powerful tool that enables you to drag and drop Photoshop, illustrator, and sketch files directly into the Ceros Studio. Importing your design file eliminates the need to upload individual assets into the studio and painstakingly align them on your canvas, allowing you to get right to the fun part of adding interactions and animations!
Before Importing from any design source, be sure to first upload the font used in your design into the Ceros studio. This will ensure that the font lives in Ceros so that your typography imports correctly.
In this lesson, we’ll import a file from Illustrator and outline some important things to consider when building. Let’s take a look at this Illustrator file that we’ll use for this import. You can see here that we have a map of the United States that is made up of individual vector objects for each state. In our layers panel you can see each of these layers clearly represented. To import this into Ceros, first save the file to your desktop, and then navigate over to the Ceros admin.
In our project folder in Ceros, we can go ahead and drag and drop our Illustrator file directly into the admin window. Once this loads up, we can then open our design in the Ceros studio. As you can see the file imported nicely, with each layer being converted into its own Group in Ceros. Additionally, each vector object has been imported as a path shape, to ensure you can easily make edits to these objects in studio. Now that our experience is set up, we’re free to add any animations or interactivity to our experience. A helpful tip is to use the search tool to isolate certain object types so you can easily make global edits, or apply object states in bulk.
Photoshop
Now that you’ve seen the process of Importing an Illustrator file into Ceros, let’s walk through how to pull in a Photoshop design. For this lesson, we’re going to use this Space-themed design, but feel free to use your own photoshop file if you have one handy.
Taking a look at this infographic in Photoshop, you’ll see that our design is composed of a variety of images, icons, and text boxes. Instead of importing each of these as individual assets and then replicating that design in Ceros, we’ll Import the entire file, which should save us a ton of time on the build. Keep in mind that your Photoshop layers will import into Ceros in the same organizational structure that you have in your Photoshop layers panel, so accurately labeling your sections and organizing your hierarchy prior to import is key.
To import this into Ceros, first save the file to your desktop. Navigating over to our project folder in Ceros, we can either drag and drop this file into our admin window, or click on the blue down arrow to choose a file that we’d like to import. Let’s drag and drop our Photoshop file into our project folder and open up our design in the studio.
As you can see, there are a few items that aren’t yet supported through import. Don’t worry, over the coming months we will continue to add more functionality. Additionally, if you run into a compatibility issue — you can always address those issues and then simply copy and paste the affected assets from Photoshop directly into the Ceros experience. No need to re-import the entire file.
Taking a look at our Ceros layers panel, you can see it mimics almost exactly the structure of our Photoshop file. We’ve also converted your text objects into live editable text in the studio. Just be cognizant that any vectors in our Photoshop design have been imported into Ceros as PNG files.
Sketch
Just like we’ve learned earlier in the Illustrator and Photoshop lessons, you can also import Sketch files directly into the Ceros studio. Let’s take a look at this demo experience we previously created in Sketch. Similar to our Photoshop design, our file here consists of a few images, vectors, and text boxes on the canvas. To import this file into Ceros, you’ll first want to save the file to your desktop, and then navigate over to your admin in Ceros.
Drag and drop the file from your desktop into your project folder, and click on the tile to open the design in the studio. Again, don’t fret if you have some compatibility issues here–you can always copy and paste the affected assets directly from Sketch into the Ceros experience at a later time— no need to re-import the entire file.
Taking a look at our layers panel in Ceros, you’ll see here that the order of our layers matches exactly how our layers are structured in Sketch. Keep in mind that similar to Illustrator, Vector elements in Sketch will import into Ceros as Path shapes, giving you the ability to edit them directly in Ceros.
Lastly, it’s important to note that Ceros will only import one page per Sketch, Photoshop, or Illustrator file. So if your file has multiple pages, you’ll need to separate these into their own individual files, and import them separately into Ceros.
Once your Sketch file is Imported into Ceros, you can begin adding your interactions and animations to really bring this design to life.
For more information on Ceros Import, as well as a list of design functions not currently supported in Ceros and best practices for optimizing your design files prior to import, be sure to check out our Educate article on Import.