GraphicDraw

• Click an object to select it. Selected objects show blue handles.
• Drag the object body to move it.
• Corner handles resize (hold Shift to constrain proportions).
• Rotate handle (circle above selection) — drag to rotate.
• Shift+click adds to selection. Drag on empty space rubber-band selects multiple objects.
• Double-click a text object to enter inline text editing.
• Double-click a group to enter the group and select individual members.

• Click anywhere on the canvas to add a new text object.
• The context bar (below the action bar) shows font, size, style and color controls.
• Double-click any existing text to enter edit mode — cursor appears for typing.
• Use the Text Editor (Text menu → Text Editor) for multi-style rich editing.
• Text auto-sizes to its content. Use Auto-fit to shrink text to fit a container.

• Creates a bounded text box — text wraps inside the box boundaries.
• Ideal for body copy, descriptions or multi-line blocks.
• Resize the box with handles; text reflows automatically.
• Double-click to edit content inline.

• Click and drag to draw. Release to finish a stroke.
• The resulting path is a fully editable vector object.
• Use Nodes tool to refine the path after drawing.
• Set stroke color, width and style in the context bar before drawing.
• Right-click while drawing to end an open path.

• Select a path first, then activate the Eraser.
• Drag over parts of the path to erase those segments.
• Works on freehand paths and converted vector shapes.

• Click to add a default rectangle. Resize with handles.
• Hold Shift while resizing to constrain to a square.
• Set fill and stroke in the context bar or right sidebar.
• Use Path → To Path to convert to an editable path for node editing.

• Hold Shift while resizing to constrain to a perfect circle.
• Convert to path for node-level editing.

• Adjust stroke width, color, and dash style in the context bar.
• Hold Shift while resizing to constrain to 45° angles.

• Edit nodes to change the shape after placing.
• Convert to path then use the Nodes tool for full control.

• Edit nodes after placing to change point count or inner radius.

• Resize and rotate freely. Convert to path to edit the arrowhead shape.

• Select a path object first, then click Nodes (or press N).
• White circles (●) are anchor points — drag to reposition.
• Orange diamonds (◆) are curve handles — drag to adjust curve shape.
• Dashed lines connect handles to their anchors.
• + Add — insert a new node after the selected one.
• − Delete — remove the selected node.
• Line/Curve — toggle the selected segment between sharp and curved.
• Smooth — mirror handles through the anchor for a smooth curve.
• Reduce — simplify path by removing redundant nodes (enter tolerance).
• Press Esc or click Done to exit node edit.

• When active, objects snap to edges, centers and corners of other objects.
• Orange snap lines appear when alignment is detected.
• Also snaps to canvas edges and center lines.

• Useful for inspecting complex layered designs.
• Helps find hidden objects or stacking order issues.
• Toggle again or press W to return to normal view.

Zoom & Navigation

• With an object selected: click the eyedropper, then click any object or color on the canvas. The color is applied to the selected object's fill and the tool closes.
• Hold Alt while clicking (or choose Stroke in the hint bar) to apply the color to the stroke instead.
• With nothing selected: click a color to pick it up, then click an object to apply it.
• Hold Shift while clicking to keep the eyedropper active for more clicks.
• Press Esc, right-click, click the ✕ in the hint bar, or click the eyedropper button again to close it.

File Group

Import & Export

Edit Group

Arrange Group

Align & Distribute

Select 2 or more objects. Alignment is relative to the combined bounding box of the selection.

Selection Tools

File Menu

Edit Menu

Object Menu

Path Menu

Image Menu

Text Menu

Pages Menu

Rename, duplicate or delete any page from its thumbnail in the Pages tab.

Tools Menu

View Menu

Stroke Tab

The Stroke tab controls the outline of the selected object(s).

• Stroke Color — click the swatch to open the color picker. None removes the stroke.
• Width — type a value or use − / + to change it in 0.1 steps. The slider and preset buttons give quick sizes. The real size is shown in inches and points.
• Line Style — Solid, Dashed, Dotted or Dash-Dot. The Dash slider sets dash and gap length.
• Corners & Ends — corner join, line-end cap, and an option to keep the stroke width when resizing.
• Behind fill — on by default. The stroke sits behind the fill so it never covers it; only the outer half of the width shows. Turn it off to center the stroke on the edge.
• Convert Stroke to Path — turns the visible stroke into its own filled path (also Path → Stroke to Path). Useful for cutting or weeding outlines. Dashed strokes are outlined as solid.

Arc Text & Text on Path

• Arc — select text, click ⌒ Arc / Path (or Text → Arc Text / Text on Path). Drag the Arc slider: + arches up, − curves down, ◯ wraps into a circle. The text stays editable.
• Fit to Path — select a text and a shape, line or path together, then click ⌒ Fit to Path. On closed shapes (circles) the text is centered at the top. The shape stays as a guide.
• Adjust — Distance lifts the text off the path, Move along slides it, Reverse runs it the other way (on a circle it moves to the bottom, reading left to right), Straighten removes the curve.

Cut Contour

Select artwork, then ✂ Cut Contour (Path or Tools menu). Set the offset (default 1/8"), corner style, and whether to skip holes inside letters. The line is a stroke-only path in magenta with the spot name CutContour, placed on top.

Rounded Corners

Select a rectangle and type a Corner radius in inches in the top bar. Corners stay round when you resize. To Path keeps the rounded corners.

GraphicDraw Online & GraphicDraw Desktop

GraphicDraw comes in two editions built from the same app: the free online edition at graphicdraw.com (with product sizes, Send to Print and print ordering), and GraphicDraw Desktop at graphicdraw.com/desktop, which installs on Windows, Mac and Linux and works without an internet connection. In GraphicDraw Desktop, Print This Design opens SpokaneSigns.com. In the online edition, ★ Get Desktop (top bar or Help menu) shows the Desktop and Pro options.

Installing GraphicDraw Desktop

Open graphicdraw.com/desktop in Chrome, Edge or Brave and click ⤓ Install App (or the install icon in the address bar). It gets its own window and taskbar/dock icon and works offline. Updates download automatically — when one is ready you'll see Reload. On Mac Safari use File → Add to Dock (saving then downloads files instead of saving in place).

Saving & Opening Files

In Chrome/Edge, Save Project (Ctrl+S) saves straight to the .grdw file on your computer — after the first save, Ctrl+S just updates the same file. Save Project As… (Ctrl+Shift+S) saves a copy under a new name. The title bar shows the file name, with a • when there are unsaved changes. File → Recent Files reopens recent projects. With GraphicDraw Desktop installed, double-click a .grdw file to open it.

Fonts

GraphicDraw includes the Open Font Pack — 43 sign-friendly fonts (Anton, Oswald, Bebas Neue, Montserrat, Roboto Slab, Lobster, Permanent Marker and more) that work offline and convert to outlines for print. In Chrome/Edge, open the font list and click ＋ Show fonts installed on this computer to use your own fonts too; they also outline for print and PDF. If a project uses a font this computer doesn't have, GraphicDraw Desktop shows a close look-alike.

My Library

Tools → My Library… uses a folder on your computer for your own templates and clipart. Choose the folder once; GraphicDraw creates Templates and Clipart inside it. Save Page as Template and Save Selection as Clipart add items; you can also drop .grdw or .svg files into those folders. Templates open as a new project or are added as a new page; clipart is inserted on the page. Tick Hide built-in templates & clipart to see only your own, or hide single built-in items with the 👁 button on each card (nothing is deleted — use Show hidden to bring them back). Works in Chrome and Edge.

Preflight Check

File → Preflight Check… checks the current page before printing: objects off or past the page edge, low-resolution images (under 120 DPI at print size), very small text, fonts that can't be outlined, and hairline strokes. Click Select to jump to an item. Send to Print shows the result too.

Autosave & Restore

GraphicDraw saves your pages in this browser every 20 seconds and when you switch away. If you close the tab by accident, reopen GraphicDraw and click Restore in the banner (or Discard to start fresh). Autosave doesn't replace Save Project — use .grdw files for anything you want to keep or move to another computer.

Image Resolution (DPI)

Select an image and the Transform panel shows its resolution at the current size: good (120+ DPI), low (72–119) or too low (under 72). Making an image larger lowers its DPI.

Selecting Overlapping Objects

• Alt+click selects the object underneath; click again (with Alt) to go deeper. Alt+drag still duplicates.
• Once an object is selected (on the canvas or in the Layers tab), dragging inside it moves that object even if others are on top.
• Locked objects can't be clicked on the canvas — clicks go to whatever is below. Select a locked object in the Layers tab to unlock it.

Paste Options

Object Origin

The 3×3 grid beside X/Y in the Transform panel picks the reference point (corners, edge middles or center). X/Y show and set that point's position, and W/H resizing keeps that point fixed. Default is bottom-left.

Dimension Tool

• Click Dimen in the tool rail (or Tools → Dimension Tool). Click two points, then click where the dimension line goes. Esc finishes.
• Horizontal / Vertical follows where you place the line; Aligned runs parallel to the two points.
• Points snap to object corners, edge midpoints and centers.
• Auto size sets text, line and arrow size from the page size. Units (in, ft+in, cm, mm), decimals, prefix/suffix and color are in the Dimension panel and also update selected dimensions.
• Width / Height buttons dimension the selected object in one click.
• Live in groups: group an object with its dimensions — when you resize the group (drag or type W/H), every dimension re-measures and keeps its normal text size. Works for unrotated groups.

QR Code

Tools → QR Code…. Enter a URL or text, size in inches and color. The code is one clean vector path (with an optional white background and quiet zone). Always test-scan before printing.

Toolbar Layout

The tool rail and the action bar can be rearranged.

• Click the grip (six dots) at the start of either bar for layout options.
• Tool rail — 1 to 4 columns, docked left or floating.
• Action bar — 1 to 4 rows (columns when docked left), docked top, docked left or floating.
• Drag the grip to float a bar anywhere. Floating bars open as 2 columns / 2 rows. Drag the corner of a floating bar to resize it — it rearranges into 1 to 4 columns or rows.
• Drop a floating bar on the left edge (or the top, for the action bar) to dock it again.
• With both bars docked left, choose Side by Side or Stacked (one above the other) from the grip menu.
• The same options are in the View menu. Reset Toolbars restores the default layout.

Colors Tab

The Colors tab contains the ChromaStack™ color library — 1,341 colors curated by BigNorth, LLC. The ChromaStack collection, its color names and values are the property of BigNorth, LLC and are not affiliated with any third-party color-matching system. Screen colors are approximate; printed results vary by material and printer.

• Fill / Stroke toggle — choose which property receives the color.
• Search box — type a color name, hex code or RGB value.
• Family chips — filter by Reds, Blues, Greens, Purples, Browns, Warm/Cool Grays, Metallics, etc. View All clears the filter and search.
• Per row 1–6 — how many swatches across: 1 shows a list with names, 5–6 show color chips only (hover for the name).
• The search also accepts RGB (e.g. 255,102,0) and CMYK (e.g. C:0 M:60 Y:100 K:0) values.
• Closest match chip — appears when searching, shows the nearest named color.
• Click any swatch to apply it to the selected object.
• The color bar along the bottom of the canvas also applies colors on click.

Layers Tab

The Layers panel shows all objects on the current canvas as a stacked list — top of list = front of canvas.

• Click a layer item to select that object on the canvas.
• ↑ Fwd — move selected object forward one layer.
• ↓ Back — move selected object back one layer.
• Drag layer items to reorder them.
• Layer items show the object type icon and a label.

Pages Tab

Manage multi-page projects. Each page has its own canvas and object stack.

• + Add Page — add a new blank page.
• ⧉ Duplicate — copy the current page with all its objects. The ⧉ icon on any thumbnail duplicates that page.
• Click a page thumbnail to navigate to it.
• Rename or delete pages using the icons on each thumbnail.
• Page dimensions are set individually via File → Page Size.
• All pages are saved together in a .grdw project file.

Effects Tab (Tools)

Apply visual effects to selected objects.

• Opacity / Transparency — set the overall opacity from 0% (invisible) to 100% (solid).
• Drop Shadow — adds a shadow. Set color, opacity, blur, X and Y offset.
• Outer Glow — adds a colored glow around the object. Set color, opacity and size.
• Blur — applies a Gaussian blur. Set the blur amount.
• Remove All Effects — strips all applied FX from the selected object.

Image Adjustments

Select an image object to enable these controls.

• Brightness / Contrast / Saturation / Hue — standard image corrections.
• Blur — soften the image.
• Grayscale — convert to black and white.
• Sepia — warm vintage tone.
• Invert — invert all colors (negative effect).
• Reset Adjustments — restore original image appearance.

Image Mask, Crop & Remove Background

• Apply Mask — select an image AND a shape on top, then apply to clip the image to the shape outline.
• Release Mask — remove the clipping mask.
• Trim to Content — auto-crop transparent margins from an image.
• Trim White Margins — remove white/light borders.
• Manual Crop — enter exact pixel values for each edge.
• Remove White Background — make white pixels transparent. Adjust Tolerance for near-white pixels.
• Remove Any Color — set the fill color swatch to the target color, then click this.

Vectorize

Convert raster images (PNG, JPG) to vector paths. Tracing runs on your own computer (ImageTracer) — nothing is uploaded.

• Upload — choose an image file from your computer.
• Selected — vectorize the currently selected image on the canvas.
• Canvas — vectorize a screenshot of the current canvas.
• B&W / Color — black & white tracing or multi-color separation.
• Threshold — controls the light/dark cutoff for B&W mode.
• Speckle — ignore small noise areas (higher = smoother result).
• Corner Sharpness — higher values preserve sharp corners.
• Path Fit — how closely paths follow the original image.

Transform & Zoom Panel

The Transform panel is always visible at the bottom of the right sidebar regardless of which tab is active.

• W / H — width and height of selected object in inches. Type a value and press Enter to resize.
• Lock icon () — when checked, W and H resize proportionally together.
• X / Y — position of the object on the canvas in inches from the top-left corner.
• ° (Rotation) — rotation angle in degrees.
• % (Opacity) — object transparency percentage.
• Zoom −/+/⊡ — zoom out, zoom in, or fit page to view.

How To: Create Your First Design

1. Click Templates in the action bar to browse pre-made sign layouts.
2. Click a template to preview it, then click Load Template.
3. Double-click any text on the canvas to edit it.
4. Click the color swatches at the bottom to change colors.
5. Use Save to download a .grdw project file for later editing.
6. Use Export PNG or Export PDF for the final output file.

How To: Add and Style Text

1. Click the Text tool in the side toolbar.
2. Click anywhere on the canvas to place a text object.
3. Type your text. Press Esc to exit editing.
4. With the text selected, use the Context Bar (below the action bar) to change font, size, bold, italic, color, and alignment.
5. For multi-style text, go to Text → Text Editor for a full rich-text editor.
6. To curve text along a path: draw a path, select both text and path, then use Text → Fit Text to Path.

How To: Weld (Combine) Shapes

1. Convert any primitive shapes to paths first: select each shape, then Path → To Path.
2. Position the shapes so they overlap where you want them joined.
3. Select all the shapes you want to combine (Shift+click or rubber-band).
4. Go to Path → Weld (Union).
5. The shapes merge into a single combined outline.

How To: Edit Path Nodes

1. Select a path object (or convert a shape: Path → To Path).
2. Click the Nodes button in the tool rail (or press N).
3. White circles (●) are anchor points — drag them to reposition.
4. Orange diamonds (◆) are curve handles — drag them to adjust the curve.
5. Click a node to select it (it turns blue). Shift+click to select a second node.
6. Line/Curve converts the segment that ends at the selected node from straight to curved, or back.
7. + Add inserts a new node after the selected node. − Delete removes it.
8. ✂ Break splits the path at the selected node. A closed shape opens there; an open line becomes two pieces.
9. ⊷ Join merges two selected end nodes into one node at their midpoint.
10. ⟋ Connect links two selected end nodes with a straight line (or closes an open path).
11. To join nodes from two separate objects, select both and use Combine first.
12. Click Done or press Esc to finish.

How To: Skew / Slant an Object

1. Select an object. Besides the rotate handle, two small white ◇ skew handles appear.
2. Drag the handle above the top edge left/right to slant horizontally.
3. Drag the handle beside the right edge up/down to slant vertically.
4. Dragging works in all four directions and moves in 0.25° steps (hold Shift for 5° steps).
5. For exact angles, type in the ⧄X / ⧄Y boxes in the Transform panel, or use their − / + buttons. Step° sets how far each click moves (0.25°, 1°, 5° or 15°); it also applies to rotation.
6. Object → Clear Skew straightens the object again.

How To: Step & Repeat

1. Select an object and click Repeat in the action bar (or Edit → Step & Repeat, Ctrl+Shift+D).
2. Enter the horizontal and vertical offset in inches, the number of copies, and an optional rotation per copy.
3. Make Copies places them. Save Offset only stores the offset, which Dupe (Duplicate) (Ctrl+D) then uses.

How To: Guides & Grid

1. Open View → Guides & Grid Settings or the Guides tool button.
2. Grid — turn it on, set the spacing in inches, line style (solid, dashed, dotted), color and lightness. Optionally snap objects to it.
3. Guides — add vertical, horizontal or diagonal guides at exact positions (inches from the top-left of the page, like the rulers). Edit any value in the list to move a guide.
4. You can also drag a guide out of a ruler, drag an existing guide to move it, or double-click it to delete it.
5. Ctrl+' shows/hides the grid, Ctrl+; shows/hides guides. Guides and grid never print or export.

How To: Remove an Image Background

1. Select an image object on the canvas.
2. Open the Effects / Tools tab in the right sidebar.
3. Scroll to Remove Background.
4. For white backgrounds: adjust the Tolerance slider and click Remove White Background.
5. For other colors: set the fill color swatch to the background color, then click Remove Any Color.
6. Enable Smooth edges to reduce jagged edges on the result.

How To: Vectorize a Raster Image

1. Place an image on the canvas or have one ready on your computer.
2. Open the Effects / Tools tab → Vectorize section.
3. Click Selected (if image is on canvas) or Upload to choose a file.
4. Choose B&W for logos/line art or Color for photos.
5. Adjust Threshold (B&W) or Colors count (Color mode).
6. Click Vectorize — the result appears on the canvas as an SVG path.
7. Use the Nodes tool to clean up any unwanted points.

How To: Work with Multiple Pages

1. Open the Pages tab in the right sidebar.
2. Click + Add Page to create a new page.
3. Click any page thumbnail to switch to that page.
4. Each page can have different dimensions — set via File → Page Size while on that page.
5. All pages are saved together in a single .grdw file.
6. When exporting PDF, all pages are included in the output.

How To: Apply Effects

1. Select an object on the canvas.
2. Open the Effects / Tools tab in the right sidebar.
3. Check the checkbox next to Drop Shadow, Outer Glow, or Blur.
4. Adjust the sliders that appear — changes apply in real time.
5. Multiple effects can be active simultaneously.
6. Use Remove All Effects to reset.

How To: Use Select Same

1. Select an object whose properties you want to match.
2. Click Sel Same in the action bar.
3. Choose Same Fill Color, Same Stroke Color, or Same Object Type.
4. All matching objects on the canvas are selected.
5. Now apply a color change, move, or delete to affect all of them at once.

General Shortcuts

Tools & View

Object Movement

General Workflow Tips

• Save your project frequently using Save (Ctrl+S). The browser doesn't auto-save.
• Use Dupe (Duplicate) (Ctrl+D) instead of Copy+Paste — it places the copy immediately without needing to paste.
• Hold Alt while dragging an object to create a quick duplicate in place.
• Use Undo liberally — 50 steps are available. Experiment freely.
• Right-click any object on the canvas for a quick context menu with common actions.
• The Layers panel is great for selecting objects hidden under others — click the layer item instead of the canvas.
• Use Groups to keep related objects together. Double-click a group to edit individual members without ungrouping.

Text Tips

• Keep sign text readable — limit to 2-3 font families per design.
• Use the Text Editor (Text menu) for full control over multi-style text with mixed fonts and sizes in one object.
• Auto-fit Text (Text menu) automatically shrinks text to fit within its bounding box.
• Convert text to paths (Path → To Path) before sending to a sign cutter to avoid font issues.
• Use Paragraph Text Box for body copy — it wraps automatically. Use regular Text for headlines.

Color Tips

• Use the ChromaStack color library (Colors tab) to access 1,341 professional colors.
• Search by hex code (e.g. #ff6600) to find the closest named color match.
• The bottom color bar is a quick-access strip — click to apply to the selected object's fill or stroke.
• Use Select Same → Fill Color to find and update all objects sharing a color in one step.
• High contrast between text and background is critical for readability at a distance on signs.

Export & Print Tips

• Use Export PDF for professional print production — it's vector and resolution-independent.
• Use Export SVG when sending to a sign cutter or vinyl plotter.
• Use Export PNG for proofs, web display, or email previews.
• Convert all text to paths (Path → To Path) before exporting SVG for cutters — this prevents font substitution.
• Make sure objects don't bleed onto the pasteboard — only the white canvas area exports.

Performance Tips

• Group objects you're finished editing to reduce canvas render complexity.
• Very large raster images slow things down — use Vectorize for logos, or resize images before uploading.
• Use Wireframe View (W) on complex designs to speed up editing.
• If the canvas feels sluggish, try reducing the browser zoom level and using the app's internal zoom instead.

Vector & Path Tips

• Always convert shapes to paths (Path → To Path) before using Weld, Subtract, or the Node editor.
• Use Reduce in the node editor to simplify paths after freehand drawing — it removes redundant anchor points.
• The Smooth toggle in node edit makes curve handles mirror each other for smooth continuous curves.
• Use Contour/Offset (Path menu) to add an outline around any shape — great for creating bordered letters or adding bleed.
• Use Break Apart on compound paths (like welded text) to access individual letters as separate objects.