How to add hand-drawn elements to your site using Pixlr.com

Sometimes it’s nice to add a personal touch, for example your own handwriting, to your website or other digital media, such as photos. There’s a great instruction post on Skillcrush that guides you how to do this on Photoshop, but even if you don’t have Photoshop, it’s easy with the free web-based Pixlr.com:

1. Draw or write a message on a blank piece of paper

2. Take a photo and download it/email it to yourself

3. Go to Pixlr.com, open Pixlr Editor Advanced, go to File, and open the image. You can resize it under ‘Image’ and ‘Image size…’

4. Go to ‘Layer’ and select ‘New layer’


5. In the ‘Layers’ toolbox on the right, unlock the original layer (double-click on the lock symbol) and then select that layer by holding your mouse over it, clicking and dragging it up so that moves up in the layers toolbox. It’s now placed above the new layer

6. Use the Wand tool (third from the top in ‘Tools’) to select the white area


7. Delete the white area by hitting ‘Delete’ on your keyboard (or go to ‘Edit’ and select ‘Cut’)
8. The white area will now be checkered grey and white, which means it’s transparent. Keep doing this until all the white areas have been removed. You might need to use the ‘Eraser’ tool to get rid of any extra bits

9. Save as a .png file and voila!

You now have a hand-drawn element that you can incorporate into your website design! Check out the Skillcrush post to see examples of how they’ve done this. You can still see some dots where the white hasn’t been completely removed, so I would spend more time on fixing that up. But here’s my (almost) final .png image that I can now use:

Hello there

A cool idea is to incorporate hand-written components onto images, or use elements in your website background.

Tagged , , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: