Creating Aqua Style Images - Add a drop shadow
(Page 4 of 4 )
That’s all the lighting effects we need. All that is left to do is add a drop shadow. We set our lighting effect to come from the bottom, so it makes sense to have our shadow complement this.
Set the angle of the drop shadow to -150° and keep the values for Distance, Sped and Size below 10. That’s it; what you have now would make an excellent background for a cool desktop widget. Again, the size of the shadow will help convey the intended thickness of the shape; a bigger shadow will help make the object appear taller.
I mentioned briefly at the start of the article that there are a couple of Photoshop scripts that can be run in Photoshop to turn your image into an actual widget. These scripts are available from the Workshop section of the Yahoo! Widgets web site. Once downloaded and unzipped, all you need to do is go into the File --> Scripts --> Browse menu of Photoshop to launch the Load dialog box. Browse to the location of the script (you might need to change the Files of Type drop down to JS files) and select the Create Widget 1.1.js file.
The Widget option dialog box will appear. It requires little input from you to do its thing; just choose a name, add yourself as the author and set the widget and minimum engine versions. The destination should be wherever you have saved your image file to. There are also some additional options you can set to decide what basic information should be included in the kon file and what additional effects should be applied. Hit the Create button and a kon and the image files will be placed in a folder structure at the specified destination, ready for you to add in your own code.
No one is saying that this is the way you must create the images for your widgets, or that any Aqua effect should be used at all. Go with whatever is appropriate for your particular application. The only limit to the style of your widget is your imagination (and ability!). So what if you can’t decide which style to go with? You can pass that decision on to the end user and supply several different styles in the form of skins. In the coming weeks, I’m going to be writing a follow-up article to this one that walks you through several Aqua alternatives.
Just remember that the visual presentation of your widget is almost as important as its informational worth and goes a long way towards making people feel comfortable that the widget has been produced effectively and professionally. Aqua style images can be used for other purposes too; using much smaller versions of this image would make a good web navigation button, provided it was optimized for the web so as not to take a digital age to render in a browser. Developing this technique will add a valuable skill to your arsenal.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
