Home arrow Design Usability arrow Page 4 - Creating Aqua Style Images

Creating Aqua Style Images

Anyone that has used a Mac running OSX will have seen Aqua style icons in action. Aqua is the name of the default theme of OSX and presents a visual style with a kind of liquid, glossy effect. Aqua style icons look very nice and convey an image of style and professionalism, but needn't be that hard to create, being composed primarily of transparency layers and lighting effects.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 10
November 08, 2006
  1. · Creating Aqua Style Images
  2. · Getting started
  3. · Using the wand and lighting effects
  4. · Add a drop shadow

print this article

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.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C Ė dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials