Jelle Pingen

Blight, from sketch to media player

Written on February 8, 2011

Those of you who visit the same internet communities as I do (in particular Encide and GUIStation) probably have seen this evolve from the first photoshop concepts. Those of you who follow me on Twitter, deviantART or have viewed my portfolio page recently have seen the full version already. I’m talking about my new skin for the Xion media player I released just two weeks ago: Blight.

The development of this particular skin has been very, very slow. Would you believe that I made the original sketch of this design over a year ago? Not kidding. There have just been a load of other things asking most of my time, leaving little for designing. At the time I had to prepare for my final exams, after which I dedicated most of my free time to designing and developing this portfolio/blog. And then the 2011 Encide Interface Battlebay came along, which you can read about in my previous blog post. Ofcourse, I have made updates to my Blight skin every month or so, but after I finished my Battlebay piece I decided to sit down and finally get the skin done and coded.

If I recall correctly, a quite old piece from an interface designer on deviantART called Bency sparked my inspiration. It is the My World piece from 2008, shown on the left here. I really liked the big orb on top, in combination with the glass. For me personally, glass is one of the hardest things to create in photoshop. It’s transparent, but does have some shading when curved. I find it quite challenging to find the right balance between transparency and shading, to make it look like glass without losing those shiny properties.

With this idea in my head, I started sketching the inital concept. You must know that sketching is something I usually don’t do before creating an interface like this. I normally dive straight into photoshop, as I don’t find that my sketching skills do justice to my ideas. I’ve added some sketching scans to this blog post for you to laugh at. As you can see, I left the screen area blank, because adding in all the icons would make the sketch too cluttered for me since it was just to get the general idea and lay-out down. I then imported these sketches into photoshop, combined them a bit (cut a piece from one sketch and lay it over another sketch) to get the general interface shape I wanted.

Then the fun started for me; photoshop! I started with laying down the basic shapes over the sketch, and then shaded each part accordingly. At this stage, both Encide and GUIStation helped me a lot with further development of the ideas and the interface. The main point of critic was the size. As I made the sketches quite large, my skin design became quite large as well. But (almost) nobody likes a huge media player sitting on their desktop, do they? My biggest concern with resizing the whole thing was losing the details. In the end, I succeeded (well, at least in my opinion) in making the skin a good chunk smaller without losing too much details I spent so much time on.
The coding part was a breeze, as are most skins for Xion. That’s why I love the media player so much. Transforming the photoshop file into a working Xion skin feels so intuitive, I can really recommend it to anyone looking into skinning!

I am quite satisfied with the end result. Just a bit disappointed that I didn’t have the time to make a matching playlist, since I really wanted to finally release this thing. So, most important, what do you think?

Copyright © 2012 - Jelle Pingen
Proudly powered by WordPress MyRule on deviantART J_Pingen on Twitter