Using a good Calligraphy brush in Procreate is definitely going to help your work, but one brush that needs to be accurate to get the desired result is your guidelines brush. The proportions of the x-height and degree of angle are essential components of a specific style.
Whether you’re a beginner or a seasoned artist, the use of guidelines give you a solid foundation to build on. They help keep consistency in letter size and slant which significantly improves your Calligraphy.
You could import guidelines as image files, but by setting these up as brushes in Procreate, you can easily access them straight from your brush palette! This saves you time (as well as file size) without the need to tediously import images when creating a new piece. It also allows you to reduce the opacity, increase or decrease the number of guide bars (by adjusting your brush size), and easily change colour for better visibility.
Next to calligraphy brushes, these are my go-to tools and in this tutorial I’m going to show you how to make your own! By the end, we’ll have a 55 degree angle guideline Brush perfect for Copperplate Calligraphy. You can also apply the same method to create other angled brushes.
See the video below for a demo of the guidelines brush we’ll be making.
Music Credits – Title: Yellow Taxi under a Blue Sky Author: MindsEye Source: http://freemusicarchive.org/music/MindsEye/Yellow_Taxi/MindsEye_-_Yellow_Taxi_under_a_Blue_Sky License: http://creativecommons.org/licenses/by-sa/4.0/ Royalty Free Music found @ https://starfrosch.com
The X-Height Size and Angle
Before you start creating your custom brush, decide on the style it is intended for. As mentioned, different styles have different letter proportions and angles. For instance, Brush Script has a taller x-height than Copperplate.
The image below shows the Copperplate proportions for the ascender, x-height and descender space, which has a ratio of 3 / 2 / 3.
What You Will Need
To follow along, you’ll need access to a computer and a graphics programme. I’ll be using Adobe Photoshop (they offer a free 30 day trial), but you could do the same in other applications. You just need something you can create a horizontal and vertical lined grid and export the image with a transparent background.
You’ll also want to have your iPad and Procreate nearby. We’ll be moving to that for the second half of the tutorial.
Step 1 – Create a New Document
Open Photoshop and create a new document. You’ll see a dialogue box where you can specify the canvas size and color mode. Set both the width and height to 400 pixels and choose RGB color.
The contents of this image will be the pattern your brush paints, so we want it to repeat seamlessly both horizontally and vertically.
Important note : make sure you use a square dimension (with the same width and height) for your canvas size. When I first attempted this, I had a different width and height ie. 350 x 370px. Procreate automatically stretches the image to fit a perfect square which will warp angle! We don’t want that to happen, so make sure it’s a square.
Step 2 – Draw your Horizontal Guidelines
Next, we want to draw the horizontal guidelines. The spacing between these lines will depend on what Calligraphy style you are working with. For Copperplate there is more space above and below the lowercase letters area.
Select your line tool and set the ‘weight’ to 3px. Choose a bright colour so you can see your lines clearly (we will change this to white later). Starting at the bottom of the canvas, draw your descender line. By holding down the shift key as you drag out your line shape, you’ll get a perfectly straight line. Make sure your line extends right to the canvas edge and there is no white space either side.
Now draw the remaining horizontal markers ie. your baseline, x-height and ascender lines (with the 3/2/3 ratio). If you are using the same file dimensions (400px x 400px), the ratio works out at around 117px for the bottom space, 74 pixels for the mid space and 117 pixels for the top.
You’ll notice we’ve left a gap after the ascender line. This is so the brush will leave some space between each row helping to see where one row starts and another begins.
Step 3 – Draw Your Diagonal Lines
Next, draw a long horizontal line that extends past your canvas edges (it needs to be big enough so it will fill the diagonal space once rotated). To get the angle exactly right, make sure the line shape is selected. Enter ‘-55’ in the settings for ‘Angle’.
Ok, here is the tricky part. Remember we need this image to repeat? It’s easy enough to get a horizontal line to repeat, but diagonal lines are more difficult! We need to make sure all lines meet up to paint a seamless grid. This might take some trial and error. I found it helped to fill the space from the middle outwards.
Start by placing your rotated line near the middle of the canvas. Duplicate the shape and fill the area with the diagonal lines both to the left and right, spaced as evenly as you can. Follow the image below and your pattern should repeat seamlessly.
Step 4 – Remove the Overflow
Next, we want to hide the overflow of the diagonal lines above our ascender to keep some clear white space between our rows. To do this, move your diagonal lines into a new group by selecting them all and choosing the little arrow icon in your layers palette. Choose ‘New Group from Layers’, give the group a title and hit ‘OK’.
Choose your marquee tool and select the area above your ascender line. Go to the ‘Layer / Layer Mask’ and choose ‘Hide Selection’ from the drop down menu.
Step 5 – Test your Pattern
Before we move to Procreate and create our custom brush, this is a good time to test your sample image to make sure it repeats.
To do this, simply save the image you just created as a png. Create a new document at 800 x 400px. Open your png file and place it on the canvas in the top left corner. Duplicate this image and while holding down shift, move it to the very end of the first image. The horizontal lines should all meet up fine, but how are the diagonal? Do they match?
If there’s any areas that aren’t lining up, you’ll be able to see the culprits and tweak the original file. Rinse and repeat until you have a seamless pattern!
Step 6 – Prep your Source Image
Once you have your seamless pattern image all matching beautifully, go back to your original layered artwork file. Change the colour of the guidelines to white (a quick way to do this is to move the shapes into a single layer group, double click and choose ‘Colour Overlay’).
Turn off your background layer so you just have the guidelines visible. Choose ‘Save for Web’ from the File Drop Down Menu. Select PNG-24 as the file type and hit Save.
Either save directly or move this png file in a location you can access from your iPad (iCloud or Dropbox).
Step 7 – Set up Your Custom Brush in Procreate
The hardest part is done and we’re now ready to move to the iPad!
Open Procreate and create a new document. Click on the brush icon to reveal the Brushes palette, and click on ‘New Set’. This just keeps your custom brushes in a separate group to your default options. You can rename the set by tapping on the label.
Now tap the ‘+’ symbol and you’ll see the preferences shown below.
Tap on ‘Shape Source’ and choose ‘Pro Library’ from the options. You’ll see the a range of textures that come standard options with Procreate. Scroll through until you see the white square called ‘Blank’ and tap it.
Next tap on the ‘Grain Source’ image. Locate the Guidelines image you just made (either through Dropbox or iCloud) and select it.
And lastly, make sure that ‘Orient to iPad Screen’ toggle is switched to on. This is under the ‘General’ tab in your brush settings.
Step 8 – Test Your New Brush!
Your new brush is all set up and ready to go! Make sure to fill the screen without lifting your pencil, otherwise the grid will continue in a new position and it won’t match up.
You can enlarge or decrease the size in one of two ways – either changing the size of your brush or scaling the layer itself. To do this, make sure your guidelines layer is active. Choose the selection tool and using a two finger pinch, scale the size up or down. Try and keep the horizontal lines straight by aligning the top bar with your canvas as a guide.
That’s it, you now have a guide brush to help your calligraphy! Pretty cool huh!
I hope you enjoyed this tutorial and were able to create your very own guidelines. The are so many possibilities once you know how to make a custom brush like this!