Tuesday, June 18, 2013

UI Design Tutorial - Mana Orb - Inkscape

How to create a mana orb in 17 simple steps

free inkscape tutorial - mana orb

In the first Inkscape tutorial we made a simple yet great looking glass button.
If you missed it, you can read it here : UI Design Tutorial - Glossy Button
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.

If you haven't got it yet, download Inkscape!
Click the picture to view the tutorial at full size.
Have fun!

free inkscape tutorial - mana orb 1

free inkscape tutorial - mana orb 2

free inkscape tutorial - mana orb 3

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

An Action-RPG with Mana Orbs, Glossy Buttons and InDee Toons

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: 

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!


  1. Nice tutorial. I use inkscape a lot for more character and UI gen and have never thought of using the liquid texture like you did. Well done!

    Keep up the work, I have marked your page to keep checking back for updates.


  2. Thank you for the nice feedback.
    There will be more tutorials soon :)

  3. Wow, that's very impressive, your orb looks amazing. Thanks for sharing!

  4. I just happened across your tutorial today and was intrigued by the liquid bit. Downloaded inkscape (and quartz) and it contains no liquid textures. (shake either). I notice this was written a couple years back. Did they remove these?

  5. Hello, this weekend is good for me, since this time i am reading this enormous informative article here at my home. Art prints posters

  6. We are the leading web designers and developers in Pakistan believing in creative and responsive designs that make your website highly interactive.
    Address: Asia Pacific Trade Center, Rashid Minhas Rd, Karachi
    Email: info@codeaze.org
    Phone: 0316 2586964 Codeaze

  7. wonderful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. This article resolved my all queries. keep it up.

    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery


  8. Thanks of sharing this post…Python is the fastest growing language that helps to get your dream job in a developing area. It says every fundamental in a programming, so if you want to become an expertise in python get some training

    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery

  9. Nice information, this is will helpfull a lot, Thank for sharing, Keep do posting i like to follow this ui online training
    ui design course
    ui training
    online ui training
    ui course
    ui online course

  10. Such a wonderful article and I feel that it is best to write more on this topic. Thank you so much because i learn a lot of ideas about it. Keep posting...

    Java Training in Chennai

    Java Course in Chennai

  11. I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!

    Java Training in Chennai

    Java Course in Chennai

  12. FOXZ88.NET online casino website Global standard 2020-2021

    Betting online gambling reminiscent of UFASCR.COM Baccarat.

    UFABET football betting website, the big brother of all UEFA networks, UFADNA, with an update The first modern system in 2021

    Web football i99PRO online lottery casino apply today for free 5000 bonus

    Kardinal Stick Siam - Relx a great promotion. Express delivery in 3 hours.

  13. one fast brownIn case you are looking for a good site, UFA, UEFA Bet casino site. Which can be played as a thorough answer, in a position to answer Quality and Performance It's ideal to get a great deal of the issues. It can be something very punching and fascinating. Excellently, the items that UFABET football betting is absolutely nothing even with the practical experience of quality. Plus accessibility that are able to see final results It's a model that is very sharp and also different. Full of performance of creating wealth Attractiveness With the most beneficial opportunities it is quite nothing You will find opportunities and also probabilities for making profits. Quality and also somewhat diverse For people who have come to make use of the service excellently fox

  14. Your articles are imaginitive. I'm looking through talk to perusing the plenty of articles which you have melded here. Thumbs occurring! Meshcam Crack

  15. Your articles are imaginitive. I'm looking through talk to perusing the plenty of articles which you have melded here. Thumbs occurring! Meshcam Pro

  16. First class data, modify everybody mind basically reference designate assistance to it. I could be placed in a larger invincible state. XXClone Serial Video Download

  17. Best Birthday Quotes For Brother — Happy Birthday dear brother, wishing you a fantastic one! I am grateful you are my brother because you have always been .Birthday Wishes For Brother In English

  18. We provides UI Design and development services that delight your end-users by developing a web & mobile app that aligns with your business goals.

  19. This comment has been removed by the author.

  20. Web design and development is an umbrella term that describes the process of creating a website and web design Dubai agency sees that exceptionally.

  21. This comment has been removed by the author.

  22. Setting up some sort of tutorial program whereby students can get unflinching assistance is actually very effective. Good efforts! Web development company in dubai

  23. Good enough to learn the basics and develop an eye for good design. I must appreciate you for taking the time and clarifying the expectations. I feel more confident with the extra details. Thank you! Cisco Distributor KSA

  24. The author has directly included some non-identical ways of doing that instead of starting from "What is UI design?". Excellent stuff! Online flower shop dubai

  25. In today's digital age, a strong online presence is essential for success. As a leading Web Design Company In Dubai, Rewind Productions specializes in crafting bespoke websites that not only showcase the unique identity of each client but also drive tangible results. Whether it's building an e-commerce platform or designing a corporate website, Rewind Productions delivers solutions that exceed expectations.

  26. This comment has been removed by the author.

  27. At Aimstorm Solutions, we understand that successful influencer marketing requires more than just connecting with popular influencers – it requires a deep understanding of your brand, your audience, and your goals. That's why we take a strategic approach to influencer marketing, focusing on building authentic relationships with influencers who align with your brand values and resonate with your target audience. With our data-driven insights, creative thinking, and meticulous campaign management, we deliver results that exceed expectations and drive real business growth for our clients.


© 2020 2deegameart.com