Transcripts
1. Intro: Have you ever wanted to incorporate some dynamic hand lettering into a photo or illustration but didn't know where to begin? This class will show you that it's not as hard as you might think. With the actionable steps and tips I'll show you, you'll have the confidence to dive in and try it for yourself. Hi, my name is Chris Piascik. I'm an illustrator and letterer, and in this class I'll show you how to incorporate illustrative lettering into an existing image. This can be a photograph or illustration. By the end, you'll be able to infuse dynamic lettering into nearly any composition. This class is aimed at people who have started to play around with lettering, or even those that are just getting started. Whether you're a freelance illustrator, in-house designer, or just someone who loves doodling. This class is for you and you. Okay, you too. In this class you'll learn how to import an existing image into Procreate, plan your composition and map out spacing, use shapes and simple letter forms to create a template to draw over. Use layers to slowly refine your letters until they're just right, and use color and shadow effects to blend your lettering naturally within the image. Then we'll export your image to share or print. Incorporating some lettering into an existing composition can really bring it to life. It's also an extremely marketable skill as hand lettering is very in-demand right right. The techniques you'll learn in this class will also work for standalone lettering treatments and will be a great starting point if you want to pursue lettering further. If you're already lettering a bit, these tips and techniques will help you to create more dynamic compositions with your lettering. I have a unique background that makes me well-suited to teach this class. Although I'm an independent Illustrator, I studied typography and graphic design, and worked as a designer for five years before transitioning into illustration full-time. Lettering has always been a big part of the work that I do. I've done lettering based illustrations for clients including Nike, Google, Facebook, Cartoon Network, Nickelodeon, and many more. Creating expressive lettering is one of my favorite things to do. I hope you'll join me in this class and discover how fun it can be.
2. The Project: The project for this class is to incorporate expressive lettering into an existing photograph, using procreate on the iPad. First, we'll determine what we'll be lettering and then plan out where we want to incorporate our lettering into the existing image. Next, we'll create a loose framework to help us sketch out our words or phrase. Then we'll use that framework to start sketching out our words, in refining our composition. Once we're happy with our sketch, we'll tighten it up using a new layer and repeat if necessary. After that, we'll blend our lettering within our image by erasing small areas, adding color, shadows, textures, etc, to make it cohesive within the composition. Finally, we'll export and share our finished piece. Please share your final projects on the project gallery so we can all check them out. As always, I'll provide feedback for each and every one.
3. Choosing Your Image & Words: Before we get started, you'll need to choose an image to work with. You want to choose something that has some open areas where you'll be able to insert lettering and have it be easy to read. Look for areas that don't have a lot of variety and contrast. That way you'll be able to put your lettering in there and it won't get lost within the background of your image. Once you've selected an image, you need to determine what words or phrases you want to incorporate into that image. Keeping it short usually works best. It's also a lot easier. TBH. For this class, I'm going to be recreating something I did for an actual client project. A few years ago, State Bicycle Company reached out to me to incorporate some lettering onto some really nice photos that they had done. They wanted me to use their tagline, Shred Your State and illustrate that onto these photographs in interesting and fun way. That's the image I'm going to be working with for this project. As you can see here, there is some really nice open areas. There's a lot of sky. There's not a lot of contrast in the sky between the clouds. Just a lot of nice open area, and the background has a little bit of a soft focus, and the guy on the bike is the only thing that's really in tight focus. Because of that, I've got a lot of area to work with, and I know that this will work well to incorporate some lettering on top of it. It's also a monochromatic image, almost black and white, with a little bit of blue, so I know that if I use some warm pops of color, it's really going to stand out from the photograph. Even though I'm working with this, I thought it would be helpful to walk through some examples of photos that would work well for this and some that wouldn't work well for this. This first image is a similar composition to the one that I'm going to be using. However, this one wouldn't work as well because the background, it's got this big beautiful tree, there's all these leaves, there's high contrast between that tree in the background, there's also some people back there and everything's in focus as well, so that's not great either. This one, although it's a similar composition in a similar image, wouldn't work well just because the background is too busy and there's not a good spot to put some lettering that would be easy to read. This is an example of an image that would work really well. There's a lot of things that are going well for us here. We've got this nice open line across the top with the sky. That's very low contrast. But there's also a ton of contrast with the skater there, so that would be a great place to put lettering. Also, the ramp below. Although the lighting, there's some strong shadows. They're isolated, so it breaks it up into grids so you could put several different words on the smarts. I also like that it makes it a cool shape that you can use to frame your words. The coping going in on both sides also makes a nice little spot where you could highlight a word. There's a lot of fun things going on with this one. This one is a really great photo, but there's not much spot. There's not too many places where we could incorporate lettering. There's that top-left area, but that's pretty minimal. The rest of it is really busy and any lettering would get lost in the midst of all of this. This is another example of one that would work really well because we've got this big sky, which is almost completely white, so obviously, a nice clean white background is perfect for this kind of thing. There's also that sidewalk which has a nice broad area where you could put lettering. Lots of opportunities in this one. The trees that rest against the skyline would also be really nice because they're almost like black and white, and they would be really easy to mask, to put on top of the lettering, to make the lettering really feel like it's part of the composition. This is another beautiful photograph, but would not work that well for this project because there's so much going on. There is lots of contrast, lots of shapes, lots of things. There's not really a lot of spots where you could put some lettering in. I guess in the foreground at the bottom, that area would work because it's dark and it's also a little bit out of focus. Though you could put some lettering down there, it wouldn't be as interesting. However, composition is something that we want to do in this class because it would just be along bottom line, and not an interesting combination that merges the illustrative lettering with a photograph. This is an interesting one. This one would be a little bit tricky, but it would work. I do like that it divides the composition up into these shapes. For example, that back half circle area where it's almost pure black would be a nice place to highlight a word. You could have some words in the area below that, even at the top, you could probably put some stuff in there and you'll have it work well. This one would be a little bit trickier, but it would work well, I think. This is a really cool photograph. I love the reflection where it's almost completely flipped. But this one would not work well for this project obviously because it's such a high contrast image and there's high contrast everywhere. There's no spot where it's just one tone that would serve as a good place to put lettering. Also, the graffiti in the background has some lettering as well, and that could get confusing when you're putting lettering on top of that. This one, I think could work really well because of the depth of field focusing. It's almost divided in half on that angle where it's just dark at the beginning and really soft focus. I think you could use that shape to have some really nice lettering that sweeps up into that space, and it would read really well because the focus on that area is so soft that some nice crisp lettering would really pop on that background. This one is a really nice simple photograph, and obviously this will work really well because we've got a big open sky area, and there's a lot of contrast between those full pipes or tubes whatever you want to call them. That sky background, so you could do some lettering where that comes in front of the lettering little bit without too much trouble. Those are some examples of photos that would work really well and some that wouldn't work. I'm hoping walking through those will help guide you in choosing a photo to use for this project. I can't wait to see what you pick. Go find it, I'll wait here. You will get your picture, and we'll meet back in a couple of minutes.
4. Setting Up Your File: Setting up your file is pretty easy. All we're going to do is open up Procreate. Go to gallery if you already have a file open and then choose New. I like to choose a relatively large file size. I'm going to go with 4,000 by 4,000 pixels. I think this is a good size because it isn't too enormous, but it gives me enough resolution that I'll won't have any problems drawing and I'll be able to get lots of detail when I zoom in and that's going to be important for this project. Once we have our file open, I'm just going to go to this toolbar at the top, click on the wrench, then I'm going to choose "Add" and I'm going to insert a photo. Now we are going to just go in and find our image that we are going to be using, and we'll place it in our document. I'm just going to scale this up so that it fills the document. If the image size that you choose isn't the right proportions, you can just go ahead and change that in the settings by clicking on "Canvas" next to Add, and then crop and resize, and then you can resize it to fit your photo that way. Now that we have our image in our document, what I like to do is make a new layer that we will sketch on and then click on our photo layer. Then I like to just bring the opacity down low enough that I can still see all of the visual information, but that it's late enough that I can draw on top of it and not have any distractions. That's it. We are ready to go.
5. Demo: Lettering Styles: Before we get started, I thought it would be fun to walk you through some different lettering styles that I like to do. These are technical names or specific things. Well, some of them are, but some of these things are just styles that I made up or gave names. Let's dive in and get started. The simplest letters that I do are some simple bold letters. An easy way to do this is to write out a word very simply. In uppercase letters, I'll write simple. We'll end up using this as a frame for our lettering. I'm just writing it as simple as can be, and then I'm going to go ahead and bring down the opacity on that layer so it's dark enough that I can see it, then I'll do a new layer on top of it. For this style, I'm simply going to trace around or build a little wall around the letters to make a nice bold letter shape. Doing the initial framework is helpful so that I can trace them over, but it's also a quick way to space out the word if you're trying to fit it within a certain amount of space. It's a lot faster than doing a full bold letter form like this. If you want, you can leave it like this, or you could fill it in and have it be some dark super bold letters. That's the simplest lettering that I do. Another style that I like to do is script lettering. With script lettering, it's hard to talk about how to do it because it's a little bit technical. Part of me thinks that growing up having to write cursive in school, taught me a bit. Obviously, this is not script, but you can do the same thing where you write out the word ahead of time and it will sort you a guideline. I'll still do this sometimes to map out spacing, but for script, some tips I would give you are to work on a little bit of an angle and try to match that angle for all of your letters. If you imagine a line going through the center of each letter. Well, you might not notice, but if you know cursive or calligraphy or something like that, you'll know that this isn't a proper S. Proper S is something like that. I personally don't like the way that looks. I think it can be hard to read sometimes. I will just cheat and do whatever I want because my lettering is playful, illustrative, and I don't really care about that specific area of rules when it comes to script. There is one area that I do pay attention to and I think that helps with legibility. That is how you vary the line weight when you're doing script. Let bring down the opacity on this and show you what I mean. One thing you want to think about when you're doing script lettering is that on your upstroke, the line will be thinner and then on the downstroke, it'll be thicker. This is a natural result of calligraphy brush pen or a fountain pen. But it's something that I like to pay attention to when I'm doing my script letters. I'll just be going, and then up, and then push harder when I go down. Up and then down. Now, as you can see that this brush has some good pressure sensitivity to it, but if your brush doesn't have that, another way you can do this is to just do it without lines and then fill it in. To be honest, I work this way a lot if I'm doing some fat letters or if I'm using a brush that's more monoweight. To do this, you just draw your letter normally, but then you could come in and draw in the wider area. Upstroke thin and the fatter downstroke. Then the thing I was talking about with the angles is if you imagine a consistent line through. You want to make sure that they're all on that same angle. Then in terms of if you don't want to do some traditional cursive letters, for example, the one I hate the most is an I. I never draw eyes like that, so what I'll do is, let's pretend that this starts with an I. I will just do, oftentimes, a regulator like uppercase I, and match the same angle, and then I'll probably do a fancy little top and bottom on it. Something like that. Other uppercase letters that I don't really like is the F., so sometimes I will just like a wider bottom and then something like that. That actually might be somewhat accurate. I can't remember what a traditional one is, but for me, it's trying to have it feel like a cohesive style. Let's get rid of some of these script layers. Another letter style that is fun to do and simple when you're getting started is block letters. Block letters start with a block. I'm just going to make a block. Then let's just go ahead and duplicate it a couple of times. Duplicate, B-L-O, merge these two, duplicate that. B-L-O-C-K. Let's merge those down. When you're doing block letters, you can think of it as carving the letter shape out of the block. I'm going to do a new layer and make a white brush instead of just erasing out of it so that we have some more flexibility in doing this. When you're doing block letters, you're just going to go ahead and carve out the shape of the letter. For the B, I'm just going to get that B-shape there. We don't have to do anything over here because that's what B looks like, then we can draw in our counters and go in for the L, just carve that out. The L, all you have to do is carve out the center. For the C, you could do something simple like this, or you can get a little fancier and come in like that. Then the K, you can get that little notch cut out like that and just straighten that angle a little bit. That's how you do simple block letters. These are a lot of fun and you can do lots of variations with this. You could make it more dynamic, more like a psychedelic by making your blocks along a path. For example, if you had a curved baseline, you could put your blocks along that path like so, then go in and erase those middle parts. We'll do the word path here. That's an E. There's a lot of flexibility with block letters. Another style that is fun to do, which you may have done on your sketchbook when you were in high school is a bubble letter. For bubble letters, I like to just make sure there's no hard edges. One tip for this is using a brush that has some streamline to it. The right Hamrick lettering brushes that I use a lot, the two ones I use the most, the ink and the ink solid have streamline and what that does is it smooths out your lines. I'll just go ahead and get the shape of the B without doing any hard edges. I like to just have the things curve in, make it look like a little butt for B. Then I like to overlap the letters sometimes. We won't even have regular counters, we'll just have little pinches. Just making chubbiest little letters as I can, have them still be readable. That's bubble. Another style that I like to do are 3D letters. To do 3D letters, I will start the same way that I did the initial bold letters. I'll just write it out nice and simply. We'll do three for 3D. We'll go ahead and bring the opacity down here. Then we will make a little wall around our letters. We'll make the numbers pay for it. Get it? That's a stupidity joke. Three. Blocking these in. You'll notice that my lines again smooth out because I didn't switch back from that streamline brush. I'm going to go ahead and do that for the next parts. Erase our guide layer. What we can do now is duplicate this layer and click on the one that's below it, and then bring the opacity down. Then let's grab that layer and move it down however far you want your three-dimensional letters to be. Now we can click back on our top layer. What we're going to do now is just draw lines connecting the points on each letter. You just line up the bottom part of the T to the bottom part of the T. This way you know that it is perfectly accurate because we are using the same letters as a guide. After you've done that, you sort to make it up to the top ones because we can't really see that well. Once you've done all these connecting lines, then you can just go ahead and trace the outer edges. We can turn off our repeated layer and now we can just go ahead and fill these in. Sometimes it's easier to just do it yourself when there is smaller spaces. That's a quick and easy way to do a 3D-letter style.
6. Demo: Lettering Styles Part 2: Another style that I like to do a lot is some drippy letters. Let's do the word drip as an example. I'm just going to go ahead and write out our letters simply, just as we've done before, to use as a guide, and help with spacing. I'll turn down the opacity and I'm going to go back to a streamline brush. If you are just using the default brushes, I think under inking, the syrup brush has some good streamline to it. I'll use that for this one. When I'm doing drippy letters, I will outline like trace, like I was doing for the bold letters, but just undulate a little bit. Maybe bring the brush size up a little bit, undulate my line, wiggle it in and out a little bit and then just every now and then add a drip shape. Just following along that guide below to make sure that I'm keeping my letters accurate and shape. Then I'll just try to space out the drips so that they look somewhat natural. Sometimes I'll do some that are behind. When I'm doing drippy letters, I like to have the letters overlap a little bit. You might have to move these things over a little bit. Move the guide over. One thing that's helpful is you want to make sure that you are having your drips all go straight down. If you're someone who look, like me, who rotates their canvas a lot, like this, to draw, you want to just make sure that you are paying attention so you don't end up with sideways drips. I forget how nice this syrup brush is. The P is pretty far away at this point. I'm just going to go ahead and drag that layer over and then make sure I'm back on my drippy layer. Just wiggling my lines, cool. What I like to do now is go in and add some extra little drips. Just try to vary them so they're different sizes and shapes. Another style that I like to do is pretty similar to drip and that is something I call cloud because they just look like fluffy cloud letters. Let's go ahead and write out the word cloud and then bring the opacity down. Similar to how we did the drippy letters and the bold letters, we're going to do some little half circles of varying sizes that overlap. You can try to make your letters extra bold, it works well for cloud shapes. At times I try to do some little ones and then some bigger ones. It looks a little bit more natural. Just realized I spelled cloud with a W and that is ridiculous and wrong. I was just doing that to see if you guys would notice. Extra bonus points if you did. One thing to think about when you're doing playful letter styles like this is you want to make sure that you're not pushing it too far, so that's hard to read. You may notice that this D is starting to get a little too round because this side is being obscured, but we can make this a little bit more legible by paying attention to our inner line and making sure it goes straight down and then push out the side a little bit, so our counter is more dramatically a D. Let's do one more style. What are we doing here? This style, I refer to as trippy psychedelic because it looks like old '60s and '70s psychedelic poster lettering. This is helpful when you're incorporating lettering into a composition or on top of a photo, because you can use some of the lines and shapes within the photo. What we'll do here is start with a shape and then put our words into the shape. Let's start with a pretty dramatic curve that starts small and gets fatter at the top and let's do three lines for three words. We can do that, down like that and we can go ahead now and write out the words. We'll do trippy. Again, just writing out these words very simply. We'll do psych. Then split it up into two words, so psych up top and then adelic below. Again, We're just trying to space this out to figure out how long it's going take. I mean, how much distance it's going to take, not how long it's going to take me to draw this. I'm going to merge these two together and bring the opacity down. Now that we have our framework, I will go ahead and start tracing over our letters. But paying close attention to the lines and the shape and because I like to think of this as one big shape, I try to interlock the letters as much as I can and to have as little negative space between the letters as I can. I will undulate the edges a little bit, give them a little bit of a wiggle to take up as much room as I can. Bringing the crossbar, the T down, giving them little serifs to use up that space and then I'll come in with the R, then following along that line that's left. Just wiggle that a little bit just to give it that wiggly psychedelic vibe. One thing that's fun to do is pull things over like this leg of the R and then we can tuck the I on top of it. Just following those shapes, just thinking of ways to interlock these letters as tightly as we can. Because the P's naturally have quite a bit of extra space, I'm going to make the top part of it a little bit bolder and then maybe I can lean the second one in a little bit more. We will notice now that running out of space with our Y. We may have to re-do these Ps to get a little bit more room in here. What I'll do at this point if I run into a problem like that, is I'll bring down the opacity on that layer and then let's go in now and do our Y. Let's use this negative space that the P is going to leave and then we can make our Y and see about getting this P in there. Now we can adjust these other letters a little bit. Sometimes it's helpful to not get too fancy with the style until he figured out the spacing yet, so I got a little bit ahead of myself here. Let's simplify things a little bit and we can come back and add some of that wiggle stuff after the effect. We can come down here, draw this P, so let's just think about the space that we're working with. Pull that tail the S like that. Because this starts real small and gets big, let's make our letters do the same thing. I think I went a little too far with that Y. Sometimes it's helpful to go over to the end, and start there. We can work on these letters. I can bend that part of the E to follow the D, and again, we can come up in size. We can also maybe for the L over here so it can be even bigger and then tuck the C up on top, I mean the I, and then we can put the C right in here like that. Now we have a better handle on how these letters are going to work within this shape. Now we can go and bring the opacity down here, and now we can add a little bit more style. Also I'm going to make my brush a little bit smaller so I have some more wiggle room. Let's just assess this and see if we're happy with the size of the letters. I think this right here could use a little bit of work the S and the Y What I want to do is make the Y a little bit bigger. I'm just going to start right here, and I'll start adding in some of those curved things that I was doing before. I'm just trying to let the letters use the space and fit into each other's negative space. There you go, that sizing is feeling a little bit better. Now we can pull the C and follow that curve that I drew on the other one. Maybe we can interlock these letters a little bit by pulling the bottom part of the C over. Not sure I like that, I think don't. But again, this is the experimental stage [inaudible] we can again try to do that stuff. I think that's a little better. Let's go around here. [inaudible] along this lines. Then we can pull this Y over. Maybe have this part come down a little bit lower to use that space. I'm going to go back to our sketch layer and just draw this line back-ends that I have a little bit of a stronger reference point for the bottom. I'm going to start at the end here on this one. Sometimes starting in the middle or end can be helpful to make sure you don't end up running out of space and you can sometimes make the letters fit together a little bit better, if you are focusing on individual letters logging together and then building the rest around it. As you can see, I'm doing a similar wiggle thing that I was doing with the drippy letters, but just a little bit more subdued. Another thing you can do with this lettering style that adds some character is to do an outline to make it even more of a shape. I'll just trace around the whole thing, loosely following the guides, you can also just underline it a little bit. If I didn't mention it yet, this lettering style is one that benefits from a brush that has that streamline effect that just smooths your lines out. Cool. Now you can see why I call it the trippy psychedelic style, because that's what it looks like.
7. Sketching Our Words: Now that we have our document open, we have our photo on its own layer. We have the opacity turned down and we get a new layer going. Here we can just start sketching out our phrase and try to figure it out where we want to place it in our image. The first thing I usually do is just write out the phrase somewhere small just to get a sense for the length of each word and to have it as a reference point. The reference point is not really as important for me on this one because it's such a short phrase. But if you have something a little bit longer, this will be helpful. It's also a nice way to check your spelling because when you're illustrating letters, you can get caught up in the design and forget how to spell. I usually do a new layer so I have that smaller one on its own layer in case I want to get rid of it afterwards. At this point, I'll just zoom out a little bit so that I can work seeing the whole composition the whole time because that's all I'm really concerned about right now is the composition. I'm not really going to spend too much time trying to get too tight with my lettering because I'm not really even sure where I want to go in the image. First thing I want to think about is my visual hierarchy. We've got three words; shred, your, state. State is the bicycle company so that's pretty important. But shred is the action word and that's pretty important too. I'm thinking the emphasis will be on shred and state and then your can be a little bit smaller. At this point we can just start winging it and throw some stuff down here and see what's working so we can see what space we have. We've got all this big sky space up here and we have this space down here that we could use if we need to but I want to try to avoid having it completely on this area that's a little bit darker. I'd like to take advantage of the sky where we can. Let's just write shred up here. It seems like a spot for a word, and then maybe your can be a little bit smaller right here. Then we're stuck with a little bit of a tricky situation for state. Seeing how it's getting a little bit small. We're on top of this telephone pole here, which even though it's blurry it's still got some good contrast which is making it hard to see. Let's do a new layer and try some other options and see what we got going on. Sometimes I will look for cues within the image and try to make some baselines that might give us ideas for where the type can go. For example, we've got this roundness of the wheel so maybe I'll do a baseline that carries on that momentum. Maybe we can do a top one and then see about putting shred into that shape. Then maybe we can try something on the bottom and get your in there. Try to use that space for state. It's already starting to look a little more interesting because we're utilizing shapes and angles from our photo. That's a good way to help your lettering feel like it's part of the composition. Again, I like to do lots of options here and not spend too much time on each one so that I can figure out the best possible composition. We'll just turn that off, do a new layer and try something else. Maybe we could do something where the letters wrap around, goes to the wheel, or something like that. Will give me the idea was thinking about the word your and having it be script where we can have the tail of the y wrap around there. I can put shred up there. I'm going to turn off this original one because it's a little distracting. I still feel like this is not really working that well with the composition and working with the imagery. Let's go through and see what we've got going on here. Doing the y wrap through the wheel made me think that maybe we can make state bigger down here by doing the same thing and having the s wrap through the wheel. Let's try something with that. That way we can have that word be a little bit bigger. Then that background won't be as much of an issue because the word can be a little bit bigger. Then it ties it into the composition a little bit better. Then maybe we can continue what we're doing with your and have that wrapped through there still. I already like this better. I like the mix of having script for your and then having state be more simple letter-forms. I like the way this is looking right now. I'm going to do a new layer so that if I don't like my initial attempt at shred, can just go back and try again. Let's see. Can just put shred in there. I'm thinking I want it to look a little bit more dynamic. Maybe give it a little bit more of an angle since it's a dynamic word and maybe have it feel like it's playing off the momentum of the trajectory of this guy jumping on his bike so maybe it's more angled up that way. I'm going to bring down the opacity on shreds so we can use it as a focal point. Let's see if we can wrap this through the wheel as well. Then as I said, we can make angle this type a little bit to make it feel a little bit more dynamic. Delete that old one. I feel like this is looking a little bit better and more in line with what I was thinking. At this point, I'm going to combine those two layers, bring down the opacity and try to do a little bit of a tighter version, and refine this a little bit. I want to make the S use this negative space a little bit better, so I'm going to try to pull this over a little bit more. I can bring that in like that, I can think about this being a little bit bolder. Maybe we can bring the crossbar of that H over there a little bit, work into that space. At this point I'm going to skip down to the Y because I like to pay attention to how the letters interact with each other and sometimes if you just work all on one word, you can't make them work together as easily so the reason why wuh, uh, wuhwuh. To demonstrate what I'm saying is I went down to do this Y, so now that I could come up here and then make the R fit into that space a little bit better. Making this a little bit smaller just to give this some energy and sometimes having different size letters, and especially that paired with this angle feels like is going to give it a little bit more energy that we want and of the word like shred. That's looking pretty good. This is a little tight over here to the edge, but we can go ahead and fix that in a little bit. Let's see about matching the angle from the Y with this T, just to make it feel more cohesive and then we can have that crossbar of the T come in through the wheel a little bit, we can pull this through. I'm going to shorten the A a little bit so that other T can tuck in over the top of it. Same for the E. I think we are getting somewhere here. Doing this wrapping around the wheel with the letters makes me want to do some of that droopy lettering to make it feel liquid. Which is the vibe or it's like wrapping around and I don't know, it feels energetic and makes sense with the wrapping, and I think it'll give it some cool style, so I'm going to work with that idea for this. I'm going to turn down the opacity here and then I'm going to go in and do some of that drippy lettering over this. One thing I wanted to address that I mentioned before was I wasn't crazy about how close this was to the edge, so I'm going to actually start on this side and pull this over a little bit so that I can adjust that and then I can just see the letters as I am going. I mentioned I was going to do that like drippy type, so starting to play around with that more wiggly line, check and refine as we go. Maybe I can shorten this S a little bit to get more room for that D at the end. I'm just starting to play around with a more wiggly line to think about how the drips are going to look. We've got some extra room here, I'm just barely starting the drip. I'm just doing more of a wiggly line to get that feeling right. Let's see, I can go in here, just fattening up these letters as I go and addressing some of the negative spaces so I can make these rap a little bit better. Some I'm pulling that U up a little bit higher. I can move on to state. We are getting pretty close at this point. I'm going to delete that previous one. I'm going to go ahead and delete these other ones that we don't need just to clean up the file a little bit. Now that this is pretty close, we can refine our sketch and make it a little bit tighter. When I'm doing this part to refine it, to make it a little bit tighter, I'm going to go in and look at the problem areas and address those first. One is this space right here. It's not that big of a deal, but because the letters are all fitting together almost like a puzzle, this becomes a focal point for me, so I want to get rid of that a little bit. What I think I'm going to do is just going to work on this line and extend it down and angle it a little bit so it fits into that space a little bit. At this point, I'll go in and add some more of these drips to refine it a little bit. I can also use the drips to work with the space and interlock the letters a little bit better. Here I'm going to pull that part of the Y up a little bit just to use that space a little bit better. Now I'm going to come in here and work on the R just to address the spacing between and how those two interact. I think we're at a point now where I can use this to do my tightened up final sketch, not final sketch, to do my tightened up final drawing that we will use to add color and tighten up and finish for our final illustration.
8. Tightening Up & Refining Our Sketch: Now that we have our sketch sorted out, we can go ahead and do our final lettering treatment. What I'm going to do now is, I'm going to turn down the opacity on our sketch. I'm going to do a new layer. I'm going to switch to black because even though I'm probably not going to use black outlines for my final image, it's helpful for me in this stage so that I can get a feel for the line work and make sure it looks as good as I want it to. I'm also going to switch brushes. I like to use different brushes for different situations, but because this is like a squiggly loose, drippy, lettering style, I'm going to use this Hamrick ink solid streamline. This will give me a nice smooth line that will be nice and round and not have any harsh edges. I'm going to go ahead and use this. But you can use whatever you want if you don't have Hamrick brushes. Some options that are similar under Inking, the syrup one has that same smooth effect, but it doesn't have the little bit of grit that the Hamrick brushes have that I really like. I'm going to zoom in a little bit more now that I'm working on the final artwork and I already have the composition locked down. I'm just going to come in here and start drawing. Just undulating in and out with my lines paying close attention to the drips now. I like to lift as I'm coming off the end of a drip to give that tapered line. I'm going to go ahead and draw through the wheel and then come in and erase it afterwards, that way I can get the best possible line. I want to make sure not to put any drips in the middle of it there because that'll make it a little trickier. Oops, I keep accidentally switching to the eraser because of my arm. Just wiggle in and out, making it feel fluid. I think this got a little too chaotic with the drips here, so I'm going to smooth that out a little bit. We have one bigger one, and a little one there. I can come in and add some other supplemental drips. I'm trying to make sure that the drips are right in line. There's other ones on each side. On the sketch you'll see I had one here and here. I switched that to make this one a little bit higher so it's perfectly aligned with the other side so it looks a little bit more natural. Sometimes you can have drips go on the side or behind instead of coming up over the top like that. Another thing I like to do is follow the undulation from the other letter, so just following that path. Now that I have my line work done, I can go ahead and delete my sketch layer, and we are ready to move on to the color stage.
9. Coloring & Blending Our Lettering Intro Our Image: Now that we have our line work in a good place, we are ready to start coloring. Now, the first thing that you want to do is go back into your photo layer and bring the opacity back up. That way we can see what colors we're working with so that we choose colors that work well with the photograph. Because one way to mess this up would be to just have colors that don't work at all with the photo that it's on. Because this is a pretty light monochromatic background for the most part, I'm going to use some crazy bright neon colors to go with this. The guy in this picture is wearing a neon green bracelet and his frame's got a little bit of a neon green to it, so I'm going to go with that for a shred and then I'm just going to go the full neon route for the other letters. I'm going to duplicate my layer and go into the Settings and turn on Alpha Lock. What Alpha Lock does is it allows us to color only what already has a drawing on it. What that means is that if you just picked a color, grabbed a brush and drew on it, it would just fill in what already has a drawing. As I mentioned, I'm going to make these letters lime green, but I still want them to be an outline, so I'm going to choose a darker green that will work with a lime green fill. Maybe something like this. Though I think it needs a little more green, a little more black. I'm going to grab a brush that's a little bit thicker just so I can do this faster. I'm going to go ahead and just color in all of the shred letters. I'm going over a little bit into the your, and not worried about that because I'm going to color that as well. If I'm going to do this green, I think I'm going to do your, a magenta hot pink. I guess I can start with a pink and then darken that up a little bit like that. That might work. I think I'm going to make this brush a little bit smaller to get in these close areas. Now that we did the areas that are close up, we can make the brush bigger and cover some more ground a little bit faster. I'm going to do state, yellow to get some nice pop on this darker background at the bottom. I'll make a more mustard yellow for the outline color. Now since we duplicated our lettering layer, we can use the one below for filling in with the colors that we want. Then you'll see why I wanted the line work on a separate layer in a little bit. Let's go and find a nice lime green. I guess I can start with this and go ahead and adjust that with the value. I want this to be pretty limerific. Now we can just go ahead and drag the color onto our letters and fill them up and grab our magenta. Now that we have those filled in, we can go ahead and erase the areas where we want the letters to go behind the wheel. To do that, I want to do this one at a time to make it easier. I'm going to bring down the opacity so I can see the photo behind it. Then I'm just going to zoom in nice and tight and then erase what I don't want. I want this letter to come up over and then go behind the letter. I'm just going to come in here and erase along that wheel line. Then here, I want this one to come over the top and then this one to go behind it. Then I want this to come in front. I want this to come over here, this on top and I want this to go behind. I can turn that up and now we can turn the line drawing layer up. You can go ahead and turn off the Alpha Lock because we're done with that. Now we can go in and erase what we don't want. You can already see that it's looking pretty well intertwined there. But now we can go ahead and make it even more clear by using a little bit of a shadow technique so that we can make it look like the wheels are casting a shadow onto the lettering. To do that, we want to make a layer in between our color fill layer and our line layer. I'm going to do a new layer right right the two and then I'm going to choose a light purple. We're going to set this layer to multiply, so click on the "N" and then pull that to multiply. First, let's grab not a big brush. We'll use whatever brush we're using to do our drawings with. Now we can come in here and just outline the areas like that where it's overlapping. We can do the same with the drips to give them a little bit more shape. I like to do sometimes the underside of the letter and do the sides with some of the drips like this, just tracing them and making a little bit wider and then thin it out towards the top. This is darker than we want it to look, but we're going to go ahead and turn down the opacity afterwards. We're just using it so we can see it a little bit better when it's a stark. I like to just try to undulate a little bit with the shadows the same way I was doing when I drew the letters. Another thing I like to do on this layer is to make some more drips that will be a little more subtle when we turn down the opacity, then maybe we can make it look a little gross by having some dots in. I don't know why these dots are gross, but I feel like it'll give this a nice effect. Before we get too far, let's turn down the opacity so you can see what I'm talking about. It'll be a little bit more subtle like that. If you want we could just leave it like that as we're drawing the rest of it so that it looks more accurate. Now that we've done the shadows, I'd like to go in and add a little bit of highlights to make this look a little bit more liquidy and give it some more form. The shadows give it a little bit, but then I think that some highlights on these drips will really push it to another level. I'm going to go ahead and do a new layer on top of everything. I'm going to grab white and just going to go in here and add some little dots to make these drips a little juicier. You don't have to go too crazy with these, but a little bit here and there can really give it some more shape. This one might not make sense if you're not doing drippy letters or something that wouldn't have highlights. If you weren't doing drippy letters and you just had lettering going behind something, obviously the shadow technique would still work, you just wouldn't do with the drips, because there wouldn't be any drips. There we are.
10. Conclusion: Now, that we have our finished image, all there is less to do is to share it. If this is something that you want to print, or you want to save as a high res file on your computer, all you would need to do is click on this little wrench at the top and then go to Share, and then we have number of options over here. You can just go ahead and save it as a JPEG, and it'll save it as a high resolution file because that's the file size that we went with at the beginning. But if you want some flexibility, and for example, if you want to keep the lettering separate or put it somewhere else, you can go ahead and do a PSD. Then this will save a Photoshop file that it will have all the layers intact that we worked from, and you can AirDrop that to your computer or you could save it directly to something like Dropbox, whatever is easiest for you. You can save to files on your iPad. Another option is if you wanted to save this for your website, or wanted to post it online, but you didn't want the file size to be too big. Because this is such a big file, in terms of resolution, to make it smaller, we can click on "Canvas" and we can go to Crop and Resize. I would recommend that before you do this, you duplicate your file just in case you still need the hi-res one because once you've lowered the resolution, you can't go back. Let's cancel this. What I would do is click back on "Gallery", hit "Select" up at the top, and then tap your image and then duplicate it. Now, we have two versions of this file. We can open one up and we can lower the image size without worrying about not having a hi-res file save still. You can click on the wrench at the top again and then go to Canvas and then crop and resize. What we want to do here is click on "Settings" and then select to re-sample. What this is going to do is, it's going to resize everything as opposed to just cropping it. We can bring this down to, let's say 1500. That way it's still pretty big to post online, but it's not going to be a huge file. We can hit "Done". It going to shrink this down, and now we can go to share, choose JPEG, and you'll see our file size is 762. Before it was about three megs. That's a nice difference. You hit "Save Image" and it will show up in your photos. That's all you have to do, whether you're looking to share your image online or to print your image. You'll be able to do that with any of these different options that I just showed you. I hope this class showed you how fun it can be to incorporate some expressive lettering into your images. By starting simple and mapping out your composition, it's not difficult to bring your photos to life with some dynamic type. The techniques we used in this class work well for lettering only compositions as well. Whether I'm mattering lettering to an existing image or making something from scratch, this is generally how I work. To recap, we learned how to identify and choose images that are well-suited to incorporate type. We took that knowledge and selected images and phrases. We import our image into Procreate and begin sketching out our words by taking cues from our image using shapes and simple letter forms to design our composition. We utilize layers to slowly evolve and tighten up our sketches until we're happy with our composition. Then we made a tighter drawing from our sketch and then use color and shadow effects to incorporate our lettering into our image seamlessly. I've built my career around my distinctive lettering and it's taken me further than I ever imagined. I hope you find the inspiration in this class to take your pieces to the next level. I'm so excited to see what you come up with. Don't forget to share your work in the project section. Seeing your work will inspire your fellow classmates and myself as well.
Chris Piascik, The illustrator formerly known as designer.
