Clker.com – weblog

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

To

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.

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.

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:

(more…)

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.

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:

That’s one important feature that was missing from clker ! Now, once you login and browse to a clipart that you uploaded you can:

1. Delete the clipart in case you uploaded it by mistake
2. Change the titles
3. Remove wrong tags
4. Add description

Good practices with title: One of the most important meta data is the title. It helps others to find your clipart through search engines like google as it gives them a clue about what that image is about. Setting your title in English helps google to translate the page when searches are done on localized googles ( and yahoos ). So, if a user goes to google.com.it and searches for eagle silhouette in Italian, google will translate that into english and match it against its inventory of images and pages and may match your upload. It already knows that the given phrase is in Italian because of the google domain being searched.

However, if you set your clipart’s title in Italian, it will take google months to figure out that this phrase is Italian as the rest of the page is English and the website is hosted in the US!. This means that if any one searches for eagle silhouette in english, they will not be able to locate the clipart.

Recommendation: Keep titles in english

Good practices with tags: There three main sources of tags:

1. You when you upload the SVG. We use the meta data inside the SVG to generate the initial set of tags.
2. You and others that visit clker and tag the images
3. clker itself …. yes, under certain conditions, clker can figure out by itself a new tag for a clipart by analyzing what people search for, and what they finally click on.

Any of those might contain mistakes. Removing those erroneous tags helps clker categorize the clipart as well as correctly rank it in searches.

You should add tags in your language, beside tagging the clipart in English. Currently, UTF-8 characters with accents are not supported, but will be soon.

Recommendation: Add tags both in english and in other languages.

Adding descriptions: That’s one important piece of information about your clipart. My recommendation is to post it both in english and in the other language you like.

You can add UTF-8 characters in the description now. ( see here for an example http://www.clker.com/clipart-29760.html )

Recommendation: Add descriptions both in english and in other languages.

For the previous months, I’ve been putting my spare time towards a new feature that I believe will greatly help adding free vector images. The feature is an online tool, that helps tracing raster images. It works by uploading your raster image, then tracing it online to produce the vector in a semi-automated way.

There are many useful tools available now, however none of them is able to produce what I percieve as a clipart. The tools that I regularly use are potrace (from inside inkscape) and sometimes vectormagic. The problem with both is that if you try vectorizing a colored image they will produce a fuzzy blurry svg, which does not look anywhere close to a clip art.

I had excellent results with potrace on lineart images, and I had no luck with colored ones.

This online tool solves a big part of the colored images problem. Some of the test results are here (showing both the raster and the vectorized result):

Good results:

Rib cage:

Double cherry:

Those images resemble what I call clip arts more than the output of vector magic or adobe illustrator. The tool produces an outline, which I colored using inkscape – so there is no expectation about coloring now .

My server has been suffering from unexplainable apache hangs. Once in a while, apache would stop accepting new connections. It will keep running in memory but all incoming connections will timeout. Since then, my only solution was a bash script that runs every minute and tries to read a text file from the website. If it fails, it would restart apache.

On Fri evening, I replaced APC with Memcache. Although I know that Memcache is little bit slower than APC due to lots of reasons including network overhead, yet it was APC’s turn to get tested in the sequence of tests I’ve been running. It seems that APC was the reason apache was hanging. I know that some big websites like facebook use APC, but maybe they are using a different version. I also know that youtube is using memcahe, so APC was one of my least suspects. The server has been running for the past 48 hours without a crash or a hang, which is more than its average. Usually, it used to hang once every 20 hours or so.

Since I had my own caching functions, that finally called APC, the amount of code changes were very small. Hopefully it will continue running without problems.

I’ve been seriously considering writing my own webserver instead of running apache. Although apache is very good, yet, sometimes I feel things will be much funner if write this website even in C. My reasoning is although PHP is fast and APC provides a further boost, yet at one point I will have to cluster a set of machines and proxy the requests because of various tweeks that need to get done in every piece of software.

So, I started considering seriously how to write a webserver that is optimized for high requests and can make better use of memory, and how to resolve the biggest problem in C, which is crashes due to memory allocation and writing outside arrays without slowing down the C speed even a bit.

I ended up writing a small library does that memory stuff, and a small webserver and I’ve been playing with them for a while and without a surprise, I found that I can serve more than 1000 pages a second very easy without attempting to optimize dealing with strings and just with basic STL string, which in my opinion is very slow.

What I still need to do is to support the CGI stuff, so I can execute the current PHP code and run it beside the C and that will give me more time to port the website pages in phases without stopping the website, or delaying running this server.

Bug updates stopping the plugin to run on some FreeBSD installtions. Thanks to David Newman with networktest.com for his positive & helpful feedback.

You can download the latest plugin from here.