Creating Card Data

We now come to the powerhouse of Card Editor, where we create card data to bind to our layouts and produce the resulting images. We do this through a Data Set, which represents all of the card data within a set of cards. In this tutorial, we will learn how to:

1. Create Data Sets
2. Add text and image Fields
3. Create Card Data in a Data Set
4. Populate text and image fields
5. Change fonts and embed Glyphs in the middle of text
6. Associate front and back Layouts with a Data Set
7. Preview card outputs
8. Output final images for individual cards and for entire Data Sets

For complete information on Data Sets, see the Data Sets documentation

Creating the Hero Data Set

To create a Data Set, first click the Add Document button, found in the top left corner of the window, and select Data Set from the menu.

First we will create a Data Set for our Hero cards, so let's name this Data Set "Heroes" and create the file. We now see the Data Set view.

There are three parts to the Data Set view. The first is the Card Data table on the left, which displays the card data and fields. In the middle is the front layout preview, and on the right is the back layout preview.

Setting Layouts

Setting the front Layout

Each Layout preview has several buttons at the top. The largest one is the Layout Selector, which defines what Layout should be used. When clicked, you are given the ability to select any of the Layouts in the Workspace.

Let's select the "HeroFront" Layout and click "OK".

We now see the HeroFront Layout we created, but without any of the guidelines. It appears very empty, but will be more interesting once we create some Card Data.

Setting the back Layout

We will now set the back layout. Click the Layout Selector for the back preview, but notice that the number of Layouts to select from is smaller than before. That is because once you have selected the Layout for one side of the card, you must use a Layout of similar size for the other side.

Select the "HeroBack" Layout and click "OK"

We now see the HeroBack Layout we created, also without any of its guidelines.

Adding Fields

Now we will add Fields to it. There are 3 types of Fields: Text, Image, and Color.

Hero cards have a Name, an Ability, and a Portrait, so we will create 2 Text Fields and 1 Image Field for our Data Set. At the top of the Card Data table are several buttons. We want to select the third button, which is the Add Field button. Click this button and add a Text Field from the resulting pop-up menu:

Once we select the type of Field to create, Card Editor will ask us for a name of the Field.

Each Field must have a unique name within the Data Set. Let's name this Field "Name". We will repeat the process two more times to create another Text Field named "Ability" and an Image Field named "Portrait". We can click and drag the bar between the Card Data table and the previews to give more space for fields.

Adding Card Data

Now we can create our first Hero Card Data. Select the first button above the Card Data table to add a Card Data. Card Editor will ask us for the card's name, which we will set to "Hero001".

Filling out Card Data

Setting Text

You can type text directly into the table cells for Text Fields, so type in the Hero's name into the cell under the Name column. Because we bound an Element in the front Layout to the Name Field, the name that we type in will be reflected in the preview.

For this Hero's Ability, type in "Gain 2<glyph name="coin"/>" Note the unusual pattern within the angle brackets. This is how Card Editor embeds Glyphs into Text Fields. We can see our glyph in the card preview.

It is worth noting that in this preview, the glyph does not appear correct. This is because we used an image for print resolution (300 PPI) but are viewing it at screen resolution (96 PPI). Rest assured that it will look correct in the end.

We can also alter sections of the font size, type, and color. Let's make a second Hero card, give it a unique ID and a name. For the ability, type in "Take <font color="red">2 damage</font> and draw a card". This will change the text color of "2 damage" to red, which is also reflected in the preview.

Setting Images

Image Fields allow you to either type in the filepath to an image file directly or select one through a file picker using the button on the side of the path entry box. Just the same as Glyphs and Image Elements, we want to make sure we use images of appropriate size so that they look good in print. Our HeroFront Layout is 1.9" wide by 1.2" tall, and we want to output cards at print resolution (300 PPI) so our final image should be:

1.9 inches * 300 PPI = 570 pixels
1.2 inches * 300 PPI = 360 pixels

Let's use these 570x360 pixel imges for our two Hero cards, and save them in the root folder:

We can now use the file picker to select the Portrait for each card, which will also appear in the card preview.

Creating the Location Card Data Set

A single Data Set is suitable for all cards of a single type in a game. Since we have two types of cards, we will create a second Data Set for our Locations. We will follow the same steps as for Hero cards, but we will name this Data Set "Locations" instead. Locations have the same Fields as Heroes, with a Name, Ability, and Portrait. We will use the "LocationFront" and "LocationBack" Layouts for the front and back layouts, respectively. A Location's Portrait is 3.25" x 2.25", so the image should be:

(3.25" * 300 PPI) x (2.25" * 300 PPI) = 975 x 675 pixels.

Let's use this image for our Location's Portrait, and save it to our root folder:

Let's create a Location card and fill out its data.

We are ready for the final step, either outputting cards as image files or creating and printing a deck