fbpx

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

Melyssa Griffin

4 min

POSTED BY

TIME TO READ

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

02

01

This is my digital home, where I share reflections, teachings, and offerings on self-expression, inner healing, ancient wisdom, and alignment as a pathway to a more meaningful and abundant life.

I’m Melyssa Griffin

HEY THERE, SWEET ONE.

MORE ABOUT ME

POPULAR CATEGORIES

POPULAR LATELY

Business Tips

Grow, scale, and get the open book lessons I’ve learned along the way.

How Your Money Mindset is Sabotaging Your Business (And How to Fix It)

How to Let Go of the Status Quo to Live the Life You Were Meant For

03

Your Dream Life is on the Other Side of Your Scarcity Mindset

04

Why It’s So Damn Important to Heal Your Relationship With Money

TAKE THE QUIZ

Is your business aligned—really?

free quiz!

Inner Work

Because the best way to grow your business is from the inside out.

Just the real stuff from me to you.

Personal

Case Studies

Facts, numbers, behind the scenes, and income reports. I’m sharing it all!

Over 40,000 online entrepreneurs have gone through my programs. 

Success Stories

READ THEIR STORIES

Anjali 

online course STUDENT

TARAH-LYNN

PROFITABLE CREATOR STUDENT

MICHELLE

PINFINITE GROWTH STUDENT

ALORA

EMAIL LIST ACADEMY STUDENT

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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.

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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.

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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.

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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!

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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!

How to Create a Hand-Lettered Blog Header (Without a Scanner!)

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. 

  1. thealishanicole says:

    Great tutorial!! I cant wait to try it!

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

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

  4. Sweet! Shea and I have been looking for a tutorial like this! Many thanks! -Dani

  5. This brush pen is EXACTLY what I’ve been looking for for some of my other projects as well! This post is so useful!

  6. Carina says:

    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 😀

  7. Jessica says:

    Great post, very helpful for the people who didn’t know how to do it properly x

    http://www.wild-cherrytree.com

  8. Mandy says:

    Thanks so much for the tutorial, can’t wait to try it x

  9. Cool! It actually looks doable 🙂

  10. Ashley of Ashley Abroad says:

    Love this! Thanks for the tips 🙂

  11. Krista says:

    I would love to see how to edit artwork for printing at specific sizes

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

  13. Jessica Rose says:

    I badly need to get photoshop….obv before I can begin this!!

    http://vodkaandarose.blogspot.co.uk

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

  15. Thank you so much for this tutorial! You make it look so easy 🙂

  16. Stacia says:

    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!!

  17. Runwright says:

    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?

  18. Carina says:

    Love your photoshop tutorials 🙂 You make it so easy to follow!

    X, Carina
    Running White Horses

  19. Cher says:

    omg I’m so going to do this when I make a layout for my website! you’re the best!

  20. This is so great! Do you happen to know if any of these tutorials can translate into Lightroom?

  21. 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 ▲

  22. Gina Alyse says:

    It was so awesome seeing the different kinds of brushes and brush pens you use! I definitely want to try them out! 🙂

  23. 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!

  24. Danielle says:

    Thanks for the tutorial! So easy, but something I (obviously) never thought of. Can’t wait to give it a try!

  25. What a great idea! I love the freehand look. Great tutorial.

  26. Oh that is brilliant! Thanks for sharing 🙂 I love handwritten fonts.

  27. Simone says:

    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! 🙂

  28. Kory says:

    This is exactly how I do it, except for the color overlay! I usually just copy and paste and fill with a color 🙂

  29. Love handwritten font…these tips will be useful when I eventually get photoshop 🙂

  30. anniewiltse says:

    I’ve been wondering how to do this! Thanks for sharing, Melyssa :]

  31. Cori says:

    Loved this tutorial ♥!
    I saved it for future reference 😀
    Thank you so much Mel~

  32. 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!

  33. I love this! Thanks for sharing the tutorial!

  34. jenn shurkus says:

    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!!!!

  35. Johanna says:

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

  36. Brenda Kelly says:

    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

  37. Lisette says:

    Awesome post! I learned I’ve done this the SUPER long and difficult way before. Thanks!

  38. Brookyn ♥ says:

    Cool blog! I want to become a Graphic Designer Myself!

  39. I love this tutorial.. thank you for making it look so easy!

  40. misschievous says:

    Awesome! Thanks for this post, I talked myself into buying art stuff. 😀

  41. kristen says:

    I love that brush pen!!! I love brush pens. 🙂

  42. Radhika says:

    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.

  43. Rachel says:

    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!!

  44. Pea Fritters says:

    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?

  45. Sohan Dewan says:

    It’s look like professional work. I guess s/he is expert and professional in photo retouching. Anyway thanks for sharing it’s inspiring.

  46. Christine Kantaparn says:

    On a roll. Pinning this post too!

  47. Love this! Super fun and easy!

  48. 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!

  49. Lily Liseno says:

    MY MIND IS BLOWN. I had noooo idea this was possible! Thanks for sharing!! You’re awesome as always 🙂

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

  51. sophia jack says:

    amazing job. really loving the article.

    cheap digitizing service

Keep Reading

For Soulful, Creative Entrepreneurs

For more than a decade I've supported over 40,000 people in my top-rated online courses. Here, I help you create a business that evolves alongside you.

LEARN WITH MELYSSA

Tarah-Lynn

ONLINE COURSE STUDENT

Online PROGRAMs

Anjali

ONLINE COURSE STUDENT

EMILY

ONLINE COURSE STUDENT

Future Current
Podcast

with 

MELYSSA GRIFFIN

Interviews, stories, and advice that explores what it means to create from alignment, trust your inner knowing, and build a life that feels true.

LISTEN NOW

FUTURE CURRENT HAS 750+ 5-STAR REVIEWS! 

LISTEN ON SPOTIFY

LISTEN ON APPLE PODCASTS

THE PODCAST

“Loved how raw and heart-centered it was, every few seconds I would nod my head because it resonated so much. Highly recommend if you’re looking for more purpose, passion and well-being in your life!”

- YunzheZhou

“I love the perspective Melyssa brings to the table. She's so thoughtful and a true champion of others. A real place where we ALL belong at the table.”

- Rolly

“A daily reminder towards greatness... Listening to these podcast episodes are the highlight of my day. It’s my rock and anchor in a chaotic storm of trying to better my life. So so thankful for it!”

- Rosenthorn

If your work looks good on the outside but feels off on the inside, this quiz will help you name why.
Answer a few questions to uncover your alignment score. No matter where you land, you'll receive customized suggestions to help you create a thriving and aligned business.

TAKE THE QUIZ

How aligned is your business—really?

free quiz!