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

Archive for the ‘news’ Category

Clker will be down tonight

Saturday, December 5th, 2009

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

Tracing local and lineart images

Monday, 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

Friday, 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

Tuesday, 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

Sunday, November 8th, 2009

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

From the original

A detailed tutorial on Crayon

Saturday, November 7th, 2009

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:

step01-open

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:

step02-shrink-twice

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:

step03-mark-background

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:

step04-crop-excess-background

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.

step05-mark-the-boots

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.

step05-mark-the-boots

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.

step07-mark-parts-pants1-2

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.

step08-scribble-inside-the-rest

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

step09-scribbles-zoom

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:

step10-segmentation-errors

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:

step11-fix-seeding-problems

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.

step12-color-the-objects

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:

step13-final-picture

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

Wednesday, 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.

First version of the online tracer

Wednesday, 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:

Now you can edit your uploads

Thursday, September 10th, 2009

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.

Clipart tracer: New feature coming soon…

Tuesday, June 16th, 2009

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:


Man wearing topper:
Lady answering phone:


Unsuccessful / Bad results:
1967 hair style:
It doesn’t work well either with lineart. potrace is a better candidate if you have lineart images.
All the raster images are in public domain. The lady answering the phone was obtained from NCI (national cancer institute website), the rest from commons.wikimedia.org .
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 :) .
Currently, I’m adding the required services on the website to communicate with the component and as soon as they’re done I’ll have it up for everyone to play with.

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