Case Studies

Case study: RollPlay Masks Twitch Overlay

By 18 August, 2016 No Comments

There’s a lot of RollPlay stuff going on at the moment since we went all out with the Patreon campaign. That means we’re pushing out two a bunch of new shows and things related to shows. This is one of those shows, a roleplaying one shot, that we pushed out as part of the first couple of announcements and the launch of the Patreon campaign.




Masks is a superhero pen and paper roleplaying game created by Magpie Games and that was the starting point for all of the inspiration. Now I could have gone in and create illustrations of superheroes and other things. What I instead did was to look at what they used, and comics in general, used to highlight dialogue and exposition. As you might understand this left a big gap for the background image and that was because I wasn’t sure what I wanted to put there yet.

Logo modification

RollPlay Masks modified logo

RollPlay modified logo

Since this isn’t a full show and only a one shot it was decided that there wouldn’t be a new logo but instead me modifying the original RollPlay logo (created by Zooc) instead. Luckily that logo is split into several layers allowing me to go in and change things to fit the theme and colors that I’m taking the overlay in.

Looking at the inspiration images I noticed there was a lot of strong colors to get a more expressive look. I took that idea and instead of trying to only change the colors I also went in and change the look of it to a more flat version to parrot the inspiration that I had picked earlier.


I took those elements, the hand drawn speech bubbles concept and started to work out the placement. This went pretty fast as it’s simply picking the right brush and using my drawing board to get it to look right. Layouts when doing these type of shows are extremely important and there’s a few things that needs to be taken into consideration. First is space, second is camera resolution and finally viewer experience.

I often see roleplaying shows that have a lot of free space that never needed to be there or they have over complicated overlays. When I started doing roleplaying overlays I was doing the same and focusing too much on trying to show what the game being played was. However as time moved on we’ve realized that there has to be a balance between telling the story and allowing for a better viewing experience. You want the audience to be able to see the players emotions and gestures clearly. If you insist on making small camera windows or create elements that hide too much you’re going to end up lessen this experience.

The proper approach here is to create just enough hints to the game being played. That’s a lot easier said than done of course and if it’s something you’re struggling with (both when it comes to Twitch overlays or roleplaying overlays) is to start big and after that start to scale down. Trust me it’s a lot harder to do too little and try to fill gaps (I’ve had to do this in the past) rather than removing things.

Background illustration

RollPlay Twitch Overlay Background Illustration

Background Illustration

As mention I didn’t think about the background image until a later date. In this scenario I consulted with itmeJP after showing him the first pass of only the layout overlay. All he said was that maybe some sort of skyline, and from there I started to do some research on what that might look like and apply it in a more comic fashion rather than having a photo background.

Instead of creating it in Photoshop, since I’m working at 250DPI in 1080p, it would work better to create the assets in Illustrator. What I did was to simply create a bunch of different shapes that would crate the outline of the skyline. After that I created a bunch of windows of different sizes that I could place all over the buildings. However that would en up looking a bit boring and computer generated so I went in and manually deleted windows to give the skyline more life.

I exported the image into Photoshop, duplicated the layer twice, layered them over each other to create more buildings, resized to create depth, lowered the opacity on the layer in the back to create even more depth and added a slight blur to remove the harsh vector lines. To create the final look I added a background gradient and paper texture (with some “Blend if”) to give it a more worn look.

End of the week is here! For those of you that are weekend streamers it’s your time this weekend! For those that stream all week long this is the weekend when it happens! 

To learn more about what it is that I do check out the box below or click in the top menu for my Twitch services!




Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future.