Designing Layouts

In this tutorial, we will create layouts for the fronts and backs of our Hero and Location cards. We will learn how to:

1. Add Layouts to the Workspace and set sizes for both upright and sideways cards
2. Add, reposition, resize, and rotate Elements, as well as add rounded corners
3. Bind Elements to card fields

For complete information on Layouts, see the Layouts documentation

Creating the Hero Front Layout

Once we have created our Workspace, we can start to design our card layouts. First, click the Add Document button, found in the top left corner. This will open a menu to choose what type of document to create. Select Layout.

First, we will create the layout for the front of a Hero card. Let's name this layout "HeroFront" and create the file. A dialog will pop up asking us the size of the layout. For this example, we will use standard poker-sized cards. Many card printers require additional space around the card for printing, called the bleed. We will set our bleed to 1/8 of an inch. In addition, it is a good idea not to put any crucial card elements too close to the edges or they may get cut off. To help this, we will set a 1/8" safe zone.

Once we have selected our sizes, we click OK and see the full card layout.

The white box is the full area to be printed, including the bleed. The black-and-white dashed outline is the size of the actual card itself, while the pink dashed outline is the safe zone. These dashed lines will are guides only and will not appear in the final output.

Creating an Outline

Let's begin by giving our card a nice black outline. To do this, we want to create a Color Element by clicking the Add Element button in the top left corner of the Layout view and selecting "Color".

This will create a Color element in the top-left corner of the card with a default color of transparent pink.

When an Element is selected, it will have a dashed line surrounding it, along with some light blue grabbers. When an Element is not selected, the dashed line will become transparent, and the grabbers will disappear. Similar to the card size and safe zone lines, these are simply guides to help lay out Elements and will not appear in the final output.

We can double click on the Element's name to change it, which we will rename "Black border". We want this to cover the entire area, so we will click and drag it to the top-left corner, then click and grab the light blue boxes on the element's edges and corners until it fills the entire space. We can also type the values in the properties window at the bottom left of the layout view, which is sometimes easier than trying to resize it by hand. You can also type in the element's position manually instead of clicking and dragging it.

Note that Black border's position is negative. Card Editor considers the origin (0,0) to be the top-left corner of the card itself, with the positive X and Y directions extending right and down, respectively.

To complete the border, we will add a white Color Element on top of it. We will name this Element "White overlay", and place it so that it fills the entire safe zone region. In addition, let's set the Corner Radius (found in the properties window) to .25".

Adding Text and Images

Now we will add Elements for the Hero Names, Portraits, and Abilities. These will be handled through Text and Image Elements, which are added the same way as Color Elements, but using the Text and Image menu items respectively. Let's start by adding a Text Element, positioning it at the top center of the card, and naming it "Hero name".

Now let's take a closer look at the Properties window:

In particular, we want to look at the Field properties, just below the sizing properties. We want to click the checkbox named "Bind To Field" and enter "Name" in the "Bound field" box. This tells Card Editor that the Layout doesn't know what text goes in the box, but instead the text is in card data in a field called "Name". We will fill out this card data later, but until then, the Layout will display the name of the bound field instead.

Below this, we can set the Text Element's font family, font size, text alignment, and text color. Let's center the text both vertically and horizontally, and increase the font size to .25. Note that font size is defined in inches, specifically the vertical height of the baseline to the top of the ascender. You can find more information here. These changes are reflected in the Layout view.

Now let's add a Text Element for the Hero Ability. Let's place it in the bottom half of the card, centered horizontally. We will bind this Element to a field named "Ability".

Finally, we will add an Image Element for the Hero Portrait. Let's place it in between the Name and Ability, and bind it to a field named "Portrait". In addition, we will select the "Stretch to Fit" checkbox in the properties. This means that any image we place in that element will stretch to fill the available region.

Creating the Hero Back Layout

We have finished the front side of the Hero cards, let's make the back side. We will create a new Layout using the New Document button in the top left corner, select "Layout" again, and name this file HeroBack. Since this is the back of the card, it should be the same size as the front, so we will once again select the Poker size, with a 1/8" bleed. The safe zone does not need to be the same size as the front, but it's useful to have anyway.

Creating Another Outline

We will make a similar border style for the back sides, but instead of white, let's make the overlay yellow instead.

Using Images at Scale

For the back of the Hero card, we want to use an image, but how do we know how large the image should be? Card Editor measures everything in inches, while image files are typically measured in pixels. The key is to consider the card's resolution, or how many colored dots fit within the physical space. This is measured in either Pixels Per Inch (PPI) for screens or Dots Per Inch (DPI) for printed images. Many digital displays (though not all) use a resolution of 96 PPI, while printing studios will use 300. To calculate the image size you need, multiply the image size by the resolution:

Image size in inches * resolution (pixels or dots per inch) = digital image size

For our example, we want the image to be 2 inches across by 1 inch tall, and we want to print these out at 300 PPI. Some quick math shows our sizes:

2 inches * 300 PPI = 600 pixels wide
1 inch * 300 PPI = 300 pixels tall

Let's create a 600x300 pixel image and save it in the workspace root folder:

Now we can add an Image Element, set its size to 2 inches wide by 1 inch tall, and use the "Image" file picker in the properties window to select our image file. The image will appear oversized in the Layout view because it's drawing at 96 PPI for a screen. Selecting the "Stretch to Fit" checkbox will shrink or grow the image to fit the available space in the Element without distorting it, so it appears correct in the Layout view. It will appear the correct size when we output the cards to file later on.

Rotating Elements

Note that when an Element is selected, in addition to the light blue boxes surrounding it, there is also a light blue circle above the top-middle box. If you click and drag this, you can rotate the Element around it's center. You can also manually enter the rotation in degrees in the properties window, found just below the position and size entries. Let's rotate the image 60 degrees.

We have now finished the back side of the Hero cards. Next, let's make the Location cards.

Creating the Location Front

Landscape card layouts

Let's say that our Location cards are the same size as the Hero cards, but we want them to be laid out as in Landscape orientation, that is horizontally rather than vertically. We begin by adding a new Layout to the Workspace, which we will call LocationFront. Select the Poker card size, 1/8" bleed, and 1/8" safe zone. However, this time we will also select the "Landscape" checkbox found at the bottom of the card size selection.

The Landscape checkbox will swap the card's selected width and height, so that a normally vertical card instead goes horizontal.

Rounding Selected Corners

Let's begin the Location card with a colored border, similar to the Hero Card, with a few changes. First, let's make the border green instead. Second, instead of a Color Element overlay, let's use an Image Element bound to a Portrait field. Let's set the overlay's corner radius to .5" rather than .25", but unselect the checkboxes with arrows pointing at the top left and bottom right corners. This creates a more interesting layout than a plain rectangular region. When an Image Element is bound to a field, it will have a gray outline in the Layout view so that you can see it's overall shape. This outline will not appear in the final output.

Reordering Elements

Similar to the Hero card, we will add Text Elements for the Name and Ability, and bind them to the Name and Ability fields respectively. Let's place these in the top left and bottom right corners of the safe zone.

However, it is apparent that the text for these Elements will not stand out well against the image overlay. Let's fix this with some Color Elements to act as backdrops. New Elements will always be placed on top of everything else in a Layout, but we can change the order by dragging and dropping the Elements in the list or by clicking the buttons at the top of the list, next to the Add/Remove Element buttons.

Creating the Location Back

We will needs backs for the Location cards, just like the Hero cards. We will make the layout the same size with the same bleed, also in Landscape, and the same safe zone size. Let's also give it the same green border and a yellow color overlay with rounded corners. We will use another tilted logo image:

However, this card layout is already rotated 90 degrees as a landscape, we will actually tilt it 30 degrees in the opposite direction to match the normal 60-degree rotation of the Hero cards. Since rotation is always measured on a scale of 0 to 360 degrees, this means our actual rotation is 360 - 30 = 330 degrees.

We have now finished all of our Layouts. Next we want to add Glyphs.