Using the Rounded Rectangle Tool in Fireworks CS4

The vector shapes menu in Adobe Fireworks CS4 provides designers with a wide variety of shapes to choose from and cleaver, quick ways to edit them. Take the Rounded Rectangle tool for example. In older versions of the product, think MX 2004 v6 (prior to Adobe's purchase of Macromedia), corner roundness was numerically controlled which basically forced the user to guess at the rectangle's corner radius. This functionality did not behave well and was needless to say a bit clunky to use.






















Today, corner radius is controlled via clicking and dragging the "control points"found around the shape. In the first image shown below you can see a set of five control points (yellow diamonds) attached to the shape. The four points attached directly to the shape control corner radius and the fifth controls the overall size of the shape.









To adjust the radius of all four corners at the same time, click and drag any one of the four control points found on the path of the rectangle, or...








...adjust each corner independently by holding down the "Alt" button on your keyboard (PC) or the "Options" button on the MAC while clicking and dragging the corner you'd like to adjust.








To resize your shape simply click and drag the control point that sits just outside the border of the shape.

Camel Humps

These days URLs (Uniform Resource Locators) aren't just found on the Web, they can be seen printed on just about everything from product packaging to bottle caps and billboards, and at-a-glance long URLs or URLs printed using extra small fonts can be tricky to read. Other than abbreviating URLs or using acronyms for long company names, think GMAC for example, the best way to make a long URL easier to read is to use "camel humps" - capitalizing the first letter of each word in the URL.

CamelHumpsAllowTheEyeToQuicklyPickOutTheFirstLetterOfEachWord making each word easier
to read. Usinglowercasetextfortheentireurlcanmaketheurlmoredifficulttoread, and easier to read should equal easier to remember which from a marketing prospective is a good thing.

Click to view larger image.











This technique can also be applied to e-mail addresses that might appear in print - MyEmailAddress@MyLongCompanyName.com.

Image Formats

Choosing the right image format for the Web is as easy as 1,2,3. Here's an overview of the three most common formats and their suggested uses.

1. GIF - "Graphics Interchange Format" was created by the good folks at Compuserve. The 8-bit GIF format has long been one of the most popular on the Web. It uses lossless compression and supports a maximum of 256 colors and is best suited for line drawings or graphics containing large blocks of solid color. GIFs are compressed using a technique called LZW, an algorithm that reduces the file sizes of images by finding repeated patterns of pixels. LZW compression never degrades the image quality.

GIFs can also be animated which is another reasons for their popularity. Prior to the release of Flash, most banner ads were created using animated GIFs.

Another reason for the popularity of GIF is that it supports transparency which allows the background of your Web page to appear behind your image.

2. JPEG is short for "Joint Photographic Experts Group" (try saying that 5X fast) and is the original name of the committee that wrote the standard. JPEG is a lossy compression technique designed to compress color and grayscale continuous-tone images - think photographs and complex imagery containing millions of colors. This compression technique can be applied on a sliding scale ranging from 0% compression for a perfect image, to 100% compression for a smaller file size but a poor quality image. A compression setting between 60% and 70% usually results in a good balance between image quality and file size. JPEG should NOT be used for simple images like line drawings or images containing basic shapes and only a few solid blocks of color.

3. "Portable Network Graphics" or PNG was developed specifically for the Web as a alternative (and an improvement) to the GIF format. Using lossless compression, PNG images can be 5% - 25% more compressed than the same GIF image. PNG also supports transparency using alpha channels which allow you to specify the opacity of any pixel from 0 to 255, 0 = full transparency and 255 = fully opaque.

PNG formats include: PNG8 which supports 256 colors and 1-bit transparency, and PNG24 - 24-bit color on par with that of JPEG. However, PNG24 should not be considered a substitue for JPEG and should be used when working with complex graphics.

Until recenly the only knock on PNG was browser support of transparency. Happily, this issue has changed for the better and support is now very good to excellent.

IA - A Critical Component of Online Success

User failures remain high despite a marked increase in task success according to usability expert Jakob Nielsen. And, according to Nielsen, the remaining user failures can be blamed on bad information architecture.

"If the customer can't find the product, the customer can't buy it" - Jakob Nielsen

A shocking concept, isn't it. But it's the truth and it should resonate with anyone running an online business. Getting users to the right page without forcing them to jump through a lot of hoops is one of the keys to being successful on the Web. And as Nielsen aptly points out, once the user actually does find what they're looking for, content usability obviously becomes crucial - users have to understand and like the information at their destination. And getting them there is the critical first step.

A flashy site may generate a lot of initial buzz, but if it's not user friendly and doesn't support company goals, you've probably wasted a lot of time and money to build it. Read more here...

Toolbar Icons

Iconography is the branch of art history which studies the identification, description, and the interpretation of the content of images. The word iconography literally means "image writing", and comes from the Greek εικον (image) and γραφειν (to write).

Software developers have been using icons as visual metaphors to identify specific functionality in their products for many years. These icons can be found on the toolbar buttons, drop-down menus and dialog screens of nearly every piece of software in use today. And while icons can vary in size and color their basic design follows well established conventions conceived long ago with the creation of the Graphical User Interface (GUI).

Some familiar examples:
















Notice the similarity between the next two sets of icons. They both describe similar functionality and they do it using somewhat similar iconography. Again, the use of established conventions.

Two more examples:







Techsmith Snagit






A picture may be worth a thousand words, but a well designed icon only needs to suggest one or two to be successful.

Adobe Fireworks





Solid PDF Tools




Tooltips are a convenient way to identify the underling functionality of toolbar icons and help accelerate the learning curve for the user. However, they should be used to support the icon and not as a substitute for poor icon design.

Solid Converter PDF, Solid Capture and Solid PDF Tools icons designed by MB Mason Design.

Using DVD Cases to Package Software CDs

Most software CDs are packed in a cardboard type box which isn't very durable and often gets thrown away, er... I mean recycled once the CD has been installed on the users machine. So the questions was, what could be use to package CDs that would be easy to ship (small), durable and continue to look good over time on a book shelf? The answer came in the form of a clear plastic DVD case similar to the ones you find at your local movie rental store. The plastic case used here has a thin outer sleeve that wraps from front to back that will accept a sheet on which the product artwork is printed

Product art as seen in Photoshop CS2. Click to view larger image.















What's the upside of this solution you might ask? First, unlike printed packaging (boxes) the plastic cases are not product specific until the product artwork is fixed to it, so printing costs are lower. Second, the plastic cases are very inexpensive compared to a printed solution. And third, they are very durable and look very nice. So a developer who ships multiple products can simply slip the required artwork into the sleeve and presto, product specific packaging.

The down-side is that you are using a petroleum product which isn't always recyclable. But given that these cases look good and will protect your investment, they may not be as quick to find their way into the local landfill.

Software Splash Screens

Splash Screens are used at start-up of a software application as a "visual handshake" confirming that the application being launched is the one specified. Along with product artwork, they often contain information regarding the version or build number of the product and engineering credits. The following panels were created for Solid Documents, LLC using Adobe Flash MX and Adobe Photoshop CS2.

Click images to see their actual size.