costume-creator

By Shaan Patel and Aadit Trivedi

This is a basic Scalable Vector Graphic (SVG) color editor for a costume file so that it is easy to change the colors of an imported costume design without having to download any software.

How to use this tool

1. Download the prepared SVG file of the costume
2. Open the website at GTRR Costume Creator
3. Upload the design using the “Choose File” button at the top of the site
4. Choose a color by either using the box above the color bank or by inputting a hex code and clicking "Add color". If you want to save a chosen color, you can click the “Add Color” button and it will be saved to your color bank (will be lost when you refresh the site though!)
5. Click on any of the design elements to change its color
6. Click the “Export to PNG” button on the top right of the site to save the image

How to prepare SVG files

1. To prepare costume designs, the first step is to download the costumeSampleLandscapeBasic.svg template in this repository
2. Open this template SVG in a vector graphics editor such as Inkscape or Adobe Illustrator
3. Add any shapes to create the designs you want. A stroke width of 1 px is what is used in the template. Make sure all of the shapes have some fill color or else it is not possible to edit the fill color of the shape in the website. To help learn how to create SVG designs, Logos By Nick has many helpful tutorials on how to use the Inkscape software.
4. Save the SVG to your machine and then follow the instructions above.