Card Creatr Studio

Tutorial - Double-Sided Cards

2019-08-04T00:00:00+00:00

Starting with Card Creatr Studio 1.4.0, you can make a layout for both the front and the back of every card. This page explains how to make double-sided cards.

Follow along with this example file: front-back.ccsb

Toggle Preview between Front and Back

Normally, the preview window renders the front of the card. Click the checkbox just below the preview window to show the back of the card, called the Back Checkbox:

Until you create a custom card-back template, the preview will not change.

Creating a Card-Back Template

The variable __BACK is true if the Back Checkbox is ticked. To design your card back, use the following syntax in your template:

// Common Logic Here

if __BACK
	// Card-Back Template Here

else
	// Card-Front Template Here

The example file has this template:

// This rectangle shows up on both the front and the back.
rect(x=0, y=0, width=180, height=252, fill=color)

if __BACK
	// This text is only on the back.
	+text(back_title)(align="center", font-family="title", font-size=18, x=90, y=252/2+18/2)

else
	// This rectangle and text are only on the front.
	rect(x=12, y=12, width=156, height=228, fill="white")
	+text(front_title)(align="center", font-family="title", font-size=18, x=90, y=252/2+18/2)

Here, a large colored rectangle is painted on both the front and the back. Then, a different text field is printed on each side, and the front additionally has a white rectangle inset within the larger colored rectangle.

Printing Double-Sided Cards

If the Back Checkbox is ticked, all export functions will render the back of the card. This includes Export to PDF: the cards will be arranged in a mirror image to allow for double-sided printing.

Case Study - Ruby Hunters

2018-06-03T00:00:00+00:00

My second tutorial entry is a case study on how I used Card Creatr Studio to draft cards for a prototype of mine, called Ruby Hunters. You will learn about asset management, card-specific template customization, dropdown fields, and custom card dimensions.

Preview of Final Product

We will be creating a deck of 3.5-inch square cards for printing. There are several possible card layouts. Here is the PDF output that we will be creating by the end of this tutorial, with 6 cards per page:

Step 1: Create Illustrations

Card Creatr Studio is a card database and layout/finishing tool. It is not designed to be a full-powered graphic design suite. The building blocks tutorial describes how to create basic shapes, but for more complex designs, you want a more featureful graphic design tool.

I used Adobe Illustrator to create some initial designs:

Another great piece of software is Inkscape, which is free, unlike Adobe Illustrator. Photoshop and GIMP can also be used, but I prefer Illustrator and Inkscape because they produce vector graphics.

Step 2: Import Illustrations

Next, you want to import your illustrations into Card Creatr Studio. Export your illustrations as SVG (in Illustrator/Inkscape) or PNG (in Photoshop/GIMP). In Card Creatr Studio, create a new document. Under “properties”, open the Assets tab, and click “Choose File” to add a new asset:

Once you add all your assets, you should see them here:

In order to make the assets accessible to templates, there is unfortunately one more step. It’s not too hard, and it needs to be done only once. Open the Advanced tab, and under the “assets” block, enter a line like this for each asset:

"image_identifier (img,path)": "assets/filename.svg"

Customize image_identifier, which is how you will refer to this image in templates, and filename.svg (or png), which should correspond to the name under the Assets tab. Example:

This additional step might be eliminated in a future version of Card Creatr Studio.

We have three different background images, and we want to be able to choose which one to use. To do this, we can use a dropdown menu field.

Open the Fields tab, and add a new field with display “dropdown.” In the “Dropdown Options” text box, enter the options to appear in the dropdown menu. This dropdown menu will appear for every row in the spreadsheet.

I made my dropdown menu options the same as the names of the assets in the Advanced tab.

Step 4: Customize Card Dimensions

By default, cards are poker-sized (2.5 by 3.5 inches). However, we want 3.5-inch square cards. To do this, change some settings in the “viewports” and “dimensions” sections of the Advanced tab.

You’ll need to change a few different places. Under “dimensions”, you start with this:

	card: {
		// 2.5 in by 3.5 in
		unit: "pt"
		width: 180
		height: 252
		dpi: 300

This setting controls the preview pane and the “Export Card Images” export option. Change it to:

	card: {
		// 3.5 in by 3.5 in
		unit: "pt"
		width: 252
		height: 252
		dpi: 300

Under “viewports”, you have this:

	page: {
		width: 612
		height: 792
		cardWidth: 180
		cardHeight: 252

This setting controls how big the cards are in the “Export as PDF” export option. Change it to:

	page: {
		width: 612
		height: 792
		cardWidth: 252
		cardHeight: 252

Finally, also under “viewports”, you have:

	card: {
		width: 180
		height: 252

This setting controls the coordinate system used within the card template. You can technically put any values you want here, and the card will scale accordingly. You could put 252 for both width and height, which would correspond to points, but to demonstrate what this setting actually does, we will set both width and height to 100:

	card: {
		width: 100
		height: 100

Step 5: Create Template

We are finished with the Advanced tab. Now, switch back to the Template tab so that we can start our card layout.

First, we want to create a white background rectangle that covers our entire card. Our viewport is 100x100, so set width and height to 100:

rect(x=0, y=0, width=100, height=100, fill="white")

Now, we want the background image to depend on the option selected in the spreadsheet. Our column is named background. Since the options for background are the same as the image IDs in the Advanced tab, we can use this little shortcut:

assets[background]

If you don’t want a variable asset, you can access it like this:

assets.image_identifier

We want our background image to fill the whole card, on top of the white square. We can use the +imageFill built-in helper function, described in more detail in the building blocks tutorial:

+imageFill(assets[background], 0, 0, 100, 100)

We end up with this:

I will also add a custom font that we will use for our template. I went to fonts.google.com and chose a font named “acme.” To add it to my project, I go to the Fonts tab and use the “Add Font” selector to add it:

Step 6: Custom Layouts for Each Background

Since we have the full power of JavaScript at our disposal, we can create “if” statements that change the tutorial based on the option selected in the dropdown menu.

This is more easilly illustrated with template code:

I created three “if” statements; only one of them will run for a particular card based on the value chosen in the “background” dropdown menu.

I also added two fields for numbers. The positions of the numbers also depend on which background was chosen, and two of the templates use only one of the two number fields. I set the font of the numbers to “acme,” the one I added to the project in Step 5.

Step 7: Finishing and Printing

After making the initial design, I decided that it needed a splash of color. I went back to Illustrator and made a common island-like square background, which I added as an asset. I also replaced the three existing assets with versions with more color.

The template is ready now! Time to fill in the spreadsheet:

Next, go to File → Export as PDF:

And after a few seconds, you have the PDF for home printing:

You can download my full ccsb file below, which includes all of the features from this tutorial and a few more tweaks I made afterwards:

ruby-hunters-tutorial.ccsb

I hope this tutorial was helpful. To learn more, read through the other tutorials, and if you have specific questions about how to do something with Card Creatr Studio, ask on the feedback and support page, which you can access by clicking the “Feedback” link at the top of this web site.

Tutorial - Building Blocks

2018-04-15T00:00:00+00:00

I’m pleased to introduce my first tutorial entry, focused on the core building blocks: shapes, images, and text. You will learn how to create and align these core building blocks to create your own custom template in Card Creatr Studio. I also introduce variables and basic scripting.

Card Creatr Studio templates are written with SVG and Pug.

What is SVG?

Card Creatr Studio uses the SVG markup language to create templates. SVG stands for “Scalable Vector Graphics”. SVG is a language that allows you to dictate shapes to render on your playing card; Card Creatr does the rest of the work of following the instructions in the template to create the final rendered card image.

SVG uses an X/Y coordinate system, except that unlike what you learned in high school, the y dimension goes down, not up. Illustration:

What is Pug?

SVG requires that you write your markup in XML. However, XML is not the nicest langauge for humans to use. Pug, previously known as Jade, is a templating language that allows you to write simpler markup that gets translated into full XML for SVG to consume.

For example, SVG requires the following input to create a rectangle:

<rect x="5" y="5" width="20" height="20" fill="black" />

In Pug, the same can be written as:

rect(x=5 y=5 width=20 height=20 fill="black")

Pug also exposes the full power of JavaScript, which will come in handy in the “Variables” section later in this tutorial.

Getting Started

The simplest building block is a rectangle. To demonstrate, start by creating a new empty file in Card Creatr Studio. The default template contains two items: a rectangle and a text element.

rect(x=0, y=0, width=180, height=252, fill="white")
+text(title)(align="center", font-family="title", font-size=17, x=90, y=28)

The first line creates the white background. It is 180pt wide and 252pt tall. “pt” means “point”, a unit used in page layout; there are 72 points in an inch. A 180-by-252-point rectangle is 2.5 inches by 3.5 inches, a standard poker-sized card.

The second line creates a text placeholder. The text placeholder is at x=90pt, so it is centered horizontally (the card is 180pt wide). The y coordinate for text is relative to the text’s baseline, as illustrated below:

Therefore, by making the font size 17pt and the y positioned at 28pt, we leave around 11pt (28pt–17pt) between the top edge of the card and the top of the text.

Elements vs. Functions

You may notice above that the word “text” is preceeded by a plus sign, as in +text, but the word “rect” does not have a plus sign. The plus sign indicates that the line may actually get expanded to a different underlying SVG string via a helper function. Since rect is an official SVG element, it does not need a helper function. There are several helper functions in Card Creatr, which help cover functionality that is unclear or difficult to perform using plain SVG elements:

+text
+textWrap
+imageFill
+imageFit
+imageStretch

For example, the above +text example expands to the following SVG XML, which actually renders the text left-aligned from a calculated x coordinate:

<text x="34.355712890625" y="34" font-family="title" font-size="17">Hello, world!</text>

Using +text also allows Card Creatr to render the text as SVG paths. For more information, see the “fontRenderMode” option in the “Advanced” tab.

Examples of all five of these helper functions are shown throughout this tutorial page.

Adding Our First Rectangle

Let’s create a new rectangle that leaves 12pt around the edge of the card. The coordinates need to be as follows:

x: 12pt
y: 12pt
width: 156pt = 180pt (card width) – 12pt – 12pt (edges)
height: 228pt = 252pt (card height) – 12pt – 12pt (edges)

The markup is:

rect(x=12 y=12 width=156 height=228 fill="blue")

Uh-oh! Our new blue rectangle is hiding our title text! This brings us to another important rule in SVG:

Elements later in the template file appear above elements earlier in the template file.

Let’s fix this by moving our blue rectangle between the white rectangle and the text box:

We can now see our text in full! Don’t mind the colors; we can fix that later.

Using Variables

We have three elements: the two rectangles and the text field. Our dimensions 180pt and 252pt are already duplicated several times in our template markup! We can fix this by abstracting these dimensions into variables. Pug allows us to define JavaScript variables on lines starting with -; this is also how you write any JavaScript code in Pug. We can simplify our template to the following:

- cw = 180  // card width
- ch = 252  // card height
- m = 12    // margin

rect(x=0, y=0, width=cw, height=ch, fill="white")
rect(x=m y=m width=cw-2*m height=ch-2*m fill="blue")
+text(title)(align="center", font-family="title", font-size=17, x=cw/2, y=28)

If we wanted to change the card width, card height, or margin, now we need to do it in just one place!

The syntax // means a “comment” in your template: the text that follows the // is ignored until the next line.

Images

Next, let’s add an image to our card.

Before we do the image, I’m going to clean up our template a little bit:

- cw = 180  // card width
- ch = 252  // card height
- m = 12    // margin

rect(x=0, y=0, width=cw, height=ch, fill="skyblue")
rect(x=m y=m width=cw-2*m height=ch-2*m fill="white")
+text(title)(align="center", font-family="title", font-size=17, x=cw/2, y=34)
rect(x=m y=42 width=cw-2*m height=90 fill="orange")

I changed the colors and created a new orange rectangle. Let’s put an image in that rectangle.

You will first need a field in your spreadsheet to insert the image. To do this, open the “Fields” tab in the properties pane, and insert a new field named “myimage” with property “img” and display “image”:

Choose an image, and return to the template. Now let’s insert our image. We define a rectangular area in which to insert the image, and then we can use any of the following three built-in image helper functions:

+imageFill, enlarges the image to fill a rectangular area, clipping off the edges of the image if necessary.
+imageFit, fits the image into the rectangular area, possibly leaving part of the rectangle empty.
+imageStretch, distorts the image to completely fill the rectangular area without clipping off the edges.

The markup for these helper functions is as follows:

+imageFill(myimage, m, 42, cw-2*m, 90)

where the parameters are given in the order x, y, width, and then height. Here is what happens with each of the three versions of the helper function:

+imageFill(myimage, m, 42, cw-2*m, 90)

+imageFit(myimage, m, 42, cw-2*m, 90)

+imageStretch(myimage, m, 42, cw-2*m, 90)

For this tutorial, let’s settle on +imageFit.

Body Text

Now it’s time to add some body text below the image. First, add a multiline field named “body”:

Now, add it to the template as follows, using the +textWrap helper function:

- p = 4     // text padding

+textWrap(body)(x=m+p y=150 width=cw-2*(m+p) font-family="body" font-size=11)

The +textWrap helper function is very useful because there is currently no option in the SVG specification for performing automatic line wrapping. The function computes the appropriate line wrapping widths and does the layout automatically.

+textWrap has the following custom options; the first three are also available in +text:

align accepts either "left", "center", or "right" and controls the alignment of the text relative to the registration point.
font-family controls the font itself; you must use one of the fonts available in the “Fonts” tab. By default, there are two fonts, “title” and “body”, which are actually DejaVu Serif. You can add more fonts in the Fonts tab.
font-size controls the text size.
line-height controls the spacing between baselines of text.
paragraph-spacing controls the amount of additional space added between “paragraphs” (line feeds in the multiline text box in the spreadsheet).

Advanced: Scripting

You’ve now mastered all of the basic tools for card layout. In this final section, I want to illustrate one of the most powerful features of Card Creatr Studio: the ability to use scripting. We will make a field to add a variable number of pips (circles) to the bottom-right corner of the card.

Start by creating a new field called “pips” with type uint and display number, and set a value of 3 in the card spreadsheet:

Now, add the following code to your template:

- pr = 6    // pip radius
- ps = 4    // spacing betwen pips

- for (i=0; i<pips; i++) {
circle(cx=cw-m-p-pr-(2*pr+ps)*i, cy=ch-m-p-pr, r=pr, fill="black")
- }

The first two lines set up two more variables that we can use. The third line with the for loop is JavaScript code that means, “copy the following line pips times”. The fourth line is the line that the for loop will copy, and it is the one that creates our circles. The math for positioning the circles is a little long, but it basically combines all of our other variables in order to have precise positioning of the pips. Note that circles use cx and cy instead of x and y in order to emphasize that the registration point of the circle is its center. The r parameter specifies the circle’s radius.

Here is what we end up with:

Since we used variables, changing the size of the pips is easy. Here is what it looks like when I set pr = 12 (notice that the circles are bigger):

Next Steps

The full power of SVG is at your fingertips with Card Creatr Studio. The MDN is a great online resource for learning all of the other things you can do with SVG:

https://developer.mozilla.org/en-US/docs/Web/SVG

If you have questions about how to make specific layouts with Card Creatr Studio, post a question on the feedback and support page, which you can access by clicking the “Feedback” link at the top of this web site.

Tutorial Series

2018-03-09T00:00:00+00:00

Several users have asked for tutorials on how to use Card Creatr Studio’s powerful templating engine for card layout. I am pleased to announce plans to create a series of short tutorials exploring how I used Card Creatr Studio to create a game of mine, Amusement City.

Amusement City is a dice-building game I am demoing at Protospiel San Jose 2018. You can read more about it here:

https://tabletop.events/conventions/protospiel-san-jose-2018/prototypes/amusement-city

The cards in Amusement City correspond to each attraction that you could build in your park. To demonstrate, here is one attraction: the Photo Booth.

This card exercises a lot of different features of both Card Creatr Studio and of the templating engine, including static assets (the sunburst background), text written along paths, mirrored images, and more. In the coming tutorials, I hope to help you learn to make templates such as this.

About Me

2017-03-26T00:00:00+00:00

My name is Shane. As an amateur board game designer, I found that there was a lack of a simple program to both organize your cards in a database and lay them out for printing. I first tried using InDesign, but it requires studying hours of tutorials in order to master. I tried FileMaker, but it didn’t have the kind of layout tools I was looking for. Microsoft Word and PowerPoint have easy drag-and-drop layout tools, but they aren’t very good for organizing your cards.

In order to solve this problem, I decided to write my own program that did what I needed for game design. I wanted a program that let me organize my cards so that I could edit them in a spreadsheet. I wanted a program that gave me powerful tools for creating my own layout templates. I wanted a program that let me generate print layouts hassle-free. This is how I started working on Card Creatr Studio. I’m glad to share the first version of my program today.

I am currently working in Mountain View, California. You can often find me around at local board game meetups.