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

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: opera, search engines, search providers, quick search, clker

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: grub, hardware, failures, clker, clker.com, power supply

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.

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: addon, uno, openoffice, gallery, clipart, online, clker

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: openoffice, open, office, org, addon, clipart, clker, turkey, thanksgiving, stuffing, ocean city, germantown

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: blog, clipart, cliparts, clker, Embed, find, HTML, pictures, search, weblog, wordpress