Macenstein

Posted by Dr. Macenstein

Hardware manufacturers “borrowing” design cues from Apple seems to be a trend which grows larger with each product Apple unveils. However, hardware is not the only area in which Apple’s designers have been inspirational. Apple’s website has perhaps one of the most stylized and imitated graphic styles of any major company, and with good reason. The classy, “reflective” look given to their product images helps make them look like more than just hunks of metal and plastic. They look like works of art.

Creating your own version of this look normally requires the use of a fairly expensive graphics editor such as Adobe Photoshop, not to mention the have the time and skill required to learn it. For those bloggers and web developers who have an appreciation for nice looking graphics but lack the means, financially or creatively, to execute them, I recommend you check out Picturesque from Acqualia.

Picturesque is a simple yet valuable tool that any web developer should have in their design arsenal. By simply dragging an image from your computer (or Safari, iPhoto, or wherever) into the Picturesque window, you can instantly create the same rounded corners and faux reflective look that has so defined Apple’s look.

Picturesque’s interface is very clean and simple (no wonder it won an Apple Design Award) and consists of only two elements. First, the Main Window, where your graphic lies, and second, The Inspector, a floating pallet consisting of 5 options you can play with to get the look you want.

The inspector allows you to choose a background color for your graphic to be composited over. Using Apple’s built-in color picker, you can choose a color that matches your webpage so it will seamlessly blend into the background.

Next, you can choose whether or not to add a reflection to your image. If the answer is yes”, you then have options for the length of the reflection, the opacity, and the offset, if any.

The next option is Shadow and Glow. From the name it should be obvious what this adds to your images. You have control again over the color, offset, and blur of the shadow, and can even drag the “virtual light source” around to change the angle of the cast shadow.

Curve is next. You have an option to add curvature to each corner individually, as well as control over the amount of curvature.

Under Edges you can specify whether you wish to add a stroke, and can control the color an thickness of that stroke. You can also choose to add a “fade” to one of the 4 sides of your images, causing it to sort of blend out to a specific edge.

Resize does just what you would expect. This is a great tool for making sure your high-res shots from iPhoto can still fit in your 440 pixel wide layout.

When you’ve got your image looking the way you like, you can save it out as a JPG, TIFF, or PNG, with various compression and transparency options.

Above: Using Picturesque you can easily mimic the “coverflow” look of iTunes.

Plays well with others

If you already own Photoshop, you’ll find Picturesque serves as a great complimentary app that will allow you to quickly make some cool effects.

Using Photoshop, Picturesque, and Photoshop’s little buddy Image Ready, I was able to quickly create the Flash ad to the left (sorry iPhone users, you’ll have to trust me it’s there). In my opinion, this creates a more visually appealing look than a flat banner, and is more likely to cause someone to actually LOOK at your ad (and that’s point, right?)

Issues

I had a couple small issues with Picturesque, but many of them were addressed by an update Acqualia released just yesterday. However, being the opinionated fellow I am, I do have some suggestions to enhance Picturesque.

First, when choosing to resize your image, Picturesque does not seem to take into account any strokes, reflections, shadows, etc. you may have applied. So, for instance, if you choose to resize the image to fit in a space on your page that is 250 pixels wide, but you have applied a 3 pixel glow to the image, Picturesque will actually give you an image that is 256 pixels wide. I think Picturesque should do the math for you.

Second, you can have more than one image open at a time in Picturesque (which is great), but any settings you apply to one image are carried through to all the others. This “batch” workflow may work well in some cases, but it would be nice to be able to apply different settings to different images without having to relaunch the app. I would suggest adding a checkbox for “Use Global Settings” or some such thing that can be turned off on an image with special needs.

Third, I would also suggest a cropping tool of some sort be added, perhaps sliders for the amount of crop on each side, in keeping with Picturesque’s palette formating. This would eliminate the need to bring a shot into Photoshop or iPhoto to first crop the image (if necessary).

And finally, Picturesque would be picture-perfect if it added a “Y-Axis” tilt feature to the program. Many graphics on Apple’s site, iTunes, Apple TV, and elsewhere utilize a slight skewing of the image to create a feeling of “depth” to the graphic. I think it would be cool if Picturesque could do this (see below for a sample mockup).

Above: Right now, Picturesque only gives you a straight-forward view (left). It would be cool if you could rotate in image in Picturesque. The image on the right was skewed in Photoshop.

Conclusion

Perhaps the only to reason to not recommend Picturesque is the tendency to overuse it. I found myself applying it to images that didn’t really warrant the stylized treatment, just because the app is so fun to use. It is an extremely well designed app (especially for a version 1,0), with an intuitive and responsive interface that makes it fun to crank out these reflective little graphics. Both bloggers and professional web designers will appreciate the time savings of using Picturesque to quickly handle such common tasks as adding shadows, strokes, glows, rounded corners, and resizing, but the reflection feature is what makes Picturesque unique. If you are into that shiny, reflective look Apple made famous, I recommend you pick up Picturesque.

Picturesque by Acqualia

Price: $19.50

Pros: Quickly and easily gives your web images a refined, stylized look that gets noticed; Fast, responsive, fun to use

Cons: A cropping tool and Y-Axis rotate feature would make this a killer app