Tuesday, August 21, 2012

Finding free images you can use on your site

There's no doubting that old adage: "a picture's worth a thousand words", and nothing sadder than a web page full of text with no supporting images. So you owe it to yourself and your readers to add a few eye catching graphics to every page you write.

If you want to download pictures to use you'll want to find royalty free stock images or pictures released under a creative commons license. In this post I'll walk you through the process of finding photographs that use the flickr creative commons license using a search engine I wrote called flickrCC

1. Go to flickrcc.net



2. Enter your search term and click on the 'Find' button



The two check boxes allow you to fine tune your search. Generally the default is all you need, but sometimes you'll need some more control.

By selecting 'For editing' you restrict your search to just those images that allow derivative works: 
  • Attribution (CC BY); Attribution-NonCommercial-ShareAlike (CC BY-NC-SA); 
  • Attribution-ShareAlike (CC BY-SA) and Attribution-NonCommercial (CC BY-NC).


If you de-select the 'for editing' option you include images from the remaining two Creative commons licenses:
  • Attribution-NoDerivs (CC BY-ND) and 
  • Attribution-NonCommercial-NoDerivs (CC BY-NC-ND). 
Selecting 'For editing' will give your larger pool of images to draw from, but it will also mean you cannot edit your image, so I'll leave the 'for editing' on for now.


If you check the 'Commercial' box the search will exclude images posted with Attribution-NonCommercial-ShareAlike (CC BY-NC-SA) and Attribution-NonCommercial (CC BY-NC) licenses. If you're planning on selling the final image, or using it in a product that you're going to sell you need to put a check mark in this box. Since I'm putting this image up on the blog here, I don't need to worry about this.

By combining the two check boxes you've got quite a bit of fine control over what gets displayed, but generally you'll be fine if you go with the default. You can read more about the Creative Commons licenses on the Creative Commons license page.

3. Choose one of the images in the left hand panel

Once you've clicked on the 'Find' button you'll get back up to 30 thumbnails matching your search term.

You can get another 30 thumbnails loaded by clicking on the 'next' link at the bottom of the panel.

When you click on a thumbnail the corresponding attribution will load in the right hand panel, along with a larger version of the image...


4. Select the image resolution


When you've found an interesting thumbnail and clicked on it a bigger version is loaded into the right hand panel. Unlike the little, square thumbnails this image will have the picture's correct dimensions.

Clicking on the links below the image will load larger or smaller versions. The medium size is the one you'd usually use for a blog post or web page, but the other sizes can be handy for different applications too. For this tutorial we'll click on the 'medium' link to load it...


4b. Optional extra: edit the photo


Well, if you left the 'For editing' checkbox selected when you started your searech you'll see an 'Edit' link above the copy in the right hand panel. Clicking on this will allow you to edit your picture using the online image editor, aviary.

Aviary will let you crop the image, resize it, rotate it, and add text and other artefacts, making it truly yours.


5. Save the image


When you've loaded the picture size you want (and optionally edited it), right click on it and save it to your PC by selecting 'Save image as...' from the pop up menu (if you're using Firefox, Safari or Internet explorer the menu option might say something else, but should look a bit like: 'save image').

When you save your picture use a descriptive file name rather than the boring string of letters and numbers that comes up by default, it will make it much easier to find later. Also, note which directory you save it in so you can find it again later (my hard drive is full of lost images because I didn't pay attention when I clicked that 'save' button :-)

6. Copy the attribution text


So that we comply with the Creative Commons license we need to add an attribution to our final post. FlickrCC makes this easy by putting the attribution text above the picture. Select this text by left clicking and dragging the mouse over it, then right click on the selection and choose 'copy' from the context menu.

7. Putting it all together

We're all set now to add our free picture by uploading it to our blog or web page along with it's attribution. Something like:

Image: 'Dolomiti - le Odle viste dal Seceda
http://www.flickr.com/photos/7772186@N03/3909598872
Found on flickrcc.net

And there you have it, everything you need to know about using flickrcc.net to locate free images, released under a creative commons license on flickr along with a free picture editor for crafting unique new images for your blog, web site or training material - have fun and stay creative,
Peter

PS. if you'd like to spread the word, feel free to re-use any of the material in this post, or the accompanying slideshow