Adobe Integration with Storyline: Achilles’ heel

Illustrator and Photoshop are the most common tools for layout design. Many times, we layout courses in one of these Adobe tools. Here we create designs, define colors, set the layers needed, and much more! And when we are finally happy with our design, a problem pops up – how do we import the content created in Adobe into Articulate Storyline?

Here you can find some tricks to avoid the inconvenience of the Storyline integration, as I see it, the Achilles’ heel of this powerful tool.

How to Integrate Adobe With Storyline as Effectively as Possible?

Fortunately, there are many ways to solve this issue. Here I will provide the most effective solutions in my experience in each scenario. In this way, we can take utilize our work in the design step.

First, some comments to optimize the layout for your course:

• Make sure to configure your Photoshop or Illustrator template with the same size as the storyline course.
• Build your design in layers. Each layer should match the layers you need to create for Storyline. This step is the most important to avoid issues when synchronizing

Are you satisfied with your design? Great, go ahead!

How to Proceed if You Have Your Design in .PSD Format?

Here I have a Photoshop example:

Step 1:

On the File menu select Export > Layers to Files…

Step 2:

Select your Destination, select Transparency, and deselect Trim Layers, then click Run.

As a result of this export, you will obtain several layers of the same size, with different objects and transparent backgrounds.

Step 3:

In a new Storyline project, go to the INSERT menu, and select Picture > Picture from File…

Then, select all the layers imported from Photoshop and click Open.

As result, you will obtain your design separately in layers like you mocked up previously. Now you are ready to animate layers, make the text editable, and do whatever you need to complete your course in the right way!

…and if You Have Your Design in .AI Format?

Here, I have an Illustrator example, in essence, it is the same as in the photoshop example, but I need to complete a few additional steps thank in the Photoshop exampleHere, I have my file with its corresponding layers:

Step 1:

On the File menu select Export > Export As…

Step 2:

Select Photoshop (*.PSD) file and click Export.

 

Then complete the pop-up as follows:

As a result of this export, you will obtain a correctly laid out Photoshop file, with this file, you can follow the previous steps described in the Photoshop section.

 

Good news, Storyline accepts SVG now!

Scalable Vector Graphics (SVG) is an XML-based file format that uses lines and dots to display a graphic. In contrast to pixel-based image formats like PNG or JPG, SVG has no set resolution and stays sharp when scaled up or down on any screen size. Another advantage is that SVGs are much smaller in size. To use SVG images on Articulate Storyline you only need import the same as you would a typical image, it is just as simple as that. (For more information about Storyline 360: SVG Support, visit the official website of Articulate)

 

Conclusion

• Remember that instructional design is, first of all, functional.
• Make sure to take note of your goals before you start laying out.
• Remember to set the dimensions of your course before you start designing in Adobe.
• Ensure the distribution of your layers correspond to the animation you want to perform.
• Keep in mind the workflow of your course.
• At GPI we make sure to stay up to date with new updates in the world of eLearning, we invite you to learn more about all our services here.