We Lived Happily Ever After: Transfer your Writing, Drawings & Doodles into Chalkboard Graphics & Printables Using Photoshop!

Wednesday, October 16, 2013

Transfer your Writing, Drawings & Doodles into Chalkboard Graphics & Printables Using Photoshop!


I've had so many of you ask me to do tutorials on how to work with chalkboard backgrounds in Photoshop, and I've been working really hard developing some awesome new hand drawn digital graphics that I'm going to be sharing with you all soon. Ever try "drawing" or "painting" in paint? The result usually makes me look like I have the skills of a two year old.... Drawing by hand is SO much easier! Today, I wanted to show you how you can convert your drawings into digital graphics. It's really easy,  promise!



First, I usually sketch out my ideas in pencil, go over them with a pen and then erase the pencil.

Then I scan (or photograph) my creation and upload it onto my computer.

Now for the Photoshop side:





To find the Brightness/Contrast tool go to Image -> Adjust -> Brightness/Contrast. You basically want the white to be really white, and your drawing to be really dark & black.



To find the Saturation tool go to Image -> Adjust -> Saturation.



If all your drawing lines don't intersect or touch, you may need to hold down the SHIFT button while selecting all the different parts of your drawing. If you make a mistake while selecting (like accidentally selecting the white instead of the black) you can always press CTRL Z to "undo" your previous action (can't tell you how much I use that one!)

One HUGE tip: if your "Magic Wand Selection Tool" isn't picking the whole drawing (as in all connected lines), then make your tolerance higher (like to 100.) Or if it is selecting too much of your photo (for example if it selects both white and black) the lower the tolerance below 10. You can find the tolerance option in the upper left in the above photo. Mine was set to 3.



Make sure to hide the background layer by pressing the eye next to it. This will allow you to save your image with a transparent background.



Now we are changing our sketch to white.



This step is to ensure that we get rid of any non white tones that we may have selected.


Now save your image as a PNG image. This will ensure that it has a transparent background.



Now you can open up your background (like my Free Chalkboard Download, found HERE) and paste your sketch on top of it. You can use this process to transfer a complete drawing, or you can copy and paste  a combination of different doodles you have come up with (like I did in my "Little Bit of Everything" example at the bottom of this post)


I don't like fake looking chalkboard compositions made up with computerized lettering- because chalkboards are supposed to be a little imperfect and have a hand written aspect to them.

But if you use the right font (like these downloadable hand written fonts I have HERE) you can easily combine the hand drawn with your digitized graphics to make a lovely chalkboard printable.



This is a graphic I developed using a combination of chalkboard embellishments I've come up with.

I am in LOVE with it! "Little Bit of Everything" is one of my husband's favorite songs... so I'll probably print this one out an put it up on the wall.


Be on the look out for the free downloadable graphics I'm going to be sharing soon!

 

To see how to use your new graphics in Photoshop or Picmonkey, see my tutorial HERE

To see how to add color in-between the lines of graphics in photoshop, go HERE.

Need a chalkboard background for your masterpieces? Go HERE or HERE To see how to change the color of the graphics in Picmonkey, see this post HERE



74 comments :

  1. thank you for this - it's really good and I will keep checking in. Leza London (UK)

    ReplyDelete
  2. OMG Hanna I love this! Thank you I am going to give it a try next week after I move the office...So happy I found your website today...xoxo Nicky

    ReplyDelete
    Replies
    1. Thanks! That makes me so happy that to like it! <3

      Delete
  3. Awesome post! I ALWAYS forget my photoshop shortcuts, and I get so so frustrated - your tutorial makes it so easy! Thank you!

    ReplyDelete
    Replies
    1. So glad you like it- it really is super easy once you get the hang of it! :)

      Delete
  4. This is genius. A tip for selecting, especially in black and white: you can select the white portion with your magic wand, then go to Select and click Inverse. This won't always get everything, depending on how intricate the drawing is, but it might end up being easier and faster.

    ReplyDelete
    Replies
    1. Awesome tip! I'm going to try it out! <3

      Delete
  5. Thank you!!! I've been looking for someone to teach me how to do this!! I am so grateful. You are awesome! :)

    ReplyDelete
  6. This is a great idea!! (and super cute blog!)

    ReplyDelete
  7. Thank you for this Tutorial. All your Tuts are great :D But, if you love to draw, have you ever thought about buying a graphic tablet like this or a similar http://www.wacom.com/gb/en/creative/intuos-m? Drawing with it is fantastic :D

    ReplyDelete
    Replies
    1. I've see those! They look so awesome! Thanks for sharing!

      Delete
  8. Thanks so much for putting this awesome tutorial together and sharing it! I've been looking for a way to include my hand-drawn doodles in my digital creations and this fits the bill perfectly!

    Also, your site is lovely. :)

    Blessings,
    Anna K.

    ReplyDelete
  9. What photoshop program is this?

    I really love your blog!

    ReplyDelete
    Replies
    1. Thank you Audrey! It's Photoshop 6.0 - it's not the newest version obviously but the concepts and tools should be the same on all the programs. <3

      Delete
  10. This is so awesome and looks relatively easy! Thanks SO MUCH for sharing this :)

    ReplyDelete
  11. I found you a while back, but I'm just now getting a chance to read through some of your tutorials. They're really great-- thank you so much for sharing!

    From one Marine wife to another, all the best to you and your little family, too!

    ReplyDelete
    Replies
    1. Thank you for your sweet note Celeste! Many blessings to your family too! This life definitely isn't the easiest one- but it helps to have others who have and are going through the same things! <3

      Delete
  12. another faster tip is to go under "select" and choose "color range", usually it picks up more of the black in detailed images.

    ReplyDelete
  13. Thanks again for such lovely graphics. Can't wait to use them.

    ReplyDelete
  14. once upon a wonderful dayNovember 17, 2013 at 3:59 PM

    Awesome tutorial! I love that song, too!

    ReplyDelete
  15. These are so beautiful! I've just gotten into doodling stuff and using Adobe products. I found you through Pinterest and I know I'll be stopping back in! I'm loving your posts and I always have to follow a fellow MilSo. =)

    ReplyDelete
    Replies
    1. Thank you- that makes my day! Have fun creating! :)

      Delete
  16. Hi Hannah, this is a wonderful tutorial, you give us absolutely ALL the information we need to do this. I am a lettering artist/calligrapher and use Photoshop a lot. So this will be another string to my bow. Thank you for sharing your knowledge.

    ReplyDelete
  17. This is terrific! I can't wait to try it out!

    ReplyDelete
  18. Hello Hannah, your tutorial is exactly what I was looking for. I'm self-taught, may I ask you if it's better to use a pen, a felt pen or a pencil? (or maybe it depends on what I want to draw?) Thank you!

    ReplyDelete
    Replies
    1. So sorry I am responding so late- I didn't see your comment until today! It is best to use a pen that will give you crisp & clear edges. Also, the smoother the paper the better for the super fine details. Pencil doesn't work very well with this method, as you want something that will be solid and a consistent color.<3

      Have fun!

      Delete
  19. This is an amazing tutorial! I'm having one problem thought. I was able to make the background transparent, but the insides of my sketches are still white. How do I make the insides transparent too? For example in yours, where you would place words on the banner. If you could let me know that would be amazing!

    ReplyDelete
  20. To make the inside of something transparent, use the same technique of selecting the area with the magic wand and pressing ctrl x.

    If you are having issues with it selecting a part of the daring you didn't want it to (aka selecting something that wasn't black) then you may need to lower your tolerance to as low as 1.

    Hope that helps! If you are still having issues feel free to email me a screenshot! :)

    ReplyDelete
    Replies
    1. Thank you for getting back to me so quickly! I'm new at photoshop and this tutorial taught me a ton! Thanks so much :
      Corey @ TinySidekick.com

      Delete
  21. thanks for this post! lovely illustrations. <3

    http://letrad.blogspot.pt/ - Another Lovely Blog!

    ReplyDelete
  22. This is just the best! Thanks for sharing!

    ReplyDelete
  23. Thank you for sharing this, so nice to come across such a fabulous tutorial!

    ReplyDelete
  24. I've always wanted to know how to do something like this : ) so glad i found your tutorials!

    ReplyDelete
    Replies
    1. I'm so glad you enjoyed it! Have fun creating!

      Delete
  25. I was able to do an entire chalkboard work thanks to this. You're amazing.

    ReplyDelete
  26. OMG I am so in love with picmonkey...why have I never heard of this amazing free program...Your tutorials are da bomb!!!

    ReplyDelete
    Replies
    1. Thanks Lexy! And yes, picmonkey is awesome!

      Delete
  27. Your tutorial is fantastic ! Thank you very very much for sharing this with us :)

    ReplyDelete
  28. So glad it was helpful! Have a wonderful weekend! XO

    ReplyDelete
  29. amazing!!! Ive been wanting to know how to do this for years! Thank you so much. The screenshots are also extremely helpful

    ReplyDelete
  30. Thank you so much! All the stuff I should know as a designer but have forgotten along the way - your post was so clear I had a lot of those 'oh yeah, that's how you do it' moments :)

    ReplyDelete
  31. Thank you so much for this great tutorial! It was so easy! I can't wait to start converting all of my drawings into graphics in Photoshop. Also, thanks for the free chalkboard backgrounds. You rock!

    ReplyDelete
  32. Wow! It is I really need now! I'll start at the drop of a hat! Thanks a lot!!

    ReplyDelete
  33. Thanks a lot to you for all your wonderful ideas and free downloads !!! Greetings from Germany !!!

    ReplyDelete
  34. Been wondering how to do this for such a long time. Thanks a lot! Your tutorial really helped!

    ReplyDelete
  35. Thanks a lot for tutorial..i really love it..really helpful..
    gonna try it soon..

    greetings from Indonesia..
    :D

    ReplyDelete
  36. thanks hannah thats what i asked on facebook... thats great... but how to make the illustrations and scans beeing transparent? i have evrytime a white background.... thanks sooo much and watch on my blog..
    kreacaro.blogspot.de and follow it... please
    greats from germany

    ReplyDelete
    Replies
    1. What type of photoshop are you using? It should take out the white background if you follow the above steps. Hope that helps!

      Delete
  37. I just came across this post while looking for design tips for my new blog. It's amazing! I'm going to be doodling non stop now!

    ReplyDelete
  38. Great tutorial! I've found tutorials using illustrator, but honestly this is SO much easier since I'm not very familiar with Illustrator. Just curious, is there a type of pen you like us when you sketch?

    ReplyDelete
    Replies
    1. So glad it's helpful! I just use a fine point felt pen for the most part, but you can use any type of pen.

      Hope that helps! :)

      Delete
  39. Hi Hannah, First, I have to say, I absolutely love your blog! I've found so many of your tutorials helpful, so thank you for sharing them!! I wanted to see if you have any sort of post for bloggers wanting to learn photoshop (aka photoshop for dummies)lol. I've been blogging for almost 3 years and have done all of the blog customizations myself but I'm limited with what I can do since I'm not a photoshop user :-( Thanks again for everything you've shared, you're the best!!

    Jessica @ My Love of Style

    ReplyDelete
  40. A quicker way to remove the white background would be to open the layer style panel, and remove the white by sliding the white slider to the left. (Unlock the layer first). No magic wand, selections, nada. You could also save even more time by placing the doodle scan on the chalkboard and changing the blend mode. Because blend modes work on whites/blacks/grey values, there are sections dealing with each of those colors. Use the one that removes all white and voila. Done. (If you want to save your "transparent" doodle" at that point for another project, hide the background layer and then save as PNG.)

    ReplyDelete
  41. Hi Hannah :) Thanks a lot for this article, it's great. I've done some sketches that I would love to convert into clipart's. I have a problem when I work with feathers. I do all the steps you mention but when I remove the background, it is the insides of the feather that disappear :( Do you have any idea why?

    ReplyDelete
    Replies
    1. When you pick up a color with the magic wand tool, it will pick up ALL of that color. If you want it to ignore a selection (for instance, the insides of your feathers) then uncheck "contagious" right before step 4 (you can see it in the upper toolbar in step 4) and it will only select the areas with the same color CONNECTED to where you click. XO

      If there are various areas you want to select using this method just hold down the shift button while clicking.

      Hope that helps!

      Delete
  42. hi,
    I love your style!!!!
    Have someone sdvices about the printing by a normal home printer of a chalkboard desing? I get a "green" design!! -.-' maybe I set a bad print profile!!! ù_ù

    ReplyDelete