Game icons are square images which should quickly convey the meaning and style of your game. The following tips will help you produce eye-catching icons that look great and attract players. Show Icon SizeGame icons must be square with maximum dimensions of 512×512 pixels. Uploaded icons will be scaled down to smaller sizes throughout the Roblox site and app. An example is the Games page which displays icons at 150×150 pixels or smaller. Some details in an icon may be lost when an icon is scaled down, especially text. We recommend that you preview your icon at smaller sizes like 128×128 and make sure the details remain clear. The icon is the first experience many players will have with your game, so it’s a very important marketing tool. Here are a few example icons which have been carefully composed to express a certain vibe:
This icon represents a fun, fast-paced game. The action is nicely framed while more tracks are shown in the background. This icon represents a slower-paced game in a beautiful, futuristic world which players can explore with their friends.
This icon represents an action-packed superhero game where multiple players can fly around a modern metropolis. This icon represents a cozy winter home where players can chat, hang out together, and roast marshmallows by the fire. ColoringUsing the right colors for your icon is an easy way to express the core vibe of the game. SaturationHighly saturated colors can make a game icon look dream-like, while lower saturation can express a more somber tone.
ContrastYou should showcase your game icon in its most brilliant, viewable state. Images with low contrast often look “washed out” while images with excessive contrast can look fake and unattractive.
Final TreatmentA treatment or “filtering pass” is a global effect that’s applied to evoke a specific tone. This can drastically change the viewer’s feeling about your game.
Fantasy Vintage Horror FontsFonts are very important — they can even become part of your game’s identity. Consider these guidelines when selecting a font for icon text:
Discouraged PracticesAll developers should avoid the following practices to make sure their game icon follows Roblox’s standards and terms of service.
Copyrighted LogosTo avoid the risk of having the icon removed, do not include Roblox branding or other legally-branded material.
Ambiguous GraphicsAmbiguous graphics are hard to understand. Unless a player has a specific connection to the graphic, they will not know its meaning.
Large Text SlogansExcessive use of text covers the icon and ruins its graphical nature. It can also seem overly self-promotional and turn players away.
Game Description on IconPlayers are not likely to read a long text description on the game icon. It may also become unreadable when the icon is displayed at smaller sizes.
In the Articles/Intro to GUIs guide, you learned the basics of GUIs, how to create a screen GUI canvas for all players that enter your game, and how to position and resize a TextLabel GUI object on the screen. If you did not read through the Articles/Intro to GUIs guide, please do so first! Let’s expand on those concepts and explore how to insert images into the screen GUI space. This is a great way to display icons, logos, background images, and other cool designs on the screen! Adding Images to a Screen GUIAdding an image to a screen GUI is very similar to adding a text label.
This will add an empty image label to the top-left corner of the game view. Upload an ImageThis placeholder is a good start, but obviously we need a real image to put on the screen. Let’s upload an image now. The game must be published to Roblox before you can upload images. If you need help with publishing, please click here.
If you don't see a popup window, your game might not be published. Remember that a game must be published before you can upload images.
You can use this little “play” icon for testing — simply right-click on it, select Save Image As..., save it to a convenient location, and then navigate to it as instructed. If you want to place images over a colorful background on a menu screen or similar, you should make the pixels around the visible parts transparent in your image editing program. This will let the background or other game objects behind show through.
The image is now uploaded and applied to the ImageLabel object. However, there are some properties which we can change to make it look even better!
Layering Images in a Screen GUIGreat! Now you understand how to upload images to Roblox and put them on the screen. When you start adding more than one image, though, you’ll probably need to start thinking about layering. Think about layering objects on the screen GUI space just like putting stickers on a piece of paper. If you stick one sticker on top of another sticker, it will hide that sticker behind it. Sometimes, however, you’ll want to arrange stickers in a different way, perhaps moving those behind to the very front. Create a Second Image LabelLet’s place another image on the screen to demonstrate how layering works.
Note that this image label will have the same name ("ImageLabel") as the first one you created, so make sure you select the correct one by looking for the blue selection outline around the label in the 3D game view.
When the image is finished uploading, you should see the following result: Change the Label PropertiesThe initial properties don’t look good for this image, so let’s fix them.
That should correct everything and the image label should now look like this: Change the Layering OrderAs you can see, the new image label was placed behind the first one. If you don’t like how this looks, you can move the object to the front by changing its Z-index.
Since the ZIndex of the first label (icon) is 1, our setting of 2 for the blue shape pushes it in front. The lowest possible Zindex is 1 but you can set the number as high as you want. We recommended using increments of 10 for each layer, for example 10 for the first object, 20 for the second object, 30 for the third object, and so on. Why? Because you might need to make changes to your layout later and add new objects between existing ones. This way, you can set the Z-index of a new object to a value between the Z-index of either neighbor rather than re-sort every object in the layout. Now you know how to create image labels in your game, upload your own images to Roblox, position labels on the screen GUI canvas, and layer them with Z-indexing. |