From my limited experience, the best ways to sketch UI is through programs that deal with vector art, like Adobe Illustrator (my choice) or Inkscape (free). Photoshop is a bad choice since it uses raster art.
Illustrator is better for ui elements, photoshop(or paint.net) is better for game previews and ads
One of the best programs to use other than Photoshop, is no other than paint.net!
It is one of the best FREE programs for UI Deigning/Designing in general, and you should 100% try it out.
I’ve been using paint for most of GFX and UI Designs and I’ve had no problem with it over all these years.
One of the best tutorials for paint comes from @GeorgeOfAIITrades
But… If you have some money and want to spend it on a program, I would suggest looking into getting Adobe Illustrator in the future.
Illustrator was basically made for UI and can give you a lot of advantages aswell.
Would you consider GIMP as an alternative for paint.net? I have a Mac which sort of makes it impossible for me to get paint.
Oh! I never actually tried GIMP since I have windows but I heard it’s also a really great program to use. Maybe search up some tutorials on GIMP and see where it goes from there.
Alrighty, i’ll give it a try. Mahalo!
Yea, the one draw back for Paint.net is it’s in-ability to be used on Mac. That being said, GIMP is like a medium between PDN & Photoshop. Some people I’ve talked to though say GIMP is even harder than Photoshop, so, idk.
For a solid GIMP Tutorial, check out @FearMeIAmLag’s tutorial
If you decide to try Illustrator, try out @Younite’s tutorial
Or @PumpkinWhite’s Tutorial
GIMP- good for beginners and way more features than PDN (excluding the add-ons), and has a Mac-OS version. This program is a lot more friendly towards studio since it is very good at keeping the transparency TRANSPARENT, so it doesn’t get the black border effect in Studio (which would happen if you did it through PDN). It is, however, more ‘complicated’ than PDN, but it is quite quick to catch on to.
Adobe Illustrator is payed for, though it is a really nice tool for UI design, I would rather get used to what is free. I do have it though, got it cracked, which I don’t recommend, unless you want your computer full of viruses from downloading fake ones.
I recommend both Illustrator and XD for UI. Typically I make my icons in Illustrator then move them over to XD when making mockups since they are both supported by Adobe
XD is also free now I believe and has tons of interactive examples/tutorials to follow on how to use the application, how to move files from PSD/AI to XD, how to export, etc.
I use GIMP for icons and assets inside my UI, but I have used other softwares for mockup before. Personally, I believe a great UI designer should be able to make beautiful UI/UX without any image assets, but they really do add a flare so I hope you are able to figure out which software best complements your Roblox GUIs.
Adobe XD is a great resource - even more so now that it is free.
Very simple to use and the templates can definitely lead you in the right direction.
If you’re looking for a free SVG editor, Inkscape is excellent. Huge amount of features and ability to export as PNG. Added bonus of everything which is not written over in the canvas will automatically be transparent.
You will also want to grab a copy of an executable called pixelfix to prevent horrible black outlines on curved UI. It’s on some post on the dev forums if you search for it.
I’ve never used or even heard of Adobe XD, is it the same as exporting and importing to Roblox as say an application like Photoshop?
A post was merged into an existing topic: Off-topic and bump posts
I use Photoshop, and I find it does what I need.
If you stick with the default shapes, they stay as vectors.
It’s fine for Roblox though since Roblox doesn’t support vectors. You only want vectors if you want to change the inital size after you’ve finished.
I personally use paint.net for the vast majority of my UI design work, and use Inkscape for logos and icons. Both are free to download and use!
Edit: you’ll want paint.net addons too - I use lots of BoltBait’s and pyrochild’s plugins and it’s well more than good enough for me!
As a personal preference, Illustrator does good outlines of UI. However, export that to Photoshop and you can customize how your UI style looks with a lot more tools.
At the end of the day, rather than sticking to one type of program to make UI designs, use a variety as each will have their own pros and cons that you can utilise.
Adobe platforms generally have a lot of tools to use. paint.net by default is not very tool heavy, however it is compensated by the amount of free plugins and recourses available.
In my opinion you should start with paint.NET, it’s free, and all your tools are near your eyes. It’s easy to understand, and you can explore the topbar menu, colors ect.
Also note that, you can make awesome UIs just with roblox studio. For example I’m a fan of bloxburg-like uis, roundy and button-like, only thing I did is making a circle in paint.NET, uploaded and then made a structure for the button like this:
UIs made off images are either crappy, pixelly, or awesome, keep that in mind.
I started out with Paint .Net - a really powerful tool for creating nice photos - however with UI you want something like @Kamfkarren says.
Inkscape is good and free - you can convert raster (.jpg, .png - normal images) to vectors which is handy, however dealing with colours is a bit annoying.
I recently purchased Affinity’s line of photo/vector editing software - Affinity Photo and Affinity Designer. They’re both excellent options and are one-off (and very cheap) payment.
Photo handles raster images and can even process RAW footage.
Designer is all about Vectors.
If you have a graphics table you can hook it up to both tools as well.
I’d suggest starting with Inkscape first, and then compare Adobe Illustrator and Affinity Designer if you want to get serious.