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: 
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!

21 comments :

  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.

    -Adam

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

    ReplyDelete
  3. hi..Im college student, thanks for sharing :)

    ReplyDelete
  4. Thank you for the tutorials, Dee. I'm about to get a position at a software development company and I find your posts very useful for me. Can you also post some tutorials on UX design in the future?

    ReplyDelete
  5. Thank you for this tutorial.

    I used it with a liquid texture, added some bubbles and liked the outcome very much.
    You could find my orb here: http://mondspeer.deviantart.com/art/The-mana-orb-a-tribute-to-Diablo-I-475815560

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

      Delete
  6. 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?

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

    ReplyDelete
  8. We at Dextemade beamed many diversified brands. And we are also honored to provide you Development, Digital Marketing, 2D / 3D Animation, Graphics Design, and 3D Designing Services to beam your brand / aim too. With our complete preparation. We have a team with very high leading expert professionals.

    ReplyDelete
  9. 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

    ReplyDelete
  10. 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



    ReplyDelete

  11. 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

    ReplyDelete
  12. I’m impressed, I have to admit. Rarely do I come across a blog that’s both educative and interesting, and let me tell you, you have hit the nail on the head. The issue is an issue that not enough folks are speaking intelligently about. I'm very happy I found this in my search for something relating to this.
    Jio Lottery Winner 2020
    KBC Lottery Winner 2020
    KBC Winner List 2020
    KBC Head Office Contact Number

    ReplyDelete
  13. I’m impressed, I have to admit. Rarely do I come across a blog that’s both educative and interesting, and let me tell you, you have hit the nail on the head. The issue is an issue that not enough folks are speaking intelligently about. I'm very happy I found this in my search for something relating to this.
    Jio Lottery Winner 2020
    KBC Lottery Winner 2020
    KBC Winner List 2020
    KBC Head Office Contact Number

    ReplyDelete
  14. 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

    ReplyDelete

© 2020 2deegameart.com