Skitch

Every so often you, like most people who participate in anything on the web, need or want to collaborate with friends or co-workers using images. Why? There are many reasons…

• Creating conceptual mockups while designing a web page or site.
• Designing user interaction flow.
• Performing user support.
• Teaching children how to draw.
• Playing games like hangman.
• Iterating images for fun, as in Photoshop Tennis.
• Creating or participating in image memes like LOLCats.
• and many more…

What is “Skitch It” ?

Let’s take a look at a feature in Skitch called “Skitch It!” so you can learn how to easily and quickly edit images with another person or among a team or group of people.

First I’m going to load an image to Skitch.com or select from images that are already loaded to Skitch.com and have a privacy setting of “public.” For my example I found a public photo that has a Creative Commons license that lets me use the image for my own purposes, as long as I give attribution back to the source. Always respect the image copyright of images you don’t own.  I’ll start with this image already loaded in my Skitch.com account:

Uploaded with plasq’s Skitch!

I plan to use this photo to create a simple LOLCat image. The first  thing I want to do is get rid of the background because it doesn’t lend itself to the final image that I have planned.

STEP 1 - Hover your mouse over the top right corner of the image and click the “Skitch it!” button.  This will cause the photo to be downloaded into your Skitch desktop application for editing. You must have the Skitch application installed before you can do this.

Uploaded with plasq’s Skitch!

Once the image loaded into the Skitch desktop application I outlined the cat and used the bucket tool to paint the background black with one click. I’m skipping quickly through this process because the important part is the next step.

Here’s what the kitty looks like now:

Uploaded with plasq’s Skitch!

STEP 2 - Once I have the image changed to my liking I can “Skitch it back” to the same page that I Skitched it from in the first place. This can get confusing, so pay attention. Recap: I pulled the image from Skitch.com into Skitch.app (the desktop application), now I want to push it back online as an image comment to the original image. To do so, click the “Skitch it back” button as shown below:

Uploaded with plasq’s Skitch!

At this point I might decide to get a friend involved in editing this image. Remember, there are now TWO images on the same page. One is the image I started with, the second is the new image where the kitty is on a black background. The second image has been added as a comment to the first image.

With a black background, my friend can now visit the page, use the “Skitch it!” button to pull the second image (from the new comment) into Skitch.app (the desktop app) and edit the image further. She might decide that the cat looks like it’s jumping in the air to catch a bird, so with her basic artist skills she draws a bird into the image after first making the canvas a little bit taller than the original image. This is what her image looks like:

Uploaded with plasq’s Skitch!

When she is done editing she can then use the “Skitch it back” button to post the new image iteration back into the same image thread as the others, on Skitch.com. There will now be 3 images in the image thread.

STEP 3 - I decide that that cat needs to have a thought bubble, telling the viewer what the cat expects to do with the bird if caught. I again use the “Skitch it!” button to grab the third image in the thread and edit away. Here is my final image … Dinnerz..

Uploaded with plasq’s Skitch!

Conclusion

If you wondered what the images look like in comment form, the final and complete image thread that I created for this demo can be seen here: Kitty Wants Dinnerz

This was a quick run through of how to use the “Skitch it!” and “Skitch it back” buttons in Skitch.  The point was to illustrate how images can be easily and quickly transferred between multiple people. Communication can occur with images, rather than just words, without the need to open mega programs like Photoshop or Illustrator, all while creating a central repository of draft changes and enabling further sharing.

We feel the Skitch it! functionality has a lot of potential. Maybe you should try it and tell use what you think?