Lightquick Web Design - Elements of the past and the future combining to make something not quite as good as either

I'd be happy to show you the basics, it is really quite straightforward if not simple.

I use the 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 or groups 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". groups need to be named appropriately after their function, the slider group for example should be called "slider".

When the design is done, you simply run a Photoshop script available from the Yahoo widgets developer's page. This script is run within Photoshop and converts the photoshop design groups to Yahoo widget entities. The script creates a XML file that describes each group/widget object's properties, ie: 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://lightquick.co.uk/downloads/photoshop-script-to-create-yahoo-widgets.html?Itemid=264

You simply place it in the following folder:  DRIVE:\Program Files\Adobe\Photoshop CS\Presets\Scripts

A small PSD file with one or two layers will take no longer than a minute or two to render into a widget.

My steampunk clock /calendar, which is a very complex, multi-layer PSD takes approximately 20-30 mins to render into discrete objects. My machine is a core2duo 2.2ghz with 3gb Ram. The end result is a widget folder with a \Resources folder and a file with the  .KON suffix. This file is the thing you double-click on, if the Yahoo widget engine is installed it will then use the widget runtime engine to create your first Yahoo widget. It will run on your Windows or Mac OS/X desktop, it will be movable but at this stage it 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.html

This 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 and you can move it about. 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>

This action line causes the.KON file to call a javascript program called thermometer.js.

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. Here is an example of some typical code:

<name>redTap3</name>
<hOffset>951</hOffset>
<vOffset>1257</vOffset>
<opacity>255</opacity>
<onMouseDown> <![CDATA[
               redTap3.rotation=redTap3.rotation +16;
               if (preferences.muteswitchPref.value == "enable")
                      {  puffit();  };
               if (bulbglow.visible == true)
                      {
                          bulb.visible = false;
                          bulbglow.visible = false;
               if (preferences.muteswitchPref.value == "enable")
                      { 
                          play(suck,false);  };
                      }
                      else
                      {
                             if (preferences.muteswitchPref.value ==                                              "enable")
                                      {  play(zzzz,false);  };
                             bulb.visible = true;
                             bulbglow.visible = true;
               }
// ]]> </onMouseDown>
<visible>true</visible>

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://lightquick.co.uk/steampunk-widgets.html?Itemid=264

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

Development has stopped on the context editor but don't let that put you off - it is still a very good, streamlined code and general edtor.

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 entirely when you remove a widget, 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 two versions of Photoshop CS that I use are version 8.0 (Photoshop CS1) and Photoshop CS2. The script works with both these versions of Photoshop. A full blown version of Photoshop is fairly expensive but you need not worry as you can download the older but fully functional versions of Photoshop for free at the link below.

GIMP (the GNU Image Manipulation Program) can work with Photoshop layers and might be able to run a photoshop compatible script - I have not tried it. GIMP is free and you will be able to design a widget using it. I just do not know whether the conversion script would function. 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. It is just slow and painful. My suggestion is to get a copy of Photoshop by hook or by crook!

Photoshop is available here:

http://www.adobe.com/downloads/cs2_downloads/index.html

As and when I get time I will drop some more screenshots here to illustrate the process.
 

Comments (0)

Subscribe to this comment's feed

Show/hide comments

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Add Comment