Skip to main content
Introduction In this tutorial, we will create a sample Baby’s arrival card as shown in the image below with a circular mask that enables customers to drag and place their pictures from the Picture Gallery, Hard Disk or Facebook on the card while that picture is masked out to fit the shape of that circle.
Finished baby arrival card with a circular photo mask, bee graphic and the baby's name and date of birth
Also we will learn more about the item settings in the PitchPrint app to wit: Transform Lock, Edit Lock, Include in Form and Reference. These settings apply to items like shapes, pictures or texts on the canvas. So to get started, let’s log into our admin panel. (Before getting started on the design you will have to import the following image into your backgrounds - You can find the image here.)

​
Creating the Template

Navigate to Design, Once in the Designs section, you will find all your designs associated with the current domain you are administering, every design belonging to a section so check out the exact section you want your card to belong and to the right of the title, you will find two buttons, click the one labelled “Create a New Design” and a window and this will pop up a window where you will provide basic details regarding your new design template. Ok! The form should look like this:
Create a New Design form asking for the design title and measurement unit
You should provide a title and for this we will use “ Baby’s Arrival“, select the unit Inches. You can as well use any unit you choose to but ensure you have your product dimensions in that exact unit because this will determine how the final print ready PDF File comes out when customers place an order. Click the Submit button and wait a little while for the app to load and initialize.

​
Add a Page

Ok, now you are in the Editor, you
Add Page panel in the editor with width, height and bleed fields
Next, we will provide the width and height in Inches. Remember we selected Inches from the panel immediately after the title. Please note, these are the actual paper width and height, not the screen pixels area. So it ought to be measured physically with a ruler or some measuring instrument. We have measured our sample card to be 4.725 for the width and 6.299 for the height. So let’s enter that; then “0.1,0.1,0.1,0.1” We don’t need to fill in the other fields. So click the Add Page button to create the page.

​
Set the Page Background Image

Now the page is created, you need to set the background image. Click the Background panel and navigate to the image you just uploaded

​
Add the Reference Text

References are like dummy pointers that are placed on the canvas as guides but are neither printed in the final PDF file nor rendered in the raster image they can be any item type be it text, image or shape. So to create one, click the text tool and click somewhere in the center. Double click it to edit the text and type in “drag your picture here”. Next, set the font style and color to green. Try aligning it to the center part of the background’s circle; re-scale and adjust its position as desired. While still selected, show the admin toolbox panel (first icon on the top left). Now you will see in the toolbox, the details for the selected item. Toggle the switch against the Is Reference label to yes as shown in the picture below:
Admin toolbox panel for the selected text item with the Is Reference switch toggled to yes

​
Create the Mask

Now we are going to create the mask spot over our reference. This is the spot on which the customer will drag their picture and it will mask it to fit the shape of the circle. Navigate to the Pictures tab and select Plain Shapes; from there, you will click the circle shape and once loaded unto the canvas, try adjusting it to fit into the circle. Its transparency had already been set low so objects beneath like the text will still appear and when pictures are dragged over them, they become opaque to imply focus. Now as regards shapes that can act as masks, it’s best you mail us your shape so we can convert it for you into a plain basic svg shape. Importing svgs from programs like Illustrator will not work because those svg shapes are too bloated; they need to be stripped bare into a basic plain shape. Now use the same procedure as above and set its Transform Lock to Yes as well as Edit Lock to Yes, so the client doesn’t mistakenly move it around before placing their picture into it. Done! Next, you should upload the Bee image. You can download it here. Click the Pictures tab, then the plus button to select the file and once uploaded, click it to load unto your canvas. Next, adjust it to fit as shown in the picture at the start of this tutorial.

​
Other Text items

Once you have done that, you can add the Baby’s Name and date of birth text easily as shown in the same picture. Remember to set the text alignment to center so when the customer is editing, they don’t have to keep dragging around to adjust its position. Also, set the Transform Lock to Yes so they don’t get moved around unnecessarily. Once that is done, you can preview your design to see how it comes out before final submission.

​
Some points to note here

If you have your art work done in a program like Illustrator, don’t just export and bring the lump SVG into web. Try stripping it down into component parts, like the background and active shapes. For texts, it’s best you simply create them in the editor so you are sure the font is there and you get exactly what you see when the final PDF is rendered. For images and shapes that are not active or just acting as accoutrements or fancy elements, it’s best you export them together as a png file if it has a transparency ( like we did the bee above) or jpeg flat image file if not. Export other items separately into smaller files and then you can import and place them unto the PitchPrint canvas to compose your design natively. If you have complex shapes with gradients, those are not supported in the app at the moment; we will over time so it’s best you flatten them into png images and then import. Make sure they are high resolution.