I'd be happy to show you the basics, it is really quite straightforward if not simple.
I use Photoshop CS * to create the design. Photoshop uses layers, each cog, individual component exists on a layer and you paint it on that layer using the various methods that Photoshop has to do that. you can add shadows, internal gradients, colours, glows and the like using Photoshop tools. You build up the design in layers, each layer having a separate item on it.
Then you group the layers in layer sets according to their function on the widget. So, the slider on the steampunk clock widget is one layer set as it is going to be moved as a group of components. Fundamentally anything that is going to do something needs to be created as a layer set. Naming correctly is vital at this stage, every layer should be named according to its function. A silver ball on the end of the bar needs to be called something like "right hand silver ball for slider bar". Layer sets need to be named appropriately after their function, the slider layer set for example should be called "slider".
When the design is done, you use a Photoshop script available from the Yahoo widgets developer's page. This script is run within Photoshop and converts the photoshop design layer sets to Yahoo widget entities. The script creates a XML file that describes each layer sets/widget object's properties, height, width, x and y offsets. It also creates a PNG image for each object and stores them in a Resources folder created especially for the new widget.
The script is available here:
http://widgets.yahoo.com/tools/My steampunk clock /calendar takes approximately 20-30 mins to render into discrete objects, that is on a core2duo 2ghz with 3gb Ram. The end result is a widget folder with a .KON file that is the thing you click on, Yahoo widgets will then use the widget runtime engine to create you your first Yahoo widget. It will run on your desktop, be movable but won't actually do anything.
See here for my stamp widget that is basically the result of the above process:
http://lightquick.co.uk/downloads/other-downloads.htmlThis will demonstrate a fully functioning yahoo widget - but there is no code behind it to make it actually do anything. It just looks pretty on the desktop. You could do the same with any image you have to hand.
So, to make it do anything you need to add some code, in the case of Yahoo widgets this is achieved with Javascript.
To do this you need to create a .js file in the widget folder and call it from the .KON file. Have a look in my thermometer .KON file and you will see a call to thermometer.js
<action trigger="onload"> <![CDATA[
include("thermometers.js");
startup();
// ]]> </action>
For each object in the .KON file you can add some javascript code to handle a mouse drag or click event. You can see how this is done by opening thermometer.js in my widget and having a poke around. You can add similar code to your widget. Then it is all up to you. You might get more of an idea from the steampunk widget as it is a lot more complicated and has more functions to comprehend.
My widgets come packaged up, zipped, so you have to unzip them before you can open them and see the contents. There is a widget called the widget converter by Ricky Romero that converts widgets back and forth between zip and folder formats, you'll need that.
The converter widget is available here:
http://widgets.yahoo.com/tools/You'll also need a decent editor. The ConTEXT editor is the one you'll most probably get to grips with straight out of the box. Open source. The editor is available here:
http://www.contexteditor.org/Top tip, if you are going to venture into widget development, backup your widget code every time before you do any packaging/widget deletion. The widget engine has the nasty habit of occasionally removing your code, so you need to have backups.
I hope the above isn't daunting, once you know what to do it is easy. Creating that stamp widget took 15 minutes, creating the steampunk clock/calendar widget cumulatively took weeks of my time.
* The version of Photoshop CS that I use is version 8.0, the script works with this version of Photoshop but how it works with later versions? - I do not know, I assume it does. A full blown version of Photoshop is fairly expensive and I do not know whether the script runs with the cut-down version of photoshop, Photoshop Elements. It might.
GIMP (the GNU Image Manipulation Program) can work with Photoshop layers to a certain extent but it cannot run a photoshop script. There is even a version of GIMP called GIMPshop that preserves the same Photoshop interface so you can become familiar with the Photoshop way of doing things without having to buy Photoshop.
GIMP is free and you will be able to design a simple or complex widget using it. To manually create all the layers and export them individually to PNG files, then create the XML file to position the objects as a manual process is entirely feasible and can be done using GIMP/GIMPshop. It is just slow and painful on anything more than a simple design. When you do eventually acquire a copy of Photoshop and decide to convert, be aware that a lot of your hard design work will need to be done again as the methods of blending, shadowing &c are totally different between the two packages.
My suggestion is to get a copy of Photoshop by hook or by crook!
GIMP is available here:
http://www.gimp.org//Photoshop is available here:
http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Dsoftware&field-keywords=photoshop+&x=0&y=0As and when I get time I will drop some screenshots here to illustrate the process.
I know development of widgets is slightly off-topic, but this is all to do with the customisation of your desktop to a steampunk design so I think it still fits the subject.
Poll
