New to drawing art for screen printing? Here is what every button above does, in plain words. Tap any ? to jump to its explanation.
- Select (V)
- The arrow. Tap a shape to pick it. Drag it to move it. Drag a corner square to make it bigger or smaller, and drag the little circle on top to spin it. Drag a box around several shapes to pick them all.
- Move view (Hand tool, H)
- Slides your view of the page around, like sliding a sheet of paper on a desk. It does not move your art. On a computer you can also hold the space bar and drag. On a phone, pinch with two fingers to zoom.
- Rectangle (R)
- Drag on the page to draw a box. Hold Shift to make a perfect square. Just tap to drop a 2 inch square.
- Ellipse (E)
- Drag to draw an oval. Hold Shift for a perfect circle.
- Line (L)
- Drag to draw a straight line. Its color comes from the Outline color if Outline is on, or the Fill color if not.
- Star / polygon (S)
- Draws stars and shapes with straight sides, like triangles and hexagons. Set "Points" first: 5 with "Star" checked gives a classic star. Uncheck "Star" for a flat-sided shape.
- Pen (P)
- Draws your own shapes, point by point. Tap to drop a point for a sharp corner. Press and drag while you drop a point to make a smooth curve. Tap the first point again (or press "Close shape") to finish a filled shape, or press "Finish line" for an open line.
- Text (T)
- Tap where you want words. Double-tap the text to type. Pick a font from the list. The list shows each font name in its own style. All of them are free to use on shirts you sell.
- Text to curves
- Turns your text into plain shapes (outlines). Do this before you send art to someone else or to a film printer, so the letters look right even if they do not have the font. After this you can no longer retype the words, so check spelling first.
- Edit points
- Lets you reshape a path by dragging its points. Blue dots are the corners and ends; white dots are curve handles that bend the line. Rectangles, ovals and stars get turned into paths first. Press "Done editing points" when finished.
- Fill, Outline and ink swatches
- Fill is the color inside a shape. Outline is the line around the edge. Pick which one you are changing, then tap a swatch. Each swatch is a solid "spot" ink color, the kind you mix or buy in a tub. The ∅ swatch means no color. Every different color you use needs its own screen, and the "Ink colors" box counts them for you.
- Outline width
- How thick the edge line is, in points (72 points = 1 inch). Keep lines at 1 point or more; very thin lines can break up or vanish when you burn the screen.
- Front, back, up, down
- Shapes stack like paper cut-outs. "Front" puts the picked shape on top of everything, "Back" puts it under everything, and Up/Down move it one step.
- Group / Ungroup
- Group glues the picked shapes together so they move as one. Ungroup takes them apart again. Imported SVG files come in as a group.
- Align
- Lines things up. With one shape picked it lines up with the page (for example, center it on the shirt). With several picked it lines them up with each other.
- Size, position and angle
- Type exact numbers in inches. W is width, H is height, X and Y are the distance from the top-left corner of the page. Keep "Lock shape" checked so it does not get stretched.
- Layers
- A list of everything on the page, top item first. Tap a name to pick it. The eye hides or shows it. The lock stops it from being moved by accident.
- Undo / Redo
- Undo takes back your last change. Redo puts it back. On a computer: Ctrl+Z and Ctrl+Y (Cmd on a Mac).
- Zoom and Fit
- The + and − buttons zoom in and out. "Fit" shows the whole page. Zooming does not change the size of your art.
- Page size
- The size of the print area in inches. Pick a common size from the list (a full adult front is about 12 × 14 inches) or type your own.
- Open a file
- Adds an SVG, PNG or JPG to the page. SVG files stay sharp at any size. PNG and JPG are pictures made of pixels, so they get blurry if you blow them up a lot.
- Auto trace
- Turns a picture (PNG or JPG) into vector shapes you can edit, like "Trace Bitmap" in Inkscape. Pick the picture, press "Auto trace", change the settings while you watch the preview, then press "Use this trace". Works best on flat logos and drawings, not photos.
- What kind of art?
- Pick the one that matches your picture and the settings are done for you. "Logo, 1 color" makes one ink shape, like black film. "Logo, 2–4 colors" splits a logo into a few ink colors, one shape per color, and each becomes its own screen. "Detailed art" keeps more small bits and allows up to 8 colors. Auto trace is made for flat art with solid colors, not photos or color fades.
- Optimize curves
- In Advanced settings. Joins tiny curve pieces into fewer, smoother ones, so shapes have fewer points and are easier to edit. Leave it on unless small corners get rounded off.
- Threshold (light/dark cut-off)
- In Advanced settings, only for 1 color. Every spot in your picture gets a lightness number from 0 (black) to 255 (white). Anything darker than the Threshold becomes ink, and anything lighter is left blank. Slide right to grab lighter parts too, slide left to keep only the darkest parts. 128 is the middle.
- Invert
- Swaps ink and no ink. Use it for white art on a dark picture.
- Number of colors
- How many ink colors to split the picture into. Fewer colors means fewer screens and a cheaper print. Count the colors in the logo and start there.
- Detail
- How small a speck can be and still get traced. Low detail drops dust and tiny dots. High detail keeps every little bit, but can also keep noise. Start in the middle.
- Smoothness
- How round the edges come out. 0 gives sharp corners like pixels. Higher numbers give smooth curves, good for lettering and round shapes.
- Remove background
- Leaves out the plain background around the art (for example, a white box around a logo) so you do not print a big square of ink.
- Keep the picture colors
- In Advanced settings. When this is off, each color snaps to the closest ink swatch in the color box, so you get real ink colors. Turn "Keep the picture colors" on to use the exact colors from the picture instead.
- Stack colors (no gaps)
- In Advanced settings. Puts the colors on top of each other so no thin white lines show between them. Leave it off if you want each color cut out of the others (a knockout), which is how most screen printers set up colors.
- Who made the tracing engine
- Auto trace uses Potrace by Peter Selinger, in a JavaScript version by kilobtye. It is free software under the GNU GPL (version 2 or later). The license comes with the files at assets/trace/POTRACE-COPYING-GPL-2.0.txt, and the readable source is assets/trace/potrace.js.
- Save as SVG, PNG or PDF
- SVG is vector art you can open in most design programs; text is saved as outlines so the font looks right anywhere. PNG saves a 300 dpi picture with a see-through background, good for printing film. PDF is a print-ready page with the text already turned to outlines. Files go to your Downloads folder.
- Open in Film Printer
- Saves a 300 dpi PNG of your page and opens the free Film Printer tool in a new tab. In Film Printer, tap the upload box and pick the PNG that was just saved. Film Printer then turns it into black film you can print on clear film.
- Autosave and privacy
- Everything stays in your own browser. Nothing is uploaded. Your last design is saved on this device and comes back when you return. "New" clears the page.
