It's all-in-one ⚒️tool to create 🖼️artworks templated and published as 📄PDF.
The main case is for the creation of playing 🃏cards.
in order to generate your PDFs, you must write different definitions:
- Your model: write everything that you need to describe your subject
- Your artwork templates: layout your graphics and data defined in the model.
- Your printing constraints: define your layout like margins, bleeds, corners, paper format...
Finally bind all together to export as a PDF Document
in few words: your data + template + printing constraints = PDF
with this tool you will learn to use different technologies:
- definitions in YAML: https://en.wikipedia.org/wiki/YAML
- artworks in SVG: https://www.w3schools.com/graphics/svg_intro.asp
- templating with Nunjucks(like jinja2): https://mozilla.github.io/nunjucks/
- documentation in Markdown (not implemented in the playground): https://guides.github.com/features/mastering-markdown/
Let's me explain in details the full pipeline.
append entries in your glossary like this:
🏠myCard:
title: my emoji
myGlyph:
title: my game icon📐myTemplate:
tags: 📐nunjucks
📐extension: svg
📐definition: |
<svg xmlns="http:https://www.w3.org/2000/svg"
width="{{ width }}"
height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" >
<style>
/* <![CDATA[ */
@font-face {
font-family: "game-icons";
src: url('{{ './assets/game-icons.woff' | includeAsDataUri }}') format('woff');
}
/* ]]> */
</style>
<g id="bleedLayer" transform="translate({{bleedbox.x}}, {{bleedbox.y}})">
<rect fill="black" id="bleedbox" x="0" y="0" width="{{bleedbox.width}}" height="{{bleedbox.height}}"/>
</g>
<g id="trimLayer" transform="translate({{trimbox.x}}, {{trimbox.y}})">
<rect id="trimbox" x="0" y="0" width="{{trimbox.width}}" height="{{trimbox.height}}"
fill="black" rx="{{trimbox.corners}}" ry="{{trimbox.corners}}"/>
</g>
<g id="artLayer" transform="translate({{artbox.x}}, {{artbox.y}})">
<rect id="artbox" x="0" y="0" width="{{artbox.width}}" height="{{artbox.height}}"
rx="{{trimbox.corners}}" ry="{{trimbox.corners}}" fill="lightgray" />
<text style="font-family: game-icons;font-size:15" x="{{artbox.width/2}}" y="{{artbox.height/2}}" text-anchor="middle">
{{ 'icon' | fromModel }}
</text>
<text style="font: small-caps bold 8px sans-serif" x="{{artbox.width/2}}" y="{{artbox.height/2+12}}" text-anchor="middle" fill="black">
{{ 'title' | fromModel }}
</text>
</g>
</svg>This is an example for Poker cards describe on https://printeurope.fr:
⏹myLayout:
tags: ⏹layout
📄format: 🃏poker
🔄orientation: 🔄portrait
📏paddings: 4📏mm
📏bleeds: 0📏mm
📏corners: 4📏mm
bind data and the template and the layout:
🖼️myCollection:
tags: 🖼️collection
⏹layout: ⏹myLayout
📐template: 📐myTemplate
📐parameters: {}
📑foreach:
- { 📑is: 🏠myCard, 🖨️copies: 1}
- { 📑is: myGlyph, 🖨️copies: 3}
and export in PDF:
🖨️myPrinting:
tags: 🖨️printing
📑foreach:
- { 📑is: 🖼️myCollection}
🖨️mode: 🚀production
📏margins: 0📏mm
📏density: 300📏dpi