FXOpen SC2 Overlays

Deleted User 135096

3624 Posts

February 12 2013 15:44 GMT

Today I'd like to do something different. I've been meaning to write this blog for a while and waiting until I had finished until revealing what I've been working on for the last month or two in my free time (amidst all the teaching, performing, and a few large projects you'll hopefully see in the near future). If you haven't guessed yet the project I'd like to unveil to everyone is the official streaming overlays for the entire FXOpen SC2 roster:

I was approached a few months ago by Seeker and Unstable about doing design work for FXOpen esports, and while I am a self taught graphic designer and somewhat self conscious of my ability to create robust, professional looking designs, I was also excited about really attempting to task my abilities in this area and seeing what I could come up with.

I should note that during this process I started working on my blog The Economy of Design, and I had finished the main chunk of work on these overlays before I began that little excursion (well, until I realized hots would make me fiddle with things, again).

The idea behind this design was originally to mimic a real world electronics object, in taking some of the elements from modern technologies and incorporate them, but I quickly found out that conceptually speaking it was a good idea, just not entirely in practice. The first initial idea was a single flat element with inlays and no breaks in the body. However I found quickly that the idea I had wasn't really in line with the sc2 UI and therefore seemed to stick out much more than I liked. So I went back and started from scratch to try to create, not an overlay, but my own UI salvaging as much as I could but in a way that was more in line with the current UI. I also wanted to centralize the thematic relationship between all of the graphics associated with streaming and worked around that idea, which began with the offline screen. Finally, Raihn's overlay blog and small little hints on core ideas or principles in his design for TeamLiquid helped me to ask similar questions, and keep me aware of important elements/ideas when working on this project.

Overall the hardest aspect of the design was using the minimal amount of materials and space, while keeping a fluid design aesthetic, which is why when I realized that hots changed the idle worker, army, warpgate, and clock positions I started tearing my hair out when trying to make sure the design shift would work appropriately. The other difficulty was trying to appropriately accentuate important materials or objects while not taking up too much screen space in the process. As an example of the amount of space used, I originally created outlines of the current UI's to make sure I was being as close as possible in some areas, while taking into account that the zerg overlay moved as well.

racial UI outlines superimposed

Additionally I also, due to my awareness of financial considerations when running a team, made a concerted effort to design around the idea of potential ad space or billboard rolls, and to try to maximize that to potential investors, while keeping it within the parameters of the design. Here you'll notice in the main and in-game overlays there are two billboard rolls (can't see them here for obvious reasons) that more and more often teams have begun to implement (EG and TL are great examples) for their streamers/teams.

Finally, as I'm definitely interested in how things develop and mature over time, here are a few design samples from the earlier iterations or ideas just to see what I initially came up with, and the subsequent tweaking in between this and the final product. Just as a note of interest, I also had at this time decided that I would try to do as much as possible in illustrator in order to learn how to work with vectorized content better, and so aside from the texturing overlay (and the game screens) at the very end of the process, everything was done in Illustrator.

+ Show Spoiler [in game overlay] +

+ Show Spoiler [main overlay] +

Overall I think this project has been a big success for me, both in that the end result is unique and I hope compelling, but also in that I learned a ton on some UI design challenges and other more subtle areas in general that will really help me be a better artist in the future.

As always, feedback and ideas around these designs are welcome and appreciated, but I hope you like the finished product!

icydergosu

528 Posts

February 12 2013 15:49 GMT

I think most overlays people use look like shit.
Yours on the other hand looks really great!

shiroiusagi

SoCal, USA3955 Posts

February 12 2013 15:53 GMT

Wow REALLY nice.

I likes. <3

TheWahbinator

United States131 Posts

February 12 2013 16:08 GMT

Nice, the camera spots I created for them in 2011 were novel back then (with an unskinned command UI only imposed team logos/social buttons) but you really took it to the next level here. Just make sure to exapnd the timer to reach double digit minute counts.

Deleted User 135096

3624 Posts

February 12 2013 16:36 GMT

Thanks! Actually the timer expands rightward so there's no real issue of clipping for above 10 minute games at least in the minute column (sec the 1st digit is chopped a little, but it is of course a compromise for the game ui showing or not showing).

FXOTheoRy

United States519 Posts

February 12 2013 17:43 GMT

WHAT I GET ONE OF THESE :O. i'm so undeserving of this amazing work ; ___ ; <3 <3

opterown

Australia54784 Posts

February 12 2013 19:56 GMT

looks damn solid!

BreAKerTV

Taiwan1658 Posts

February 12 2013 21:41 GMT

Love it, bro. Keep up the good work!

Seeker

Where dat snitch at?37096 Posts

February 12 2013 22:34 GMT

It's just plain Seeker now. No capital K or R.

Nik you f*ing rock! Thank you so much for all the hard work you've been putting in so far!!!

Deleted User 135096

3624 Posts

February 12 2013 22:53 GMT

#10

Oh I probably should also have mentioned for curiosities sake that I have about 23 images from 20 different teams or so on my HDD that I referenced from time to time as a measure of how identifiable the look was, and how the overlay (mine and others) was constructed and presented. Also good to know Seeker, I wondered about that.