Getting Started

If you're reading this, you've probably seen one of the graphic novel projects produced with the aid of Storytelling Studio — maybe Accused: The Mysterious Death of David Bocks by Amber Hunt and Clay Sisk or The Looming Michigan Eviction Crisis by Mike Thompson. Both of those projects were built with tools created by Storytelling Studio, the former with a previous version of the tool and latter with the version you're reading about right now.

The graphic novel editor (GNE) started life as an internal tool to ease the tedious task of sizing and positioning images and blocks of text for viewing on dekstop and mobile platforms. It has since grown into an app capable of creating, layout out and publishing graphic novels for anyone with access and a vision.

Use this guide to find your way around the app, uncover some not-so-obvious features and avoid a few potential pitfalls.

Workspace

The GNE can be accessed by navigating to https://graphic-novel.gannettdigital.com in your browser, or more likely, since you'll need access through OKTA, clicking the Graphic Novel Editor chicklet at https://gannett.okta.com/app/UserHome. If you don't have the chicklet, contact IT to request access.

The app is organized into two main spaces and a navigation bar at the top of the page:

Navigation bar

The two main views — Projects and Layout — can be accessed by clicking the two links at the top left of the navigation bar. On the right side you'll find the Save button and a Publish button. A status message will appear to the left of the Save button when there are unsaved changes and the Publish button will be replaced by a Discard button — click the Save button or use the keyboard shortcut of Cmd-S to save your progress. The status message will change to the success of the save operation. Clicking the Discard button will revert the project to the last saved version.

Projects

This is where you'll create a new project or open an existing one. It's also where you'll edit metadata for the project, such as title and description.

To create a new project, click the Add button in the left column. A new project named "Untitled project N" will appear in the list and a form with inputs for project metadata will appear in the right column. See Setting project metadata.

Use the two buttons to the left of the Add button to filter what appears in the project list. By default, the list will display only projects created by you. Click the first button — the Show everybody's projects button — to show all projects. Click the Filter projects button to reveal a search input. Typing into the input will filter the visible projects to those that contain the search term in the project name when just your projects are visible, or in the project name or creator's name when all projects are visible.

Layout

This is where the project is designed, images are uploaded and text boxes are positioned. The workspace is split between two columns, one for the canvas on the left and one for controls, navigation, asset managment, etc., on the right.

The canvas is where you'll position images and text. Elements can be dragged into position and resized using selection controls similar to those found in layout applications such as Illustrator.

Above the canvas are buttons for switching between "desktop" and "mobile" views, a breadcrumbs-style control for toggling between the selected page and the document view and a button to open and view the project script.

The tabs in the right column are:

• Add This is where elements such as text boxes, image placeholders, shapes and special components can be added to the canvas.
• Properties This panel is the home to controls for changing the properties of the selected item; its contents change to suit the context of what's selected — document, page or element.
• Pages Pages here do not refer to separate web pages. They are a simple organizational construct borrowed from physical graphic novels. The number of elements on a page can add up rather quickly, so a best practice is to divide your story up into sections, or pages, to keep things managable. This is where you can add, delete and navigate pages, change the order of elements on a page and even move elements between pages.
• Assets Image and video upload happens here, either by clicking browse to open a system file browser or by dragging and dropping a file or files onto the panel. The uploader accepts .jpg, .png, .svg and .webp image formats and .mp4 and .webm video formats. Each thumbnail sports a gear button that opens a popup with an input for alt text and buttons to copy the image url or delete the asset.

Previewing your work

There are three views for viewing your work, and each has its place:

• Page view This is where you'll do most of your work, dragging text and images into place in desktop and mobile layouts. It's the default view when you first switch to Layout and is activated when you click on a page in the Pages Panel, on the Page N button in the breadcrumb control or on a page number in document view.

• Document view Use this view to get a big picture look and see how pages are working together. It can be activated by clicking the Document button in the breadcrumb control or the Document (full view) button at the top of the Pages Panel.

• External preview The external preview is the closest of the three to the final product. The project script is run through the same compiler and templates used to produce the published version of the graphic novel. Click the Open preview in new tab button at the top of the Pages Panel for this view.