Live Repeat Pattern Preview Template - Artboards
- Create and save custom preset
- Set Designer to work in whole pixels
- Set User Interface Preferences with pixels and points to zero
- Create and edit Artboards
- Organize your design in the Layers panel
- Use the drawing tools
- Save the step-by-step history of your work with the file
- Save your project in both the default .afdesign format and the .aftemplate template format
About PatternsA pattern is created by repeating a seamless tile which contains one or more motifs. A motif can be a simple shape, such as a circle, or a group of design elements. The type of pattern repeat that you wish to design, such as a half drop, dot or block, will determine the placement of the motif(s) on the repeat tile. Our example will be a simple dot pattern.
SymbolsOur template will use the Symbols feather in Affinity Designer. Symbols are linked or synced objects that can be edited globally. What does this mean? Because all copies, called instances, of a symbol are linked together, when you make a change to one copy, all copies will update to reflect that change. This Symbols feature is very powerful because we can use it to power a live preview of the pattern as we arrange the motifs on the repeat tile.
Start a New DocumentAs this project is for a digital planner that will be used on the iPad, we will use the pixel dimensions for a planner page that will be 8.5 x 11 inches at 264 ppi. However, we need to have a small empty space along the left edge of the cover or page for the binding. So, our width will be 8 inches.
- Open Affinity Designer and click the New Document button at the bottom of the Welcome screen, to start a new document with the following settings (see screenshot).
- Click the Plus icon at the top of the dialog.
- You will get a new untitled preset thumbnail in the My Presets list (see screenshot).
- Right-click on the thumbnail and choose Rename Preset.
- Name your new preset Digi Planner Page and click OK (see screenshot).
- Go back to the Layout panel and click Create to open the new Artboard in to Designer.
- From the Toolbar, click the Snapping icon (Magnet), click the arrow to the right of the icon to open the menu and set the following options. Keep the other default settings (see screenshot).
- From the Affinity Designer menu, click Preferences - User Interface. In the Decimal Places for Unit Types section, set the Pixels and Points to zero (see screenshot).
- In the Layers panel, double-click the Artboard 1 layer and rename the layer to Live Preview (Artboard) (see screenshot).
- Select the Artboard tool in the Tools panel. Click and drag on the Canvas at the left of the Live Preview Artboard, to draw a new smaller Artboard (see screenshot). In the Layers panel, name this Artboard Pattern Tile (Artboard) (see screenshot).
- In the Transform panel, click on the upper left corner of the Anchor Point Selector. Set the Width and Height to 264 pixels, which is a 1 x 1 inch square at our current resolution of 264 pixels (see screenshot).
- Select the Rectangle tool in the Tools panel. Click and drag to draw a rectangle over the entire Artboard.
- In the Layers panel, rename the new layer BG - Color or Image (see screenshot). As we work, we will reference this layer with the shorter name BG.
- With the BG layer selected, go to the Transform panel and set the Width to 2104 pixels and the Height to 2904 pixels. Set the X and Y positions to zero.
- Go to the Color panel and set the menu to RGB Hex. Click the Fill Selector and set the HEX color value to black (#000000). Repeat for the Stroke Selector. (see screenshot).
- On the Canvas, draw a rectangle over the entire square.
- In the Layers panel, rename the new layer Motifs (Rectangle) (see screenshot).
- With the Motifs layer selected, go to the Transform panel and set the Width and Height to 264 pixels. Set the X and Y positions to zero (see screenshot).
- Go to the Color panel and set the Fill and Stroke selectors to white (#FFFFFF).
- In the Menu Bar, click File - Save History With Document and click Yes in the pop-up dialog. Next, click File - Save and name the file Live Repeat Pattern Preview and save the file in the native .afdesign format.
Page Preset: Custom
Page Width: 2104 pixels
Page Height: 2904 pixels
Document Units: Pixels
Create Artboard - Checked
Actual Size Zoom: iPad (Retina)
Color Format: RGB/8
Color Profile: sRGB IEC61966-2.1
Transparent Background - Checked
The above layout settings have the dimensions for only the "paper" without the side binder rings. Let's save this as a custom preset for a planner page.
Let's set up Designer to work in whole pixels.
Enable Snapping - checked
Preset: UI Design
Move By Whole Pixels - checked
We have the large Artboard that will become the live preview of our repeat pattern. Let’s rename this Artboard.
Now we will create the one inch square on which we will position the motifs for the repeat tile. Although I am making my repeat tile a one inch square, you can make yours any size as needed for your overall design. We will draw a new Artboard.
Let’s add a customizable background layer in the Layers panel for the Live Preview (Artboard). This will give us the option to change the background to a different color, a gradient or an image as needed for our pattern designs.
Let's repeat the previous steps to add a background rectangle to the Pattern Tile (Artboard). This background will not be part of the final template, but it will make the repeat tile visible as we place copies across the Canvas of the Live Preview.
Now, we are ready to build the live preview system, by converting the contents of the smaller Pattern Tile in to a symbol and placing several copies, called instances, of the symbol tiled across the Live Preview. But, let’s save our working file so far. We will use the Save History with Document feature to save the step-by-step history of our work. This history will be available when we open the saved file, giving us the option to return to a previous step.
Design a Digital Planner in Affinity Studio - Tutorial Series Index
Screenshots used by permission of Serif (Europe) Ltd. This article is not endorsed by Serif Ltd.
More Affinity Suite Tutorials
Powered by Creative Market
Editor's Picks Articles
Top Ten Articles
Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.