I’m an avid reader of Smashing Magazine, and welcome their wide variety of blog posts on all aspects of website design and development. I was pleasantly surprised when they announced Color Steam a couple of days ago. The free app is like a version of Adobe Kuler, allowing you to create colour schemes from scratch or from snaps using your iPhone camera. I found it easy to use, and quite fun too. The only downside is that it requires iOS4, so some older iPhone users will be excluded from the experience.

You can download the Color Steam application from the usual place.

Apparently, the effects on show have been proposed for standard adoption, and if approved, we’ll be seeing this sort of thing on other browsers. Certainly impressive, and it reminds me of Firefox plugin Cooliris. If you haven’t already seen Cooliris doing its stuff, you should check it out. It’s amazing to think that this sort of effect may soon be widely supported by our browsers.

The little icons associated with a web page or site, favicons, have been around for a while now, and most sites (including this one) have one associated with them.

Now the iPhone is with us, and Apple has introduced a similar concept with its ‘webclip’ icon, a little icon that is shown on your the iPhone’s screen allowing quick and easy access to your site.

In this brief tutorial, I’ll explain how you can create your own webclip icon and have it on your iPhone in minutes.

Setting up a webclip icon is very similar to that of favicons in that you have two options:

1. Save a 57×57 webclip image as ‘apple-touch-icon.png’ and place it in the root of your website.
2. Save the square webclip image (not necessarily 57×57) as a GIF, JPEG or PNG, and then add the following to your html head section: <link rel='apple-touch-icon' href='/path/to/webclip.jpg'/>. Note that the image need not be saved in the root of the site, and can be doesn’t need to be called apple-touch-icon.png.

iPhones running version 1.1.3 will then be able to add the webclip icon by browsing to the website and selecting the ‘Add to Home Screen’ link from the ‘+’ icon at the bottom of the iPhone screen. Once the icon has been added to the home screen, you’ll notice the Apple gloss that’s been much imitated of late and you’ll have a handy little icon directly to your site. In addition, rounded corners and a drop shadow are added.

If your image has detail around the edge, you may find that some of the detail is lost when the rounded corners are applied. With some experimentation, I’ve found that applying some natural padding around the outside of the image works well.

I had an 80s flashback today as I fired up image editing freebie Paint.NET and accidentally discovered the Mandelbrot Fractal render effect. It took me back to the days of waiting for each row of pixels to be generated on my Atari ST. I began to experiment with a few images.

To invoke the effect, you just need to select the “Mandelbrot Fractal” from the Render effects menu item.

So, let’s take this image:

Applying the effect gives us:

And to a second image:

gives us:

There a number of effect options such as zoom factor, quality and angle, but I thought it was quite fun that some images of my youth could be reproduced very easily with a variety of source images.