5 steps to creating graphics and animations for online lottery

Intergalactico
Sep 4, 2018 · 5 min read
RoBoom was one of the first online lottery games that contained particle animation.

Veikkaus had an abstract idea for a game. Their hope was to have a visually exciting lottery ticket with a casual game-play and a clear concept. The precondition for the game was that it should have explosions. Indeed, Veikkaus had initially drafted a concept of exploding balls. “We weren’t quite sure about the ball idea but we couldn’t blow up people either. When talking to Intergalactico, the concept quickly developed into exploding robots, which we liked” says Harri Järvinen, Product Group Manager at Veikkaus.

The Lead artist of the game, later named Roboom, was our own Eija Jokilahti. Eija has designed several online lottery tickets and knows that there are certains tricks to the craft. She will now share her 5 steps to success when creating graphics and animations for small online lottery games.

1. Create a clear theme and story

It all starts with the theme. Are we in space? Are there riding cowboys, circus clowns, or tigers and elephants in a zoo? The theme creates the basis for the story, which in turn determines the characters. Characters play a major role in reflecting the story to the player. Their gestures and movement — however big or small — can really define their nature which in turn affect the animation.
When drafting the plot there are certain restrictions imposed by game mechanics. We are, afterall, designing a lottery game and there are some limitations on what can be done. So when creating the storyline and characters you should be aware of the specific game mechanics and restrictions you are working with. To sum up, before any actual drawing or designing takes place, create a fun story with rich characters. The secret of successful games is created right here in the first step.

2. Benchmark other games and create your style guide

Borrow ideas! Benchmark and look for inspiration in other games, movies and animations. You want to have a clear vision for the look and feel and even for the sounds of the game. Benchmarking allows you to grasp your vision and, once you know what you are going for, create the style guide for the graphics. In RoBoom’s case we wanted to create a retro vibe and decided to use warm colours choosing the colour orange. We also wanted to create robots that were not too realistic. We included all these elements in the style guide allowing it to be a cheat sheet for later use. At this point it is also important to think about the animations you will want and how they affect the graphical work. The challenge in designing the look and feel is to keep the game entertaining while keeping it safe, i.e. not too addictive.

3. Start sketching

I usually start drawing by hand with a pencil trying to capture my idea of the characters on paper. Since we are talking about an online lottery ticket, and not a game with a complex plot, the challenge is clarity. The drawings need to communicate very clearly what the characters are about and indicate how they will move in the actual game. For instance, in RoBoom we created 6 characters and each had very clear “personalities” that all brought something unique to the game. It is important to design the characters so that they are easy to animate at a later stage. After iterating the characters with the client you can go ahead and draw the supporting backgrounds.

Sketching the characters to paper.

4. Finalize the Graphics

Once done with sketching the characters and backgrounds on paper I start the finalization phase. I scan the drawings and keep them on my second screen to support the design work. I start with big visual lines and add the details one-by-one. Those details really create the personalities for different characters. For drawing I like to use Photoshop, Illustrator and Wacom Intuos Pro. Keep in mind that even if your characters are 1cm tall on screen you will want to draw everything in big scale. Doing a prompt job on the design allows your client to use the design for different purposes such as marketing and promotion. When finalizing the graphics you also should think about the user interface. How will the player know what to do and where to click next? These cues can be done both in the design and animation.

Finalizing the characters with Illustrator.

5. Animation

My first priority, which also is the most common pitfall, is to make sure that all animations work well on mobile and with a slow internet connection. However, reducing the frame count drastically creates challenges. How to create cool and extravagant 3D explosion animations with minimal amount of frames? The answer is to use particle animation and mix it with animations created in the code. For particle animations I like to use After Effects because it allows the user to create flamboyant animations whilst keeping the frame count as low as possible. After creating the animations with the particle tool, you can export the frames in png. sequences and further animate them in the code. Hence, continuous iteration with the development team throughout the project is really important. If you are not looking for 3D explosions, and would like to do awesome character animations, then the more traditional frame-by-frame animation might be a better choice. There are various tools that one can choose from to fit their own preference and workflow.

If you want to know more about online lotteries or create one of your own, we’re here to help!

Intergalactico

Nordcloud Design Studio. Stories of how digital design meets business, cloud technology and AI.

Intergalactico

Written by

We are Intergalactico, creatives with superpowers. Let's make a change together.

Intergalactico

Nordcloud Design Studio. Stories of how digital design meets business, cloud technology and AI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade