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

Posts Tagged ‘clker’

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:


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.

Fixing vote up/vote down icons

Wednesday, December 17th, 2008

Just fixed a usability problem. Lots of visitors complained that when they clicked “download” nothing happened. By reviewing the website, I found that I used an up arrow, and a down arrow for voting for the picture with a positve vote, or a negative vote. However, users misunderstood that, and I don’t blame them!

I switched the icons to a green up thumb, and a down red thumb for voting for a picture. Also, added a disk icon, with an arrow pointing down in the area, which has the different download formats.

Hope this helps and reduces confusion.

Adding Clker.com to opera search engines

Friday, July 25th, 2008

It seems weird to me that Opera did not support adding search providers using the opensearch XML files. However, I found an alternative way to add search engines to Opera. Unfortunately, it requires the user to do it manually.

To add a search provider 1. Right click on the search field 2. Select ‘Create Search’ 3. Give the new search engine a title and a keyword.

It is very easy and smart, where the browser takes the post url and uses it as the search engine URL!

Technorati Tags: , , , ,

Hardware problems

Saturday, December 8th, 2007

The web server has been shutting down by itself for the past week. I tried looking at the logs to figure out why I come to my office and I find it turned off. It looks like there’s a hardware problem causing the server to shutdown suddenly.

Luckily, I didn’t get any database corruptions – not until now. I changed the power supply and testing to see the results. In my experience almost 90% of the time it is a power supply problem especially that I’m loading the server with an extra useless PATA hard drive just to make GRUB happy.

Technorati Tags: , , , , ,

v0.1 Beta release of openoffice.org addon

Friday, November 30th, 2007

Finally, there’s a light at the end of the tunnel. It’s 4:21 AM and I’m very happy to reach this stage with the openoffice addon.

You can download it Openoffice.org addon for clker.com integration . Installation is very easy, from the tools menu in openoffice, select Extension Manager. Click add, and point to the file. You will need to restart openoffice for it to work.

openoffice.org addon screenshot

This extension will show you the contents of your basket stored on clker, and will allow you to place any clipart image in the clipboard, then you can paste it in the correct place in your document.

Still there are some minor issues:

  1. The addon parent is currently null, so an extra window will appear in the task bar
  2. The way we place the picture in the clipboard is by loading it in draw, select all and copy then closing draw. There are better ways for doing this. You will notice that the screen will flicker especially if your using the ODG or the SVG formats since draw takes some time to render the vectors.

In case you wanted to play with the source, the addon source is here.

Technorati Tags: , , , , , ,

Openoffice.org addon coming along

Friday, November 23rd, 2007

I’ve been working since yesterday on an addon to openoffice.org , which will directly insert images from clker.com . The way it works is by searching for the images you want, adding them to my basket , then going to openoffice.org and hitting the addon button.

Just from few minutes I got the basic idea to work, and the addon is accessing the contents of the basket. I would now give the openoffice.org team a super thumbs up on the UNO implementation and the way it is designed – also to the netbeans team.

I’ve been out all day today, eating almost at every stop turkey, stuffing plus driving for more than three hours from Germantown to Ocean City – yet I’m so excited about this addon and still working on it. I’ll see how much longer I will last before collapsing :) …..

Watch the website after thanksgiving for the release of the addon – I’ll do my best to get it out by Monday if not before.

Technorati Tags: , , , , , , , , , , ,

Adding picture to your wordpress weblog

Tuesday, November 20th, 2007

Human beings are visual creatures. Pictures and eye sight is the second important way by which humans learn after hearing. Adding pictures related to your post will help visitors get your point. Exactly like adding pictures in a presentation, which help people understand the description made by the presenter.

Adding pictures to your weblog post will also help attract attention to your article, and increase the time your visitors stay. Pictures breaks the boring lengthy text of an article and gives the reader a break in the middle.

An important factor is then how easy is it to a) find a picture ad b) add it to your weblog?

Clker.com offers a huge collection of high quality cliparts. All cliparts are tagged with relevant words making it very easy to search and find the exact picture you’re looking for. You can directly copy the HTML code and paste it in your weblog’s page. All pictures can be easily embedded in any HTML source.

By default, all pictures are floated to the left making the text wrap around it without wasting your weblog space. You can manually remove the float and allow the picture to occupy a full horizontal area as shown above.

Technorati Tags: , , , , , , , , , ,

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