Developer tools Imaging Web 2.0

So many image gallery options – 30 scripts from Smashing Magazine

Smashing Magazine’s 30 Scripts For Galleries, Slideshows and Lightboxes is, like most of their ’round ups’ an impressive selection of image display scripts.

If you’ve been trawling the net yourself trying to find the right set of gallery scripts for a project then drop by Smashing.

I’d highly recommend subscribing to their RSS feed as Smashing Magazine has become a bit of a clearinghouse for everything web design and web developmment related – regularly rounding up the ‘best of’ WordPress templates, plugins, CSS tutorials, AJAX niceties and more.

Imaging Interactive Media

World visualisation – Worldmapper

Some interesting global statistical visualisations on Worldmapper.

Imaging Interactive Media

Colour tools for web designers

So you are looking for some new colours for your latest design?

The first place you want to look is the Color Scheme Generator which will give you a palette of complimentary colours, as well as testing them for various colour-blind effects. Think of the Color Scheme Generator as doing for colours what Typetester does for fonts.

ColorBlender is perhaps even more useful although it is a matter of personal taste. Blender does much the same as Color Scheme Generator and can also output a colour table for Photoshop, as well as Pantone matching and more. The slider interface is very nifty and smooth.

Adobe has just launched Kuler, a way of sharing colour palettes for importing in to Photoshop, Illustrator, InDesign. With this you can quickly see, download and share palettes that are known to work well together.

Then there is ColorWhore, a simple site for sharing hex codes for colours, which is a bit superfluous after the others but still a simple and nice visual way of comparing colour bands.

Imaging Interactive Media

What does a song look like

There is a nifty new visualisation tool for ‘visualising repetition in MIDI files’ called The Shape Of Song.

What does music look like? The Shape of Song is an attempt to answer this seemingly paradoxical question. The custom software in this work draws musical patterns in the form of translucent arches, allowing viewers to see–literally–the shape of any composition available on the Web. The resulting images reflect the full range of musical forms, from the deep structure of Bach to the crystalline beauty of Philip Glass.

You can view (and hear) a stack of MIDI files on the site or you can point it at an URL containing a MIDI file. Already it has been overrun with Def Leppard and Tool.

Folksonomies Imaging Web 2.0

Google Image Labeller

Everyone is talking about the new Google image labeller. Think the ESP Game but where your tags help Google deliver better image search results.

O’Reilly nails it in their description of it.

The launch of Google Image Labeler, a “game” that asks people to label images, and figures that images given the same label by multiple people are likely to be correct, continues the Web 2.0 trend towards bionic software, that is, software that combines machine and human intelligence. This is really just another version of the web 2.0 principle, harnessing collective intelligence, but with an emphasis on “harnessing” rather than on “collective.”

Like Distributed Proofreaders (the granddaddy in the space), Amazon’s Mechanical Turk, and mycroft, but unlike, say, a Flickr tag cloud as a reflection of collective labeling of images, Google Image Labeler puts people explicitly to work.

There’s a spectrum of ways to put humans to work refining computer results, from the implicit to the explicit. The most explicit, of course, is going to be when the third world job shops now engaged in making booty for World of Warcraft start offering their services for more general hire.

[UPDATE : O’Reilly continues their investigation looking at the roots of the Image Labeller in the ESP Game]

Imaging Interactive Media Web 2.0

Flickr and geotagging

I’m a little late on this but Flickr has implemented geotagging which is very nifty. I hope this means a widescale uptake of this feature.

Imaging Interactive Media Web 2.0

Relational Flickr search

Flickr Storm is a fantastic and fast new tag search tool for Flickr.

Unlike other good Flickr browsers like Airtight’s tag browser, Flickr Storm also searches ‘related words’.

For example – a search for Japan also pulls in, and accurately identifies, images tagged as sakura, kyoto, and even autumn leaves!

Another nice feature is its ‘advanced search’ which allows filtering by license conditions, great if you are looking for Creative Commons licensed or public domain images.

Imaging Interactive Media

Beauty in clip art

Amazing and beautiful animation sequence made entirely with royalty-free Clip Art from Oliver Laric who has some other interesting art projects on his site

Imaging Interactive Media

HTML visualisation application

This lovely little HMTL visualisation applet is doing the rounds at the moment. It is built in Processing and the source code is already being hacked by others to build variants.

Everyday, we look at dozens of websites. The structure of these websites is defined in HTML, the lingua franca for publishing information on the web. Your browser’s job is to render the HTML according to the specs (most of the time, at least). You can look at the code behind any website by selecting the “View source” tab somewhere in your browser’s menu.

HTML consists of so-called tags, like the A tag for links, IMG tag for images and so on. Since tags are nested in other tags, they are arranged in a hierarchical manner, and that hierarchy can be represented as a graph. I’ve written a little app that visualizes such a graph, and here are some screenshots of websites that I often look at.

(from Aharef. Source code available there as well.)

General Imaging Interactive Media

Font primer for the screen

Here’s a great introductory article for everyone who is thinking about typography on the screen and how it differs from print.

The popular usage of many type styles is primarily due to the fact that many computer users are content to use only the typefaces that come with a particular operating system. The majority of these typefaces were designed for optimal legibility on screen; however, their presence on the paper often feels unnatural and rigid. Classic typefaces like Bodoni and Caslon will break at smaller sizes on the screen, but withhold a beauty and elegance on paper.

Remember, a typeface that is optimal for the screen is not necessary the right choice for print (and vice versa). The crisper and stronger designs of Arial, Geneva and New York will appear cold and clunky when used on paper. In general, avoid typefaces with city names whenever designing for print.