TEEPEE

Incoming transmission. Early January 2019. The signal was received and news quickly broke. Our squad over at Visuals by Impulse had received new mission directives. We had been approached privately by Tyler ‘TeeP’, the Call of Duty legend. Our assignment? Twitch stream design and custom animation, worthy of esports royalty. Time to suit up.

The project promised to be one of our most challenging yet. Like the competitor he is, TeeP was looking for a world-class design – no settling for second-best here. Project scale was daunting, encompassing our full suit of stream design and animation products. On top of that, Tyler requested expedited service, meaning final products needed to be delivered ahead of our standard turnaround window. Was our team up to the task? You better believe it. Like special operatives preparing for a dangerous new deployment, we bid farewell to our loved ones and buckled up for an intense, action-packed few weeks.

TeeP was no ordinary customer – his exploits & achievements in the competitive COD scene were legendary. From CompLexity to Evil Geniuses to Team Envy, man has repped some of the most prestigious esports squads in the game. With 18 pro Call of Duty victories in his belt – including 2014 World Champ – TeeP is one of the acclaimed competitors to ever grace the esports stage. After a brief but successful stint as caster for the 2017 COD World League (following his retirement in 2016), Tyler scored a new title for the resume: Coach of the pro OpTic Gaming COD crew. Under his watch, the team took gold in the 2019 CWL Las Vegas Open and is now favorited to win the CWL Championship. Dude’s like a 5-star General of the esports arena.

All the while, TeeP’s official Twitch channel was catching fire, exploding onto the FPS livestream scene like a high-velocity mortar round. Clocking in at over 230K Followers and scoring sponsorships with ScufGaming, DXRacer, & TurtleBeach, TeeP was establishing himself as one of the Twitch ‘bigs’. The problem was, Tyler’s branding had yet to catch up with his celebrity status and illustrious career. What overlays and stream design he DID have felt dated and one-dimensional, holding him back from penetrating into the Twitch elite. His stream presentation lacked the animated, multi-dimensional look that was coming to define the industry. That’s where we came in.

8 short weeks later, our mission was complete and final goods were delivered. The end result was a crowning achievement of teamwork and determination, standing out as one of our proudest projects to date. It’s an explosive, adrenaline-pumping design, worthy of one of the Kings of Call of Duty. Our grind and innovation had paid off – TeeP was beyond stoked with the new look. You can find him proudly rocking it on-stream today.

So stick around as we walk you through the creation of Tyler TeeP’s new stream digs. Take a peek behind the design curtain as we guide you through the creative process – all from our artists’ unique perspectives. From opening sketches to final product. So lace up those boots. We’re heading to the front lines.

PROJECT OVERVIEW

The seeds for OpTic Teep’s project had actually been planted months earlier. Our team had the opportunity to chat with Tyler during TwitchCon 2018, as we met with fellow VBI alum, Jack ‘CouRageJD’. The two are close friends, even playing on the same squad during the TwitchCon Black Ops 4 ‘Doritos Bowl’ tournament. In fact, it was Jack who suggested TeeP reach out to us for his stream overhaul.

Once Tyler reached out privately, our squad moved into action. We arranged a kickoff Discord call between TeeP and our project managers, to obtain a clearer vision of his expectations and brand goals. Originally, project plans included only stream alerts; Tyler wanted a set of new, animated Twitch alerts, in addition to three full-screen, ‘gifted-sub’ animations. But we were just getting started. Like a nuclear arms race, the project quickly grew to include custom Twitch panels, animated stream screens, live overlays, and a transition animation. Tyler would soon be bringing some SERIOUS firepower to his stream.

Prior to working with VBI, TeeP had been rocking a set of stream overlays provided by his team over at OpTic Gaming. It was a sleek, modern look, incorporating design elements from the OpTic branding kit – including the organization’s iconic green-white-black color scheme. The graphics were distributed to everyone on OpTic Gaming’s roster, and they provided a solid design foundation for new Twitch streamers. What they offered in style however, they lacked in originality and customization. Since each OpTic member was rocking similar visuals, it was often difficult to distinguish who was actually streaming at first glance. The design felt ‘cookie-cutter’; more a representation of the OpTic brand than each individual streamer. They also lacked animation, presenting only a static, one-dimensional look. It was clear that Tyler was looking for something more dynamic and personal; a design that mixed his own unique ‘TeeP’ branding with OpTic design themes.

So how to make the design feel uniquely ‘TeeP’? Well, for starters, Tyler’s loyal Subscriber community has been appropriately dubbed the ‘TY Fighters’. A creative play on his name, for sure, but also a direct reference to the ‘TIE Fighters’ of Star Wars lore. If you’re a Star Wars junkie, you’re well aware of the legendary TIE Fighter; an iconic symbol of the Empire and a symbol of fear across the galaxy. The unique circular shape, the unmistakable whine of their engines, the deft speed and maneuverability… Heck, even Darth Vader and Kylo Ren had their own personal version of the Fighter. OpTic TeeP wanted to build up the TIE as the foundation of his new design, and we were as thrilled as a couple of newly-admitted cadets at the Imperial Academy.

At the same time, the design needed to reflect Tyler’s Call of Duty background. As his go-to game – and the title that made him an esports icon – TeeP’s stream visuals needed to incorporate certain elements from the COD brand. We wanted the design to feel rugged and minimalist, with heavy covert, special forces influences. For a Black Ops 4-inspired look, we implemented high-tech effects and patterns. TeeP’s entire overlay layout was designed with COD’s in-game UI in mind, while also allowing flexibility should Tyler decide to venture into other FPS titles. The military theme paired well with the TeeP brand – after all, the title ‘TY Fighters’ is also reminiscent of an army of loyal soldiers, awaiting their battle commander’s orders.

As for colors, Tyler wanted to stick with the iconic palette of his esports organization, OpTic Gaming. Neon green; the foundation of TeeP’s design color palette, providing a striking, unique look. The charcoal-grey (almost black), supplying us with deep, dark backdrops from which text and highlights emerge into the foreground. And the secondary accent of pure-white, contrasting sharply against dark backgrounds for a clean, professional appearance. Because even the most hardened battle-veterans need to consider color coordination.

There was also animation style to consider. In this case, we opted for high-velocity, aerial motion design, to match TeeP’s ‘TIE Fighter’ theme. Motion blurs, speed lines, gusts of wind, and rapid in-and-out animations would all be used extensively throughout the presentation. Meanwhile, digital swipes and pulsing energy currents provided a cyber, digital look that paired well with the high-tech Black Ops 4 theme.

Themes and priorities had been nailed down, but there was one final question to resolve. Which of our designers were up to the task? Luckily, we knew the perfect guys for the job. Enter Kadu and Bruno, our dynamic duo. The Brazilian dream team. Straight out of São Paulo, these two were our ace in the hole – gifted operatives ready for deployment. With Kadu managing Tyler’s stream design and animation, and Bruno running point on coding and engineering, we knew TeeP’s project was in good hands.

Our team was ready, equipped and prepared for the battles to come. Like a team of mercenaries for hire, we were ready to get our hands dirty. First up, overlays.

OVERLAYS

We had boots on the ground, and our first target was Tyler TeeP’s custom webcam overlay. But what was the plan of action?

Heading into the project, we knew we wanted to keep TeeP’s live overlay layout condensed and minimalist. Like most competitive esport streamers, Tyler’s stream presentation was all about the gameplay. Large, flashy visuals would only distract from the FPS action, potentially obstructing in-game UI’s as well. To counter this, we aimed for a tight, streamlined look that took up as little on-screen real estate as possible.

The best way to achieve this was combining several stream elements into one. More casual, engagement-oriented streamers may feature several different overlay graphics in their layout; ex, one for webcam, one for stream information (recent sub, top dono, etc), perhaps a chat box… We would do the opposite for OpTic TeeP, creating a single ‘main hub’ that merged webcam and stream ticker for a simplified look. A dynamic, multi-purpose, ‘ultra-cambox’.

First step was to engineer the static design. After a few variations, we pushed forward with a modern, digital display that balances energetic accents with a minimalist look. The cambox itself is simplified, with thin, smooth black borders. The iconic ‘TY Fighters’ logo (more on this later) looks on from above TeeP’s camera, flanked by two neon-green energy bars for a symmetrical, weighty look.

Below the cam is where the real fun begins. Four main quadrants display Tyler’s vital stream tickers. On the left, Sub Train timer and Top Donator. To the right, Total Subs and Recent Sub. Centered above in neon green, a separate ticker tracks Sub Points. All of this information is held within a modern, synthetic frame featuring smooth, clean borders.

We used a deep background of dark-gray and black, so that text and brighter accents would pop into the foreground. Neon-green provides energetic accents and highlights, while retaining that iconic, OpTic Gaming feel. Text is displayed in white with a digital, analog font for a professional military look.

Now it was time to inject some momentum via motion design. At the top of the frame, bright energy currents are pumped from the TY-Fighters logo via two lateral rods. As the energy moves sideways, the two flanking energy bars are filled up, until traveling downwards behind TeeP’s cambox. Moments later, it reemerges at the bottom of the overlay, coursing through the stream ticker boxes and expelling a wave of charged current. At this point, the cycle begins anew from the top of the frame, injecting fresh new energy to the design. Like a cybernetic, mechanized, beating heart.

Overall, the design feels sleek and military-grade. High-tech, to pair with Black Ops 4 branding, while retaining a minimalist, streamlined style. Animated effects add momentum and personality, creating an intense,  adrenaline-pumping experience. This overlay setup would be TeeP’s primary, go-to weapon in the wars to come. But there were more battles to be fought.

TWITCH ALERTS

With live overlay in hand, it was time to shift focus towards OpTic TeeP’s Twitch stream alerts. Our squad stepped into their cockpits, and prepared to wage war in the name of the Galactic Empire.

Remember that ‘TY-Fighters’ logo we mentioned above? Well it would come in handy here. Tyler had this logo specially-designed for his Twitch Subscriber community, prior to working with VBI. He asked us to animate the design and feature it in his new stream alerts.

The design is aggressive and sleek, earning our team’s nod of approval. To the right, the iconic TIE Fighter of Star Wars fame is featured in OpTic colors of neon-green and dark, charcoal gray. The fighter thrusts forward – boosters at max speed – expelling plumes of jet fuel and speed lines behind. Extending left, a bold logotype displays the title ‘TY FIGHTERS’ in thick lettering – using both white and green colors to separate the text. Dividing the logotype horizontally, a sharp, thin jet stream races across the view. So how to animate this beauty? Off to the storyboard we went.

We started with the in-animation, and TeeP wanted something energetic and explosive here. The TIE Fighter bursts into view from the left, expelling clouds of dust and jet fuel behind. It races across the screen as engines whir, before coming to a halt on the other side. The craft hovers in mid-air, bobbing up and down as the camera tracks its movement through space. Text extends behind it, indicating first alert type, then suddenly switching to viewer name and alert specifics. As the alert text transitions, the ship fires its primary cannons, triggering the iconic TIE blaster noise heard in theStar Warsfilms. A few moments later, the fighter turns on its boosters and jets off the screen.

We would create three different variations of these alerts, for New Donations, New Subscribers, and Recurring Subscribers. The final design is swift and aggressive, with explosive in- and out-animations. The motion design creates a spike of energy to match the celebratory atmosphere – while still taking up minimum screen real estate to avoid interfering with Tyler’s gameplay presentation. If the webcam is Tyler’s primary weapon, these stream alerts are his trusty sidearm – ready to spring into action at a moment’s notice. But we were just getting started.

GIFTED SUB ALERTS

Now it was time for a full-on, aerial assault. OpTic TeeP had seen what we had done for CouRageJD’s ‘Gifted Sub’ stream alerts. Epic, full-screen, custom animation. The stuff of legend. Like the competitor he is, Tyler wanted a set of his own. Three, to be exact. And he wanted to go big. Above and beyond any Twitch alerts our team had done before. We strapped in for the ride.

Tyler wanted his gifted-sub notifications to be broken into three tiers, varying based on the size of the donations. The first tier ranges from 1-49 gifted subs; anything in that range triggers our Tier 1 full-screen animation. Tier 2 ranges from 50-99. For the ultra-elite, our Tier 3 alert triggers at 100 and beyond.

Let’s be clear. These are HUGE donations. Anyone support TeeP and the TY Fighter community at this scale deserves to be hailed like the conquering hero they are. Tyler wanted the designs to be explosive and grandiose to celebrate the momentous occasion. For the moment at least, all attempts at minimalism were thrown by the wayside. Go big or go home. We started sketching out some storyboards.

Our first challenge was the Tier 1 fullscreen alert. The animation kicks off innocently enough, as speed lines creep across the corners of the screen. Suddenly the lead fighters of a TIE assault squad jet across the view. As more flanking fighters pass – leaving streaks of neon green in their wake – one suddenly lets loose a thermite bomb. The bomb erupts in a bright, anime-inspired explosion, leaving behind a large text overlay indicating the quantity of gifted subs. A few moments later, the rear assault fighters pass by the camera, swiping away the overlay text and returning to in-game action.

At 50 gifted-subs, things really start getting wild. We zoom in on a lone TIE Fighter in pursuit, roaring across a neon-green horizon as speed lines blow by. Suddenly the fighter pulls ahead, only to be trailed by a trio of heat-seeking missiles. The warheads hover for a moment, as light reflects off their metallic surfaces and fiery jet-fuel trails behind. Oh, and don’t forget the trio of pretty pink ribbons neatly tied to these all-destructive, harbingers of doom (these are GIFTED subs, after all…)

Suddenly the missiles continue their pursuit, zooming off-screen and making impact. The resulting explosion sends shockwaves, as gusts of debris and wind blow sideways across the screen. When the dust clears, the announcement text is displayed triumphantly, as green flames lap at the gifted sub count. A few seconds later, the screen rips aside in a slash of neon green, ending the animation. Hot.

Now for the big kahuna. The ultimate sub bomb (no pun intended). At 100+ gifted subs, radiation-levels go off the charts. Nuclear, in fact. The animation opens swiftly, with a lone TIE Fighter screaming upwards, gaining altitude as it soars over an unseen target below. Quickly, it climbs out of view, and drops its payload: a fully-primed nuclear bomb. The camera pans alongside the warhead, as sirens wail below.

Suddenly, the bomb drops off-screen, exploding in a fiery detonation of man-made destruction. As the explosion clears, the announcement text is revealed, covering the screen triumphantly amidst a firestorm of neon-green. Moments later, a plume of flame billows downwards, sweeping across the screen and returning viewers to the action. Is it getting hot in here?

It doesn’t get much more ‘explosive’ than that. The final animations stand out as one of our proudest deliveries yet, pushing the bar of Twitch stream presentation. TeeP proudly features them on-stream today – stop on by and you may just see one of these bad boys in action.

But we weren’t done yet. The battle may have been won, but there was still a war to finish. Our grunts set out for their next target: animated stream screens.

STREAM SCREENS

Since project kickoff, one of OpTic TeeP’s highest priorities had been a saucy new set of stream banners for his channel. A set of full-screen overlays he could initiate between games, while dropping in, or simply chatting IRL. He also wanted them to include a subtle, animated look that would keep up momentum throughout the stream. In total, he tasked us with the following designs:

• Starting Soon Screen

• Intermission Screen

• Searching for Game Screen

• Offline Screen

As always, we kicked things off by solidifying the static designs – animation would come later.

First up, Starting Soon. We started with the banner’s background, shooting for a minimalist, clean look from which text could emerge. For this reason, we chose a dark black / gray color (found elsewhere in TeeP’s branding) to provide a solid, deep foundation. Subtle, faded speed lines of lighter-gray convey an agile, rapid tone. Towards the edges of the design, elliptical, carbon fiber-textured patterns extend beyond view, providing a streamlined, aerodynamic look. Lighter tones of gray and neon green add background accents and style. This background pattern would be replicated in each of Tyler’s upcoming screens.

Moving to the foreground, TeeP’s ‘STARTING SOON’ text is displayed in bold, energetic styling, alternating between gradients of bright-green and clean white. Above, the iconic TY-Fighters logo is displayed proudly. Call-outs for Tyler’s social media channels are also featured, later to be displayed in an animated, revolving carousel. Since this screen variant doesn’t include a webcam overlay, we made sure to include a stream ticker bar at the bottom of the banner. Unique indicators display Sub Train Timer, Sub Count, Recent Donation, Recent Follower, and more. And in the bottom-right corner, a neon-green call-out box displays TeeP’s stream sponsors – which would again be turned into a revolving carousel during motion design phase.

At this point, we switched over to OpTic TeeP’s custom intermission screen. This time, a large cambox is featured on the right side of the screen, containing thin, clean borders of neon-green. Stream ticker information is displayed below, as well as in the bottom-right corner of the webcam. Social information is displayed just above. Panning to the left, things get interesting. In the top left, a small box displays Tyler’s in-game feed, housed in a high-tech digital display. Just below, we engineered a custom event list to display TeeP’s latest Subs, Resubs, Donos, and Bit Donos. Each event list panel contains a unique indicator to differentiate alert categories. In the bottom-left, TeeP’s stream sponsors are once again displayed in a bright-green box graphic.

For Tyler’s ‘Searching for Game’ screen, we kept things simplistic. This screen is primarily used when TeeP is dropping in for his next Battle Royale match, to prevent stream snipers from identifying his location. A medium-sized webcam frame takes center stage, featuring bright neon bars and the legendary TY Fighters logo. Text is displayed just below in bold font styling. To add some personality to this minimalist display, we featured a faded photo of the TIE Fighter in the screen background.

With static screen displays ready, we began injecting some movement through motion design. Green speed lines whir across the banner backgrounds, conveying rapid, aerial pursuit. The elliptical border patterns suddenly rotate in a fluid, abstract motion. Soft energy currents channel through text and stream tickers. Every few moments, OpTic TeeP’s social media and sponsor bars cycle in rotating carousels. It’s a subtle, minimalist approach to stream animation, adding flair to TeeP’s downtime moments and carrying energy levels into the next scene.

Lastly we whipped up a custom Offline Screen for TeeP to feature when off-air. The style and layout is reminiscent of his other three screens, to keep branding tight and focused. For an uncluttered, straightforward look, text and logos are featured at a smaller scale, while the iconic OpTic Gaming emblem looks on from below.

With screen designs finalized and approved, TeeP’s arsenal was growing daily. But there’s always more firepower to be had, and we had one last trick up our sleeves.

TRANSITION

End game. The finish line was in sight, and our operatives were growing weary. But there was still one last, animated surprise we had in store for Tyler and the TY-Fighter community. A hair-raising, high-intensity stream stinger worthy of the TeeP name.

In the elite Twitch scene, stream transitions are quickly becoming the new standard. These rapid animations allow broadcasters to seamlessly connect various segments of their on-air presentation. Much as in cinematography, ‘stingers’ allow for a fluid, smooth progression of scenes – without jarring, immersion-breaking cuts. Tyler TeeP would be able to use this animation when transitioning between scenes or stream screens. It was the final gadget in his animated toolkit; and an important one.

We wanted to keep the transition rapid and brief; under 3 seconds, if possible. Luckily, nothing says rapid like a surprise TIE Fighter assault. The animation kicks off in a blaze, as a horizon of neon-green and rapid speed lines emerges into view. Suddenly, a squadron of TIE ships blow by, shown in attack formation and in hot pursuit. Rapid horizontal movement creates a natural forward progression, leaving viewers waiting to see what’s next. And then, just as quickly as they entered, the squadron exits, ripping away the green skyline and returning to the on-air action. Feelsgoodman.

The entire transition is over in an instant, but it more than accomplishes its job. The energetic movement raises intensity and adrenaline levels, pushing TeeP’s broadcast into the next segment. Like a concealed combat knife, the stinger is ready to be unsheathed at moment’s notice – giving TeeP a new element of surprise. We expect Tyler will wield it to great effect.

PANELS

The war was won, our strike team had one last assignment before their well-deserved break. OpTic TeeP had requested a set of custom Twitch panels to display in his channel profile.

We approached Tyler’s panels design with a balance of minimalist style and striking visuals. To keep TeeP’s profile feeling lightweight and nimble, our team minimized panel height. A narrow, slim look helped stay consistent with Tyler’s speedy and aerodynamic branding. The only exception were his Subscriber and Merch panels, which were beefed up to indicate importance.

To make the panels really ‘pop’ from the neutral Twitch background, we made heavy use of Tyler’s OpTic-green brand accents. Bright neon bars extend horizontally across dark grey backgrounds. Clean white text contrasts sharply and emerges into the foreground. The elliptical patterns found in TeeP’s stream screens make another comeback, adding personality and weight to the design. Unique symbols indicate panel type, giving each graphic a unique feel.

Overall, it’s a clean, stylish look. The perfect bow-on-top to the grand Tyler TeeP project. Much as a ranking general proudly displays his lapel pins, Tyler can wear these panels as a badge of honor. Mans sure earned them.