Creating GUI icons

Sometimes you may need to create new icons for the GUI. Here's how we created them so you can match the style of the existing icons.

You will need:

• Windows 10 +
• Paint.NET (https://getpaint.net/)
  • Outline Object plugin (https://forums.getpaint.net/topic/7291-pyrochild-plugins-2020-11-21/)
  • Spaced Text plugin (https://forums.getpaint.net/topic/111094-spaced-text-variable-letter-and-line-spacing/)
• Doctor Who font installed (resource/fonts/doctorwho2010.ttf)

First open the empty hexagon from materials/vgui/tardis-themes/default/off/empty.png in Paint.NET and save it as a new file

Use the hexagon as a guide for any graphics to be displayed, there should be nothing outside of the hexagon shape.

To add the text, create a new layer then make sure your primary colour is set to hex #113D6D and use the Spaced Text plugin (Effects -> Text Formations -> Spaced text) and type in your text and use the following settings:

It should look something like this:

Now we need to add the outline. To do that, set your primary colour to hex #B57C67 and use the Outline Object plugin (Effects -> Object -> Outline Object). Make sure you're using the layer with your text on for this to work. Use the following settings:

Hopefully you'll end up with something like this:

And you're done, congratulations you have made a new icon!