
You all were SUPER into the last Photoshop tutorial, so I’m excited to share a new one that was requested several times: how to digitize your hand lettering. Calligraphy is HUGE these days and adding handwritten elements to a blog design gives it a personal and unique touch. A lot of people think you need a scanner and crazy design skillz to master this technique, but there’s actually a really easy way to take your hand-lettering to a digital format. This tutorial is excellent for creating blog headers (kind of like my own logo!), signatures, or any graphics that you’ll use on your blog. The best part? All you need is your phone and Photoshop. Let’s get started!
First of all, I wanted to show you the difference between a few types of brushes and pens I like to use: round brushes (like these), brush pens (like these), and Micron pens (like these). They’re labeled in my doodles below, so you can see the effect they each create! Oh, and if you’re wondering what the heck that word I scribbled is, it’s my dog’s name, Monja (moan-juh). 🙂
To start, I recommend writing out your word or phrase several times, until you create a version you love. Then, you can use your phone or any camera to snap a close-up photo of your lettering. I use my iPhone for this and then email the photo to myself, so it’s easy to open on my computer right away.


Open your image in Photoshop. I’m using Photoshop CC, but any version should work. I cropped my photo so that most of the excess is cut out of my image. On the right hand side, you’ll see your layers. Click the little lock on the layer that says “Background” so that the lock disappears.

Go to Image (at the top) >> Adjustments >> Brightness/Contrast. Adjust the brightness and contrast so that the background becomes a bright white and the text is darkened. Increasing these too much will wash out your text, which you don’t want. You’re going for something like what I created above. You’ll notice the white-ish background of my image has a texture to it. This is the texture of the paper I used. Don’t worry — we’ll be deleting this background in the next step, so it will disappear.

Now, we’re going to delete the background of the paper! First, I recommend creating a new layer underneath your lettering (click the button to the left of the trash can in the bottom right corner) and then using the Paint Bucket Tool to make it white, though any color would work if you have something else in mind. The only reason I do this is to make it easier for me to see which part of the background I’ve deleted and what still needs to be deleted.
Once you’ve done that, make sure your hand-lettered layer is selected in your layers section. Then, use the Magic Wand Tool (on the left) and select the white paper background of your image. There should be a dotted blinking line surrounding your text. Press the “delete” button to get rid of it. Do this for any other white areas. For example, I highlighted the inner part of the O, J, and A in my example above, and then deleted it.
If your image is like mine, and has some excess junk around the edges (like that area in the top left corner), then you can use the Eraser Tool to erase it. Now, you can clean up your lettering if you’d like. I like my lettering to look a little rough and imperfect, but sometimes I’ll use the eraser tool to soften some imperfections. Totally up to you!

Now, the fun part! There are two easy options to shake up your lettering. The first is to bathe it in color. Double click on your lettering layer in the Layers panel. A box will pop up. Click “Color Overlay” on the left. Click the colored box and then select any color you desire (I chose green!). Press “OK.” Now your lettering is colorful! Alternatively, If you want to stick with black, but would prefer to darken it a bit, you can use black as your color and then decrease the “Opacity” in the “Color Overlay” section. In the image above, my opacity is at 40%. I like this, because you can still see the color variation from the brush I used, but the colors are more saturated.
Another idea? Use my Clipping Mask Tutorial to give your lettering a pattern or something funky!

Now, you can save your image (for web) and use it as a blog header, a graphic in a blog post, or anything you want, really! You can even overlay your word onto a photo (as seen above) by dragging your lettering layer onto a photo.
You can see a couple examples of how I used this tutorial here and here.
That’s a wrap, friends! If you have any questions, I’d love to answer them in the comments section. If there are any other design tutorials you’d like me to cover, please leave a comment! I did this tutorial because you all requested it, so I definitely take your suggestions into consideration. 🙂 And if you use this to create something, I’d be honored to see it. Have a lovely day, everyone!
Some supplies I recommend: this brush pen, a round brush in this size, this ink, these pens for thin lines, and a tablet for cleaning up the edges of your lettering.














Great tutorial!! I cant wait to try it!
Thanks Alisha!! 🙂
Great tutorial! Have you tried the “select color range” tool in Ps? I find it super quick and easy for making selections on high contrast stuff like calligraphy and hand lettering.
Love your blog! — G.
Ohh I’ll have to check that out! Thanks Gillian! 🙂
This is awesome 🙂 Thanks so much for this tutorial. I’ve always stayed away from hand-lettering anything because I hate working in Illustrator and all the other hand-lettering designers I know swear by it. This technique has great results though.
Ahh totally know how you feel! I know a lot of people are uncomfortable in Illustrator, which is why I wanted to share a Photoshop alternative. Glad you liked it, Abria! 🙂
Sweet! Shea and I have been looking for a tutorial like this! Many thanks! -Dani
Glad to help, Dani! 🙂
This brush pen is EXACTLY what I’ve been looking for for some of my other projects as well! This post is so useful!
WOO! It’s my favorite. 🙂
Love this! I do the same thing, but it’s nice that you explained it so well for people who might want to do this for themselves. 🙂 If I’m feeling lazy and want to overlay white text over an image, I just invert the b&w image and set my letter layer to screen 😀
Great post, very helpful for the people who didn’t know how to do it properly x
http://www.wild-cherrytree.com
Thanks Jessica! 🙂
This is so cool!!!
Thank you! 🙂
Thanks so much for the tutorial, can’t wait to try it x
Anytime, Mandy! 🙂
Cool! It actually looks doable 🙂
It totally is. 🙂
Love this! Thanks for the tips 🙂
Anytime, Ashley! 🙂
I would love to see how to edit artwork for printing at specific sizes
Thanks for the suggestion, Krista! Could you tell me a little bit more about what you mean by that? Like, which settings to use?
I’m not sure really haha! Photoshop completely eludes me! But what i’m trying to figure out is how to make something a certain size without it losing quality. I wanted to put artwork on Society 6 but they have to be specific sizes
Great tutorial! I generally try to stay away from the magic wand tool, but I think that’s only because I’m so lazy when it comes to cleaning up the edges. But you’ve made it very clear that using this method can have beautiful results. I’d love to talk pens one day. I actually just filled up my wishlist on JetPens.com for the holidays… (addict).
Thank you Jennifer! And I LOVE Jet Pens! That reminds me that I should order more from them soon. 😀
I badly need to get photoshop….obv before I can begin this!!
http://vodkaandarose.blogspot.co.uk
You should! Adobe now offers a monthly subscription for Photoshop, so you can pay $10/month to use it. Way cheaper than paying hundreds up front. 🙂
Thank you for the tip off! 😉
This looks so cool! I want to give my blog a make-over and this would be the perfect thing. I wish there was an easy way to do this on a free service such as PicMonkey!
Jenny
From the Desk of J
You should totally try it, Jenny! Adobe actually has a free 30-day trial, so you could use Photoshop for a month and create all your graphics during that time. 😉 After that, I believe their Photoshop subscription is only $10/month, so you don’t have to buy it outright anymore. Kind of nice. 🙂
I had no idea about the subscription! Thanks so much for letting me know 🙂
Thank you so much for this tutorial! You make it look so easy 🙂
I’m pretty sure YOU were the one who inspired me to do this tutorial — thank you for that awesome suggestion, Amber! Glad you liked it. 🙂
AHHHH! I’m so excited about this one! I’ve been working on figuring this out, but my method involves a scanner and is much more complicated. I can’t wait to give this one a try!!
WOOO! I have a scanner, but hate having to use it haha. This method is definitely less complicated than that clunky ol’ thing. 🙂 Glad it’s helpful for you, Stacia!! 🙂
Less complicated is almost always a win. I hope you keep doing these!
I will! 🙂 Anything you’d like to learn about?
I’ve been curious about collages with handwritten elements. (Like if I chose a bunch of different items from a shop and then hand wrote cute arrows and phrases about the different pieces.) Is that a mix of your clipping mask tutorial and this tutorial, or is there a better/easier way? 🙂
Great Photoshop tutorial.
Do you answer other pic-related questions? My concern is on why my blog pictures don’t show up on my Bloglovin feed. They used to, but now they don’t. Can you tell me why?
How strange! I’m not too sure why that would be happening, but Bloglovin’s support is usually pretty good. I’d try sending them an email to see if they can fix it for you. 🙂
Thanks. I tried that but their suggestions didn’t work. And then I realized today that your pictures are not on your feed either. Yikes!
Love your photoshop tutorials 🙂 You make it so easy to follow!
X, Carina
Running White Horses
That makes me really happy to hear, Carina! Thank you! 🙂
omg I’m so going to do this when I make a layout for my website! you’re the best!
YAY! I bet it will be beautiful. 🙂 Would love to see it when you’re finished! 🙂
This is so great! Do you happen to know if any of these tutorials can translate into Lightroom?
Thank you Alison! Gah, I’m so sorry but have never actually used Lightroom, so I’m not too sure!
Love love love love love this. Bookmarking so I can utilize this later. I’ve been searching for a tutorial like this. Thanks. :] // ▲ itsCarmen.com ▲
WOO! So happy to help, Carmen. 🙂
It was so awesome seeing the different kinds of brushes and brush pens you use! I definitely want to try them out! 🙂
Ahh you should! They are so much fun. 🙂
Ahh, this is so perfect. I bought a fountain pen (super randomly) and have been trying to teach myself calligraphy/hand-lettering/doodling and was definitely wandering how to make them digital and play with them in photoshop. So thanks for this!
Yay! So glad to help, Zoe! 🙂 Would love to see your creations, too. 🙂
Thanks for the tutorial! So easy, but something I (obviously) never thought of. Can’t wait to give it a try!
Woohoo! I think you’ll have a lot of fun with it! 🙂
What a great idea! I love the freehand look. Great tutorial.
Thank you Michelle! Glad you dig it. 🙂
Oh that is brilliant! Thanks for sharing 🙂 I love handwritten fonts.
Thank you so much! Glad you like it. 🙂
I love these!! Your handwriting/calligraphy is beautiful. I’ve done Chinese calligraphy, but nothing in English. I might have to ask for a brush pen for xmas 🙂 (On the amazon link it has options for hard or soft. Which do you use/recommend?)
Thank you so much, Simone! I actually started by doing Japanese calligraphy, so we’re one and the same. 🙂 Brush pens are super fun — I think I like them over any other calligraphy tools! As for hard/soft, I have both and honestly recommend getting both so you can see the difference. The soft version has a longer tip, more like a paint brush. It gives more “brushy” effects, but you have less control over it. The hard version still gives you a nice, thick brush effect, but the tip is much smaller and you have a lot more control. Both are beautiful though! 🙂
This is exactly how I do it, except for the color overlay! I usually just copy and paste and fill with a color 🙂
Glad to know we’re on the same wavelength! 🙂
Love handwritten font…these tips will be useful when I eventually get photoshop 🙂
Totally! You’ll love Photoshop! 🙂
I’ve been wondering how to do this! Thanks for sharing, Melyssa :]
You bet, Annie! 🙂
Loved this tutorial ♥!
I saved it for future reference 😀
Thank you so much Mel~
Anytime, Cori! 🙂
This is fantastic! Thanks so much for sharing this. I don’t know why I didn’t think of this—because it’s such a simple solution. Yay!
Thank you! Glad you like it 🙂
I love this! Thanks for sharing the tutorial!
Woo!! Anytime, Crystal! 🙂
ok, so you are pretty much reading my mind 🙂 working on a new logo for a redesign of my site and wanted to add my handwriting!! this is SOOOO much easier then using the very intimidating wacom tablet i have- thank you!!!!
WOO! So glad to help, Jenn 🙂
Okay, so first of all, apologies for the delay in blog reading (and consequent comment spamming about to happen) – life has been weird and busy.
Second, question: do you know how, in a Blogger blog, you can make your header span the whole width of the blog? I can’t seem to figure it out, but I really want a bigger header (that will now probably also have some calligraphy in it *wink*)
No apologies needed! Glad to have you back 🙂 As for your question, unfortunately I don’t! I mainly work with WordPress, so I’m not the best at Blogger questions. Sorry about that Johanna!
This just saved me so much time! I was using the magnetic lasso to do all the masking. Yikes!!! Love your blog
Brenda
http://www.alaplagestyle.com
Glad to help, Brenda! 🙂
Awesome post! I learned I’ve done this the SUPER long and difficult way before. Thanks!
Super glad to help, Lisette! 🙂
Cool blog! I want to become a Graphic Designer Myself!
Thank you! And did you make that graphic? I love it!
I love this tutorial.. thank you for making it look so easy!
You’re so welcome, Courtney! Glad to help 🙂
Awesome! Thanks for this post, I talked myself into buying art stuff. 😀
YAY! I love talking myself into buying art stuff. 😉
I love that brush pen!!! I love brush pens. 🙂
hehe I love them too! 🙂
Love this! Thanks so much for the tutorial. I bought the Fude pens and have been enjoying them so much. One question I had: what paper did you use? The ink seeped into the paper I had, so that the letters looked like they had little furs sticking out.
Glad you’ve been enjoying them, Radhika! 🙂 So, I’ve tried a BUNCH of different types of papers, hoping to find the best one, and I really think this one is the best: http://shop.hobbylobby.com/products/master-s-touch-9-x-12-drawing-pad-213918/
The paper is smooth and thick. It’s also pretty reasonably priced compared to some other ones I’ve used. It’s my fav! 🙂
Oh my god, I feel like a photoshop superwoman after this!! Just made my own logo and I am a total blog newbie. Muchas gracias Mel!!
Fantastic, Rachel! That’s what I love to hear! 🙂
Oh don’t go giving me a reason to buy awesome pens!!! Great post. Going to have a play. Looking to funk up my blog and eventually transfer to WordPress.org for a bit more freedom. Any hot tips?
It’s look like professional work. I guess s/he is expert and professional in photo retouching. Anyway thanks for sharing it’s inspiring.
On a roll. Pinning this post too!
You’re awesome, Christine! Thanks so much for pinning. 🙂
Love this! Super fun and easy!
Thank you so much, Monse! Glad you like it. 🙂
I just want to let you know that your blog is insanely helpful and encouraging! Keep up the great work. I love the content you put out!
Oh Elizabeth, that means so much to me. Thank you for saying that. I really appreciate this awesome comment. 🙂
I’m glad! As a blogger I totally know how it feels to be reassured that you are on the right track! I am just thankful for your blog and want you to know you are doing great work! YAY!
MY MIND IS BLOWN. I had noooo idea this was possible! Thanks for sharing!! You’re awesome as always 🙂
I’m so glad to hear that Lily!
Okay, friend! I have been doodling with hand lettering just for fun and a shop in town asked me to hand draw their menu, which I agreed to, but now I’m in major research mode on how to digitalize it. So, thanks for sharing this! It’s super to use and I’ve never in my life used photo shop before. =)
Yay! I’m so glad this was helpful for you! 🙂
amazing job. really loving the article.
cheap digitizing service