Tag Archives: png file

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 , , , , , , , , , , ,
%d bloggers like this: