striply

Tutorial

Everything you need to know about building comic pages with Striply.

Looking for the craft behind the tool — page layout, composition, lettering, and print prep? Read our comic-making guides.
play_arrow

Getting Started

Striply is a browser-based comic page layout editor. You design pages by choosing a panel grid, uploading artwork, adding speech bubbles and sound effects, then exporting to PDF or PNG.

  1. Open the Editor to begin. A random layout template is loaded automatically.
  2. Use the dashboard Layout dropdown in the toolbar to pick a different grid (2×2, 3×3, manga-style, etc.) or choose Custom… to set your own rows and columns.
  3. Choose a Page size — Letter, A4, or manga B5 — from the dropdown beside the layout selector.
  4. Click any panel on the canvas to select it. The toolbar's second row will show controls specific to that panel.
Pro tip: You can import a previously saved layout via the JSON import button to pick up right where you left off.
dashboard

Working with Panels

Panels are the cells of your comic page grid. You can resize them, change their shape, adjust borders, and control stacking order.

  1. Click a panel to select it. The selection label in the toolbar shows which cell you're editing (e.g. "R1C1").
  2. Drag any edge or corner of a panel to resize it. The adjacent panels will adjust automatically.
  3. Use the Panel ▾ dropdown to change the panel shape (rectangle, circle, diamond, etc.), adjust border width/style/color, or change z-order.
  4. To merge panels, hold Shift and click multiple panels, then click call_merge Merge. Use Unmerge in the Panel dropdown to split them apart.
Pro tip: Right-click a panel or use the Panel dropdown's Z controls to bring panels forward or send them backward.
add_photo_alternate

Backgrounds & Images

Each panel can hold a background image. Upload artwork and use zoom/pan to frame it perfectly within the panel.

  1. Select a panel, then click the add_photo_alternate button to upload an image.
  2. Use the scroll wheel over a panel to zoom in/out on the background image.
  3. Click and drag the background image to pan it within the panel.
  4. Open the Background ▾ dropdown for a zoom slider and a reset button to restore the default view.
Pro tip: Click the layers-clear button to remove the topmost item from a panel (background, bubble, or SFX).
mode_comment

Speech Bubbles

Speech bubbles let you add dialogue and narration to your panels. Each bubble is fully customizable in shape, style, and text.

  1. Select a panel and click mode_comment to add a speech bubble.
  2. Choose a bubble shape — rounded, square, cloud (thought), burst (shout), or whisper (dashed) — from the shape buttons in the toolbar.
  3. Drag a bubble to reposition it within (or outside) its panel.
  4. Drag the corner handles to resize the bubble. Double-click to edit the text directly.
Pro tip: Hold Alt and click a bubble to instantly duplicate it, or use Ctrl+D.
call_made

Bubble Tails

Tails are the pointers that connect a speech bubble to its speaker. Striply supports multiple tails per bubble and several visual styles.

  1. Select a bubble, then open the Tail ▾ dropdown. Toggle the tail on or off.
  2. Drag the tail tip to point at the character who's speaking.
  3. Choose a tail style: pointed, curved, jagged, thought (circles), or right-angle.
  4. Click add in the Tail dropdown to add a second or third tail (for multiple speakers). Click remove to remove the last tail.
Pro tip: Adjust the tail width slider for thicker or thinner tails. Use the reset button to snap the tail back to its default position.
text_format

Text & Lettering

Fine-tune your dialogue text with font choices, sizing, and alignment — all from the Text dropdown.

  1. Select a bubble and open the Text ▾ dropdown.
  2. Choose a font family from the list of comic-friendly fonts (Bangers, Comic Neue, Permanent Marker, etc.).
  3. Set the font size with the number input. Typical comic dialogue is 12–16px.
  4. Toggle Bold, Italic, or ALL CAPS with the B / I / AA buttons. Set text alignment to left, center, or right.
Pro tip: ALL CAPS is the traditional lettering style for Western comics. Turn it on for an authentic look.
text_fields

Sound Effects (SFX)

SFX text items are bold, stylized words — like WHAM!, CRASH!, or WHOOSH — placed directly on your panels for dramatic effect.

  1. Select a panel and click text_fields to add an SFX item. A default "BAM!" appears.
  2. Double-click the SFX text on the canvas to edit it inline.
  3. Drag the SFX to reposition it. Use the resize handle to scale the font size.
  4. Open the Style ▾ dropdown to change the font, fill color, stroke color, and rotation angle.
Pro tip: SFX text uses a separate rendering system from bubbles — it supports independent fill and stroke colors for that classic comic-book pop.
aspect_ratio

SFX Scaling

Beyond simple font sizing, SFX items support independent horizontal and vertical scaling for dynamic, stretched lettering.

  1. Select an SFX item and open the Scale ▾ dropdown.
  2. Drag the W (width) slider to stretch or compress horizontally.
  3. Drag the H (height) slider to stretch or compress vertically.
  4. Click restart_alt to reset both scales back to 100%.
Pro tip: Hold Shift while dragging a 2D resize handle on the canvas to scale proportionally in both axes at once.
palette

Colors & Opacity

Control the visual appearance of your speech bubbles with background, border, and text color pickers, plus an opacity slider.

  1. Select a bubble and open the Colors ▾ dropdown.
  2. Use the BG color picker to change the bubble's background fill.
  3. Use Bdr for the border color and Txt for the text color.
  4. Drag the opacity slider to make the bubble semi-transparent (useful for narration boxes).
Pro tip: A fully transparent bubble with visible text makes a great floating narration caption.
grain

Screentones

Screentones add halftone dot patterns to panels — a classic technique in manga and black-and-white comics for shading and texture.

  1. Select a panel and open the Panel ▾ dropdown.
  2. In the Screentone section, choose a pattern: dots, lines, crosshatch, or none.
  3. Adjust the opacity slider to control how subtle or prominent the pattern appears.
Pro tip: Screentones are applied as an overlay, so they work on top of background images too.
grid_3x3

Snap & Alignment

Snap-to-grid and alignment guides help you position bubbles and SFX precisely on the canvas.

  1. Click the grid_3x3 button in the toolbar to toggle snapping on or off.
  2. Click the grid_4x4 button to show or hide the grid overlay on the canvas.
  3. When snapping is enabled, dragging a bubble or SFX will snap to grid lines. Alignment guides (cyan lines) appear when items align with each other.
  4. Hold Alt while dragging to temporarily bypass snapping.
Pro tip: The grid size is derived from your gutter width, so adjusting the gutter slider changes the snap spacing too.
lock

Lock & Unlock

Lock bubbles or SFX in place to prevent accidental moves while you work on other elements.

  1. Select a bubble or SFX item and click the lock_open button to lock it.
  2. A locked item shows an amber badge on the canvas. It cannot be dragged or resized.
  3. You can still select a locked item, edit its text, and change its properties in the toolbar.
  4. Click the lock button again to unlock the item and restore full interactivity.
Pro tip: Lock your finalized dialogue bubbles before repositioning background images so you don't accidentally nudge them.
swap_vert

Layer Ordering

When speech bubbles and SFX overlap inside a panel, you can control which items appear in front of others.

  1. Select a bubble or SFX item. The toolbar shows a Layer: section with four buttons.
  2. Click vertical_align_top to bring to front, or arrow_upward to bring forward one step.
  3. Click arrow_downward to send backward one step, or vertical_align_bottom to send to back.
  4. You can also right-click a selected item to access layer ordering from the context menu.
Pro tip: Background images always stay behind all bubbles and SFX. Use Cmd+] / Cmd+[ (Ctrl on Windows) to reorder layers with the keyboard.
download

Export & Save

When your page is ready, export it as a high-resolution PDF or PNG, or save your work as JSON for later.

  1. Choose PDF or PNG from the format dropdown in the toolbar.
  2. Select a DPI setting — 150 for screen, 300 for print, 600 for high-quality print.
  3. Click download to download your file.
  4. Use upload_file Export JSON to save your layout as a file. Use file_open Import JSON to reload it later.
Pro tip: Your layout is auto-saved in the browser. Exporting JSON creates a portable backup you can share or archive.
keyboard

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts.

  1. Ctrl+Z — Undo the last action. Ctrl+Shift+Z (or Ctrl+Y) — Redo.
  2. Ctrl+D — Duplicate the selected bubble or SFX.
  3. Alt+Click — Duplicate a bubble or SFX at the click position.
  4. Shift+Click — Multi-select panels for merging. Delete — Remove the selected item.
  5. Ctrl+] — Bring selected item forward. Ctrl+Shift+] — Bring to front.
  6. Ctrl+[ — Send selected item backward. Ctrl+Shift+[ — Send to back.
Pro tip: Most shortcuts work the same on Mac with Cmd instead of Ctrl.
dark_mode

Dark Mode

Toggle dark mode for comfortable editing in low-light environments.

  1. Click the dark_mode button in the toolbar to switch between light and dark mode.
  2. Dark mode changes the toolbar, dropdowns, and canvas background to darker tones while keeping your export colors unchanged.
  3. Your dark mode preference is saved automatically and persists across sessions.
Pro tip: Dark mode only affects the editor UI — your exported PDFs and PNGs always use the colors you've set.
Open the Editor