How to create a mana orb in 17 simple steps

It is not required but I recommend to read it first before starting
with this tutorial.

So today I will show you how to create a mana orb.

You can use it for many different kinds of interfaces and games, I just
call it mana orb because I had action RPGs like the Diablo games in mind when
creating it.
It can be used as a visual health or resource display or as a bowl,
a bowling ball or something completely different, it is up to your imagination.

Artist's advice:
When working with color gradients, go for natural colors and use different hues in the same gradient.
If you want a strong glowing red, use a fiery orange tone for the highlight, just like I used an aquablue in this tutorial that instantly reminds us of the caribbean sea.
A small shift in hues can breathe life into your assets.

You can experiment with Inkscape's
filters to get nice textures for your orbs.
"Liquid" and "Shaken Liquid" are the ones I prefer here,
but it is up to you.
The textures are locked to the canvas, so you can move your objects until you
are satisfied with the texture.

An example of use
A screenshot of an Action-RPG game prototype:

Free resources
You can download the Inkscape source file with the game ready mana orb and health globe in blue and in red for free
here: 2DeeArt_Mana_Orb.svg

Now we are just one more step away from an impressive role playing game user interface.

Come back soon or just subscribe to
the blog to get informed when the next update is posted!

If you have questions on UI design or requests for future tutorials, please post a
comment!

Sunday, June 16, 2013

How to create a shiny button in 8 simple steps

A graphical user interface (GUI) is a visual interface allowing users to
interact with electronic devices.

To provide an enjoyable experience for the user, buttons, sliders,
panels and displays should have a decent appearance in addition to their
functionality.

You need GUIs in apps for mobile devices, in websites and in any kind of
games in 2D and 3D, so they are some of the most important game assets.
Quite often, the process of user interface creation doesn't get enough
attention, even though they are some of the graphical elements players will
spend the most time looking at when playing a game.

This will be the first tutorial in a series about general user interface
design and special UI design for games,
including a guide on how to design an entire UI for a video game.

We will start with a simple yet
stylish glossy button in a shiny 3D look.

The button will be the basis for
more interface elements, it can be easily adjusted to your needs.
You can easily turn it into resource bars, panels, sliders and a lot more in a
few clicks.

All you will need is Inkscape, a free
and very powerful vector graphics program.

Now let's get started!Click the picture to view the tutorial at full size.Have fun!

Now you can create an app or game
asset of the button by exporting it as a bitmap.

The advantage of vector graphics is that
you can export it as large as you like without having a loss in quality.

Now we have a great art resource we
can use for almost any kind of interface.

If you vary in color, shape, stroke
width and size, you can create highly diverse buttons and panels out of it.
You can add your logo or a font or design resource or experience bars for your
game, even the buttons of this tutorial were created with this simple template.

Artist's advice:
When creating art and playing around with color, saturation and lightness, I recommend to always work on a neutral 50% gray background, to get a more realistic impression of how things will turn out.

This is just a sample of what you
can create with the glossy glass button template.
You can download the Inkscape source file for free, including the button and
all variations shown above: 2DeeArt_Glossy_Button.svg

Check back soon to see more interface
magic!
I will post more tutorials on GUI design, especially for games, soon.

Have fun creating awesome buttons!

If you have questions on UI design or requests for future tutorials, please post a
comment!