Let's create our first slide in Storyline, format its background, and add some basic content.
Watch this video demonstration, then follow the activities below to practice.
- Add a Blank Slide
- Add Background Elements
- Add Text
- Create Buttons
- Add New States
- Add a Character
- Preview Your Slide
- Download and extract the Storyline practice files on your local computer.
- Open the Storyline folder in your practice files, then open the 02A_Build_First_Slide_360.story file. The first slide has been created for you, but we'll recreate it together in this tutorial.
- Let's start by adding a new blank slide to the course. Go to the Slides tab on the Storyline ribbon, click Basic Layouts, and choose the Blank layout.
- Go to the Insert tab on the ribbon, click Shape, choose the rectangle, then draw a rectangle that covers most of the slide.
- Use the Format tab on the ribbon to remove the outline of the rectangle and fill it with a dark color.
- Use the timeline at the bottom of the screen to give your rectangle a recognizable name and lock it in place.
- Finally, let's add an image that covers half of the rectangle. Go to the Insert tab on the ribbon, click Picture, and insert the office-windows.jpg file from the Images folder in your practice files.
- Resize and crop the image, then align it with the top right corner of the rectangle.
- Use the timeline to rename your image and lock it in place.
Let's add a title and some description text to the slide.
- Go to the Insert tab on the ribbon, click Text Box, then click the upper right corner of the background rectangle where you want the title to appear.
- Type Main Menu in the text box, then format it as you'd like it to appear.
- Now let's add another text box below the title for the description. Go to the Insert tab, select Text Box, and draw a text box below the title on your slide.
- The fastest way to add placeholder text is to type =lorem() and press Enter on your keyboard. Storyline will automatically add three paragraphs of placeholder text.
- Delete most of the placeholder text, then format the remaining text as you'd like it to appear.
- Use the timeline to rename your text boxes and lock them in place.
- Go to the Insert tab on the ribbon, click Shape, choose the rectangle, and draw a button shape on your slide below the description text.
- Use the Format tab on the ribbon to remove the outline of the rectangle and fill it with a medium gray color.
- Since Storyline supports object states, such as hover and visited states, we can turn simple shapes into interactive buttons. (We’ll add hover states in the next practice activity.) Select the rectangle you just added, then go to the States panel at the bottom of the screen and click Edit States. You'll see a normal state. Every object has a normal state by default.
- Let's add an icon to the normal state of our rectangle. Go to the Insert tab on the ribbon, click Picture, and insert the icon-menu.png file from the Images folder in your practice files.
- Resize the icon and place it near the left edge of your rectangle.
- Add text to your rectangle simply by selecting it and typing. Add MAIN MENU 01 to the rectangle.
- Click Done Editing States to save your changes.
- Now duplicate the rectangle four times for a total of five buttons, then arrange them on the left side of your slide.
- Change the text for each rectangle—01, 02, 03, etc.
We'll add some hover states to our buttons to make them truly interactive.
- Select your first button, then go to the States panel and click Edit States.
- Click the New State icon (looks like a blank piece of paper), select Hover from the drop-down list, and click Add.
- Use the Format tab on the ribbon to change the color of the rectangle for the hover state.
- Click Done Editing States.
- Copy the new hover state from the first button to the others. Here’s how: Select the first button, then go to the Home tab on the ribbon, double-click the Format Painter, then click each of the other buttons. Click the Format Painter one more time to turn it off when you’re done.
To learn more about working with states, see this video tutorial.
Your Articulate 360 subscription comes with an ever-expanding Content Library of photographic and illustrated characters with thousands of poses and expressions. (Storyline 3 comes with 40 illustrated characters and one photographic character.) Let’s add one to our slide.
- Go to the Insert tab on the ribbon and click Character.
- When the character browser opens, use the filters on the left edge of the screen to locate the character you want to use. Click a filter to turn it on. Click it again to turn it off. (The character browser in Storyline 3 doesn't have filters.)
- Select the character you want to use, then choose a pose. And if you're using an illustrated character, you can also choose an expression and perspective (left, front, right).
- Then click Insert in the lower right corner.
- Crop, size, and position the character over the right side of your slide.
Finally, preview the slide you just created to see how it looks and behaves. Just click the Preview drop-down arrow on the ribbon and choose This slide.
Hover over the buttons to test their hover states and use the device icons in the upper right corner of the preview window to see how your slide looks on different mobile devices and orientations.
Congratulations! In building this slide, you've learned how to insert and edit basic content, including text, images, shapes, and characters.
In the next tutorial, we’ll add animations and synchronize them with narration.