• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EDT 15:00
CEST 21:00
KST 04:00
  • 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 RO8 Preview: Rogue, GuMiho, Solar, Maru0BGE Stara Zagora 2025: Info & Preview27Code S RO12 Preview: GuMiho, Bunny, SHIN, ByuN3The Memories We Share - Facing the Final(?) GSL47Code S RO12 Preview: Cure, Zoun, Solar, Creator4
Community News
BGE Stara Zagora 2025 - Replay Pack0Weekly Cups (June 2-8): herO doubles down1[BSL20] ProLeague: Bracket Stage & Dates9GSL Ro4 and Finals moved to Sunday June 15th13Weekly Cups (May 27-June 1): ByuN goes back-to-back0
StarCraft 2
General
BGE Stara Zagora 2025 - Replay Pack Code S RO8 Preview: Rogue, GuMiho, Solar, Maru Jim claims he and Firefly were involved in match-fixing The SCII GOAT: A statistical Evaluation StarCraft 1 & 2 Added to Xbox Game Pass
Tourneys
Sea Duckling Open (Global, Bronze-Diamond) Bellum Gens Elite: Stara Zagora 2025 $3,500 WardiTV European League 2025 Sparkling Tuna Cup - Weekly Open Tournament SOOPer7s Showmatches 2025
Strategy
[G] Darkgrid Layout Simple Questions Simple Answers [G] PvT Cheese: 13 Gate Proxy Robo
Custom Maps
[UMS] Zillion Zerglings
External Content
Mutation # 477 Slow and Steady Mutation # 476 Charnel House Mutation # 475 Hard Target Mutation # 474 Futile Resistance
Brood War
General
BGH auto balance -> http://bghmmr.eu/ FlaSh Witnesses SCV Pull Off the Impossible vs Shu BW General Discussion StarCraft & BroodWar Campaign Speedrun Quest Will foreigners ever be able to challenge Koreans?
Tourneys
[BSL20] GosuLeague RO16 - Tue & Wed 20:00+CET [ASL19] Grand Finals NA Team League 6/8/2025 [Megathread] Daily Proleagues
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 What do you want from future RTS games? Armies of Exigo - YesYes? Nintendo Switch Thread Path of Exile
Dota 2
Official 'what is Dota anymore' discussion
League of Legends
LiquidLegends to reintegrate into TL.net
Heroes of the Storm
Simple Questions, Simple Answers Heroes of the Storm 2.0
Hearthstone
Heroes of StarCraft mini-set
TL Mafia
TL Mafia Community Thread Vanilla Mini Mafia
Community
General
US Politics Mega-thread Things Aren’t Peaceful in Palestine Russo-Ukrainian War Thread Vape Nation Thread European Politico-economics QA Mega-thread
Fan Clubs
Maru Fan Club Serral Fan Club
Media & Entertainment
Korean Music Discussion [Manga] One Piece
Sports
2024 - 2025 Football Thread Formula 1 Discussion NHL Playoffs 2024
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: 39388 users

Team Liquid Overlay–In Game

Blogs > Raihn
Post a Reply
1 2 Next All
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.
1 2 Next All
Please log in or register to reply.
Live Events Refresh
Next event in 5h 1m
[ Submit Event ]
Live Streams
Refresh
StarCraft 2
mouzHeroMarine 721
BRAT_OK 100
UpATreeSC 79
MindelVK 43
StarCraft: Brood War
Britney 5524
Sea 2406
Mini 627
Dewaltoss 180
Aegong 48
sSak 27
yabsab 18
Sacsri 17
Counter-Strike
fl0m6622
olofmeister3331
rGuardiaN90
Heroes of the Storm
Liquid`Hasu420
Khaldor177
Other Games
tarik_tv40686
gofns13842
Grubby1078
FrodaN789
Beastyqt590
ceh9410
shahzam279
Mew2King84
TKL 72
Trikslyr62
ZombieGrub54
QueenE50
Organizations
Dota 2
PGL Dota 2 - Main Stream1268
Other Games
BasetradeTV92
StarCraft 2
angryscii 48
Blizzard YouTube
StarCraft: Brood War
BSLTrovo
sctven
[ Show 21 non-featured ]
StarCraft 2
• davetesta26
• Reevou 4
• Kozan
• sooper7s
• Migwel
• AfreecaTV YouTube
• LaughNgamezSOOP
• intothetv
• IndyKCrew
StarCraft: Brood War
• Michael_bg 6
• FirePhoenix4
• STPLYoutube
• ZZZeroYoutube
• BSLYoutube
Dota 2
• masondota21254
League of Legends
• Nemesis5424
• Jankos1576
• TFBlade1047
Other Games
• imaqtpie966
• Shiphtur332
• WagamamaTV165
Upcoming Events
PiGosaur Monday
5h 1m
GSL Code S
14h 31m
Rogue vs GuMiho
Maru vs Solar
Online Event
1d 5h
Replay Cast
1d 7h
GSL Code S
1d 14h
herO vs Zoun
Classic vs Bunny
The PondCast
1d 15h
Replay Cast
2 days
WardiTV Invitational
2 days
OSC
2 days
Korean StarCraft League
3 days
[ Show More ]
SOOP
3 days
CranKy Ducklings
3 days
WardiTV Invitational
3 days
Cheesadelphia
3 days
CSO Cup
3 days
GSL Code S
4 days
Sparkling Tuna Cup
4 days
Replay Cast
5 days
Wardi Open
5 days
Replay Cast
6 days
Replay Cast
6 days
RSL Revival
6 days
Cure vs Percival
ByuN vs Spirit
Liquipedia Results

Completed

CSL Season 17: Qualifier 2
BGE Stara Zagora 2025
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
2025 GSL S2
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
BLAST Open Spring 2025

Upcoming

Copa Latinoamericana 4
CSLPRO Last Chance 2025
CSLPRO Chat StarLAN 3
K-Championship
SEL Season 2 Championship
Esports World Cup 2025
HSC XXVII
Championship of Russia 2025
Murky Cup #2
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.