Custom design tool

Over the past couple of weeks I've been spending chunks of my evenings and weekends building myself a custom design tool where I can rapidly prototype football jerseys without having to open Adobe Illustrator.

The original plan was to keep it relatively simple, mock up a base design, and export the SVG back into Illustrator to finish it off. I kind of got carried away.

This is all in-browser, front end is javascript and SVG, backend is PHP.

I'm not finished at all, but this is what it does so far:
- separate layers for each 'piece' (base, sleeves, stripes, collar etc etc.)
- each layer can be toggled on/off independently
- layers can be re-ordered by drag-and-drop
- 'stripes' and 'vee' have on-screen controls (the blue lines, and yellow dots, in the overlay) to control size, width, gap, angle, position etc. Also controllable via sliders in the palettes on the left.
- each 'piece' has its own colour picker
- SVG can be output/saved as PNG via canvas)
- settings for a design can be saved (as JSON) and reloaded
- 'invert' button that quickly swaps the two primary colours (those applied to the most pieces), think easily swapping a "home" jersey to an "away" alternative

View all tags
Posted on Sep 16, 2018
Dean Robinson
Welcome to my design portfolio on Dribbble

More by Dean Robinson

View profile