Making a decent game icon

[Snow_Lober (System)]

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.

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)

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

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

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

8. 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)

10. Add a square cover up the whole image

11. Move the shape below the screenshot
    

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

13. Right click the layer,and press blending option

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

    

15. Don’t forget to lower the opacity
    

    

16. 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

17. Done!
    
    

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

Rate this tutorial (1 worst,5 = best)

• 5
• 4
• 3
• 2
• 1

[dev_dxniel (kwijt)]

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

[Aeventy]

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

[AstroCode]

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.

[ZDH_Dev]

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

[dev_dxniel (kwijt)]

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

[AstroCode]

@DeRobloxMeneer

everyone knows that roblox graphics aren’t like that

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.

[Snow_Lober (System)]

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

[Snow_Lober (System)]

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

[dev_dxniel (kwijt)]

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