• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EDT 07:03
CEST 13:03
KST 20:03
  • Home
  • Forum
  • Calendar
  • Streams
  • Liquipedia
  • Features
  • Store
  • EPT
  • TL+
  • StarCraft 2
  • Brood War
  • Smash
  • Heroes
  • Counter-Strike
  • Overwatch
  • Liquibet
  • Fantasy StarCraft
  • TLPD
  • StarCraft 2
  • Brood War
  • Blogs
Forum Sidebar
Events/Features
News
Featured News
Code S RO4 & Finals Preview: herO, Rogue, Classic, GuMiho0TL Team Map Contest #5: Presented by Monster Energy4Code S RO8 Preview: herO, Zoun, Bunny, Classic7Code S RO8 Preview: Rogue, GuMiho, Solar, Maru3BGE Stara Zagora 2025: Info & Preview27
Community News
Firefly suspended by EWC, replaced by Lancer2Classic & herO RO8 Interviews: "I think it’s time to teach [Rogue] a lesson."2Rogue & GuMiho RO8 interviews: "Lifting that trophy would be a testament to all I’ve had to overcome over the years and how far I’ve come on this journey.8Code S RO8 Results + RO4 Bracket (2025 Season 2)14BGE Stara Zagora 2025 - Replay Pack2
StarCraft 2
General
Firefly suspended by EWC, replaced by Lancer Jim claims he and Firefly were involved in match-fixing How herO can make history in the Code S S2 finals Rogue & GuMiho RO8 interviews: "Lifting that trophy would be a testament to all I’ve had to overcome over the years and how far I’ve come on this journey. Code S RO8 Results + RO4 Bracket (2025 Season 2)
Tourneys
[GSL 2025] Code S: Season 2 - Semi Finals & Finals WardiTV Mondays Sparkling Tuna Cup - Weekly Open Tournament $3,500 WardiTV European League 2025 Sea Duckling Open (Global, Bronze-Diamond)
Strategy
Simple Questions Simple Answers [G] Darkgrid Layout
Custom Maps
[UMS] Zillion Zerglings
External Content
Mutation # 478 Instant Karma Mutation # 477 Slow and Steady Mutation # 476 Charnel House Mutation # 475 Hard Target
Brood War
General
ASL20 Preliminary Maps BW General Discussion BGH Auto Balance -> http://bghmmr.eu/ Recent recommended BW games FlaSh Witnesses SCV Pull Off the Impossible vs Shu
Tourneys
[Megathread] Daily Proleagues [BSL 2v2] ProLeague Season 3 - Friday 21:00 CET Small VOD Thread 2.0 [BSL20] ProLeague Bracket Stage - Day 4
Strategy
I am doing this better than progamers do. [G] How to get started on ladder as a new Z player
Other Games
General Games
Stormgate/Frost Giant Megathread Path of Exile Nintendo Switch Thread Beyond All Reason What do you want from future RTS games?
Dota 2
Official 'what is Dota anymore' discussion
League of Legends
Which UAE App Developers Are Leading the Innovatio
Heroes of the Storm
Simple Questions, Simple Answers Heroes of the Storm 2.0
Hearthstone
Heroes of StarCraft mini-set
TL Mafia
Vanilla Mini Mafia TL Mafia Community Thread
Community
General
US Politics Mega-thread Things Aren’t Peaceful in Palestine UK Politics Mega-thread Russo-Ukrainian War Thread Vape Nation Thread
Fan Clubs
SKT1 Classic Fan Club! Maru Fan Club
Media & Entertainment
Korean Music Discussion [Manga] One Piece
Sports
2024 - 2025 Football Thread Formula 1 Discussion NHL Playoffs 2024 TeamLiquid Health and Fitness Initiative For 2023
World Cup 2022
Tech Support
Computer Build, Upgrade & Buying Resource Thread
TL Community
The Automated Ban List
Blogs
A Better Routine For Progame…
TrAiDoS
StarCraft improvement
iopq
Heero Yuy & the Tax…
KrillinFromwales
I was completely wrong ab…
jameswatts
Need Your Help/Advice
Glider
Trip to the Zoo
micronesia
Customize Sidebar...

Website Feedback

Closed Threads



Active: 33762 users

Team Liquid Overlay–In Game

Blogs > Raihn
Post a Reply
Normal
Raihn
Profile Blog Joined August 2008
United States216 Posts
Last Edited: 2012-11-25 03:42:39
November 23 2012 22:51 GMT
#1

[image loading]



I am very proud to present one of my latest ventures in live game streaming graphics. I was given the important task of creating Team Liquid Pro’s in game Starcraft 2 overlay. Team Liquid is perhaps the most well known Starcraft eSports entity in the English speaking world, and attracts thousands of viewers daily on their teams multiple live streams. You may find the very kind official announcement here

This overlay is designed to carry over the clean and functional style that is the spirit of Team Liquid’s gameplay first stance in eSports. Below I’ve outlined some design aspects of this overlay. Feel free to glance over my thoughts and submit feed back, if you wish.



Design Sample Youtube Video


Design aspects, challenges, and goals:

    Have as little a foot print on the game as possible while maximizing the brand impact.
  • A very difficult balance. Its like saying, ‘Shout as loud as possible with out being loud’.
  • We accomplish this by having a fairly dark shade to all aspects. Even places where you see highlights are actually quite dark, but only highlight in contrasts to the rest of the UI.

    Keep information prominent, but subdued an integrated.
  • Using darker fonts, but with thick outlines allow us to have subdue text without having it be too bright
  • Using icons and shorthand for links minimizes text
  • Adding slight color flares and changes to text make them feel more like visual elements that integrate than text element overlaid across the design

    Carry out the brand style and feel
  • Using the colors and base design elements allows the style of the brand to carry through
  • Having prominent and interesting Logo as well as a dedicated place for the Brand URL and SNS helps impress the brand.
  • The basic thought process of the design is. ‘Imagine the Teamliquid Website were cos-playing as Starcraft 2 UI in the Strarcraft Universe’. It sounds ridiculous, but when you are illustrating a complex design you need to have a consistent perspective to fall back to when things get complicated.

    Be as innovative as possible to ensure a unique and recognizable design.
  • Having a subtle full UI takeover is something quite unique.
  • The Team liquid Logo is integrated into the ‘world’ in which the Interface lives, instead of just laid over the design.
  • Portholes for ability icons and effects on the buttons that are showing through help our design separate from the pack with getting that little extra polish and quality.

    Ensure the players webcam is as large as possible
  • Keeping the frame thin allows us to maximize the web space. Also using ‘square’ and linear framing helps the design keep space that could be lost by applying a more curved and beveled design.

    Cover the absolute minimum screen space, only as much as to hide the native in game UI’s for each race.
  • Clean cuts while minimizing frequent angle shifts were the keys here.
  • Smart angles and a simple trim can go a long way.
  • Using a hash patterned allowed me to create interest and depth to the outer edges with out adding too many elements to the canvas.

    Allow for a tactful ad ticker
  • Taking the same punch-out theme employed to display the selection area of the UI and applying it to the ad ticker creates a familiar exception for the viewer, behind the frame there will be very active moving data.
  • These are almost like monitors set in the frame.
  • Keeping logos to mono color will help in relating the ads to the in-game world
  • We hope to add some liquid transitions, giving the design the feel of being some sort of dunk-tank for logos and ads. This strengthens the liquid theming.

    Try to evoke a ‘Liquid’ effect
  • The entirety of the UI is imbued with muted lights/highlights and subtle gradient shades. If you look closely, you may find that you are looking at a submerged Terran all terrain warmachine, silently it scopes its next target.
  • PS. Blizzard, ADD WATER UNITS!

    Resolve Timer Issue
  • The in game time is not a static sized graphic. The size morphs depending on what time it is. Below 9min 59sec mark it is smaller, but once the additional digit is added the plate for the clock expands.
  • Choosing to make the overlay graphic conform to the timer early game is the best case situation. It allows the timer to have the best look during the time in the game that it is most useful.
  • Additionally the seconds digit become less important the longer the game moves on, so having those be cut off is the best case scenario when information will be restricted.



Check out TL overlay progress comps Dropbox gallery


Thanks for reading over my design-nerd commentary. Feel free to submit feed back on what design choices you would make!

****
GraphicsRaihnForge.com - Let me know if you need something!
itsjustatank
Profile Blog Joined November 2010
Hong Kong9152 Posts
November 23 2012 23:06 GMT
#2
awesome job!
Photographer"nosotros estamos backamos" - setsuko
Al Bundy
Profile Joined April 2010
7257 Posts
Last Edited: 2012-11-23 23:34:38
November 23 2012 23:29 GMT
#3
Looks great, good job. I'm sorry, I wish I could give your more detailed feedback, but I can't seem to find any flaw. The colors and effects are spot-on, the design looks clean and sharp, I mean, you mentioned "Teamliquid Website cos-playing as Starcraft 2 UI", well I think you nailed it. The integrated TL logo looks quite good too.
o choro é livre
Epoxide
Profile Blog Joined March 2011
Magic Woods9326 Posts
November 23 2012 23:31 GMT
#4
I really like it. It doesn't feel so clumsy and odd like most overlays do. ~
LiquipediaSouma: EU MM is just Russian Roulette. Literally.
Epishade
Profile Blog Joined November 2011
United States2267 Posts
November 23 2012 23:33 GMT
#5
This looks really good. I don't really watch streams anymore but this has a really smooth and clean look compared to many other overlays I've seen streamers have.
Pinhead Larry in the streets, Dirty Dan in the sheets.
cLAN.Anax
Profile Blog Joined July 2012
United States2847 Posts
November 24 2012 00:20 GMT
#6
Whoa! Super cool! :-D Beautiful, yet efficient. I especially dig the colors and logos. Superbly done!
┬─┬___(ツ)_/¯ 彡┻━┻ I am the 4%. "I cant believe i saw ANAL backwards before i saw the word LAN." - Capped
Garnet
Profile Blog Joined February 2006
Vietnam9014 Posts
November 24 2012 00:54 GMT
#7
Awesome. Maybe make the corners less edgy / more round.
shizaep
Profile Blog Joined January 2011
Canada2920 Posts
November 24 2012 00:57 GMT
#8
Really awesome job. I especially love the touch where you left the bottom row for spells exposed.
You mean I just write stuff here and other people can see it?
Peekay.switch
Profile Blog Joined May 2010
Canada285 Posts
November 24 2012 01:01 GMT
#9
Super well polish, way above anything else I've seen!
Aerisky
Profile Blog Joined May 2012
United States12129 Posts
November 24 2012 01:07 GMT
#10
I dunno, I kind of like that sharpness, though maybe it's a bit too jagged? Hmm

Really nice job for sure :O
Jim while Johnny had had had had had had had; had had had had the better effect on the teacher.
yokohama
Profile Joined February 2005
United States1116 Posts
November 24 2012 01:32 GMT
#11
I really like it a lot. It would be really neat if there was the ability to make unit wireframes blue to match the overlay.
Antylamon
Profile Joined March 2011
United States1981 Posts
November 24 2012 02:12 GMT
#12
On November 24 2012 10:32 yokohama wrote:
I really like it a lot. It would be really neat if there was the ability to make unit wireframes blue to match the overlay.

If that were to be implemented, then the only way I can think of doing that is using a transparent blue over the selection area.
WikidSik
Profile Blog Joined November 2011
Canada382 Posts
November 24 2012 05:15 GMT
#13
man now i have to change cuz i CAME OMG THIS OVERLAY IS SOOOOOOO SEXY OMGOMGOMGOMG D:
Iv been here for 5.5 years. My other accounts are named "Sonu" and "Dalroti" || I had some more but I cant find them XD || known in sc2 as "Sonu"
Ziken
Profile Joined August 2010
Ghana1743 Posts
November 24 2012 08:30 GMT
#14
Without a doubt the best overlay I have seen for any team, and any game for that matter. Really well designed!!!
Every misfortune is a blessing in disguise.
Vestrel
Profile Blog Joined December 2010
Canada271 Posts
November 24 2012 08:53 GMT
#15
I love this overlay :D
Zerg.Zilla
Profile Joined February 2012
Hungary5029 Posts
November 24 2012 10:13 GMT
#16
It looks so awesome!:D
(•_•) ( •_•)>⌐■-■ (⌐■_■) ~Keep calm and inject Larva~
Grobyc
Profile Blog Joined June 2008
Canada18410 Posts
November 24 2012 14:48 GMT
#17
I love how the razer overlay in the bottom right reveals the very bottom bar so you can see if the streamer has an available (i.e. stim). Great job
If you watch Godzilla backwards it's about a benevolent lizard who helps rebuild a city and then moonwalks into the ocean.
iHirO
Profile Blog Joined January 2011
United Kingdom1381 Posts
November 24 2012 16:44 GMT
#18
It would be cool if the Team Liquid logo had an occasional shimmer effect like the league icons on battle.net.
GraphicsThis is for all you new people: I only have one rule. Everyone fights. No one quits. You don't do your job, I'll shoot you myself. You get me?
Raihn
Profile Blog Joined August 2008
United States216 Posts
November 25 2012 03:38 GMT
#19
Hey! Thanks for all the really kind comments, everyone! I didn't expect to see such feedback on my nerdy design notes, thanks so much! There are some cool ideas you guys mentioned! Some thing can't be currently done in the way overlays are utilized at this time. There are some ideas I'd like to look into, I'd like to keep the overlays continually progressing forward as much as possible.

Also, I'm really excited about what the expansions of Starcraft II could bring to the steaming and eSports community. An in-game streaming option might free up the possibility for a steaming UI overlay which might allow for more integrated aspects to personalize designs. It will be really interesting to see if options like this open up as eSports moves forward.

Thanks again for all the positive response! much <3!
GraphicsRaihnForge.com - Let me know if you need something!
geno
Profile Blog Joined October 2007
United States1404 Posts
Last Edited: 2012-11-25 06:47:32
November 25 2012 06:46 GMT
#20
As a frequent TL stream viewer, I really love your design overall. The sponsor/ad section is really neat and non-intrusive. The wide webcam is amazing and much appreciated. You even manage to add race icon and nationality flag as well, which is really cool. The whole design just melts into the background but still feels very TL-like.

The only part I don't like too much is how much it flares up around the in game timer for the flag and race icon, especially because it doesn't seem symmetrical with the right side (with twitter and facebook info). It doesn't help that that section also contributes to the timer problem as well. Overall, it just stands out a bit too much for me, can't help but stare at it during streams sometimes.

That said, I'm sure there are good reasons you did it the way you did, mainly lack of space and adding symmetry. I think the race icon would fit pretty neatly below the minimap pings and to the left of the TL logo, but I really don't know how you could get the flag in somewhere else as well without looking cluttered. And then you have to deal with it being even less symmetrical than now. So I don't know.

In any case, really cool design. Looking forward to seeing it used from all the TL guys more.
ClysmiC
Profile Blog Joined December 2010
United States2192 Posts
November 25 2012 17:53 GMT
#21
Looks really well done! Very good job, look forward to seeing it on all the streams ^_^
y0su
Profile Blog Joined September 2011
Finland7871 Posts
November 27 2012 10:09 GMT
#22
I just realized that this overlay allows you to see the spells/abilities on the very bottom row! I really like that (although some abilities/upgrades won't visible it's still much better than all the other overlays that hide everything).
pathy
Profile Blog Joined December 2009
Taiwan619 Posts
November 27 2012 11:38 GMT
#23
Grats on the brush brutha, nice work ;P
Graphicscolosi suck
Raihn
Profile Blog Joined August 2008
United States216 Posts
November 27 2012 21:39 GMT
#24
Thanks so much! Quite the honor!
GraphicsRaihnForge.com - Let me know if you need something!
reikai
Profile Joined January 2011
United States359 Posts
November 28 2012 01:39 GMT
#25
On November 24 2012 08:33 Epishade wrote:
This looks really good. I don't really watch streams anymore but this has a really smooth and clean look compared to many other overlays I've seen streamers have.

This! Job well done. If only you released one for the public :D
Et Ducit Mundum Per Luce. :T:
Normal
Please log in or register to reply.
Live Events Refresh
Wardi Open
11:00
$400 Monday #40
WardiTV150
Rex58
OGKoka 58
CranKy Ducklings45
Liquipedia
[ Submit Event ]
Live Streams
Refresh
StarCraft 2
ProTech77
Rex 46
OGKoka 22
StarCraft: Brood War
Britney 28202
Rain 4401
Horang2 3887
Mini 607
actioN 406
EffOrt 320
Mong 315
Stork 286
Zeus 264
Sharp 219
[ Show more ]
Larva 170
Pusan 150
Light 132
PianO 125
JulyZerg 117
ZerO 88
Killer 64
Snow 60
JYJ45
Rush 43
sSak 39
Backho 32
sorry 27
Movie 26
Sacsri 15
zelot 13
soO 10
Noble 10
Shine 8
Icarus 4
ivOry 3
Dota 2
420jenkins560
XcaliburYe537
Fuzer 228
Counter-Strike
olofmeister2436
shoxiejesuss1272
x6flipin390
Other Games
singsing1362
C9.Mang0400
Liquid`RaSZi390
crisheroes357
B2W.Neo93
Lowko79
ZerO(Twitch)12
ArmadaUGS0
Organizations
Dota 2
PGL Dota 2 - Secondary Stream12571
Other Games
gamesdonequick497
StarCraft 2
Blizzard YouTube
StarCraft: Brood War
BSLTrovo
sctven
[ Show 13 non-featured ]
StarCraft 2
• LUISG 48
• AfreecaTV YouTube
• intothetv
• Kozan
• IndyKCrew
• LaughNgamezSOOP
• Migwel
• sooper7s
StarCraft: Brood War
• iopq 2
• BSLYoutube
• STPLYoutube
• ZZZeroYoutube
Dota 2
• lizZardDota2129
Upcoming Events
Replay Cast
12h 58m
Replay Cast
22h 58m
RSL Revival
22h 58m
Cure vs Percival
ByuN vs Spirit
PiGosaur Monday
1d 12h
RSL Revival
1d 22h
herO vs sOs
Zoun vs Clem
Replay Cast
2 days
The PondCast
2 days
RSL Revival
2 days
Serral vs SHIN
Solar vs Cham
RSL Revival
3 days
Reynor vs Scarlett
ShoWTimE vs Classic
uThermal 2v2 Circuit
4 days
[ Show More ]
SC Evo League
5 days
Circuito Brasileiro de…
5 days
Sparkling Tuna Cup
5 days
Liquipedia Results

Completed

Proleague 2025-06-11
2025 GSL S2
Heroes 10 EU

Ongoing

JPL Season 2
BSL 2v2 Season 3
BSL Season 20
KCM Race Survival 2025 Season 2
NPSL S3
Rose Open S1
CSL 17: 2025 SUMMER
Copa Latinoamericana 4
Murky Cup #2
BLAST.tv Austin Major 2025
ESL Impact League Season 7
IEM Dallas 2025
PGL Astana 2025
Asian Champions League '25
BLAST Rivals Spring 2025
MESA Nomadic Masters
CCT Season 2 Global Finals
IEM Melbourne 2025
YaLLa Compass Qatar 2025
PGL Bucharest 2025

Upcoming

CSLPRO Last Chance 2025
CSLPRO Chat StarLAN 3
K-Championship
SEL Season 2 Championship
Esports World Cup 2025
HSC XXVII
Championship of Russia 2025
RSL Revival: Season 1
BLAST Open Fall 2025
Esports World Cup 2025
BLAST Bounty Fall 2025
BLAST Bounty Fall Qual
IEM Cologne 2025
FISSURE Playground #1
TLPD

1. ByuN
2. TY
3. Dark
4. Solar
5. Stats
6. Nerchio
7. sOs
8. soO
9. INnoVation
10. Elazer
1. Rain
2. Flash
3. EffOrt
4. Last
5. Bisu
6. Soulkey
7. Mini
8. Sharp
Sidebar Settings...

Advertising | Privacy Policy | Terms Of Use | Contact Us

Original banner artwork: Jim Warren
The contents of this webpage are copyright © 2025 TLnet. All Rights Reserved.