Website "Scruffies"

Website "scruffies" are images of handwritten text, inserted into a web page to give a casual effect - and to give great impact.

In the past year or so they have become very popular, to the extent that pre-made "scruffies" have become part of website graphics collections.

But to give real impact to your sales pages, it is much better if you make your own "scruffies". That way, you can tailor the wording of the "scruffies" to the content of the web page.

In this "trick", I'm going to show you how to make your own "scruffies". But first, here's an example of how I used "scruffies" on the sales page for my ExitBlocker software. You can view the sales page inside the following frame. Just scroll down and look out for the handwritten text.

You may need to scroll sideways to the right-hand side of the page to see the scruffies. There's no room in this page to show the full width of the web page.

And beware.. if you move your cursor up through the page, the ExitBlocker popup leaps into action - even though the page is inside a frame!

OK, the frame starts here:

Scroll sideways --->

End of frame

The "scruffies" are used to draw attention to particularly important sales points.

So, how do you use and make website "scruffies"?

What Tools Do You Need?

This is what I recommend:

A scanner (essential)

A graphics program (essential). I use Paintshop Pro. You might get away with
       Windows Paint, but you'd be struggling. The Gimp is another possibility.

A black rollerball pen or fine felt-tip pen

Some imagination (essential!)

The Starting Point

Before you even think of using "scruffies", complete your sales page. That way, you'll know which points need emphasising, and what wording to use.

Don't just use them for the sake of it - and don't overdo it. "Little is good"!

And, apart from words, use lines, arrows - or even asterisks. The asterisk which I hand-drew one day has been used on many of my site instead of bullet points - as I've done above!

Once you've decided what "scruffies" you need, it's time to start writing them out..

Writing Your Scruffies

First, if you don't have very legible handwriting, get someone else to write them for you!

If you're happy with your writing, get a nice clean piece of white paper and your pen (real high-tech stuff this!).

Put all your "scruffies" on one sheet of paper - and use several alternatives if you're not happy about one wording or another. Here's the sheet I used for my ExitBlocker "scruffies" (reduced in size):

You may need several attempts on new pieces of paper before you get what you want. And leave space between each block of text. You're going to be cropping each one.

Now put the paper in your scanner, and set it to scan in black and white.. not colour.

(Note: if your graphics software doesn't have a colour replacement tool, you may want to use a blue pen and scan in colour. But B&W scanning produces the best results).

Editing Your "Scruffies"

Once you have captured the images with your scanner, it's time to fire up your graphics software.

The first thing you need to do, assuming you wrote and scanned in black and white, is to change the colour of the writing.

Paintshop Pro (and I think, Adobe Photoshop) has a colour replacement tool. Just set the foreground colour to black and the background colour to a shade of blue, and use the colour replacement tool.

Here's the result I got from the B&W scan after I'd done that:

If you've produced several versions of the same text (as I've done above), look again at your sales page and decide which one goes best on the page.

Cropping And Resizing Your Scruffies

This should be easy! Using your graphics software either crop around each "scruffie" and save the image with a new file name (you can retrieve the original whole sheet image to repeat the process) or select the area with your graphics selection tool, and use the "copy" and then "save as a new image" function.

Once you've done this, you might want to slightly resize each image to the size suitable for your page. Here's the result of one of the "scruffies" I used on my ExitBlocker sales page:

And that's about it!

I hope you've found this useful.

Regards

Ian Traynor
Professional Webmaster

P.P.S. If you want to thank me for this tip, here's a PayPal donations button. Click on it to pay me anything you like, using either your PayPal account or your credit card: