Hello everyone! I’ve been using Google Drawings for a while now, and I felt that the Roblox development community could use an introduction.
Google Drawings is part of GoogleSuite, a free program that provides a wide variety of services. Google Drawings in particular has a ton of features, most of which are commonly found in paid applications. I’ll go over the UI design techniques that I use, but this program has much more to it than I’ll be showing.
Introduction
To start, you’ll want to create a new drawing (commonly done through Google Drive), and resize the canvas to your liking. This can be done by dragging the diagonal lines in the bottom righthand corner, or by opening the page setup (File, Page Setup). Once you have a canvas that’s about the size of the button, or other objects you’re creating, it’s time to start designing.
Creating Shapes
Use the shape menu to select a basic shape:
Once clicking on a shape, drag your cursor across the screen to set the size.
For this button, I’ll be using a rounded rectangle. You’ll end up with something that looks like this:
Editing an Object
You can use these buttons to change the interior color, border color, border weight, and border type:
You can always click the plus at the bottom to make your own colors:
Keep in mind that the transparency effect will transfer over to Roblox, as long as the button doesn’t have a background.
If you want to do a gradient effect, then all you have to do is go to the gradient tab. There are preset gradients, but the custom gradient window has a wide variety of options:
Next, scale it to your liking. Select the button, and use the small anchors around the shape to adjust the size and rotation:
Open “Format Options” in the top menu if you’d like to set the size to a specific pixel scale, or the rotation to a specific degree.
Additionally, when you select an object, you’ll see a small yellow shape somewhere on the border.
This can be used to adjust the specifics of the shape - for a rounded rectangle, it’ll adjust the radius of the curves - for sharper shapes, such as triangles, it’ll move the points.
Images
If you want to add an image, simply drag it into the window, or upload it via Drive, your computer, or a URL (Insert, then Image).
As an example, I’ve uploaded a simple image and highlighted the crop options. You can use these options to add shapes to image borders:
Text
I’d personally suggest adding text in Studio, so that you can make the font consistent throughout your game, but if you’d like to include text, you can create a text box (double click to edit the text) and use these options to customize it: 
If you want to create artistic text, insert a word art object (Insert, Word Art)
Word art can be used to create interesting text with borders and unique colors. Here’s an example of what can be done with word art if you mess around with the options:
Effects
If you want to add effects, there are two simple ones built in: drop shadow, and reflection. These can be accessed by selecting an object, then clicking “Format Options” in the top bar. You can always mess around with shapes to achieve custom effects if these don’t fit your needs.
Completion
Once you have your finished product, select all of it (drag or Ctrl/Cmd+A) and group it together (Ctrl/Cmd+Alt+G)
Here’s an example of a finished play button using the content I showed above:
When everything is grouped, select the group and right click it and center it horizontally AND vertically:
Go to file, then export it as a PNG image
This is what the final result will look like in your game. 
This was a lot, so I just want to remind everyone that the possibilities are endless, and this is one of many programs you can use. There are so many options in this one alone, that it’d take ages to go over them - therefore, I encourage you to mess around with them and find what suits you the most.
Finally, I just want to know if this was helpful to you, and if you’d use this program in the future.
- Yes
- No
- Possibly
0 voters