Designing a PBBG Layout

I love to design a PBBG layout, back in 2008 I was a quite renamed game designer with some classic tittles under my hood: Prison Struggle, Music Battle, Rescreatu, Silent Vendetta and many others web based games . Unfortunately most of them are dead, idle or my designs were so badly modified that are barely recognisable.

Good news is that retro gaming is back! So a very good chance to give some love to the gaming industry and bring modern web trends to retro MMORPG web based games.

I got hired to design an indie War themed PBBG named Elite-Forces and I’m going to give you a few tips to design a PBBG layout 🙂

2.- Defining the Game Avatars Style

Once the mascot characters sketches are approved I have a fixed composition that works for inner and login page. I designed the characters so they can be used as in game avatars. So after a 3  hours of work we are ready for the final illustration.

3.- Final Lineart for 1st Avatar

I spent around 7 hours from a rough character design sketch to the final lineart… the gear was too detailed, on next character I will draw the main shapes and add all details in the color step, it will be quite faster.

Notice I drew the mask and helmet on different layers, so I offer some grade of customisation to my client.

Feel free to click to view the details.

4.- Final Color for 1st Avatar

So I have the lineart and basic shading drawn, applying color is quite straight forward, I only spent 2 hours. I went ahead with a warm color scheme, dark brown lineart define the mood and give me values for the rest of the shading. I used a 2 source light scheme, warm light source from the left and cold from the right.

Feel free to click to view the details.

5.- Lineart & Color for 2nd avatar

Around 7 hours of work later, I went from the character sketch to the final lineart and color. It was faster as I already had the color palette defined. I also reused some parts of the first mascot character.

6.- Background for Game Illustration

Most time consuming task, and what will make the game stand out, is already completed, today I have worked in the illustrative background for around 3 hours more. Notice how I used just a few flat silhouettes so it adds the mood for the characters not taking away too much attention from them.

7.- Creating a Killer Cartoon Logo

8.- Design a PBBG layout

And this is the final step of the design process, I created a light interface, tactical style. Warm color scheme that fits with the illustration. Eye catchy but not too hard on the eyes. I spent around 8 hours for both screens, including all client’s corrections.

I won’t disclose all the design process but if you are interested I have created a tutorial to learn how to create a game interface.

My estimation for the whole project is around 40 hours. 

And good news! I got hired for a second PBBG game, this time an Old School Mafia game. Stay tuned!