MacGraPhoto app bundle

I’m not usually into those Mac application bundles (like MacHeist) because they tend to include a bunch of unrelated stuff I don’t want along with one app that I do want.

The MacGraPhoto app bundle is a little different though. It includes 7 applications related to image editing, a couple of which received Apple Design Awards. Below are the two apps that make this bundle absolutely worth it to me:

DrawIt

Can anyone say “gorgeous”? Not only is this app beautiful, but it’s also snappy and simple to use. DrawIt will let you create vector art and then export it to a format of your choosing. This app is an absolute must for anyone drawing icons.

Picturesque

Picturesque is a simple app, with very targeted functionality. It will let you transform images in various ways, like adding perspective, reflections and drop shadows. For me, this app stream lines my image editing workflow when I want to adjust images for blog posts or presentations.

A bundle worth buying!

Mac Widgets for Java Maven Support

Thanks to Luke Nezda, Mac Widgets for Java now has a pom.xml file to work with Maven. Luke’s looking to get the pom file integrated into java.net’s Maven repository. Until then, you’ll have to download it manually.

Creating the iTunes navigation header

Recently, someone asked me what the best way to create the iTunes navigation header (seen in the iTunes music store — the black shiny bar at the top) would be. Here was my response:

The navigation header’s most prominent feature is it’s multi-stop gradient. There are four colors used in the gradient as illustrated below:

But to really capture the subtleties of the navigation header we need to look closer at the top and bottom of the component, where you’ll notice an inner shadow, and an inner glow. The inner shadow and inner glow are what make the component visually interesting.

I chose to hard code the inner shadow and inner glow sizes to 3 pixels (top) and 2 pixels (bottom) rather than produce the real effects. Real inner shadows and glows aren’t straight forward to create (I talked about them here), and are computationally expensive to recompute because they aren’t currently computed on the graphics card. So I decided to hard code the inner shadow and inner glow colors to the exact colors seen in iTunes. You could figure out their grayscale and alpha values to make them reusable — I’ll leave that as an exercise for the reader.

Here’s the code:

public class ITunesNavigationHeader extends JComponent {

    // the hard-coded preferred height. ideally this would be derived
    // from the font size.
    private static int HEADER_HEIGHT = 25;

    // the background colors used in the multi-stop gradient.
    private static Color BACKGROUND_COLOR_1 = new Color(0x393939);
    private static Color BACKGROUND_COLOR_2 = new Color(0x2e2e2e);
    private static Color BACKGROUND_COLOR_3 = new Color(0x232323);
    private static Color BACKGROUND_COLOR_4 = new Color(0x282828);

    // the color to use for the top and bottom border.
    private static Color BORDER_COLOR = new Color(0x171717);

    // the inner shadow colors on the top of the header.
    private static Color TOP_SHADOW_COLOR_1 = new Color(0x292929);
    private static Color TOP_SHADOW_COLOR_2 = new Color(0x353535);
    private static Color TOP_SHADOW_COLOR_3 = new Color(0x383838);

    // the inner shadow colors on the bottom of the header.
    private static Color BOTTOM_SHADOW_COLOR_1 = new Color(0x2c2c2c);
    private static Color BOTTOM_SHADOW_COLOR_2 = new Color(0x363636);

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(-1, HEADER_HEIGHT);
    }

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g.create();

        // calculate the middle of the area to paint.
        int midY = getHeight()/2;

        // paint the top half of the background with the corresponding
        // gradient. note that if we were using Java 6, we could use a
        // LinearGradientPaint with multiple stops.
        Paint topPaint = new GradientPaint(0, 0, BACKGROUND_COLOR_1,
                0, midY, BACKGROUND_COLOR_2);
        graphics.setPaint(topPaint);
        graphics.fillRect(0, 0, getWidth(), midY);

        // paint the top half of the background with the corresponding
        // gradient.
        Paint bottomPaint = new GradientPaint(0, midY + 1, BACKGROUND_COLOR_3,
                0, getHeight(), BACKGROUND_COLOR_4);
        graphics.setPaint(bottomPaint);
        graphics.fillRect(0, midY, getWidth(), getHeight());

        // draw the top inner shadow.
        graphics.setColor(TOP_SHADOW_COLOR_1);
        graphics.drawLine(0, 1, getWidth(), 1);
        graphics.setColor(TOP_SHADOW_COLOR_2);
        graphics.drawLine(0, 2, getWidth(), 2);
        graphics.setColor(TOP_SHADOW_COLOR_3);
        graphics.drawLine(0, 3, getWidth(), 3);

        // draw the bottom inner shadow.
        graphics.setColor(BOTTOM_SHADOW_COLOR_1);
        graphics.drawLine(0, getHeight() - 3, getWidth(), getHeight() - 3);
        graphics.setColor(BOTTOM_SHADOW_COLOR_2);
        graphics.drawLine(0, getHeight() - 2, getWidth(), getHeight() - 2);

        // draw the top and bottom border.
        graphics.setColor(BORDER_COLOR);
        graphics.drawLine(0, 0, getWidth(), 0);
        graphics.drawLine(0, getHeight() - 1, getWidth(), getHeight() - 1);

        graphics.dispose();
    }
}

JIDE incorporates “a better JTable”

If you’re a JIDE customer, you’ll be happy to know that they’ve incorporated my blog article on Creating a better JTable back into their tables (see their news release here).

My article points out a number of things you can do to get better parity with native tables. Tables tend to permeate applications, so it’s important that they look good. If you haven’t read the article, go check it out and pull in the better JTable code into your codebase!

Mac apps don’t have to look like Mac apps

A common misconception is that Mac apps must look like Apple’s own apps. A lot of developers misinterpret Mac users’ high visual standards as a call for plain Cocoa apps only, with no visual innovation or interpretation. What Mac users are really saying, is:

Give me an app that looks at least as good as what Apple produces

In fact, Apple is the first to break from using standard Cocoa (think iTunes). Do users let this slide only because it’s Apple? I don’t think so. Here are a number of applications (including iTunes) that don’t look like standard apps, and are well received by the Mac community.

Lightroom 3 (beta)

Lightroom 3 has a completely non-standard UI and interaction model, and I love it! The UI is dark and stays out of your way. The “links” in the top right of the window (e.g. Library, Develop etc.) let you quickly adjust your workflow to the task at hand. Overall, the UI is polished, snappy and a pleasure to use.

Coda

Panic’s Coda may look like a Mac app at first, but it was one of the first apps to successfully embrace the one-window paradigm, which was very non-standard for Mac apps when it was released (more recently, Adobe has adopted this concept). Coda also helps you switch workflows by changing the active “tab” (the buttons above the document area). This concept was, and still is, something very unique to Coda. Coda won an Apple Design Award, and is lauded as a truly fantastic Mac app.

Pixelmator

Pixelmator offers a clean, crisp UI for editing photos. They’ve played off Apple’s Heads Up Display (HUD) concept, but pushed it throughout the app to everything including the document window’s chrome. I think their UI is gorgeous and unobtrusive — it makes me want to use it just so I can look at it.

iTunes

iTunes, though one of Apple’s own products, is consistently different from the core platform. Even though it’s not consistent with other apps, I’m happy with it because it looks good. I enjoy being able to see what UI changes are in the pipeline, as iTunes has been a proving ground for more general user interface changes across the platform.

I could keep going, but I think the point is clear. User interface innovation is widely accepted by Mac users so long as it is an innovation and not sloppiness.

Josh [Marinacci] on Design

I stumbled across Josh on Design today, a relatively new blog started by Josh Marinacci with the aim of discussing good user interfaces. It looks like Josh’s focus will be more around design-y type issues and less around implementation, which should help to fill a space that more developers need to explore.

There isn’t much content on the blog yet, but I think you’ll find this article on color informative. I also found this bit of Josh’s professional history interesting.

Sea Glass look and feel

I’ve teamed up with Kathryn Huxtable on a new look and feel for Java we’re calling “Sea Glass”. The look was inspired by the following image:

I’ve been working on the artwork, while Kathryn has been doing the hard part of converting the art into an actual Java look and feel. We’ve only just begun the project, so there is much yet to be done, but I’d like to share the following glimpses of the artwork with you:


The colors will likely be tweaked as we go, but the images above give you a feel for what we’re going for. I’ll provide a link for the project shortly, which will be open source.

If you have comments or suggestions, be sure to leave them below.

Adobe’s Flex icon and JavaFX confusion

As I was reading this IntelliJ blog article, I noticed what I thought to be a new JavaFX icon (the Fx text on a black gradient background).

Once I started reading the article, I realized this wasn’t about JavaFX at all, but support for Adobe’s Flex! I guess the lower case “x” in “Fx” should have been a give-away that it wasn’t JavaFX, but I wasn’t paying close attention. That made me wonder, is there a potential marketing conflict here? Could this possibly have been an intentional choice on Adobe’s part, or did Sun choose a bad suffix for Java?

I don’t know any of the history on either side, so I can’t really speculate too much. At any rate, I think there’s some potential for confusion in Adobe’s favor.

Mac Widgets for Java on Snow Leopard

Mac Widgets for Java has been updated to work with Snow Leopard. The Unified Tool Bar, Preferences Bar and Bottom Bar all needed small updates. The textured window in Snow Leopard uses slightly lighter colors, possibly to compensate for the increased gamma correction values, which causes everything to look darker and more saturated.

These updates will be part of the next release (0.9.6), but you can also download the latest developer build here. Be sure to report any issues you have on Snow Leopard, as well as any regressions on Leopard.

Google Chrome makes good use of window chrome

I was playing around with the Mac version of Google Chrome the other day (I found it here) and I stumbled across the “Incognito” mode. When you go incognito, you’re going into private-browsing mode, i.e. you won’t leave traces of where you’ve been.

What I really liked about the user interface for this was the use of different window title bar for the incognito window. In general, modes are not great for users because it’s difficult to convey what mode your in. Google’s custom window chrome is the perfect indication to the user that they are in a special browsing mode.