Layout

The layout view is where the work of designing and laying out your graphic novel gets done. It's divided into two columns: the canvas on the left and four tabbed panels on the right that contain controls for manipulating objects on the canvas.

Contents

• Canvas
• Add Panel
• Properties Panel
• Pages Panel
• Assets Panel

Canvas

The canvas is where you'll place all of the parts that make up your graphic novel. See Add Panel below to learn how to add objects to the canvas.

Selections

Before you can make changes to an object, you must select it. This is done by clicking once on the object. A selection is indicated by a blue selection rectangle with resize handles at the corners and on the sides. Additional objects can be added to or removed from the selection by shift-clicking. Alternatively, you can click a blank space on the canvas and drag to select several objects at once — each object that falls even partially within the drag rectangle will be added to the selection. To deselect everything, click a blank space on the canvas.

Click or drag to select	Selected objects

Moving, Resizing and Rotating Objects

To move a selected object or objects to a new space on the canvas, simply click and drag it to the new location. Be aware that only the outline of the selected item (or items) will appear to move — the object itself will move to the new location when the mouse button is released. To constrain the drag horizontally or vertically, hold the shift key while dragging. Hold down the option key while dragging to create duplicates if the objects in the selection. The selection can also be nudged using the arrow keys on your keyboard.

To resize an object, click one of the handles and drag. Again, only the outlines of the selected items will appear to resize until the mouse is released. Pressing the shift key while resizing will cause the selected item to maintain its aspect ratio, resizing height and width proportionally. Note that the handle you click will set the origin of the resize to the opposite handle, e.g. dragging the lower-right handle will cause the upper left corner to remain stationary. You can also hold down the option key to move the resize origin to the center of the selection.

To rotate the selection, move the cursor to just outside of one of the corner handles until it turns into a rotation cursor, then click and drag to rotate the objects around the center of the selection.

Editing Text

Double-click text elements to put them into editing mode. When in editing mode, the selection handles will disappear and the blinking text cursor will appear. Select a portion of the text and use the inline controls that appear to bold-face or italicize the text or to turn it into a link. Click the × button to remove all inline formatting.

Keyboard Shortcuts

Selections respond to a few keyboard shortcuts:

• Arrow keys - Move the selected object(s) 1 pixel.
• Shift-Arrow keys - Move the selected object(s) 10 pixels.
• Cmd-D - Duplicate the selected object(s).
• Cmd-C - Copy the selected object(s).
• Cmd-X - Cut the selected object(s).
• Cmd-V - Paste the copied/cut object(s).
• Delete - Delete the selected object(s).
• Cmd-Z - Undo the last operation.
• Cmd-Shift-Z - Redo the last undo operation.

Mobile and Desktop Views

Because everything — text, images, shapes — is placed with pixel precision, we have to essentially create two layouts: one for desktop and one for mobile. To toggle between the desktop and mobile views, click the icon buttons centered above the canvas.

The desktop view will always render at 768 pixels wide, regardless of how wide a reader's browser window is, and the mobile view will always render at 375 pixels wide, no matter the screen size of the reader's phone. Both views will appear centered in the viewport of wider windows/screens. This is a tradeoff for keeping things relatively simple and having to manage only two layouts.

The canvas displays in only those two widths. The dotted gray lines on either side of the canvas provide a convenient guide for a 20-pixel margin to aid in making sure text doesn't bump up against the edges of 375-pixel-wide phone screens or 768-pixel-wide tablet screens.

Other Canvas Controls

Other controls above the canvas are the breadcrumbs navigational element in the upper left part of the workspace and the script inspector button in the upper right. The breakcrumbs control is a quick way to see what page or element is selected and also offers a way of quickly switching between document view and page view. Clicking the script inspector will toggle display of the underlying project script that contains all of the data being created and manipulated with the app. It's mostly intended for developers, but if you're curious, you can't break anything by taking a peek.

Add Panel

Use the Add Panel to add objects to the current page, either by clicking a thumbnail or dragging it to the canvas. The available objects are organized into four groups: media elements, text elements, shapes and components.

The two media elements — image and video — will put a placeholder on the page that will display a generic icon until the elment is associated with an asset in the Assets Panel.

Text elements include headers (h1, h2, h3, ...), a paragraph, text boxes — which offer a few graphic-novel-style options beyond generic paragraphs — and a text message bubble. Text boxes use the default app comic font (Back Issue); come in unbordered, bordered and rounded-corner varieties; and can have pointers or thought bubbles coming off of any side. Text message bubbles are intended to simulate text messaging on a mobile phone and can be combined with other elements to approximately represent a text conversation.

Shapes include the basics — square, circle and triangle — and horizontal rule and vertical rule.

Components are pre-built elements commonly used in graphic novels:

• Share buttons, allowing readers to share your novel to Facebook or Twitter or by email.
• A published timestamp displaying when your novel was published.
• An opinion banner, typically placed at the top of the first page.

Properties Panel

The contents of the Properties Panel change depending on what's selected, as indicated by the label at the top of the panel, but there are a few common controls, such as size and position inputs, stacking order, background color and border. Here are the controls for each selection context:

Document

When you are viewing your graphic novel in document mode, a single input appears, background color, which will apply a background color to the entire document. The backgroud color uses a color picker, which appears in a few other places in the Properties Panel. Clicking on the swatch will open the system color picker, where you have your choice of pickers. Select a new color and the swatch will update, the hex value of the new color will appear next to it, and the document background color will change. To remove the color, click the × button on the right side of the input.

Page

If no elements are selected on a page, the Properties Panel will display a Name input, valuable for applying a label to pages nodes in the Pages Panel to help you quickly locate a page in the list.

Beneath the Name input is a checkbox labeled "Custom." When checked, the app will insert a custom page imported from the server. This is useful for incorporating design and interactivity beyond the scope of the editor. If this is something you think you might need, contact a memeber of Storytelling Studio.

Next up is another background color picker. Setting a value here will apply a color to only this page.

Lastly, there are two inputs for top and bottom padding, which can be used to add a little space at the top and bottom of the page.

Text Elements

There are a few inputs and controls that all text elements share in common, and rather than repeat it for each type of text element, we'll just cover our bases here.

Class

The class selector offers a few presets for text boxes to change the border width and rounded corner radius, things that can easily be done with other controls but might mean a few steps instead of simply choosing a class.

Size, Position & Rotation

Text elements, and everything on the page, for that matter, are positioned absolutely. This means they stick to one spot rather than flow as the width of the page changes. As such, each element has inputs for "left" and "top", as measured in pixels from the top left corner of the canvas. Simlarly, everything on the page has a defined height and width, and the app has inputs for those values. The input used for these values can be changed by typing a number directly into it, by clicking in the input and using the up and down arrow keys to increment and decrement the value by 1 (or 10 with the shift key held down) and by clicking the arrrow buttons on the right.

Objects can be rotated from 0 to 360 degrees using the Rotation input.

Padding

If you're familiar with CSS you'll know what padding is. For those of you who don't, this input lets you increase or decrease the space between the text and the border of the text box using a value with this format: 4px 8px 6px 8px, where the numbers are in pixels and represent top, right, bottom and left in that order, or 4px 8px, where 4px is applied to top and bottom and 8px is applied to left and right, or 10px, where each side gets 10 pixels of padding.

Stacking

Use these buttons to change the order of objects top to bottom. From left to right, the buttons send to bottom, send back one level, bring forward one level and bring to front.

Alignment

When more than one object is selected, the alignment controls are shown. Options include left, right, horizontal center, top, bottom and vertical center. Objects can also be equally spaced horizontally and vertically. If the "Align to canvas" checkbox is checked, the aligment will happen relative to the selected canvas (desktop or mobile), with an option to specify a left-right margin.

Typography

With these controls you can change the font family, font styles, font size, text alignment, line height and letter spacing and text color, and toggle whether wrapped text uses hyphens. At present, these controls affect the entire text element, not just a selected part of it. To bold-face or italicize just a portion of the text, use the inline controls on the text box itself.

Background

Just like changing the background color of the document or pages, the background color of text elements can be adjusted.

Border

The border controls can change the border width, color and style, and corners can be rounded with the Radius input.

Additional Styles

This input handles less common CSS styles for which there are not inputs, for example, a drop shadow on some text: text-shadow: 0px 2px 2px gray. Styles must be entered as a single string of text in the format of "style-property: style-value". Click the trash can icon to delete a style.

Header

Beyond the common text element controls, headers expose one control specific to them: a tag selector. Adding a new header to the page will add a h1 tag, but for SEO purposes, there should be only one h1 tag in the document, specifically, a title on the first page. Use this control to change the next level of header, likely subheads, to h2 tags, and headers nested under h2 tags to h3 tags, and so forth.

Text Box

The Add Panel offers this element in three configurations, but they all use the same underlying element with the same options, and one option unique to the text box in particular: the pointer. Activated by checking the checkbox, pointers come in three flavors: pointer, bubbles and line, selected by clicking one of the buttons. Next to the type selector are buttons to choose which side the pointer emanates from — top, bottom, left or right. Under the buttons are two sliders, one to adjust size and another to adjust where along the chosen side the pointer starts, and for pointer- and line-type pointers, hovering over the tip of the pointer reveals a small circle that can be use do drag the tip to the desired position.

Text Message Bubble

When a text message bubble is selected, the panel will display "Left" and "Right" buttons that set which side of the bubble the tail appears. On iOS devices, incoming messages appear on the left side of the screen as black text over a gray background with the tail on the left, and outgoing messages appear on the right as white text over a blue background with the tail on the right. That color scheme is the default for left and right options but can be changed with the Typography and Background color pickers.

Image

Images share many of the same controls that effect text elements, with a few that are unique to just them. At the top of the Properties Panel when an image is selcted is a "Change image" button that takes you to the Assets Panel, where you can assign a new image to the on-canvas element — the button is really just a stand in for the "Assets" tab button at the top of the column.

Of more interest is the Crop image checkbox. When checked, a Edit crop button will appear on the image. Click that and the selection controls will turn an orange color, indicating that you can drag the handles and move the selection around the image to frame the part of the image you want to show. While still in edit mode, you can also click the image and move/scale that to position it in the crop rectangle. To exit edit mode, click on the orange crop selection again, then click the Done button. Cropping is view dependent, so you can have an image cropped in the mobile view and uncropped in the desktop view, or vice versa, or cropped in both with different cropps.

Click the Edit crop button to enter edit mode.

Crop the image using the orange selection handles, then click Done to exit editing mode.

The last unique-to-images control is a Link input near the bottom of the panel. Use this to make the entire image a link to another web page.

Video

The app allows uploads of .mp4 and .webm videos. With a video selected on the canvas, the Properties Panel shows the same controls as an image except for the link input and the crop checkbox and with the addition of a few video-specific checkboxes:

• Show controls This is checked by default when a video is added to the page. It means that the video player will show all the default controls for the browser playing the video — play/pause button, progress bar, volume slider, etc. The video will display a non-clickable play button in page view whether this button is checked or not. It's simply a visual cue that the element is a video. To see the option in action, and to play the video, click Document in the breadcrumbs control in the top-left corner of the left column to enter document view.

• Autoplay When checked, the video will begin playing when it's scrolled into view.

• Loop Causes the the video to begin playing again when it reaches the end.

• Muted Does just what it says — mutes the video. If controls are visible, the user can unmute the video manually. And one thing to keep in mind is that because of browser policies, autoplay videos may start out muted by default.

The modern way to GIF

Videos saved in the .mp4 format typically have much smaller file sizes than GIFs of similar dimension and duration. To use a video as a replacement for a GIF, uncheck Show controls and check everything else.

Shapes

Shapes have all the usual controls and inputs. Triangles have two extra options: a button for rotating the triangle in 90-degree increments, and buttons for toggling between isoceles and right triangles.

Pages Panel

Most of the page-related operations are done in the Pages Panel. This is where you go to create and delete pages, select the current page or change the order of pages. You can expand a page to get a quick list of the objects on that page. You can toggle into document view with the Document (full preview) button or open a preview in a new tab that will most closely resemble the final product with the Open preview in new tab button.

New page

Click the New button at the top of the panel. A new page titled "Page N" will appear at the bottom of the list. To keep pages organized, switch to the Properties Panel and type a name into the Name input. The page will now appear as "Page N: Name" in the Pages Panel.

Delete a page

Move the mouse over the page you want to delete in the panel. Click the red minus button that appears on the right side of the row, and the app will ask if you want to delete that page.

Change the order of pages

Click on a page and drag up or down in the list. A black bar will appear between pages to indicate where releasing the mouse will insert the page.

Change object stacking order

In addition to the controls in the Properties Panel for changing the stacking order of objects, you can change the order by clicking the triangle next to a page, then dragging the an object up or down. The first object in the list is the topmost element on the page.

Move objects to new page

Objects in the panel can be dragged to a different page node, or to the canvas if another page is selected.

Assets Panel

Use the Assets Panel to manage images and videos.

Upload media files

Click browse to open a system open file dialog or drag one or more files onto the panel to upload assets. Acceptable image types are .jpg, .png, .svg and .webp. Acceptable video types are .mpg4 and .webm.

Add an object to the canvas

Assets can be added to the page in one of two ways:

• Use the image or video buttons in the Add Panel, then switch to the Assets Panel and click on a thumbnail to assign that asset to the object on the canvas. Only assets for the selected object type will be displayed, e.g. clicking an image on the canvas will hide the video assets in the Assets Panel.
• Drag a thumbnail in the Assets Panel directly to the canvas.

Set the alt text for an image

Alt text is required for images for accessibility purposes; the app won't allow a novel to be published until every image has it. To set it, click on the gear icon in the lower righthand corner of a thumbnail and use the input in the resulting popup. If an image is purely decorative, click the Decorative checkbox to exempt it from the requirement.

Delete an asset

Click the gear icon, then click the Delete button. The app will ask if you're sure you want to delete the asset. Click OK to delete, or Cancel to keep the asset.