Hello, all! I’m messing around again with trying to recreate Photoshop effects in Procreate. This time, I’m doing words created out of standing water!
In this tutorial, we’re going to get really familiar with the layer menu.
Especially the option farthest to the right: Select Contents. Learning about this option is going to open up lots of new experiments for me. (We’re also going to get quite a bit of use out of the Clear option here.) And as always, we’re going to create new layers for pretty much every step of this process, and duplicate a lot of them. Keep backup layers of things!
OK! First up, we’re going to put in the background we want our water drops on:
It can be whatever you want: wood, bricks, concrete, stone … the world is your oyster. (Though I don’t recommend an oyster background.) I suggest you choose something with some distinctive texture to it (this wood is definitely well-textured) and something that isn’t too close to black or white — go for something between those extremes (since we’re going to use black and white as our only color sources in the finished product). I also advise that you choose a picture that’s really, really sharp — we’re going to use that to our advantage later.
(I’m sorry to say, I can’t remember where I got this particular slab of wood background; I’ve accumulated so many background images in freebie packs and collections. It came as part of a collection of 8 backgrounds, and the file name I have is “Wood v1.jpg”. Which isn’t really helping me find its source.)
As always, I advise sketching things out on a new layer first. I took the regular “medium pencil” brush and made a modified version that has really strong pressure sensitivity.
On a new layer, draw out your art or letters. (This is drawn using my “Fancy Finesse” brush, available for free.) I added in a bunch of standing drops all around. This layer won’t appear in the final version, so you can make it whatever color you like. I recommend something pleasant to look at that isn’t black or white — we’re going to start doing some black and white work over the top of this, so it’s good to be able to see this base layer clearly against them.
Duplicate that layer, and recolor it white. We’re going to offset it ever so slightly toward the upper left.
Helpful Hint: After duplicating that white layer, tap the Transform button. (Upper-left part of your screen, rightmost icon — the arrow.) That will put a rectangular marquee box around your artwork. Now tap your pencil or finger once in the upper-left corner of that box, about a centimeter inside the corner. By just tapping, you move the box in measured increments! (You can also tap next to the sides to get your object to go up, down, left, or right; by tapping in the corner, we’re getting it to go up and left at the same time.)
In this example, I’ve tapped four times. I’m going to keep that number in mind, because I’m going to use it again.
NOW, the magic happens! Open your layers, select the layer with the blue text, tap it to pull up the layer menu, and choose that magical Select Contents option. What this is going to do is mask off only where the blue appears. You’ll see a set of gray diagonal lines appear all around the blue text.
While that selection is applied, you can now go to other layers and do other things, and whatever you do on that other layer will only appear within the boundaries of your selection.
So now you can go to the white duplicate layer you’ve created, tap on it and get the layer menu to pop up, and tap on Clear. Because you had the blue text shape selected, and the white was offset from that, it’s going to clear out everything on your white layer that fell within the boundaries of the blue layer. What it leaves behind is this outline of your shapes!
Now you want to move this layer back down so it nestles inside the original text. All of our white highlights are going to be inside the letters, and our black shadows will all appear outside of the letters. So again, select this white layer, hit the Transform button, and tap four times in the lower-right corner to get the layer back where it started.
Do the exact same thing again, but this time make a white rim along the bottom right. So your steps are:
– Duplicate your base blue layer
– Recolor that layer to white
– Select your art with the Transform button (upper left, the arrow icon)
– Nudge the layer 4 steps toward the lower right (tapping four times, about 1 cm inside of the blue corner point)
– Go to the base blue layer, call up the layer menu, tap Select Contents
– Go to your new white layer, call up the layer menu, tap Clear
– Select the art again with the Transform button, nudge the layer back toward the upper left the same 4 taps
It seems like a lot of steps, but by the end of this, you’ll be lightning-fast at it.
Now we’re going to do the same thing with a layer of black, but we’re going to leave it where we made it. Because then it’ll be sitting outside the lettering as a shadow. So duplicate your blue layer, color it black, and nudge it 8 steps toward the lower-right. Use the same technique as above using Select Contents to mask that blue layer, then use Clear on the black layer to just leave the shadow part behind.
The image here shows three cleared layers: a white layer on the upper-left, a white layer on the lower-right, and a black layer on the lower-right. After I went through more steps, I decided to add another black layer on the upper-left, but a very thin one — only 2 taps. (I did it after looking at a picture of actual water droplets. Water refracts light in strange ways!)
Next up, my old friend and yours: Gaussian Blur!
So of course, you’re going to be applying blur to duplicated layers, right? Always save a backup layer.
Before you blur, go back to your blue layer and, once again, Select Contents. (Helpful hint: You don’t need the blue text’s layer to be visible in order to select its contents!) This way, when you apply the blur, you’ll still maintain that sharp outer edge.
This image above is the white layers, both with blur applied. As usual, I can’t tell you exactly how much blur you want — it’s going to depend on the size of your work. For this, I don’t think I went over 50% with either side. After blurring them, I made another duplicate layer of the upper-left, so the light was stronger and brighter from that direction.
And here are the black layers with their blur applied. You can see that the black on the upper-left is much thinner and dimmer than the main shadow on the lower-right.
Now here’s the trick with blurring the black layers: you’re going to do the exact same Select Contents thing that we did with the white layers, but then we’re going to invert the selection so that the lettering itself is untouchable, and we’re only making changes to the area outside of the lettering.
Here’s how you do it:
– Go to your blue base layer and click your old buddy, Select Contents
– Look to the upper-left part of your screen: the Selections button (the weirdly-shaped S) will be colored in blue
– Press and hold on that Selections button. The full Selections menu will appear at the bottom of the screen (see image above)
– Click on the Invert option (the weird sort-of-plus-shaped thingy just to the left of the X)
– Boom! Now the grayed-out diagonal lines are covering the text, not the area around the text!
Now you can apply a blur to your black layers, and none of that blur will creep over into the water-shapes. For the lower-right black, I recommend trying some motion blur instead of gaussian blur (but of course, use whatever looks best to your eye).
You could just leave it here and call it done, and I wouldn’t blame you. But we’re going to go one small step farther.
Duplicate your background layer — the wood, concrete, brick, whatevs. Now go to your blue base layer and Select Contents. Invert the selection (press the blue Selections button, then tap the plus-ish Invert icon). Now select your background layer, tap to get the layers menu, and tap on Clear.
This gives you a copy of the text, with just the background pattern filling it! (This is also a HUGE help if you want to fill a layer of text with a pattern, like glitter or gold leaf or something, without having to use Overlay or the erasing-over-the-top technique.)
What we’re going to do is this: gently and slightly apply gaussian blur to the original background.
What? Yes, but just a little bit. Because drops of water kind of act as magnifying glasses, so we want the pattern inside the water to be just a wee bit sharper than the rest of the background. You don’t need much blur — 5 or 10 percent, just to take away the super-sharpness.
If you’re feeling really adventurous, you could move the text around before you clip out your pattern. Or flip the duplicated background layer upside-down. If you do that, you’ll get this kind of result:
You can just barely see the pattern-filled text layer on top of the background layer here. But it adds to the feel that the water drops are magnifying the background, since you can’t see the texture lines of the pattern continuing unimpeded behind the water.
So our final artwork consists of seven layers:
– Background fully-filled pattern layer (slightly blurred)
– Text layer filled with background pattern (original sharpness, or even slightly sharpened)
– Three white highlight layers: two to the upper-left, one to the lower-right
– Two black shadow layers: a tiny one to the upper-left, a big one to the lower-right.
There it is! I hope you enjoyed this tutorial, and if you have any suggestions of other text effects you’d like to see me try, please leave a comment!
BTW: the font used in that very first image, way up at the top, is my “Gumption”. Available here!
