I was extremely excited when the the streamer Farasalt contacting me about the design that he had in mind. His basic description of what he was looking for is a tiki bar in space.
As designer it’s a lot of fun to hear interesting concepts and work through the problems presented. One issue that immediately came to mind is that it could become quite costly to make the logo that I had in mind, as well as all the other graphics. The logo was created completely from scratch, but I took advantage of a few stock photos in order to move things along and keep the cost within our project’s budget.
Creating A Tiki Logo
As I mentioned, I wanted to spend a majority of time working on the logo. The end result is one of my favorite designs so far. What could be better than a tiki in space drinking margaritas? To give it even more of an identity, we also decided to match the color of the beard to the streamer’s hair color.
To start, I worked with another member of NerdOrDie, Lleuca, to product a simple sketch that gave us a general idea of what the logo should look like.
After the sketch was somewhere close to what we wanted, I took it into Illustrator and then spent a lot of time there. To make things easier, I worked on everything in separate files. The tiki, leaves, flower, margarita, and background all were then combined into one file. From there, I put some finishing touches on the logo and found a font that I felt fit the brand.
Designing a Minimal Overlay for Farasalt
One of Farasalt’s request was an overlay that showed as much of the game as possible, while still displaying the information needed. Since he plays games like Star Citizen and The Division, I felt it’d be a good idea to introduce something that felt a little futuristic, clean, and minimal. I didn’t feel bringing the tiki bar theme to the overlay would work properly. This is mainly because the bar theme is a bit fun, colorful, and a little wacky.
Animated Alerts for the Bearded Tiki
Farasalt had a very strong idea on what the alerts should look like. Which helped this process move very quickly.
The follower alert is a an animated GIF of a bell that’s ringing. I did the design for it in Illustrator and then used Photoshop to create the GIF. The new subscriber alert is supposed to imitate a menu with daily specials. Finally, the tip alert is a simple receipt.
One thing that I find very helpful in my designs is to make a mock-up design of what the a stream would look like with all of the alerts active, as well as the overlay being on screen. Doing this just helps a bit with spacial awareness of everything, and how it works together.
The video below shows everything in action.
A Behind the Bar Green Screen Scene
While the title of this section might be a tongue twister, the way I created this effect was quite simple. It’s basically two images. One iamge is the background which goes on the bottom layer inside of OBS/XSplit. The other image is a .png that goes on the very top. The streamer then places their webcam in between and sets up the green screen filter.
I highly recommend checking out Farasalt’s stream sometime to see this in action.
Intro, Outro, and Stream Page Designs
The final part of this project was creating scenes to use when the stream starts, is stopping, and is offline. The idea behind these images is simple.
The welcome scene is a tiki bar during the day – located on an beautiful beach, somewhere far away in the galaxy. A perfect place to grab a drink and enjoy a break from the space traveling life (see Star Citizen). This scene also has a countdown timer, and some code that pulls in latest tweets.
From here, the remaining screens progress through the time of the day. The ending screen is when the sun has gone down and last call has been announced.
Finally, the offline image takes us to when the bar is closed.
As you will also notice from the above picture – the stream page design contains panels that have similar banana leaves from the logo. In the end, this project was a lot of fun to work on! I feel everything came together properly, and I’m very happy with the outcome.
Since you made it all the way to the bottom of this post, I hope you enjoy this GIF of a bell ringing.