Lightquick Web Design - High Quality, Low Cost

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.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. 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 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 how 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!

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=0

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

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Add Comment