U.I. Art. How to get into the style when rendering decorative elements of the game interface

Hi all! I’m Mikhail Kravchenko, game interface designer.

In this article, we will consider the process of getting into the reference using the example of a decorative element from Hearthstone and techniques that simplify the life of the UI artist. Below is a picture with the result that I got.

When designing the interface, it is important to keep references in front of our eyes – images, looking at which we will understand in which direction we want to design.

Let’s say we found a fancy card back from Hearthstone. We look at it and think: “God Almighty, what a beauty, we want similar elements to be in our project!”

To get into this style, we need to select the characteristic features of the reference and apply them to the object that we will draw.

Object Shape

First of all, you need to pay attention to the forms that make up the reference. For example, if the reference has angular, sharp shapes, and we draw something soft and streamlined, most likely we will miss the reference and get not what we wanted. Therefore, it is important to study the reference and describe the forms of which it consists.

The decorative element from Hearthstone has sharp, angular shapes – spikes sticking out in different directions and pointed parts of the anchor.

There are chamfers on the flat parts of the reference, the edges of the central round element also have bevels.

The shapes of the central element are quite streamlined, they do not have such clear edges as the elements of the golden part of our reference.

There are also a lot of chips, chips, scratches and other defects on the reference. This feature will also need to be applied to the object that we will draw.

Below is a sheet that summarizes the features of the reference forms.

Colors

Secondly, you need to study the materials that make up the reference, and collect a palette of colors for each material.

Let’s take the golden part of the reference as an example. It has a base color, the colors of the light and dark areas of the object, as well as the colors of highlights and reflections from the environment. All these things need to be added to the palette so that the painting of our object is close to the reference.

The same must be done with the rest of the materials. Some of them may have a non-standard palette, for example, the “green” material has not only shades of green, but also rust spots. And in the central object, the light parts can be painted both orange and greenish. All these things need to be marked on the appropriate palettes.

Textures

Thirdly, you need to study the textures that lie on the object. There are not many of them in our reference, but in a couple of places you can see a texture of dots, similar to a placer of sand. This point should also be applied to our drawing.

Preparation is over

We studied the features of the reference forms, we know what materials it consists of and what colors they need to be painted in, we know what textures lie on the reference. Next, we can consider the technological process of drawing a decorative element.

small sketches

First we need to understand what parts our object will consist of. To do this, it is better to make a few small sketches. Sketches should be very small so that we do not have the opportunity to get stuck in the elaboration of small details and waste extra time.

Lineart

Next, you need to choose one of the sketches and work out its details.

Helps a lot here tassel, which changes the transparency of the stroke depending on the force with which we press on the pen. For her, it is better to set the Opacity and Flow parameters around 30%. Such settings give quite a lot of control over the line, allowing you to gradually find the right shape.

Also, when drawing symmetrical objects, the vertical symmetry function will help us a lot, by turning it on, we can draw one part of the object, and the second will be drawn automatically.

When the line art is ready, you can proceed to painting the object.

Painting

At this stage, the palettes that we have prepared in advance will be very useful. For layers with paint, it’s better to make a separate group and apply a mask to it, which will not allow us to paint outside the object. Such a group should be made for each material.

Next you need to add the main color, shadows, light, highlights and reflections from the environment.

To have more control when adding shadows, you can paint over all the shaded areas with the appropriate color, and then apply a mask to the shadow layer and erase the excess. With this approach, we can get the color transitions we need gradually, trying different options. The same applies to painting light areas.

As a result, we should get a blank with painting all the materials that make up the object. In some places, the blank will be slightly different from the reference, this is normal at the current stage. Later we will finalize these points.

Adding textures

Next we need to add textures, for this we can use texture brushes and photos. It is convenient to add textures in a layer with Overlay or Soft Light blending mode. To achieve the desired result, you can adjust the transparency of the layer, as well as apply a mask to it and erase some unnecessary parts on it. It is better to desaturate photos of textures so that extra colors do not mix with our work.

The textures in the reference are mostly hand-drawn, so I will show here how they can be applied, but they will not be in the final version of the drawing.

We can also warp photos with the Warp function and “stretch” them onto the object’s shape.

After the textures, you can move on to the elaboration of details.

Detail work

Details are best worked out in a separate group, which lies on top of everything that we have drawn. In this case, the necessary colors can be taken directly from the reference.

For painting it is convenient to use the same brush, which we used for the lineart. It gives quite a lot of control and allows you to gradually find the desired shape and color of objects.

Also, at the very end of the work, it can be convenient to correct some details in a separate layer lying on top of the entire drawing. You will not need to climb through the folders to correct any particular material. The result should be stylistically close to the reference result.

Conclusion

We reviewed those. the process of getting into the reference. To get there, we need to study its features – shape, materials, colors, textures. When we study, we need to transfer these features to the object that we will draw. The result should be close to the reference result. =)

Here .PSD source with result, if you wish, you can download and study it. Here brush for line art and detailsmaybe it will be useful for someone.

If you have any questions, please write, I will try to answer to the best of my ability. I can be contacted via: Vkontakte, Behans

I wish you all good luck and creative success =^_____^=

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *