✦ Graphic Draw

Getting Started

Welcome! This tool lets you design custom signs and banners right in your web browser. No experience needed — just follow these steps and you'll have a design ready in minutes.

Your design area is the white rectangle in the middle of the screen. Everything you add will go on that white area. That white area IS your sign.

You can open this help anytime by clicking the ? Quick Help button at the top of the left panel.

Step 1 — Pick Your Sign Size

Look at the left side panel. At the top you'll see size options:

Click any size button to change your sign. The white canvas will resize to match.

Under "Popular Sign Sizes" you'll find smaller rigid sign sizes. Click "Popular Banner Sizes" to see larger banner options. You can also type in your own custom width and height.

The Swap W ↔ H button flips your sign between landscape (wide) and portrait (tall).

Step 2 — Add Text

Look at the right side panel. At the top you'll see these buttons:

T+ Text — Adds a single line of text. Good for headlines, titles, and short words. You can make it as big as you want.

T▭ Text Box — Adds a text box that wraps words like a paragraph. Great for longer text like addresses, descriptions, or details. The text automatically shrinks to fit inside the box.

To edit your text:

1. Click on the text on your sign to select it (you'll see blue handles appear around it)
2. A text bar will appear above your sign — type your new words there
3. Or double-click the text on the sign to edit it right there

To move text: Click and drag it to where you want it.

To resize text: Grab one of the blue corner circles and drag it bigger or smaller.

Step 3 — Style Your Text

When you click on any text, the "Text Properties" panel appears on the right side, just below the text buttons. Here's what each control does:

If you're using a Text Box, you'll also see a checkbox called "Auto-fit text to frame." When checked, the text automatically shrinks to fit inside the box as you type more words.

Adding Images

Click Image to upload a picture from your computer (JPG or PNG). The image will appear on your sign. Drag it to move it, drag the blue corners to resize it.

Adding Shapes

Click any of these to add a shape to your sign. You can change the color, add an outline, and adjust the see-through level (opacity) using the "Shape Properties" panel that appears on the left when a shape is selected.

You can also find more shapes and icons by clicking Browse Clipart on the left panel — frames, arrows, stars, and more.

Changing Colors

At the bottom of your design area, you'll see a long strip of colored squares — this is the color palette with 140+ professional sign colors.

To use a color:

1. First click on the object you want to color (text, shape, etc.)
2. Then click any color in the palette strip
3. The object will change to that color

If nothing is selected and you click a color, it changes the background of your entire sign.

Arranging Objects — Layers

When objects overlap, you might want to control which one is "in front." Think of it like stacking papers on a desk.

↑ Fwd — Moves the selected object one layer toward the front (on top).

↓ Back — Moves the selected object one layer toward the back (behind).

These buttons are located at the top of the Layers panel on the right side. You can also drag and drop layer items to reorder them directly. Each layer also has visibility (eye), lock, and delete controls.

Lining Things Up — Alignment

The "Align & Distribute" section on the right panel helps you line things up perfectly:

Tip: To select multiple objects, hold the Shift key and click each object one at a time.

Grouping Objects

Want to move several things together as one piece? Select them all (hold Shift and click each one), then click ⊞ Group. Now they move, resize, and rotate together.

To separate them again, select the group and click ⊟ Ungroup.

Made a Mistake? Undo & Redo

↩ Undo — Takes back your last action. Click it multiple times to go further back.

↪ Redo — Brings back something you just undid.

Keyboard shortcut: Press Ctrl+Z to undo, Ctrl+Shift+Z to redo.

Zooming In and Out

You'll find zoom controls in two places: below your sign in the center area, and pinned at the bottom of the right side panel.

− makes the view smaller (zoom out). + makes it bigger (zoom in). The ⊡ button fits the sign back to normal size.

Keyboard: Ctrl + Plus to zoom in, Ctrl + Minus to zoom out, Ctrl + 0 to fit.

Using Templates

On the left side panel, click the Browse Templates button to open the template gallery.

The gallery shows all available templates as large previews in a grid. Use the search box at the top to filter by keyword (like "parking" or "sale"). Click any template to load it onto your sign.

Note: Loading a template will replace what's currently on your sign. You'll be asked to confirm before it happens.

Copying and Deleting

⧉ Dup — Makes an exact copy of the selected object, placed slightly to the side.

✕ Del — Deletes the selected object. You can also press the Delete key on your keyboard.

Clear All — Removes everything from your sign and starts fresh.

Saving Your Work

PNG — Downloads your design as a picture file. Good for sharing or printing at home.

SVG — Downloads your design as an SVG file. This keeps everything editable. Save an SVG to come back and edit your design later!

Load SVG — Opens a previously saved SVG file so you can continue editing it.

Ordering Your Sign

When your design is finished, click the Submit Order → button. A form will pop up where you fill in your name, email, and any special instructions. We'll receive your design and contact you with a price quote.

Light & Dark Mode

Click the theme button to switch between a light background and a dark background. Some people find the dark mode easier on their eyes. Your choice is remembered next time you visit.

⌨ Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

Mac users: Use ⌘ Cmd instead of Ctrl.

Helpful Tips

• Click away from an object to deselect it (click on the gray area around the sign).
• Hold Shift and click to select multiple objects.
• Save your work as SVG often so you don't lose your progress.
• Use the color palette at the bottom for professional sign colors.
• The Text Box with auto-fit is best for paragraphs — it keeps text from overflowing.
• You can resize any object by dragging the blue corner handles.
• You can rotate any object by hovering just above the top-center handle and dragging when the cursor changes.