- This tutorial is mainly directed towards Adobe Photoshop users. If this post gets popular, I will expand to other digital art platforms such as pixlr, paint . net, and more.
Hey there. My name is steamsystems, formerly Zelrar, and I have prepared a long but in depth tutorial on UI designing. Let me start with one thing: DO NOT LOOK AT ROBLOX TUTORIALS, unless your scripting your UI as well. ROBLOX tutorials aren’t very helpful, as people are inexperienced compared to the Photoshop experts out there. You can easily find what your looking for on YouTube. Along with this statement, I will not be providing screenshots throughout this tutorial.
Lets begin!
Step 1: Preparing yourself.
During UI designing, its important to know where you left off. Usually I find a good time period with no disturbances and do my UI all in that one time period, but some people’s schedules are tight and have to do it over the span of numerous days. From experience, I can say this is OK. Do not worry about finishing, just worry about how good it looks. Thats very contradictory, but it will make sense in the future.
Step 2: Basics
Utilize your tools in Adobe Photoshop. It is meant to be utilized for user interface as much as anything else. You need to know how to use the tools on the left of your screen before you UI design, or your projects will be useless and your work won’t be as efficient as it could be. Search up tutorials on each one, once you have a strong grasp try critiqueing a concept idea that you had in mind.
Step 3: Practice makes perfect
You need to practice before your good. With UI, it doesnt take too long for naturals. If you aren’t a natural, and I know this sounds terrible, I’d recommend finding a new development aspect, or else this will take years to master. Lets say you are, here is how to keep increasing your skills.
- Talk to other UI designers, and get inspiration from their work.
- Recreate UIs from movie shows, popular video games, and etc.
- Look at tutorials and keep rerunning over basic concepts to make sure you have a strong grasp on everything.
These are critical things you need to keep improving your skill.
Step 4: Importing to ROBLOX studio
Importing to ROBLOX studio is needed if your making a game by yourself. Importing is very simple. Use ImageLabels, and ImageButtons. Scale their sizes at your own distribution until they look nice. If you want it to be like a “ROBLOX color overlay” you should go to your proprties tab, go to ImageColor and change it at your will. Its fine to accidentally import everything as a ImageLabel, happens all the time.
Step 5: Mastering UI
Mastering UI is something that can’t be done by naturals, or anyone easily. This is something needed straight by creativity and taste. Good taste = good UI looks. Good creativity = good placement and etc.
This is how you master UI, and you can improve your taste by looking at others UIs and implementing them to your own interface designs.
Step 6: Commissions
UI commissions have a lot more freedom than almost any other development aspect in the roblox developer community. You have a bunch of PNGs stored up, and your ready! Its that simple, but wait… Its not organized. Take a look at my portfolio for a good idea on organization. I make little logos for each of the “concepts” I talk about in those paragraphs. This makes your portfolio more attractive, professional, and shows you have more dedication than the average interface designer. Make sure to always make the other person trade first in business deals, unless you have scammed previously.
Note: This is all opinion based, and is not guaranteed to help you assuming it is directed to adobe photoshop users.
I will not be answering questions, UI is all about learning it yourself as harsh as that sounds.
Good luck.