Design Tools and Generators

What you can make here

Most of these tools make one finished thing you can print, send or paste into a page. Invoice Maker and Quotation & Estimate Maker cover the paperwork side of a small business. Resume Builder, Certificate Maker and Business Card Maker each handle a document people make a few times a year and would rather not open a full design suite for.

The generators are the other half. QR Code Generator and Barcode Generator turn a link, a number or a short piece of text into a scannable image. Fancy Button Designer makes web buttons. Bulk ID Card Maker and Label Sheet Maker repeat one design across many rows. Design Editor, Diagram Studio, Mind Map Maker and Gantt Chart Maker are open canvases, for work whose shape is yours to decide.

Why a browser suits this work

A browser is already a layout engine and a print system, which suits this category well. The same code that draws a sheet on screen sends it to paper, so what you see is close to what comes out. Printing runs through your own print dialogue, which is also where you choose Save as PDF.

Privacy matters more here than in most categories. A QR code often carries a Wi-Fi password or a customer's phone number. An ID card batch carries names and photographs. None of it leaves your machine, because these pages have no server to send it to.

The honest limit is colour and type. Screens work in RGB, so a commercial printer may shift your colours a little. A design also renders only with the fonts your own computer has. Check both before ordering a large run.

Choosing a tool, and one thing to check first

Pick the narrow tool over the blank canvas. If the job has a name, such as an invoice, a label sheet or a certificate, the tool with that name already knows the layout and the fields, and you will finish sooner. Keep Design Editor and Diagram Studio for work with no standard shape.

Before printing in quantity, run one test page on plain paper and hold it against the real card or label stock. Set the print dialogue to 100% and turn off fit-to-page scaling, which is what usually pushes a label grid out of line. With codes, scan the test print with a phone: contrast and the quiet margin around the code matter more than size.

Why the download button says PNG and not PDF

There is no PDF library on this site. One would add roughly 300 KB, and nothing else here carries a dependency. Your browser already holds a good PDF writer, and the print dialogue is the door to it. So an invoice or a CV is laid out at true paper proportions on screen, and a print stylesheet hides the rest of the page. What comes out is text you can select and search, rather than a picture of text.

The button that saves a file with no dialogue at all is Download PNG. One shared file adds it to every printable tool here, so fifty pages cannot drift apart from each other. It redraws the sheet at two image pixels for every screen pixel, which is about 190 dpi on an A4 page. That is crisp on paper and still opens on a phone.

Canvases have a ceiling. Chrome allows no side above 16,384 pixels, and caps the total area as well. Crossing that line raises no error: the file just comes out empty. So a very long sheet is redrawn at a lower scale instead of failing. A job of several pages arrives as a zip holding one PNG per page, because a PNG has no page breaks and one tall image cannot be printed onto separate sheets.

Beside those two sits Save as text. It reads the finished sheet rather than the boxes you typed into, so anything the tool worked out for you comes along. That is the copy to paste into an email, or to give a CV to a hiring system that only reads plain text.

Millimetres from the corner of the sheet

Business Card Maker, ID Card Maker, Label Sheet Maker and Loyalty & Stamp Card Maker all share one piece of layout code. It places each item in mm from the top left corner of an A4 sheet, 210 by 297. Doing the sums once, in one place, is what keeps those four agreeing with each other.

The label presets are the numbers printed on the packets: 21 to a sheet at 63.5 by 38.1 mm, 24 at 63.5 by 33.9, 40 at 45.7 by 25.4, 65 at 38.1 by 21.2. There is a start-at box too, so a part-used sheet can begin at label eight instead of going in the bin. Badges default to 85.6 by 54 mm, the bank-card size that lanyard holders are cut for.

Crop marks are drawn around each card rather than around the sheet, so an odd grid still gets useful ones. Each mark is a hairline 0.2 mm thick and 4 mm long, set 1 mm clear of the corner, giving the blade a line to follow without slicing through the mark itself. Bulk ID Card Maker renders finished cards at 300 dpi and drops a whole contact sheet to 200, because a full page at 300 is enormous.

The QR and barcode tools carry their own encoders

No code here is fetched from a code-drawing service, because there is none to fetch from. The QR encoder was written for this site and follows ISO/IEC 18004: all forty versions, four error correction levels, numeric, alphanumeric and byte modes, Reed-Solomon repair data, and the eight masks each scored so the one the standard picks is the one you get. The barcode encoder handles Code 128, EAN-13, EAN-8, UPC-A, UPC-E and Code 39.

You can see that in the small print. EAN-13 takes 12 digits and works out the check digit for you, or 13 if you already have it, and EAN-8 takes 7 or 8. Code 128 slips into its set C for runs of digits, which packs two of them into one symbol and roughly halves the width of a long number. The QR page reports the version, the grid size, the mode and the character count as you type, and it warns you when your two colours fall under a 4 to 1 contrast ratio, since a pale code will not read. The border is best left on Standard, which is four modules wide.

Those same encoders are called by Ticket Maker, ID Card Maker, Bulk ID Card Maker and Design Editor, so a code sitting on a badge or a raffle stub is built exactly like a standalone one. Reading works the other way in QR & Barcode Scanner, from your camera, a screenshot or the clipboard. Its decoders were written here as well, because the browser's own barcode API is still missing from Chrome on Windows. Save a code as SVG when it will be printed large, and as PNG when it is headed for a screen.