15 Mar How to create an illustrative gaming website

Hey friends!, in this case study we will see the different steps of how to create an illustrative gamified web design by order. We will start with the first drafts and end up with the final result, going through all illustrative elements.

1.- Briefing

• Name: Blood Crave
• Theme: MMORPG about vampires
• Target: Men and women between 20 and 35 years
• Tone: lightly adult, modern, funny but a little bit scary

Tasks:

1. Design form login and registration page
2. Design the main page of the game
3. Ilustration design which will be used in both pages
4. Design of the company logo (easy but functional)

2.- Layout

Registration page

The first step when creating any website is creating a thumbnail sketch which helps us to visualize the space and the composition we’ll have for each element. I am going to spend many hours in the illustration so better spending some time planning than trying to make things fit later on.

We want every visitor to register on the page and therefore I’m going to design an simple main page to raise the percentage of conversion. On the left we’ll have a rectangular illustration which occupies nearly the whole height on the web page. This illustration will call the visitor’s attention to the register form on the right.

Main page UX

The interface web based games has a lot of features, luckily I have a lot of experience with this type of games, this is my default  UX composition. Nevertheless I usually spend some time playing the game.

The game’s interface will consist of an illustrative header, a sidebar with the user’s information and with the secondary navigational elements. We also need a main site navigation and an area for premium characteristics as a status bar, search bar and other elements which are normally used in this type of game.

3.- Illustration for videogames

Once the UX is done I start the creative part. I do some research until I get a rough idea of what I want to create… a word, a picture, a video and that’s it! the concept gets clearer: some vampire characters on an illustrated background appropriate to the webpage’s topic and attractive for the target audience.

In this step I practically use everything I have on my fingertips to compose the illustration: Photos, sketches I have done before or with my drawing tablet. When I am satisfied with the concept, I retouch it till I come up to a sketch I can work with. If you want to get better at character drawing, I suggest this drawing exercises for beginners

Before proceeding with the final line, I make sure that the composition fits within the layout.

The first problem arises… For the registration page the illustration is perfect but it doesn’t fit in the header of the inner page… it’s too complex, too large… it does not fit in the header!! … time for searching solutions.

The solution: I moved the top bar into the body this way I get some extra space for the illustration.  I will put the wolf on top of the logo and both characters behind, this way I get a more horizontal layout. This is not a perfect integration, but does have potential – in the worst case I need to increase a little bit the height of the header.

Once that everything fits, I just stop thinking about the design and bring into focus the illustration – let’s start to have fun! We open Photoshop, I put my sketch in a layer with real low opacity and start to inking with my Wacom Cintiq. Some advices to get a clean digital inking in photoshop:

1. Always use high resolution canvas, mine is around 7.000 x 7.000 px.
2. Use sharp brushes, default ones.
3. Don’t try to do your lines at once, specially the complex ones. Do a lot of small lines and then connect them together.
4. I spent around 3 hours to ink just a character like.
5. Don’t overload your lineart, keep spaces as big as possible so you will have room for the colors otherwise your color will look flat.
6. Apply different weight to your lines, bolder for the contours, thinner for the inner details.
7. Put your lineart layer in Multiply Mode, so you can see your sketch all the time.
8. I use a Wacom Cintiq, you should get at least a standard tablet or use vectorial tools, with the mouse is not possible.
9. Use different layers for overlaid element, corrections are faster and easier.
10. I mainly use the Brush and the Eraser but the History Brush is a great help.

I decrease the opacity of my sketch layer and add a layer in Multiply mode on top where I create the inks.

An advantage of working on high resolution is that we can print on big sizes or we can rescale it for using in the web.

I ink each figure separately to keep the flexibility when we integrate the illustration in different applications.

To create profundity we use thicker lines for the contours than in the interior, which has the effect to not crush the volume. The figures on the first level need to be painted with thicker lines to highlight them.

Yeees!!! Even vampires have an I-Phone!!! It was a last-minute decision to put an element out of context which brings personality to this illustration.

In this case I’m going to use a more realistic rendering style. One more time I search for color references and I create a mental image of the color mood I’m looking for. I will post some images in progress. I  suggest you to have a look to my masterclass about digital color in Photoshop.

This is my template of flat colors, it’s useful to do fast selections and to plan the color’s schema. The elected colors must be middle tones, neither real dark colors nor clear nor saturated colors.

The werewolf is finished: I used magenta tones for the shadows, very dark, almost black, for the middle tones I used warm but low saturated colors to cause a realistic light source. I used some highly saturated magenta reflections to give some contrast on the contours.

The second figure is finished: I used colder and less saturated tones to give profundity, therefore I achieve the accentuation of the werewolf.

According to the progress I am doing some corrections which brings me closer to the image I have on mind. And after working some days the illustration is done – it looks great!

3.-Interface

In this step we set the general game’s idea. One more time I spend time on Google Images for references to create the background, I relax and let the brush decide…  After 15 minutes I have a basic idea of what I want, I do a very fast sketch of a mysterious forest.. it looks good … and the client likes it!

For the web container I was thinking about an altar of sacrifices, something easy but effective which should be fit perfectly in our mysterious scene.

To create the altar I paint a 1 pixel vertical line with different shades of grey.

Press CTRL+T, drag it and it’s done. You already have your beautiful molding.

Now I just polish details like the corners. To do that I use a 1 pixel pen and retouch it till I’m satisfied with the result.

I create a layer and fill it with a middle grey shade (#808080) I use a add noise filter about 4%.

I put this layer in the overlay blend mode (23%) and … magic!! We have created a little texture.

Now I create another layer on top and fill it with a navy blue (#2f3646). We need the stone to catch the same color as in the figure scheme, therefore I put the color mode.

You can see the result here.

I put a black gradient at the bottom of the object to make it melting with the background. Our sacrificial altar is completed!

For the upper part of the altar I just duplicate the anterior layer and put it below. I move it now up and to the right.

I create a layer with a rectangle where I add again a noise filter.

I create now a text layer which we can use as a logo. It’s a simple text with the font Myriad Pro Condensed and a little Drop Shadow

I create a new layer on it and paint  red (magenta) blood spots. To make them looking more real I create variations in the same color with the Dodge and the Burn Tool.

I set the ’blood layer’ to multiply mode.

The background

I apply some color on the sketch and start to define the volume. This step is really random, basically I play with Photoshop till something shows me the right way. I do different color samples which do not convince me but for the background we have different possibilities. Therefore we are going to paint the final line and afterwards we’ll go back playing with the colors.

You can see here the final drawing for the background. It’s easy and simple.

And here a color base, maybe a little boring but with some retouches we will bring it to live.

On top of the same base I create a color adjustment layer and put two magenta shades – do you see that? Now it matches perfectly!! But it’s still looking too flat.

I add fog, a shadow and a glow layer to boost the tree’s volume.

I beclouded the background and added a bland gradient right behind the figures to make them come out and BINGO!!

It looks brilliant!

4.- Final design: Icons, typograhpy, colors, text

The figures are well integrated in the web and this time they adapt to the background. From this point on the design process is exactly the same as in any other web type. You can see now images in the different design areas.

Header

Quick links

Cpanel

Main navigation bar

Premium links

Footer

So this is the final design.

Now as we have the main page done, I apply the same theme on the register page and we’re done!!

Well guys, thank you very much for reading this case study, I hope you’ve learned something or at least enjoyed it. See you soon!