Importing Your Design Files: Sketch

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.