Want to design a cool ability toolbar for your game?

I'll show you exactly how—step by step.

There's really no fluff to this tutorial at all, and it gets straight to the point.

If you don't have Photoshop, you can use Photopea as a free alternative.

It'll be slightly different but you can pretty much achieve the results all the same.

And yes, the main reference used for this is the game Valorant, which is obvious if you are familiar with it.

Here's the basic breakdown of what we will do:

Design the shapes and indicators
Export our assets appropriately
Construct the interface, making sure we use proper layout techniques

Watch the full tutorial here:

Final Words:

I know this video is a bit short compared to our other ones, but don't let that fool you—there's a ton of value packed in here. Whether you're just getting started or a more intermediate designer, these principles will help you to create any kind of toolbar interface.

Don't miss out on this Halloween Sale!

Get 20% off any product with the code " SPOOKY20 ".

Take advantage of this now and get all the design assets you need.

Oh also, we've just launched Premium Tutorials, so if you more value-packed tutorials just like this, click here

Here are the current premium tutorials.

Anime Inventory UI Tutorial (41 minutes)
Shop UI Tutorial (46 minutes)
Sidebar UI Tutorial (56 minutes)
Anime Rewards UI Tutorial (41 minutes)

If you want instant access to all future premium tutorials, you can join the Academy.

Click here to get the Academy bundle (unlock all tutorials, courses, e-books to come)

0 comments

Roblox UI Design Basics for Beginners

Must-Have Resources to Level Up Your UI Design

The UI Plugin I Can't Work Without in Roblox

A Crucial UX Principle You Need to Know

🥳️ THANK YOU for 79 MEMBERS in UNLIMITED Access!

See all posts from gfxcomet