Sea Glass visuals as a Substance skin

November 7th, 2009 | 9 Comments »

Some time has passed since Ken Orr has announced that he has teamed up with Kathryn Huxtable to work on a new Sea Glass look-and-feel for Swing applications, and i thought that it would be interesting to put Substance and its Jitterbug editor to the test.

Since i don’t have the full artwork for Sea Glass, I based the current implementation on the following mockup:
controls

And this is how a Substance sample Sea Glass skin looks like after about half an hour of work:

https://substance-samples.dev.java.net/images/seaglass/seaglass-substance1.png

https://substance-samples.dev.java.net/images/seaglass/seaglass-substance2.png

https://substance-samples.dev.java.net/images/seaglass/seaglass-substance3.png

The skin itself is a 122-line color scheme definition (created in Jitterbug) and about a 100 lines of Java code that associates the color schemes with the relevant control states and control visual areas. Note that this is not supposed to be a perfect reproduction of the target design, but more of an exploration of Substance skinning layer capabilities.

Related posts:

  1. Reworking Office Blue skin for Substance 5.1 If you’re following my Twitter stream, you know that over the last few days i...
  2. Substance 5.1 – polishing the Office Blue skin The Office Blue skin in Substance look-and-feel has already been reworked to be closer to...
  3. Reworking Office Silver skin for Substance 5.1 Following the work that has been done to revisit and polish the Office Blue skin...
  4. From Photoshop to code – step 5, polishing the visuals In this entry i’m going to talk about the fifth step in the process of...

9 Comments on “Sea Glass visuals as a Substance skin”

  1. 1 Kathryn Huxtable said at 10:15 am on November 7th, 2009:

    Nice. We really are using a very light background and rounded scroll bars.

    We’ve slowed down because Ken has a day job and it’s heated up, and mostly because I’ve slowed down. (Too much playing Civilization IV Beyond the Sword, plus going through all 45 Monty Python’s Flying Circus episodes.)

    -K

  2. 2 Pedro Duque Vieira said at 2:31 pm on November 7th, 2009:

    Wow, that skin looks pretty amazing on substance.

    Kirill I would love to see a tutorial on how you do it.

    Thanks.

  3. 3 obinna said at 3:53 pm on November 7th, 2009:

    yea,me too. i’ll like to see how to utilize the codes to use this skin. does flamingo suppor this skin?

  4. 4 Kirill Grouchnikov said at 4:15 pm on November 7th, 2009:

    Pedro, Obinna – have you looked at the linked sources of the skin?

    Thanks
    Kirill

  5. 5 Java desktop links of the week, November 9 | Jonathan Giles said at 1:14 pm on November 8th, 2009:

    [...] attention to detail that most look and feels neglect to pay attention to. Finally, Kirill wrote a Sea Glass skin for Substance, based on the details outlined by Ken Orr and Kathryn [...]

  6. 6 joe said at 3:45 pm on November 9th, 2009:

    It would look nicer if the background would be white (like in the mockup)

  7. 7 Pedro Duque Vieira said at 7:56 am on November 10th, 2009:

    Kirill,

    Yes I have. My interest is more on your use of jitterbug to get the colors. how you get them? How do you create the color schemes based on those colors you got with jitterbug?

    Thanks :)

  8. 8 zammbi said at 4:31 am on November 11th, 2009:

    I agree that the background looks better white, or could try a even lighter blue.

  9. 9 Kirill Grouchnikov said at 8:09 pm on November 12th, 2009:

    Everybody,

    The background color of the SeaGlass skin is now white.

    Thanks
    Kirill