UI Design Starter Guide

Such a good tutorial! :open_mouth: Helped out a lot!! :smiley: :smiley: :smiley: :smiley: :smiley:

3 Likes

Probably the best UI tutorial out there. Nice work :grinning:

3 Likes

Although I’m over a year late to the conversation, I’ve got a question.

In regards to changing between the images with ImageRectSize, how would a script like that look like to change between the ImageRectSize and ImageRectOffset?

3 Likes

Is it possible to write a v2 version including constraints?

3 Likes

Nice tutorial I’m going to cut out this example Screenshot_243

To try it out right now.

1 Like

Great tutorial! Bookmarked for sure.

3 Likes

I don’t have much time but it would like this:

local SPRITE_SIZE_X, SPRITE_SIZE_Y = 32, 32

local function changeSprite(newSpriteIndex) 
    local newSpriteOffset = Vector2.new(newSpriteIndex * SPRITE_SIZE_X, newSpriteIndez * SPRITE_SIZE_Y)
    imageLabel.ImageRectOffset = newSpriteOffset
end

changeSprite(0)
changeSprite(3)

I don’t have time to do more sorry, and this only changes the offset. If you’ve got a good setup then you shouldn’t need to change sizes anyway.

@Tor_Laws
Yeah sure, I’ve been meaning to do something about constraints so I’ll put v2 on my to do list :slight_smile:

6 Likes

Amazing tutorial, love it! 10/10! Packed lots of important information in my head. Though, on top of that I would recommend, you insist them to use https://www.roblox.com/library/2233768483/Roundify

3 Likes

Good guide, lot of stuff to get going. Personally, I like to use scale, not offset, with UIAspectRatio constraints. This is what I feel gives the most consistent experience because something made with offset would be gigantic on smaller screens

7 Likes

This deserves way more recognition than it already has. Just the fact that you took your own time to help any aspiring developers. Thank you! <3

5 Likes

Really nice guide, goes in-depth about a lot of stuff that goes un-noticed.

Good job, I’ll recommend this to anyone who is interested in designing UI.

:slightly_smiling_face:

6 Likes

Good job on this, also extra info: I would recommend 100% getting a UI design plugin to enhance your UI.

2 Likes

thx u sooo much for the help :smiley:

1 Like

I’m a bit late here but thanks!

This really helped me out and I understand a bit more about UI Designing :+1:

3 Likes

Dang, this is so accurate, I’ll be reading this over and over thx for tutorial.

2 Likes

Wow thank you so much this is a really great tutorial, I’ll be sure to have this bookmarked!

2 Likes

What would be the best size for doing button icons? I ran into an issue earlier tonight and I want a work around so I don’t make the same mistake twice.

1 Like

Hopefully I’ve interpreted your question right…

I tend to design all images at 1024x1024 – the highest resolution Roblox will upload images at (you can upload images at higher resolutions than this, but they will be downscaled). However, usually I upload them at smaller sizes such as 512x512 or 100x100 just because I don’t expect them to be displaying much larger on a reasonable screen.

If the ImageLabel will be use Offset for its size, you can upload the image at that size for best appearance. Otherwise, if it uses Scale, you may want to account for what it’ll look like at larger and smaller screen sizes like 1280x720, 1920x1080, and 3840x2160.

I also recommend making icons in a vector format whenever you can so that you don’t need to care about size. Vector images can be scaled infinitely and still look smooth, Roblox doesn’t support these but it’s still useful on your end so you can export to any size you like without issue. (In programs like Photoshop, Illustrator, and Affinity Designer/Photo these are often referred to as “shapes” and can be created and edited using the “pen” and “node” tools.)

Some other considerations are asset load times, spritesheets, and memory usage (although the latter should only be considered if you need to do some hardcore optimization, which you probably never will). Images of larger sizes will of course take longer to load than smaller images. You might also want to use spritesheets, in which case you’ll need to make icons smaller than the max size so that you can fit multiple within a single 1024x1024 image.

7 Likes

Thank you so much! Very useful. What programs should I use?

1 Like

I personally recommend Affinity Designer and/or Affinity Photo for reasonably priced quality design and image editing software (they’re a one time payment). Adobe Photoshop and Illustrator are fine as well if you can afford them. If you can’t pay anything, I recommend Inkscape and Gimp which are both free.

3 Likes