Chalk Lettering Effect in Adobe Photoshop

1. Chalk Hand Lettering Effect in Photoshop: Hi, I'm Marlowe [inaudible]. Today I'm going to be teaching you how to turn a simple hand lettered pencil sketch into realistic looking chalk art using Adobe Photoshop. The tools we're going to use a really simple, you just need some materials to sketch with. I only use one pencil, a simple pad of tracing paper, and a sticker eraser. Some way to scan your artwork, whether it's a real scanner or just an app for your phone or tablet and a computer with photoshop installed. Today, I'm using an iMac with Photoshop CC, but if you have a PC or an older version of Photoshop, that will work just fine too. For today's lesson, I'm going to use part of a pencil sketch I recently made for the menu board at a nearby gelato shop. You may choose to make a design from scratch for this class or use a design that you've made in the past. But either way, I'm going to show you in the video lessons how to create the traced version of your design using a dull pencil so that it will best render as for chalk once it reaches Photoshop. This is a pretty fast and simple technique and beginners and pro's alike can do it. Starting with the actual sketching. I'll walk you through every step you need to create a finished piece of artwork in Photoshop, which you can then export for print or use online. As always, remember to share your project with me and the other members of the class in the project section of the class page. If you feel like sharing it on Instagram, please tag me using my username right here. Hi, I'm Marlowe [inaudible] today I'm going to teach you how to turn, super easy, simple, and fun. Remember you don't need any prior Photoshop knowledge. Any means of scanning your art like a real scanner or even an app for your phone or tablet. Once you bring it to Photoshop, it will take on the characteristics of real authentic chalk. Today I'm using my iMac with Photoshop CC. But if you have a PC or an older version of Photoshop, you'll certainly be able to follow along just as well. 2. Sketching: The sketching aspect of this class is really quite fun. Whether you're a professional lettering artist or not. It's still something you can easily do. In fact, some of the lettering pros may struggle with this a little bit more because we tend to like perfection in our lettering designs. The goal here today is imperfection. We're trying to find a way to make a pencil sketch when turned white, emulate the way chalk looks. So the best way that I've found, the best tool to do this with is with a very dull pencil that has a very soft, large lead. For me, I'm using a 12b pencil that I have specifically ground down to make a very dull point. You can see that when I draw with this pencil, I get very thick lines and they're very smeared looking already even without touching them. I do not want crisp, really thin hair lines because almost no chalk can actually achieve that kind of line. I don't really care so much if the thick strokes of my letters are equally thick or not. This is not about perfected, beautiful hand lettering that has been slaved over for hours. This is about effortless looking, beautiful hand lettering that looks like chalk, which is by definition ephemeral. It's something that's meant to be erased. So, you really want your lettering to have that feeling of the ephemeral as chalk does, in the sense that someone could come along and just erase it. For me, I made a couple of sketches. What you see here is part of a larger sketch I made for a menu board that I ended up doing in real chalk at a gelato shop in my neighborhood. what I did was I started with a number of thumbnail sketches and really small sketches and enlarged it and enlarged it using tracing paper till I got roughly the look that I needed. Since I was then going to render it again in real chalk on a real board, I went no further than this. That was good because actually this final sketch that I made is plenty good enough for the technique that we're using today, despite the fact that there's a smudged pencil around the letters and some of the letters have mistakes in them. Some areas that if this were going to press or I were really refining it, I would erase or change. I'm just leaving it all. That's what I'm going to be using in the lessons today. Now you, for this class may want to use a new sketch of your own, something you create just for this class or you may want to go back and revisit a design you've made before. In that case, I suggest that you still take your old design, bring it underneath some tracing paper and retrace it using this dull pencil technique. As I come in and do my tracing, you'll see that I'm pretty imprecise on purpose. I'm not actually worrying that my thin strokes remain really thin or my thick strokes are all the exact same width. We're not trying to emulate full calligraphy where a calligraphy pen would have the same thick, down-strokes and thin up strokes. Even on these small little curves, I'm going over them sometimes twice, just to add a little bit of extra color, extra graphite to them. It's intentionally imperfect. If you're not comfortable with hand lettering, and that's fine, you could use a printed out design of a digital font and trace over that using pencil to give it a hand done look. I have here actually a mock-up rendering that I created also for this gelato shop. It's a little bit beaten up at this point, but that's fine. The point being that let's say I want to just take the word gelato and make it look like I wrote it by hand on a chalkboard. Well, I can just take a piece of tracing paper, put it over this printout, and trace over the printout. You can see how imperfect I'm being. I'm really not carrying too much if I go outside the lines or if I have very sharp straight edges or corners, none of that really matters because in fact, all the imperfections of this kind are going to add to the realistic effect of the chalk once we get it into Photoshop. I could just go on like that. You see how immediately, even though that was a print out of a font, it immediately looks more handmade. then when we bring it into Photoshop with scanning and turn it into chalk, it's going to look like it was handmade from the start. Once we're done with the sketch, all you need to do is scan it in some way to bring it into the computer. I'll be using my Canon desktop scanner because I have that right here next to my machine. But if you don't have easy access to a scanner, that's just fine. You can use a scanner app for your phone or tablet. Many of them are free, such as Cam Scanner, which I've linked to in the about section below. The only important thing here is that you scan your lettering at relatively high resolution. I recommend 300 dpi because that's the minimum required for printing it at life size. But in a very worst-case, you can scan it at 72. You could even upload a decent photograph from your phone and work from that. 3. Take a Close Look at My Sketch: Welcome to my class on creating foe chalk lettering from a pencil sketch using Adobe Photoshop. Here's the sketch that I made. I want to show you some of its characteristics before we get started on the effect techniques. Because I used a very dull pencil to make this, you'll see that even my thinnest strokes are quite thick and I have variation between dark sections and light sections. I also kept the lettering on this slightly imperfect or sloppy side because no matter how great your chalk lettering is, chalk itself is imperfect, and so there will be some imperfections and I want to try to emulate that with my pencil. I've even left some blank white spaces that I didn't fill in with the pencil and I intentionally made some darker strokes inside with even lighter gray strokes right next to it. In my thin strokes, I even went over them a couple of times so that on some areas there's a double stroke and on other areas there's just a single stroke. This sketch originated as a full sheet of paper and I scanned it at 300 DPI. That's why it's come out quite large. I do suggest that your sketches aren't really small if you're going to end up printing them, but if you're only going to be using this online and the resolution of your final image doesn't have to be huge, then you can certainly use a smaller sketch and you can afford to scan it with a less good scanner, like a scanner app. That said, even the cheapest scanner that sits on your desk is going to do a great job scanning this and definitely a good enough job to make this print quality in the end. All you need is a scanner that can scan at 300 DPI. 4. Set Up Your Document: Before we get started, I want to make sure that we're all looking at the exact same Photoshop workspace. If you're already familiar with Photoshop, you may not have to follow along with this because you'll know where all the tools are, but if you're still learning the ropes of where each tool is, just set up your workspace like me right now, and I'll be able to show you how to access everything. Go up to Window, Workspace, Photography. This will give us most of the tools that we need to work with today. The only one still missing is the brushes pallet. Go to Window, Brush, and now your brushes have appeared over here. I'll collapse this window with this double arrow icon. I like to have my tools in two columns. You may note, so you can click this double arrow and it collapses to one column but I'll keep mine at two for now. Next we are creating a new Photoshop file by going to File, New. I happen to know that the scans of my lettering that I made are 12 by eight Inches but honestly you can use any Canvas size here and you'll be able to adjust the Canvas size and, or your placed images accordingly. Nonetheless, I'm going with a width of 12, height of eight. I'm keeping a resolution of 300 Pixels per Inch, which is the industry standard print quality. Even if you're planning to use this only on the web, I would still advise designing your art at a resolution that you could print it one day so that you'll at least have both options down the road. Those are all the settings I'm making, so I'll just click "Create". Now I'm going to add into my file the two images I'm going to need to create my full chalk lettering. The first, is the chalkboard background. I come up here to File, Place Embedded, I navigate to my chalkboard image and hit "Place". Some of you when you place your image you are going to find that the image doesn't fill your Canvas completely. Like you see some white on the side or the top or bottom, and that's okay. You can use that opportunity when holding the shift key to drag your image out or in to fill the Canvas however you'd like. Holding the shift key is important though, because it makes sure that you maintain the aspect ratio or the proportions of your placed image so that it's not going to get squished one direction or the other. For me, my image was already 12 by eight, so it is the size exactly of my Canvas. I'm now hitting "Return" or "Enter" on a PC to place my image. Next, I have to add my hand lettering. Again, I'm coming to File, Place Embedded, navigating to my pencil sketch and clicking "Place". Again, I see these two diagonal lines, which means that the image still has to be placed officially, so I'll hit "Return" or "Enter" and there we are. Because I added these two files via File, Place Embedded, they've turned into smart objects, which I can tell because both layers have this icon here in the lower right corner. What this means for us is that we're going to be able to use smart filters, which will make it really easy for us to add adjustments that target only these individual layers. If you're already a Photoshop pro, you know that you can do the same thing using clipped in adjustments and that's going to be perfectly fine for you in this case too but for our purposes today, we're using smart filters because it keeps our layers palette compact and easy to read. Before I go on, I'm hitting "File", "Save". I'm going to call this "Chalk Lettering", making sure it's saved as a Photoshop file and clicking "Save". You'll almost always get this popup window, just hit "Okay". Now we move on to creating our full effect. 5. Build the Chalk Effect: To make our full chalk effect, we need to add some smart filters to this pencil sketch layer. Make sure you've clicked on that pencil sketch layer to select it and then go up to Image, Adjustments, Levels. You see, you can also hit Command L or Control L on a PC. What I'm going to do here is just lighten the background a little bit. If you've taken my other Skillshare class, digitizing calligraphy from sketch to vector, you'll know that in some cases it's important that your background be pure white. But that's not the case here, since chalkboards themselves can have a little grit on the mend. It's okay if the paper texture is going to show just a little bit. I don't mind if the background isn't pure white. I'm going to zoom in a little bit here, holding Command Spacebar and clicking and dragging my cursor. This allows me to get a closer view of the paper texture. Here in my Levels window, I'm clicking the white "Eyedropper Tool" and now clicking anywhere on the paper behind. You see that that brightens it considerably. I'm just clicking around a couple times to make the paper much brighter but not pure white. As I say, it's okay if you still have some paper texture or dust showing in the background. I don't want you to do anything to the pencil itself, keep that the color it is, and click "Okay." Now you see our first smart filter has been added here, and I'm clicking Command or Control Zero to zoom out and fit my image into the screen. The next smart filter we need will turn the letters white and the background of our lettering layer mostly black. We come up here again to Image, Adjustments, Invert or Command Control I. Now with the pencil sketch layers still selected, I come up here to the blending mode dropdown menu and I select "Screen." Just like magic, our gray pencil sketch now turns into, what looks like, white chalk and we can see through it into the chalkboard background image we placed before. Let's zoom in here just a little bit and take a closer look. You see that, indeed, if I pan around the screen holding the spacebar and clicking and dragging, the way in which I created the pencil strokes that are really thick and vary between darker and lighter, really does emulate the way that chalk naturally appears. You may be happy with your file as it is now. Maybe this is all that you were hoping for. In that case, you can skip ahead to the last video where I talk about how to export this for print and web. But if you want to do any other adjustments like brighten your chalk color or change the chalk color, darken your background, or change the background color, I cover that in the very next video. Now, don't forget to hit "Save", and you're good to go. 6. Adjust the Background: Let's start with making basic adjustments to the background. Maybe the chalkboard that you've placed is too dark or too light. Let's start by adjusting the brightness of the background, with the Chalkboard Layer selected, go to Image Adjustment levels. This is pretty easy, this middle slider here, which adjusts what's called the mid tones, will allow you to move to the left to lighten the image, or to the right to darken it. I'm going to do something in between it's a little bit darker than I had before, but not too dark and click Okay. I can toggle back and forth between my previous version and the new version by simply turning on and off the eyeball icon next to Levels. To edit this adjustment, I simply double-click on Levels and I'm back to this Window I had before. Now, if you look at my previous version, I had quite bright chalkboard spot here in the middle and lower section, but the very top and left and right sides are pretty dark. While I like the way that the darkness looks in the middle and bottom, I want to remove it from the top and left and right sides. I'm coming over here to this mask, and I'm going to my Brush tool and over here in my brushes palette, I'm going to make sure to select a very soft brush. You can check over here in your actual brush presets a preview of how the brush looks down here. It doesn't matter if you have exactly the same settings I do, all that matters is that you don't have the hardness turned way up so that the edges of your brush are hard. That's not what you want. You want the hardness down to zero percent. With my foreground black, I'm going to paint inside of this mask. If your foreground is not black, start by clicking D on your keyboard. That resets the defaults for foreground and background color so if you had colors or graze over there, it resets to black and white. Then click this double arrow icon and it toggles between the two so that now black is in the foreground. I'm taking my brush now and then just lightly brushing over the very darkest regions of this board. The really great thing about the chalkboard is that it's okay if some of the sections look cloudier or some spots look darker because that's naturally how chalkboards are. If you want to remove any of the brush strokes that you just made, all you have to do, you don't have to click Undo if you don't want. You can come over here again, toggle between the two or just click X on your keyboard and paint over your black with white, and it's as easy as that. Now keeping with our adjustments to background, let's say that the chalkboard you found is not pure black and white, some of them have a tint of color to them or they look a little bit greenish. That's really easy to fix. With your Chalkboard Layer selected, add another Smart Filter, Image> Adjustments > Black and White. You can make adjustments here, they probably won't do that much if your background is already mostly black and white, click Okay. I think minority was black and white so it's not going to make too much of a difference, but it really will make a difference if yours had a tint on it already. Now, what if you want to add a tint? Well, I'm going to go and undo the black and white I just did, and instead add a colored tint. I'm coming to my History palette, which is a quick way to undo multiple steps at once and I'm going to come back up to this Brush tool right before I added the Black and White Filter. Now that's gone, I'm going to add a background tint. We can't really do that with a Smart Filter, it's easier to do it with a regular Adjustment Layer, so just so that you can see it, I'm shrinking my Photoshop Window for a second and coming down here to this black and white cookie looking icon and I'm selecting solid color. We'll pick something fun for a moment because I can always change it. Let's pick this salmon coral color and click Okay. Now that appears right above the Chalkboard Layer because we added it when we had the Chalkboard Layer selected. Holding down the Option key or Alt key on a PC, hover over the line in between the color fill and Chalkboard Layers and you'll see this icon up here, click once, and your Color Fill Layer will clip inside of your Chalkboard Layer. That means that the Color Fill Layer will only affect the chalkboard and none of the other layers on your screen. Now, if you set this Color Fill to the blending mode screen, the texture of the chalkboard behind it shows through but ignores the darkness and the black color. I'm going to zoom in and show you closer what that looks like. Here's how the color looked when it was solid and here's how it looks set to screen. Now let's say I want to emulate one of those vintage dark green chalkboards. To do that, I just double-click on this colored swatch, my Color Picker appears and I'm going to scroll over to the greens, come down here and pick a darker green color. I think that's about right, and I'll click Okay and voila, you have a more vintage green colored chalkboard. 7. Adjust the Chalk Lettering: Now though, let's say that I want to brighten the chalk itself. I want to make it look lighter, that's really easy because we already have a levels layer set over here on our pencil sketch layer. I'm just going to double-click this levels, I'm going to get a warning telling me that there are multiple adjustments applied to this layer already, therefore those other adjustments are going to turn off temporarily while I work on my levels. Click "Okay" because that's fine and all I want to do is make this pencil look darker. To do that, I'm taking the center slider, I'm moving it to the right and darkening the pencil that way. Now I'll click "Okay" and you'll see that the pencil got a lot brighter. Here in my history palette, I'll show you the before and after. Now, what if you want to actually change the color of the chalk itself? Even though I can keep the background green while I do this, I don't want to. I'm going to turn off the green and get back to this black and white look and come up here to click back to my pencil sketch or lettering layer. All we're going to do is the same thing we did before to the background, which is add a color fill layer. Again, l come down here to this menu and select Solid Color, let's make that chalk a pale yellow. Now again, we want to hold Option or Alt on a PC, hover between these two layers and click once, that clips the yellow inside of it and with the color fill selected, now instead of turning this to screen in the blending mode drop-down, I'm going to change it to soft light. There you go, this just changed from white to yellow. If I zoom in, you're going to see though that now all of these little smudges that were around my lettering have also changed to yellow and they look a bit more dramatic. If you don't like that, there are a couple of things you can do. The first and easiest, maybe playing with the opacity of the color. Maybe you're going to want to come over here to your opacity and reduce it a little bit, that does reduce all the color. You should only do this if you're happy to have the color itself be paler throughout. If you're not though, then you'll just need to mask out those small areas; clicking on the mask of your color fill layer, coming over to your soft brush again, zooming into the region you want to mask out. Come over here to the brush pallet, reduce the size. The keyboard shortcut for this, by the way, is left bracket or right bracket to decrease or enlarge respectively. Then make sure that your set to a black foreground, click "X" if white was your foreground before. Then just come in here and paint out the regions that are too bright and too colorful for your taste. Again, I'm being mean rough with this though, because it really doesn't matter to me if the edges are imperfect. Now let's see how this looks if the color is much more dramatic, lets choose a hot pink. That looks pretty good, but if you want something even more neon, you can come and change this from soft light, which is a more natural look, to overlay, which is going to be real drama. There you go, that's basically neon. Then to get back to your original white, you don't have to delete anything, just turn this layer off. Same thing with the green background, you can turn that on. Well, this is an interesting look. I'll turn them both off again, hit "File", "Save", because you always need to remember to save your work. Now we'll talk about the best ways to export this for use on the web or in print. 8. Export for Print and Web: If you want to use this image on the internet, It's probably a good idea to export it from Photoshop into a format that's optimized for the Internet. That means that it's compressed in such a way that the file size remains small while the resolution remains as good as possible. Photoshop thankfully, offers you some great options for doing this. So go to "File", "Export". If you're in Adobe Photoshop CC, you'll see exactly what I see. If you're in any previous version, you're going to see an option here that says, "Saved for web and devices." Click on that. But if you're using CC as I am now, you'll see, Save for Web Legacy, which means that this is the same as save for Web and devices on all previous Photoshops. But they've replaced it now with export as. Let's talk about export as together, because I think most of you probably have Photoshop CC, slightly daunting window. Most of these options are not ones that you need. But first, take a look over here at this file size. You see how it's as 4.3 megabytes. This is a huge file. If I save it at the full size as a JPEG, 100 percent quality, it's even 3,600 pixels wide and to give you a sense of what that means, the average laptop screen is anywhere from 2,000-3,000 pixels wide. To reduce the file size for the Internet, I would love to get this below 500K. To do that, I'm going to start by adjusting the image size. I feel like I'm not going to need this any wider than 1500 pixels, already that reduce the file size to 857K. I do not need 100 percent quality for the Web. It doesn't make any difference because the majority of screens will render 80 percent quality, just as well as their going to render 100 percent quality. Let's start by putting this down to about 80 and see where that takes us in the file size. There you go. It is below 500K already. The reason it says export all is because this window, which is pretty cool, allows you to export this file in multiple versions at once. We're not doing that right now. So it doesn't matter, just click export all, even though there's only one image we're exporting, I'm saving this as Chalked Lettering web size and clicking "OK", now let's say I need to export this at a print resolution, like I need to send it to a client for printing or I'm going to put it into In Design and Illustrator and make it into the front of a postcard. It's much easier. I'm going to "File", "Save As" I'm going to change the file type from Photoshop to either JPEG or TIFF. If this is a really big file and it needs to print just absolutely beautifully and you're sending this to a professional printer. I say go with a TIFF, you can't really go wrong. But for the majority of your purposes a JPEG actually is going to work just as well. So I'll click "JPEG" here, save this as Chalk Lettering print res for resolution and hit "Save" because I'm exporting this for print, I don't care that it's a large 4.3 megabytes. So I'm leaving it at maximum quality and clicking "OK". When you save a Photoshop file as a JPEG, it doesn't replace the image that you're looking at. It exports a new version. If I navigate on my computer over to the folder where I've saved those. Here in Adobe Bridge, I see my Photoshop file that I solve open. My website's JPEG, that's 472K and my print resolution, JPEG, which is 4.35 megabytes.