Weblog Home Web site's Home Clip art Search Clker.com – Available downloads RSS

Recent Posts:

arrow image github a valuable opensource too...
arrow image Easy chrome extension to convert...
arrow image Updated svg edit - much better p...
arrow image Professional graphics designers:...
arrow image Refresh when drawing
arrow image That's impressive
arrow image Another quick feature added
arrow image Image editor now works on Intern...
arrow image Manually tracing cliparts out of...
arrow image Draw edit the SVG images online
arrow image Where to find good old public do...
arrow image Developing clip arts using old p...
arrow image Expected downtime tonight
arrow image Automatic vectorization is up an...
arrow image Ubuntu lucid lynx is extremely s...
arrow image Integrating the tracer
arrow image Automatic vectorization, coming ...
arrow image Updated clker interface
arrow image using ubuntu as my main desktop ...
arrow image Full time on clker
arrow image Clker will be down tonight
arrow image Tracing local and lineart images
arrow image Bad HD - clker will be down on S...
arrow image Updates to profiles
arrow image Crayon video - Marathon runner
arrow image A detailed tutorial on Crayon
arrow image Crayon image resources & tutoria...
arrow image Example tracing president obama
arrow image More on Crayon
arrow image First version of the online trac...
arrow image Now you can edit your uploads
arrow image Clipart tracer: New feature comi...
arrow image Apache hanging once in a while -...
arrow image Injuries from working on compute...
arrow image Restarting the server once in a ...
arrow image Writing my own webserver
arrow image Flex - Zooming in on large bitma...
arrow image Linux average load
arrow image Caching SQL with PHP
arrow image Wordpress plugin version 1.2 rel...
arrow image Fixing vote up/vote down icons
arrow image Google native client
arrow image New wordpress, looks great
arrow image Bug reports and feature requests...
arrow image Further flex testing
arrow image Some flex ideas
arrow image actionscript mode for emacs
arrow image Linux spirits crawling in chrome
arrow image Wordpress clip art plugin
arrow image Adding Clker.com to opera search...

Sites I like:
Arabic movie database

Clker will be down tonight

December 5th, 2009

Clker will be down tonight for maintenance approximately from 12AM to 2AM eastern time.

Tracing local and lineart images

November 30th, 2009

Pretty busy long weekend, I had Thanksgiving, Eid and one of my daughters fractured her foot (she’s much better now). Overall, may be I got to spend a couple of hours during the four day weekend. I wanted to highlight two things about Crayon:

1. You can trace lineart images using Crayon. This is not new. To do that, after you open your image draw background around your object and crop the excess background. Choose the color picker. Click on a background spot. Click on commit selection. Click on the “+” to add a new object. Click on a part of your lineart drawing. Click on commit selection. Hide the image, the seed and the BG pattern. Click on segment and watch.

2. You can now trace local images. You don’t have to upload an image to trace it. To do that, from the home page click on “run it” beside Crayon (I will find a better spot soon). Click on the open button, select an image from your hard drive.

Bad HD – clker will be down on SAT for maintenance

November 20th, 2009

One hard drive is showing bad sectors. Luckily, I’m running RAID5, mdadm stopped the bad hard drive. The HD that went bad has the boot directory, so hopefully tomorrow won’t be a long day.

Updates to profiles

November 10th, 2009

I just added those two small updates:

  • Every one has a link to their uploads from their profile
  • Every clipart has the name of its uploader with a link to their profile.
  • You can add an about me. As long as it agrees with our policies (no profanity, hate, slanders, swears …etc) , you can add what you do including graphics work, selling graphics, vectorization, artist or otherwise…. let the people know and add your website in your profile.

Crayon video – Marathon runner

November 8th, 2009

It took approx. 7 minutes to trace generate the marathon runner image:

From the original

A detailed tutorial on Crayon

November 7th, 2009

This tutorial will trace the deck shooters to produce the deck shooter clip art, both of which are shown below:


Step #1: Opening the image

To start, navigate to the raster image page and click on convert all or part of this image to clipart .

The result of this step is shown below:


Step #2: Reducing the size

The size of this picture is very big. Since big pictures take longer times to process, reducing the size of this image will help by (a) reducing the processing time (b) reducing the noise in the image because flash will average the pixels during resampling. Due to those two reasons, images that get reduced in size always yield smoother curves after tracing. Reduce the size of the raster image by clicking on the rescale button TWO times .

The result of this process is the following:


Step #3: Marking the background

Click on the pencil tool and use it to mark the area around the shooters. Since we intend to extract the image of the shooters, all other areas are considered background for us. You will notice that the name of the current object appears in a dropdown list box at the right side of the screen and it should read Background.

When marking (also called seeding), mark around the edges of the object as close as possible but never over the edges. Leave the process of detecting where an object ends to Crayon.

The result of this step is below:


Step #4: Cropping excess background

At the right side of the screen, click on crop excess background. This button will crop the image to the smallest rectangle that can fit your marked background region. This step is important to reduce the amount of computation.

The result is below:


Step #5: Marking the first non-background object – the boots of the guy on the left

To mark an object in the picture we need to tell Crayon to add an object and initialize its structures in memory. We do so by clicking the add a new object button . After you click the +, you will find that a new object called unnamed is added and shows in the list box. Also a new random seeding color will be chosen for the object and the seeding color appears in a square below the list box.

Use the zoom button to zoom in. Use the pencil tool to mark the boots of the guy on the left as shown below. Mark close to the borders of the boots, but not over them. Repeat the same steps for the boots of guy on the right, using a new object.

You can optionally rename those objects from unnamed to right guy boots, and left guy boots.

Note: If you didn’t rename the object and later wanted to know where are the seeds of this object, click on the check mark beside Blink seed.


Step #6: Mark the lower part of the pants for the guy on the left

Click on the add new object button and mark the lower half of the pants for the guy on the left as shown below. Mark close to the edges of the pants, not over the edges.


Step #7: Mark the rest of the pants

Click on the add new object button and mark the lower half of the pants for the guy on the left as shown below. Mark close to the edges of the pants, not over the edges.


Step #8: Mark the rest of the objects one at a time

By this time, you should have got the idea how to mark inside every object. Repeat the previous steps for every object for both the right and left shooters. The process is very subjective, and every person will end up with a different set of objects depending on how we are interpreting the image.

The final set of objects as I see them are shown below with the brightness of the image dimmed.

NOTE: the brightness and contrast only change how the image is displayed, and do not alter the image itself. They are mainly used to help us humans see where the edges are to keep away from them. Crayon looks at the pixel values and can see the borders better than us, so use the brightness and contrast as you wish.


A zoomed in version is below to show how to scribble correctly inside the objects (close to the borders but not over them):


You will notice that I did the fingers of the glove separate. Someone else might just do the whole glove as one patch, and that’s what I mean by identifying the objects is subjective.

Step #9: Segment the image

Segment the image by clicking on the segment button . While Crayon works, you will see it filling the objects in a manner similar to flood fills. It will then trace the borders around every segment and will attempt to smooth it and fit Bezier spline curves instead of the pixels.

Step #10: Fixing segmentation errors

After segmenting the image you might have some errors in segmentation as the ones shown below:


Fix the errors by adjusting the seeds. This can be done either by placing new seeds using the pencil tool , or deleting some seeds using the eraser . You will need to select the correct object from the drop down list box. If you are not sure where is this object, click on the check mark titled Blink seed. The seeds will then flash. If you still cannot see the seeds, try adjusting the brightness and contrast, in case the seeding color is similar to your object’s color.

The result of fixing the seeding errors in this image is shown below:


You will need to resegment after fixing the seeds.

Step #11: Coloring your traced vector image

This is one of the fun steps that I like. From the list box on the right, choose the first object after the Background. Click on the check mark beside Use fill color. You will notice that the area of this object becomes black. If you click on the square below the check mark, a color selection window will appear as shown below. The easiest way to pick a color is by selecting the Hues from the right (click on the radio button beside the H), select the main color from the right strip and select the amount of color from the left square.


NOTE: This window is non-modal, which means it will not block the access to the rest of the controls. Keep this window open and click on the list box and choose the next object to color. Repeat the steps of clicking on the check mark beside use fill color . This time, since you already have the coloring window open, just drag the color selectors to the color you want. Make sure that once you’re done to click OK not CANCEL or the X at the top right this is very important.

The final result is shown below:


Step #13: Saving the image

Click on the save button . Give your image a 3 to 4 word title, and tag it with at least 5 good words. This will help others to find and use your image.

Summary: I hope that this post answers most of the questions about how to use Crayon to trace images.

Then where do we get the images to trace from? You can either upload your images, or search clker and use any of the raster images on the website. We have recently added a large collection of public domain photos from the US navy collection, and other US government collections which are all in public domain.

You are more than welcomed to leave all your questions in the comment section.

Crayon image resources & tutorial

November 4th, 2009

I’m currently working on a detailed tutorial that will help jump start any one with Crayon.

If you want to try or test, I uploaded some public domain images from the navy collection. You will find some of them appearing at the bottom of every clipart page, under the Related Stock Photo title.

You can trace any of them freely using Crayon.

Tonight or tomorrow night the tutorial will be out.

Example tracing president obama

October 30th, 2009

So I wanted to give an example showing how far can some one use Crayon to trace facial features. Let’s start by remembering that most cliparts grasp the main features of an image, without details. If you browse major clipart collections you will see colored images, that show the head as a ball rather than displaying the fine details.

Crayon is very good in tracing chunky objects. Once you deal with fine details, one will need to keep the resolution high, which will take longer time to process and will result in jagged edges rather than smooth.

So, I used one picture from the navy collections for president obama giving a speech and standing infront of a podium.

Here is the original:

Read the rest of this entry »

More on Crayon

October 29th, 2009

I spent some time yesterday giving the whole project a look and whether or not it achieves its goals. What I think is that although it finally traces the pictures into SVGs yet it is not easy to use. There’s tons of usability work that needs to get done over there, and more help and samples need to be there as well to direct the users on how to use it.

The simplest way is to record screencasts for myself working. So, I added a screencast, you can watch it here . There’s a link to the same screencast from the help/faq page.

First version of the online tracer

October 28th, 2009

Finally !! …. I uploaded the first version of the tracing tool – I called it Crayon. See its help here .

This version has a hiccup with Chrome, so try it with firefox or IE… should work fine. Try simple black and white pictures first. I had tons of fun with it.

Still there’s lots of fixes when it comes to the GUI & buttons … but I think it is in a usable shape, hopefully every one will have fun with it as well.

Some examples entirely traced using crayon:

Fatal error: Call to undefined function akismet_counter() in /home/webs/www.clker.com/blog/wp-content/themes/mibrahim/footer.php on line 27