3 Techniques to Draw Professional Mobile Game Buttons

3 Techniques to Draw Professional Mobile Game Buttons


In this tutorial, we are going to cover some
techniques that will allow us to produce professional
grade mobile game buttons. It is a follow-up
to the button analysis video that was released
err… a while ago on the channel. Anyway,
here it is!
We can approach the creation of interfaces
in 2 ways:
First of all, like any other drawing or painting.
This is especially interesting if we want
to give our UI a cartoon or a natural quality.
This is a particularly popular approach on
cartoony RPGs or mobile games.
We can also follow a more methodical workflow,
based on clean shapes, measures, and layer
effects. That one is more accessible to those
among us who are working with the mouse.
I personally use a bit of both.
The secret of good buttons is that they are
treated by the artist like any other graphic
elements. You can forget formulas and other
step-by-step Photoshop recipes that teach
you how to obtain a very specific effect without
thinking. Shapes and effects that are too
uniform will not cut it for professional mobile
game assets.
The charm of a mobile game button will come
from the artist’s style, the imperfection
of its silhouette. You can see that on most
of the app stores’ good titles. You can
still use vector tools to draw the base shape
of a button. But most of the time, a circle
or a perfect rounded rectangle will not work
as well as a subtly refined silhouette.
That is true most of the time… But not always!
It all depends on the aesthetics of your game.
Even squares or chamfered hexagons may work
in a futuristic setting. Simple geometric
shapes also work really well for an application
with a flat visual design. I just invite you
not to choose this approach because it’s
easy, but because it corresponds to your global
art direction.
Painting a button represents no specific technical
challenge. That is why we are going to focus
on layer effects here. On Photoshop, the effects
are accessible when we double-click on a layer.
They allow us to transform our graphic elements
in many ways. A detailed presentation of those
effects goes beyond the frame of this tutorial.
Here, we are only going to talk about some
techniques among the most useful ones to create
UI elements in general.
We can apply a set of effects at once on a
given layer in Photoshop, which already offers
a good range of possibilities. But using nested
groups, we can stack, thus combine multiple
layers of effects. It is that way that they
are going to reveal their true flexibility
and strength.
Here, we are going to talk about 3 of the
handiest effects to embellish our buttons.
Effect number one: a sharp drop shadow to
add volume.
Some Photoshop effects like the drop shadow
have a spread slider. This option determines
the starting point of a given effect’s fade
or blur. If we set this slider to 100%, we
get an opaque and uniform result, a bit like
a contour. Such a cast shadow, set with the
normal blending mode, 100% opacity and spread
will create a sort of base our button. This
is an efficient way to give the illusion of
elevation or thickness. This is also true
for the inner shadow.
Contrary to a simple stroke, the drop shadow
and the inner shadow effects can be moved
around freely on the canvas. You just have
to click on the document and to drag the mouse
cursor around. Just be sure to uncheck the
“use global light” option. Otherwise,
you might affect other layers at the same
time.
Effect number 2: gradient overlay.
When we are working with layer effects, we
face one issue: they have a tendency to produce
a flat result. A gradient overlay offers a
good way to solve that.
The idea is to place a layer that contains
a gradient above our button in the layer stack.
We apply the overlay blending mode to it.
With a clipping mask, we can ensure that our
gradient only affects the button, and not
the rest of the document. Another option is
to use a similar layer effect called “gradient
overlay”.
The overlay blending mode works as such: a
50% gray will not affect underlying layers.
Any color that is closer to white will both
increase the brightness and the contrast of
colors below. Any color that is closer to
black will also increase the contrast of the
layers below it, but it will reduce their
brightness.
We have to pay attention to our gradient’s
mask. By default, a gradient fill layer or
effect is applied to the whole document, unless
it is bounded by a mask. If you don’t want
to apply a mask to layers above your button,
you can convert this graphic element to a
smart object. That way, it will be contained
in a document that you can trim to fit its
size.
Effect number 3: contact shadow and soft shadow.
If we watch any object resting against the
wall or the floor, we can observe a shadow
that is both short and dark around the contact
surface of the 2 elements. Another cast shadow,
both lighter and softer than the first one,
extends beyond the contact shadow. In the
real world, those 2 components are the result
of a single partial absence of light. But
to understand and reproduce them well on the
computer, it is interesting for us to analyze
them separately.
On Photoshop, we can stack 2 drop shadow effects
and an inner shadow to give our buttons more
weight on the screen, as well as a sense of
realism.
We just have to create a drop shadow with
low size and distance values on our first
layer. Then, we put the layer into a group,
and we apply a new drop shadow effect to that
group. This one is softer, cast further, and
has a different color or a lower opacity.
It is not the cleanest way to set up that
double shadow, as the size of the 2nd effect
depends on the first one. But at least it
works!
That’s it for this video. It has been a
little while, but here is finally the 2nd
part of the mobile button tutorial. There
is a lot to say about effects, as well as
UI design. This is a pretty interesting discipline,
often pouted by game artists. Interfaces can
teach us a lot about composition, as they
are all about creating a visual hierarchy
and convenient arrangements for our eyes.
So we will definitely come back to it, as
time permits!
That said, I want to thank you kindly for
watching. Be creative, have fun… until next
time!

4 thoughts on “3 Techniques to Draw Professional Mobile Game Buttons”

Leave a Reply

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