How to Draw a Fauxsaic in Procreate
I earn small commissions for purchases made through links in this post. Proceeds help me to continue producing free content.
Today I’m going to teach you how to make the most of my Procreate Fauxsaic Brush Kit, which contains 70 tile painting brushes, patterns, texture brushes, backgrounds, and layered Procreate files for reference and inspiration. It’s everything that you need to create realistic, illustrated mosaics right on your iPad.
Watch my in-depth video to learn all about it, or read the complete transcript below if you prefer written instructions.
Written Tutorial: How to Draw a Realistic Fauxsaic in Procreate
This is a transcription of the video above. I have included screen captures of each step along the way!
1 – Checking your version of Procreate
In order to use this set, you’re going to need to have Procreate 5 or higher. So let’s first start by making sure that you have the right software, by starting here in the Procreate Gallery:
What I’m going to do is tap the Procreate logo in the upper left corner. Here, I can see which version of Procreate I have. I have version 5.0.2. You might have later than that, which is fine. But so long as it’s Procreate 5 or higher, you're going to be good to go!
2 – Installing the Fauxsaic brush set in Procreate
Once you purchase my Fauxsaic Brush Kit, you’re going to want to download the zipped folder of files I provide, unzip it, and upload it to your cloud software of choice, whether that’s iCloud, Google Drive, or Dropbox – basically any cloud software that you’ll be able to access through the Files app on your iPad.
Here I am in Procreate with a file opened and all I'm going to do is swipe up from the bottom of my screen lightly to reveal the dock of my iPad. On the far right, I have placed my Files app. You will need to have your Files app somewhere on the dock of your iPad so that it will be accessible in this particular type of view.
So now I’m holding the Files app icon and dragging it to the right side of my screen. This allows me to have a split screen view between any two apps on my iPad. Next, I’m going to navigate to the folder that I saved to my cloud. (I’m using iCloud, but like I say, you can use Google Drive or Dropbox as well.)
Let;s install the brushes first. That’s the file titled Fauxsaic_Kit_MST.brushset. All I’m going to do is go to the Procreate side of my screen and tap on my brushes palette to open it, then click and drag the .brushset file from my iCloud over to the brush library on the left, and drop it when the green plus sign appears. Now all 72 of the Procreate Fauxsaic brushes I’ve created for you are available here in one brush palette folder.
3 – A tour of the Fauxsaic brush set
Among these 72 brushes are 56 brushes for drawing tiles by hand, painting them in, drawing tile patterns, or even drawing large, individual tiles using my stamp brushes. There are also 11 brushes for drawing textures, lighting, and grout backgrounds.
4 – Installing the color swatch palettes
Now let's load in the color palette swatches that I've given you. In iCloud, still in my Files app, I'm going to double tap the Swatches folder to open it. On the left side, in Procreate, I'm going to tap my swatch palette in the upper right corner and then make sure that I navigate to the lower right icon to reveal the palettes.
All I’m going to do is drag my swatches from iCloud into Procreate, just like we did with the brushes. You will see that immediately, the color palette I’ve created for you appears in your palette list. For this demonstration, I already installed five of the palettes here, so you can see Fauxsaic Palettes 1 through 6 are now installed in my swatch palette.
5 – Installing the Procreate practice files
Next, I’m going to walk you through how to save and open the layered Procreate sample files that I've given you. In your Files app, navigate to the Layered Sample Files folder, where you’ll find 6 Procreate files.
Fauxsaic_Brush_Samples.procreate contains previews of all 72 brushes as separate layers, so that you can see them sampled before you use them. The other 5 .procreate files are finished fauxsaics that I made. Each layer is labelled so that you can walk through the file yourself, like a mini tutorial, or just use them to get inspiration.
Depending on your internet connection and whether or not this is the first time you’ve opened this folder in the cloud, these files may take a little bit of time to download because they are so large. They have a lot of detail and a lot of layers!
So with the Layered Sample Files folder open, I have two options for transferring these files over to Procreate. First, I can simply tap the file that I want and it will import automatically into Procreate.
Now, going back to the Procreate gallery screen, I'll show you a way to transfer multiple files at the same time, which is by clicking Select in the top right corner of my Files app, selecting the remaining files to transfer, then clicking, dragging, and dropping them over into Procreate when the green plus sign appears. Now hit Done in the upper right corner of the Files app, and I can close this app because I've transferred everything I need. To do this, press and hold the centre divider, and drag it off to the right to close Files.
6 – Preview all 72 fauxsaic brushes
Let's dive into the preview files I’ve given you, starting with my brush samples – Fauxsaic_Brush_Samples.procreate – which is the one with the green cover thumbnail (pictured above). Remember how I showed you that in my fauxsaic brush set folder you have 72 different brushes to choose from? Well, I know that it can be hard to see good previews of brushes simply through the brush thumbnails, so I created this file for you so that you can turn on and off each and every layer to get a real preview of what the brushes look like:
I’ve organized the layers in the exact same order as the brush palette itself, so you can quickly reference this file and then compare it to the brush palette to select the brush that you need.
7 – Preview finished fauxsaic illustrations
Next, let’s take a look at the Sample_Fauxsaic.procreate file. This is a completed, hand-drawn mosaic utilizing a lot of different types of my fauxsaic brushes. So the reason that I’ve kept it such a large and layered file is so that you can turn on and off different layers and really explore what I’ve done.
For example, opening the folder of background items, you'll see that you can view how I've added the drop shadow, the tile edge dimension, and different coloring. Looking at the other layers, you can see how and where I've added different elements like the tiled frame and the tiled text, and you can even look at the textures that I've used to add realistic effects like clay and dirt. Have fun with this file, zoom around, explore the layers, and use it as inspiration for your own designs!
The other 4 layered files I’ve given you show individual, painted fauxsaic tiles which each offer different methods for coloring in your designs. Again, they’re all layered and labeled, so that you can look at how I made them, and they can hopefully provide helpful inspiration for your own work. You can use the practice files however you like, so long as it’s personal use and not commercial.
I’ve even given you this cute little mosaic file – Painted_Tile_Sample_1.procreate – where you can turn off my text design and add your own by just coloring in the tiles with your own pattern:
8 – Method 1: How to draw a fauxsaic using tile pattern brushes
Now let’s create a mosaic completely from the beginning, using tile pattern brushes. I’ll share some of the tips and tricks that I use to make them look the most realistic and impressive.
Step 1: Set up your art board
Tapping the plus sign in the upper right corner, I'll select the first canvas option: screen size. You can choose whatever option you want, but remember to use a very high resolution if you plan to print this one day.
Step 2: Paint a grout background layer
In my layers palette, I’ll make sure that I’m on my first blank layer and I will select black from my color palette. In my Fauxsaic Brush Kit, I’ll scroll all the way down to the bottom and choose one of the four background options. Let’s go with the first one: grout fine texture and light color. Now, without lifting my stylus, I’m just going to swirl it all over the canvas here to create a realistic looking grout background. If I ever want to lighten or darken this grout, I can just reduce the capacity of the layer to make it lighter, or change the background layer color to something darker.
Step 3: Paint a blank tile pattern layer
Now I’ll make a new layer and switch my color palette to white. I'll select a nice tile pattern that we can color in together. Let’s use Big Diamonds. So with that brush selected, just like I did with the grout, I'll brush it all over my screen and not lift my stylus as I do so. This prevents the pattern from overlapping on itself.
Zooming in, I want to show you that the grout background that we made is visible through the tiles (see below). That’s because all my tile pattern brushes have blank (transparent) space in between the tiles. This means you can adjust the background to be anything that you'd like and it will show through the tile spaces.
At this point, I can decide if I like the way that the pattern sits on my canvas, meaning whether I like how it crops off on the top, bottom, and sides. If I don't, and I want to change it, I'll just go up to the selection cursor tool, make sure that Uniform is selected at the bottom of the screen, and then I can drag the tile pattern out to fit the screen exactly as I like there. Then I'll tap the selection tool again to release the selection.
Step 4: Color in your first selection of tiles
Now let’s add color to our pattern. (We’ll add dimension later!) I come up to my color palette and select the first color I want to use. Let’s choose the turquoise from my Fauxsaic 1 palette.
First I want to color in all the central diamonds. Zoom into your tile pattern a little bit, then tap the selection cursor tool. At the bottom of the screen change the selection to Automatic. Now just tap one of the diamonds! you can see that this creates a pretty sharp selection.
The little blue pixels around the selection show you where it slightly overlaps the blank space outside of the tile. Well, we actually want to overlap the selection quite a bit so that when we clip the colored layer inside of the tile pattern layer, there won’t be any white tile edges showing.
The way to do that is to tap your stylus on the selection that you just made and, without lifting, drag your cursor over to the right. If you slide it a lot, the entire screen is going to fill up with your selection, so you don't want to go that far, but you just want to slide far enough so that the blue pixels completely surround your selection – so that they are an unbroken border. You can see on my screen that my selection has blue pixels all around. That's all I need.
Without deselecting, I can still zoom out and in, continuing to tap all of the central diamonds in my pattern. Because I made that initial adjustment to the shape of the selection, anything else that I select now is going to have the exact same border quality.
So zooming out, I'll come to my layers palette and create a new layer on top of the tile pattern layer, tap it once, and then tap “Fill Layer”. This will fill in the selection that I just created.
I’ll zoom in here again so you can see that the filled selection now is pretty sharp. In other words, it doesn't look like a realistic tile. So I need to clip it inside of my pattern to make sure that none of that excess, outer edge of my selection shows anymore. Tapping my fill layer once more, I'll select “Clipping Mask.” Now you can see that the tile color has clipped itself perfectly inside of the tile shapes, so that once we add dimension to this, it will look extremely realistic.
Step 5: Add your second tile color
Let’s now add another color into the mix. Coming over to my layers palette, I want to return to my tile pattern layer. This is because the tile selections I make need to be selected on the pattern layer itself. So with that layer selected, I’ll zoom in, choose my selection cursor tool, and start selecting again.
Remember to tap once on one of the tiles your want to select, then it tap again and drag it slightly to the right until you get a nice, unbroken, blue pixel border around the tile. Now that I can see blue pixels all around the tile, I’ll go through and tap out a pattern of tiles that I want to fill in with my new color.
I’ll go to my color palette and select a lighter green color this time. Then I’ll move over to my layers palette and do the same thing as before: create a new layer, tap it once, and choose “Fill Layer”. Then I’ll tap the layer again and choose “Clipping Mask”. Zooming in, we can see that it has clipped perfectly into the pattern layer!
Step 6: Paint your final tile color
Now for painting the remaining white tiles. I have two choices here. Either I can go through and tap-select them all, or I can just change the color of my original white design because those are the only tiles that are still showing through from the original tile pattern.
So let me show you how to do it the second way. Let’s say I want to change this to a very light blue. I'm going to tap my pattern layer once and hit “Alpha Lock”. This just makes sure that I can only edit the pixels that already exist on that layer. I now can’t edit, for example, those blank spaces that are in the background.
I will tap the layer again and select “Fill Layer”. Now I can see that the original pattern layer has changed entirely to light blue, and the two colors that I painted in before are just sitting on top of that blue.
But what if I don't like the color that I just added? That's fine, because it's still on Alpha Lock. I can come up to the color palettes and select any other color I like, then tap and fill it again.
Step 7: Add tile edges for a 3-dimensional effect
When I’m happy with the color scheme, I’m ready to add dimension. (Note that you can always go back and change the colors of any layer again via the alpha lock method, for any of the color layers!)
The first thing I’m going to do is swipe left on my tile pattern layer (the one that’s now light blue) and duplicate it. I only want to work with the newly-copied, bottom version of the pattern now. We don’t want to mess with this top one that has the two clipped-in colors!
I need to turn the bottom pattern layer white, so coming to my color palette, I’ll select a white swatch. You can see that the copied, bottom pattern layer is alpha locked, just like the original that we duplicated. So all I have to do is tap it, fill it, and it’s white!
You can’t see the white tiles yet, though, because the layers above are covering it. But you will see the white in a moment, because I'll now tap the selection cursor tool, and I’m able to move around the new white layer we just created. (Make sure you are still on the new white layer or you will select and move a different layer!)
I am wanting to create dimension that emulates the edges of the tiles. I'll zoom all the way out first, then move the white layer slightly up and to the left by tapping above and to the left of my selection.
I'll deselect that layer by tapping the selection cursor tool. With the new white layer still selected in my layers palette, I will adjust the opacity by tapping it once and using the opacity slider. I want to reduce it very slightly because I don't want such sharp tile edges. Now I'll name this layer “Tile edges” to prevent confusion down the road.
Step 8: Create a drop shadow under the tiles
Now, I want to copy this white layer and, again, use only the new layer at the bottom. Changing my color palette to black, and making sure the layer is still on Alpha Lock, I will fill it with the black. Now I have a black version of my pattern layer, which I can select and move slightly down and to the bottom right – to the opposite sides of the tile from the white layer.
Zooming out, you can see that this drop shadow is too dramatic. So I’ll tap the layer and I'll change the blending mode to Multiply, then reduce the opacity quite a lot. I’ll continue to play with these settings a little bit to get the most realistic look.
Now you can see that by turning off the white edges and the dark shadow, I'm back to a pretty flat design, but turning them on again creates the dimension that gives the realistic effect we’re looking for.
Step 9: Paint a texture overlay for added realism
Next, let’s add texture to these tiles to make them look a little bit less homogeneous. So I’m adding a new blank layer, keeping my color palette on black, and coming all the way down to the bottom of my brush set to select a texture. Let’s choose concrete. Now I’ll lightly paint my concrete brush over the entire composition.
You will see that at first, it's really too dramatic. So all I have to do is tap the layer to change the opacity, and tap again to change the blending mode to something more realistic looking. For example, if I put it on Overlay blending more, and I zoom in quite a bit, you can see that creates a much more realistic and varied texture. I'll name this layer “Concrete” so I don't forget what I did here.
Step 10: Add light and shadow to the edges of the fauxsaic
And lastly, what if I want to add some light to the image to make it look like sun is pouring in from one edge? All I have to do is switch to a white brush and come to my Light and Shadow Overlay brush, then make a sweep or two across the screen where I'd like my light to go. Again, just adjust the opacity and blending mode of this layer to your liking.
I can do the same thing to add a shadow by making a new layer, choosing a black color, and staying on the Light and Shadow Overlay brush. Sweeping some shadow across, then adjusting the opacity and the blending mode, creates a nice shadow effect.
9 – Method 2: Draw a fauxsaic completely by hand
Tile row brushes
Another type of tile drawing tool that I have in the kit are Tile Row brushes. If I select one, you’ll see that I can draw rows of tiles, almost like magic.
II draw a row of tiles and don’t lift my pen, then Procreate snaps my line to a perfectly straight line which I can expand and contract to control the distance between the tiles. I can make curves this way, too, and adjusting the brush size adjusts the tile size. These brushes are great for drawing your own fauxsaics from scratch, making borders in your art, or even helping you fill in more organic looking shapes that you may have drawn as part of your illustration.
Detailed paint and recoloring brushes
I also have a couple of paint brushes you can use to draw or color in individual tiles. The Marker for Detailed Coloring is an opaque brush, and the Brush for Hand-Painted Effect creates a beautiful, organic looking painted texture.
The way to use these coloring brushes is to create a brand new layer on top of your tile layers, and paint a little bit over the tiles. Since these are semi-opaque, translucent brushes, so what that means is that if you lift your pen and tap down again, you can create different opacity levels, which is really great for making a more realistic painted look.
Now that I’ve painted so sloppily over my tiles, all I have to do is tap my paint layer, clip it into my tiles, and you’ll see that the painted look of the tiles really shines through. Changing the paint layer blending mode to something like Multiply or Lighten enhances the painted effect even further.
Using tile stamp brushes to paint intricate, individual tile designs
The last type of tile brush I give you are the large tile stamp brushes. I personally love to color these in just to relax, like using a coloring book.
When you finish coloring in a tile, you can flatten it, duplicate it, and create rows of the design for an ornate tiled pattern. Here's just one example of what you can do if you paint in your own large tile stamp and then duplicate it across your canvas, adding texture layers for even more realism:
In conclusion
I hope that this tutorial has inspired you to create digital fauxsaic illustrations of your own. I also hope that you share your designs with me by tagging me on Instagram (@mollysuberthorpe).
If you’re interested in learning my special technique for creating typographic fauxsaics, whether it’s from your own hand lettering or from a digital font, you might be interested in the Skillshare class that I teach: Fauxsaics in Procreate: Make A Typographic Mosaic.
