12 Jul How to design a PBBG layout for a war game
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 🙂
1.- Sketching a PPBG layout
My job is to design a pbbg layout for login and inner game page. To compose a quick layout sketch that I can submit to the client for approval, I used several images from previous works and from Google. Of course, at the end of the process I will replace every image place holder for custom game interface elements and graphics.
In this step of the process I don’t focus too much in the details, I just get the ball rolling to get client’s feedback. I don’t even know how it will look at the end… what matters is getting closer and closer to the final layout spending not much time. I spent 2 hours on this step.
After several iterations we are ready for next step.
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
While I love cartoon logo, this one will be text based only so we don’t overload the interface. Logo is finished, I spent around 4 hours more.
I chose a warm color scheme that fits perfectly with the game interface.
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!
DemmPosted at 01:41h, 18 August
Increible! As ussual!! I love to see your process; I learn a lot from that, always. Thanks for sharing!
(…and I want to see the logo!!!!) XD
sergio ordonezPosted at 08:30h, 18 August
You are welcome Demm 🙂 Logo coming soon!