Making the Zine Template Maker
To create the 'Zine Template Maker', I used HTML5, JavaScript and CSS.
The program is original, but the template maker uses existing zine formats that have been handmade and distributed for decades.​
This sets up the "Workspace" section where the zine is created and the "Sidebar" where all the controls are.
The sidebar has multiple divisions for all the control options.
This sets up the zine by using a grid to create slots for each page.
​
The 8 page template is a grid with 2 rows and 4 columns.
​
The 16 page is 4 rows and 4 columns.
​
The user uploads their images into each slot.​​​
This option displays the cut line for the 8 page zine, which needs to be across the middle 2 pages.
The line starts 25% from the left and ends 25% from the right on the x axis. It also falls in the middle of the page on the y axis, adjusted to "49.75%"​ because 50% looked too far.​
I applied the same logic for the 16 page zine, which requires slightly more complicated cutting. I used 3 separate variables to create the lines
Each grid setup is an array with each page listed. The order of the pages is based on physical mockups I made to work out both the position and orientation of each page. Assuming the user inputs an image that is the right way up on its own, the program rotates them so it remains correct after printing and folding.
