Making a decent game icon

:smile: Today I am going to make a step-by-step tutorial on making a game icon (simulator style)

→ Set up:
1.Roblox studio
2.Blender (Optional)
3.Photopea (Free online photoshop)
4.Adobe Photoshop (Optional)

–>Roblox studio

P.S. I usually use Blender to make game icon but I want to keep it simple in this tutorial,so I use Roblox studio instead.

  1. Create a new game (baseplate suggested) and make a green screen
    e.g.

2)Disable “Global shadows” and set ambient to “193, 193, 193” (suggested)
e.g.
螢幕擷取畫面 2021-04-29 223042

3)Load your character using load character plugin (by AlreadyPro)

4)Pose your dummy for your icon
(Tip: Using rotation and move tool is easier than using animation editor)
螢幕擷取畫面 2021-04-29 223936

Remove the name of the dummy.

Result:

5)Take a screenshot

–>Photopea

You can use photoshop instead but I don’t have enough money to buy it :frowning_face:

  1. Create new project in photopea and choose “Youtube Profile” template
    Background change to “transparent”

  2. “Open & Place” the screenshot in “File”

  3. Scale the screenshot properly

9)Click “select” and choose “magic cut”
(sometimes it may not work properly, then you need to choose the selected area manually)

  1. Add a square cover up the whole image

  2. Move the shape below the screenshot
    螢幕擷取畫面 2021-04-29 225318

12)Search sun ray online
If you couldn’t find one with real transparent background,pick a sun ray image with white background and follow step (9).

Mine is https://www.google.com/search?q=transparent+rays+png&tbm=isch&hl=en-GB&safe=strict&rlz=1C1EJFA_enHK736HK737&sa=X&ved=2ahUKEwj89aO926PwAhUI5ZQKHcMoBycQrNwCKAJ6BQgBEMUC&biw=1519&bih=722#imgrc=mt7a5MKK5LdnBM&imgdii=JIIm4Fzs8AWviM

  1. Right click the layer,and press blending option

  2. Click color overlay and choose the color of the ray image and click “Ok”.

  3. Don’t forget to lower the opacity

  4. Adjust the layout a little bit and add more detail (if you want)

Add outline = click blending option and stroke
Add text = click the letter “T” on left hand side

  1. Done!

This tutorial took me an hour to make it,hope you like it! :smile:

Rate this tutorial (1 worst,5 = best)
  • 5
  • 4
  • 3
  • 2
  • 1

0 voters

13 Likes

What’s the point of taking a screenshot when you can render it for higher quality though

9 Likes

That’s not what you do, you use the greenscreen sky, not a green screen made of parts.

5 Likes

Rendered thumbnails and icons are bait-and-switch; screenshots from the game are honest to the players. To my knowledge, that is what Driving Simulator does.

2 Likes

This definitely helps the people who can’t afford or are not that good at using the expensive editing sites!

1 Like

How is it bait if you include what is in the game

It’s bait if you use something which is not in the game like a car in a room

Yes the graphics are better but everyone knows that roblox graphics aren’t like that

3 Likes

That’s a bold assumption for a platform with hundreds of millions of players. Also, to an outsider, it looks bad on Roblox if they are expecting a high graphical quality from the thumbnail and don’t get that.

1 Like

You can render it from blender,but this tutorial is aim for beginners so I don’t explain blender render in this tutorial

Using blurred screenshot of the game as background in the icon is a good solution for that.
Like bloxburg and adopt me’s icon

Yeah but even if for example you have a car game; you only render the car and the background is a blurred screenshot

How would that affect the gameplay or quality

Just a question