Revisiting the Raven Graphite skins

March 31st, 2009 | 14 Comments »

Raven Graphite and Raven Graphite Glass skins were added to the Substance look-and-feel about two years ago, and they proved to be quite popular among the media-oriented applications powered by Substance. In the meanwhile, tools such as Microsoft Blend, Apple iPhoto and the TweetDeck client have continued refining and polishing the visuals or their own graphite-themed interfaces, and time has come for a facelift of Substance skins as well.

Here is a screenshot of a sample application under the Raven Graphite skin in the latest stable 5.1 release:

and here is the same application under Raven Graphite in the latest 5.2dev drop:

Here is another screenshot of the same application under the old Raven Graphite visuals:

and the new visuals under the latest 5.2dev drop:

There are three major changes in these screenshots:

  • Light highlight color schemes for lists, tables, trees and menus
  • Lighter and partially translucent inner border painting on the buttons, tabs, checkmarks and more
  • Removing the inner border painting from scroll bars

The same changes have been applied to the Raven Graphite Glass skin. Here is the screenshot before:

and after:

And one more screenshot before:

and after:

If you want to take the new visuals for a spin, click on the WebStart button below and change the skin to Raven Graphite and Raven Graphite Glass from the “Skins” menu:

You’re more than welcome to take the latest 5.2dev drop for a spin and leave your comments.

Related posts:

  1. Revisiting the Raven Graphite skins, round 2 Release 5.2 of Substance look-and-feel made a few visual changes to the Raven Graphite skins,...
  2. New Substance skins The latest drop of Substance 4.0dev (code-named Key Largo) features four new experimental toned down...
  3. New Graphite Aqua skin for Swing applications In addition to the usual bug fixes and getting the internal implementation ready for the...
  4. Performance comparison of Substance skins As a follow up to the previous post that showed how LightBeam tool can be...

14 Comments on “Revisiting the Raven Graphite skins”

  1. 1 Vity said at 4:53 am on April 1st, 2009:

    I don’t see any difference between
    https://substance.dev.java.net/release-info/5.2/ravengraphite1-old.png
    https://substance.dev.java.net/release-info/5.2/ravengraphite1-new.png
    Invalid images?

  2. 2 Kirill Grouchnikov said at 7:24 am on April 1st, 2009:

    Vity,

    See the list of changes in the entry. Points 2 and 3 apply to these two specific images.

    Thanks
    Kirill

  3. 3 Vity said at 8:30 am on April 1st, 2009:

    OK. Sorry. I had to compare it visually per pixel to see the difference ;-).

  4. 4 Ed said at 11:15 am on April 1st, 2009:

    Looks nice!

    We make use of the plain “Raven” skin. In my opinion, it would also benefit from a little touch-up to make selected items more distinct from non-selected items. In particular, selected and unselected tab panes look far too similar.

  5. 5 Richard Osbaldeston said at 3:42 am on April 2nd, 2009:

    Kirill, not meant as a criticism – just being my brusque self (perhaps moreso as Im sat here on my lonesome with nothing to do). What’s with the extra border between the tabs and the content panel in some of those shots? With a couple you’ve even got a triple border right of the tabs, although I find even the double border distracting – just the demo code?

    Didnt understand what the looking glass icon was about either.. just showing off the extra features? expect the tabs to fill that space if not set?

  6. 6 Richard Osbaldeston said at 3:45 am on April 2nd, 2009:

    Triple? looking back its the list borders adding to the effect.

  7. 7 Paulo said at 8:24 am on April 2nd, 2009:

    Hi. I tried your laf yesterday and i saw something wierd in my app.
    It seems you Component UI replace colors that have the same rgb value as the current system colors to the skin specific color. I guess for consistency with badly designed components.

    However I think that is really, really weird if the user can choose the colors – be them normal or Systemcolors, as my users can. Just by implementing a simple color chooser suddenly a rgb value 0, 0, 0 is no longer black but some weird color, regardless of feedback.

    If you really want to change the default systemcolors why not replace the current toolkit and override the loadSystemColors method? Then the system colors would return the correct values, and normal colors would not silently change from under the app. The only problem is again, badly designed components.

    If you can’t or won’t I’d ask a new property to disable this behavior, either globally or per component (as convenient and better).

    Will try to open a issue. Hate the java.net interface.

  8. 8 Kirill Grouchnikov said at 8:29 am on April 2nd, 2009:

    Richard,

    The content border of tabbed panes is controlled by this client property and can be tuned for the specific application needs.

    Thanks
    Kirill

  9. 9 Kirill Grouchnikov said at 8:31 am on April 2nd, 2009:

    Paulo,

    Please subscribe to the “users” mailing list of the project or create a new forum posting with a small (<100 lines) test application that shows the behavior that you're describing. Substance does not touch the system colors, so i need a test application to understand the issue. Note that if you're using custom foreground / background colors and need exact match, you will need to use the colorization client property and set it to 1.0.

    Thanks
    Kirill

  10. 10 Andrey Eremchenko said at 1:02 pm on April 3rd, 2009:

    Two issues with these skins.
    Color of text: http://tinyurl.com/cejgyj
    Check boxes and radio buttons in menu: http://tinyurl.com/d2chx5

    Also selected text in “Raven Graphite” skin might be less contrast.

  11. 11 Kirill Grouchnikov said at 10:04 pm on April 3rd, 2009:

    Andrey,

    Thanks for the detailed feedback. These issue should be addressed in the latest 5.2dev drop of Substance and Substance SwingX plugin.

    1. The FG for task pane SwingX component in rollover under Magma, Raven Graphite and Raven Graphite Glass skins.
    2. The selected checkbox and radio button menu items under Raven Graphite and Raven Graphite Glass skins.
    3. Less contrast on text highlight under Raven Graphite and Raven Graphite Glass skins.

    Your feedback and attention to the details are much appreciated.
    Kirill

  12. 12 Andrey Eremchenko said at 1:05 am on April 4th, 2009:

    Selected checkbox inside table: http://tinyurl.com/c8f9v6

  13. 13 Kirill Grouchnikov said at 6:44 am on April 4th, 2009:

    Andrey, it looks like this problem is across all skins. Will be fixed shortly.

    Thanks
    Kirill

  14. 14 Kirill Grouchnikov said at 7:56 am on April 4th, 2009:

    Andrey,

    This has been fixed in the latest 5.2dev drop of core Substance library.

    Thanks
    Kirill