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.
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.
You can easily turn it into resource bars, panels, sliders and a lot more in a few clicks.
Click the picture to view the tutorial at full size.
Now you can create an app or game asset of the button by exporting it as a bitmap.
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.
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.
You can download the Inkscape source file for free, including the button and all variations shown above: 2DeeArt_Glossy_Button.svg
I will post more tutorials on GUI design, especially for games, soon.
If you have questions on UI design or requests for future tutorials, please post a comment!