Category Archives: Lettering

No comments

Tutorial: Creating a Mist Look in the Procreate App

  By , , , , ,

procreate tutorial: mist effect

Hello again! Back with another effect tutorial for the Procreate app in iOS. I’m calling this one “spooky,” since Halloween is just around the corner, but I guess it doesn’t have to be — you could draw a silhouette of a superstar singer, or a fabulous something/someone else, and have the lights and mist pouring around them.

Anyhoo, my place is not to judge what you use this mist effect for. Let’s learn how to do it!

1 - grid, sketching, pink bar

I’m creating this one on the 4×6 size in Procreate; measurements and percentages may be different depending on what size canvas you choose.

My first two layers for anything, you may have figured out by now, are a grid (the grid brush is in the “Textures” group) and a rough pencil sketch. I’ve also created a third layer with a big pink rectangle. I’m going to use this for two things: [1] as a baseline that my text will sit on as I write it, and [2] as a shape I can use in order to mask off the top half or bottom half of my canvas. I’m going to call this the “pink box layer” (though you’re welcome to make this box any color you like).

(How did I make a nice rectangle? I created a custom brush using the square shape and solid fill that are already in Procreate’s library of shapes and grains. One tap gets you a square; then just resize it to fill the bottom half of the canvas.)

2 - write your word

Next up, write out your word. Brush width/pressure settings are up to you. Here I’ve used the “Minimalist” brush from halfapx.com. It’s a nice heavy, solid line, with just a little bit of pressure sensitivity.

When you write, make sure that anything that touches the baseline crosses over it just a little bit. And keep everything relatively close to the baseline — no big swoopy descenders on this one. Here’s a close-up of my overlaps:

overlapping the baseline

Duplicate your text layer, and tuck a copy away. I always recommend stashing a backup copy, in case you (and by you, I mean I) mess up and need to start over.

Now we’re going to use our handy pink box layer to chop off the very bottoms of those letters. Pull down your layers, select the one with the pink box on it, and tap on the image thumbnail. Choose Select Contents from the layer menu. This is going to mask off the top half of the canvas, so anything that you now do will only show up on that bottom half where the pink box is.

Select the layer with your text in it. Tap on the image thumbnail to get the layer menu to pop up, and select Clear.

Cropped little bottoms

This should have shaved off the very bottoms of your letters, so that they now sit totally flat along the top edge of your pink box.

That text layer is now done!

Duplicate the layer, then flip your duplicate layer over. (Choose the arrow icon in the upper-left of your screen, then the Flip Vertically icon along the bottom [an upward-pointing arrow underneath a three-sided squarey thing, like an arrow wearing a hat].)

duplicate and flip

Move your flipped duplicate down so it’s juuuuuust overlapping the top text. You may need to nudge it up a tiny bit — just so you can’t see any of the background color between the two.

Make a copy of that flipped layer, and tuck it away. Because YOU NEVER KNOW.

Now we’re going to distort the upside-down layer:

distort bottom text layer

I’ve gone all full-screen so you can see what I’m doing here. Select the entire flipped text layer (arrow icon, upper-left). Then tap and hold each of the little circles at the bottom corners. After holding for a moment, you’ll go into Distort mode, and you can pull that circle wherever you want.

If you want to be really, really precise, you can use the gray grid background behind your document and count the exact number of squares to the left and right, so everything’s totally even. I just eyeballed it here. Left or right can be off a little bit, but for your first try at this, I recommend keeping the bottom parallel to your canvas. (If you don’t, your flipped shadow-letters may not match up right with the upright letters.)

Now we’re going to do some duplicating and blurring. You’ll want three copies of this flipped and distorted shadow layer: one regular, one with 25% gaussian blur, and one with 50% gaussian blur. (And you’ll want to mask off the top half of the canvas when applying that blur. Go to your pink box layer, choose Select Contents, and you’re good to go — all masked off.

We’re going to do some erasing of the two blurred layers:

25 percent gaussian blur

Set your eraser to a nice, big, soft airbrush, and nibble away at the very top of the 25% blurred layer. Don’t erase more than, say, a quarter of the way down.

50 percent gaussian blur

Now do the same erasing to the 50% blurred layer, but erase farther down — like halfway.

When the three layers are on top of each other, they now have a kind of gradient blur: sharper where the shadows meet the letters, growing to fuzzy at the very bottom of your canvas.

(If you’re doing this effect on one single, solitary object, you may be able to use the Perspective Blur instead, placing your crosshairs directly on the line where the upright text and shadow meet, and aiming the perspective arrow downward. For a longer item like this, however, Perspective Blur looks great right in the middle, but really borks up the shadows to the left and right.)

combined upright and shadows

So here’s our combined text, with the upright letters and the three layers of shadows.

Time for mist!

First, you’ll need a black background. Either color the Background layer black, or just put in a new layer below all of your other layers and fill it with black.

Now, we’re going to mask off the bottom half of the canvas, and start with the mist on the top half. Go back to your pink box layer and Select Contents. Then invert the selection. (Long press on the “S” icon in the upper left of your screen, until a menu appears along the bottom. Tap on the thing that looks kind of like a plus sign made up of two V-shapes.) Now the only area where you can actively draw is the top half of the canvas.

top half - white mist

You could use a number of brushes for the mist, but I prefer the Nebula brush (in the Luminance brush group). But you could try the Cotton brush (Organic group) or the Clouds brush (Elements group) or even Wet Sponge (Water group) if you like the looks they give you.

I started with a heavy, solid white along the bottoms of the letters, because my light source is low. For the upper parts where it starts to get wispy, play around with the size and opacity of your brush. I did more large billowy-cloud on the right, but more thin tendril-ish on the left.

top color mist layer

You could leave this as all white, but you could also add some colors. Now I’m not going to stop you if you want to do a rainbow effect here, but for your first attempt, I’d recommend keeping it to two or three colors, just to get the feel of it. I went with pink on the left, purple on the right. You can overlap the white in some places, and have the color mist over just black in others — it all adds to the depth.

(I probably don’t need to mention, since you know I’m a layer fiend — I did one layer for the white, and a separate layer for the pink/purple. You don’t need to be as layer-happy as I am here; it can all go on one layer. Up to you.)

bottom white reflection layer

Now let’s move on to the bottom half. Invert your masked area again (press on the upper-left S icon until the bottom menu appears, then pick the plus-looking thingy) so that the top half is excluded, and we’re just working on the bottom half.

Now, again, you have brush options here. I opted for a big soft airbrush — I didn’t want the sharp details of the Nebula brush on this part; more a soft reflection, like the letters are sitting on ice or something. If you want the sharper details, though, you can totes do that. Nebula, Cloud, Cotton, play around with the brushes and pick which one you like the best.

I tried to mirror the patterns I’d established on the top half — super bright where the letters meet, fading out as you move away.

bottom color mist layer

And then mirroring the use of color as well.

(It occurs to me just now that I might have been able to duplicate the top mist layers, flip them vertically, then apply some gaussian blur or something to them. But that would have robbed me of more drawing, so I’m cool with the way I did it. If you’d rather flip and blur, I won’t judge!)

top and bottom mist together

Clear your mask away (click on the arrow icon, upper-left) and check out the whole thing together. If you like, you can call it done!

I, however, don’t like that I can see the line between top and bottom so clearly. So I’m going to add some more mist (on its own layer) to blend the top and bottom halves a little more. And I’ll do some tendrils of mist in both the top and bottom halves, to give the appearance of the mist pouring out around the outside of the letters, along the “ice” surface of the bottom half.

a layer of misty tendrils

Here’s that layer all by itself, so you can get a feel for what I did here.

And now, I truly am going to call it done. Here’s the final product:

final mist effect

So there you have it, a backlit misty look. Good for 1,001 spooky or non-spooky uses! Please tag me on Instagram (@geekmissy) if you try this out, or feel free to leave a comment here. And let me know if you have a text effect in mind you’d like me to try recreating in Procreate!

2 Comments

Tutorial: Creating a Water Drop Look in the Procreate App

  By , , , ,

Procreate tutorial: water drops!

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.

The excellent 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:

1 - choose your background

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.)

2 - sketch it out

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.

3 - draw in your base layer

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.

4 - duplicate white layer offset

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.

5 - clear the unmasked portion

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.

6 - all of the highlight layers

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!

7 - blurred white layers

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.

8- blurred black layers

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.

inverting your selected contents

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.

9 - clipped copy of background

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:

10 - hot pattern-on-pattern action

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.

final work with 7 visible layers

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!

No comments

Tutorial: Creating a Neon Look in the Procreate App

  By , , ,

Tutorial: Neon Look in Procreate

Well hello, all! It’s been quite a while. The blog is taking a bit of a pivot, and I’ll hopefully be posting more frequently with more illustration, lettering, craft, and other artsy-fartsy things.

I’ve been playing around with an iOS app called “Procreate” lately (yes, I also think the name is vaguely unsettling). It’s fabulous for all sorts of art, and I’ve used it for both cartooning and lettering projects. I’ve been thinking about trying to re-create some of the text effects I can get in Photoshop, and this is the first. Today I’m going to show you how to make text that looks like a neon sign.

1 - make a grid, sketch it out

First off, I always sketch first, no matter what I’m doing. Often, I’ll do several layers of sketches — draw one out, reduce the opacity of that layer, throw a new layer on top, and refine. Since this is for a tutorial, I stuck with one sketch.

Because neon signs don’t usually overlap tubes, I interrupted the lines where they would cross over. (Tubes do have bends in them, though — we’ll address that in a few steps.)

2 - start with a fat monospaced line

Fire up a new layer, and draw out your neon tubes in the color of your choice. I use a monospace brush for this; the Rad & Happy Monospace brush was one of the first non-OEM brushes I downloaded, and I still use it regularly.

3 - think white line

Now, create a new layer and reduce the size of your brush. Zoom way in, and draw a thinner white line down the middle of your larger color line. (You’re going to be applying some blur to this line, so it doesn’t have to be perfect.) Size-wise, I’d say to do a little larger than 1/3 of the width of the larger color line.

4 - attend to the creases

Duplicate that layer, and turn off the visibility on the original. This is going to be a running theme — I’m all about duplicating layers, so that you always have a backup of the original available. Now, do some erasing of the white line where the “tube” creases, so it looks like the tube is on top for one side of the crease, then bends back below on the other side. It’s totally up to you which side of the crease is the “top” and which is the “bottom”.

5 - shadows in the creases

On another new layer (we’re going to end up with a lot of layers here, friends) put in some shadows where the creases cross over. I looked at my own elbows to figure out how the shadows should look, because they’re kind of elbow-ish. Draw these in black; we’re going to monkey with them in a moment to make them more shadow-y. (Helpful hint: draw them all in, then reduce the opacity of that layer to 50% so you can see the tubes behind them, then clean ’em up.)

6 - opacity of the creases

Now we’re going to adjust those black creases so they look more natural. What I did here was create a duplicate layer, then I left one layer in “normal” mode and reduced the opacity to 30%, and on the second layer, I changed it to “soft light” mode and reduced the opacity to 60%. These numbers may need to be adjusted for your piece, depending on the color you’re using for your neon base.

7 - first white blur layer

Now it’s time to get this sucker glowing!

Make a duplicate of your thinner white text layer. Apply a gaussian blur to it. How much blur? That’s going to depend on the width of your lines, so I can’t give you a hard and firm percentage. Move the slider on this one down until you feel like there’s a wash of white almost entirely covering the color layer underneath.

8 - white blur the second

Duplicate your original white text again, and apply a gaussian blur to this one as well — but not as strong as the first. You want this one to add that really solid glow down the middle of the tubes. As a rough estimate, I’d try half the amount of blur you did on the previous white layer. So if you did 50% on the first, drop it down to 25% for the second.

That’s it for the glowing on the top of the neon tubes! Now let’s move to the glow underneath.

9 - first, a black blur

Duplicate your solid pink (or whatever color you’ve chosen) layer, and move it underneath the original. Recolor the text on that layer to black, and apply a gaussian blur just enough so that you see some fuzzy black peeking around the outside of the solid color. This is going to add just a hint of shadow, and it’ll help delineate the “tube” from its glow reflecting off the wall.

10 - first level of pink blur

Duplicate the solid pink layer again, move it below the black layer you just did, and apply (You guessed it!) some gaussian blur. Again, the amount of blur is going to depend on the size of your lines and the size of your piece. A good starting point is whatever level of blur you applied to your very first white line.

11 - second level of pink blur

If that isn’t enough glow for you, just duplicate that blurred pink layer. Boom, more pink glow!

12 - add the nubs!

Add another layer below all of your neon tubes and blurry glow. On this one, you’re just going to make some black circles at the ends of the neon tubes, to represent the points where the tubes attach to their hardware on the wall. These will be mostly hidden behind the tubes, but the piece will look kind of wonky and incomplete without them.

13 - add background of your choice

And now, add the background of your choice! I’ve accumulated quite a few images of walls, from various freebies and image packs. I’ve tried this neon look on brick, stucco, and wood, and it works on all of them. This particular background is a little light, so I’ve changed the very bottom background layer to black, and reduced the opacity of my wall to 80%. Makes it a little darker, but keeps all of the details.

So there you have it, a neon sign look done entirely within the Procreate app. If you don’t have Procreate, you can always do this same thing in Photoshop or GIMP — all of the same tools (layers, gaussian blur, etc.) are available in those programs too.

Now, to think about what Photoshop text effect I want to replicate next!

No comments

Fun with lettering: paint marker brush pen comparison

  By , ,

I’ve been working on my hand-lettering lately; I’ve always been able to do several types of regular handwriting, but now I’m getting fancier, so I can fold that skill into my graphic design portfolio. (Did you know that there’s a whole handlettering / calligraphy community out there? Tons of great stuff to check out. The Instagram hashtag “#handlettering” alone has almost two million entries.)

I’ve acquired a few brushes and pens, most of them on the cheaper side, to see what I like. In my quest to find something that will make really fat lines, I’ve found several different kinds of “paint marker brush pens.”

Target Paintbrush Markers

First up are the house brand (up&up) paintbrush markers I found at Target. These little guys were around four dollars for six colors (no black included). And I have to say, I really like the line you get from them!

Target Paintbrush Marker Test

Nice and thick and heavy on the downstroke, yet the ink/paint doesn’t bleed through the cheapo cardstock I use. The thin upstrokes are a little sketchy, but that may be just because I wasn’t really warmed up when I wrote out these tests.

Next:

Crayola Paint Brush Pens

The Crayola Paint Brush Pens are obviously the product that Target is copying. Though you get only five colors with Crayola instead of the six Target gives you, and the Crayola pens are more expensive — about six bucks for the package. (Though in the grand scheme of things, a dollar and a quarter for a quality brush pen is a bargain.)

Crayola Paint Brush Pens Test

The feel of them is almost indistinguishable from the Target markers. A nice, thick downstroke, and you can get a pretty nice thin upstroke. The Crayola markers seem wetter and heavier than the Target set (although they still don’t bleed through the cardstock). My concern is that means they’ll dry out faster. Time will tell. I also worry about premature drying because the cap has holes along the base, so that the cap isn’t airtight. (The Target markers have a fully-enclosed cap.)

The Crayola pens also come in a 40-count box, which contains five sets of eight colors — finally, black is included. But I haven’t fallen in love hard enough yet to stock up that heavily.

Last:

ArtStyle Brush Pens

Last up are the Art+Style Brush Pens. These are the most expensive of the lot, at $15 for a package of 10 pens. (Still, a buck and a half each. Relatively cheapo.) And as opposed to the other two, these actually have a synthetic-fiber bristle brush at the end, not a flexible felt tip. And hey, black!

Art+Style Brush Pens Test

These are certainly a more difficult level of pen than the other two, due to the brush tip. With the felt tips, it’s much easier to make a consistent wide line. Brushes are a lot less forgiving. These brushes also needed a few test strokes to get primed; they’re pretty streaky right out of the gate. (I worry about drying with these too, since they also have holes in the caps.) I’ll have to work with these more to see how I really feel about them; I’ve been doing most of my work with felt-tip pens so far, so it’ll take some adjustment to find my comfort with these bristle-brush tips.

Four pen samples

Here they all are side-by-side. You can see that the Crayola is darker and richer than the Target, and the Art+Style has the inconsistency of a brush (which can be an asset if you know how to work it). The last one in the row is a Tombow Dual Brush pen; they’re one of the more popular options for handlettering. But as you can see, the line doesn’t get anywhere near as thick as these new pens (though it does look much more smooth). The Tombow would be better than any of these new markers for smaller-scale work, or tighter spaces.

I’ve been working on more fonts using my handlettering — as always, they’re up on my Behance page if you want to check them out. 🙂