Graphic Design

[SlipperyBrick]

There is probably not a clear or straight answer to my question but I'm hoping to learn as much as I can. I'm a programmer and in no way a professional graphic designer. I am looking to create a bunch of icons for a desktop application (specifically icons for buttons, etc, for a game engine). I am wondering at what resolution should I design my icons at? Or doesn't this matter? I'm considering the fact that these icons need to look good on all monitors and I want them looking as clean and crisp as they can possibly be.

Is there some sort of secret to this? I look at the icons on websites and other applications and they look so high resolution and clean but everytime I export my icons they look like a blobby mess. Is there any information or terminology I need to know about in order to learn and solve this problem?

Thanks!

[Dan C]

Hi ScrotieFlapWack!

Firstly this depends on the file format that your icons need to be. If you can use vector formats (SVG, PDF,EPS) then this is always recommend, as they can be scaled either up or down without pixelating, unlike raster formats (JPEG, PNG,TIFF). The other thing to consider is file size, some engines apply restrictions to file size so you may not be able to create huge icons to be scaled down.

I'd recommend looking into our Export Persona, as this allows you to export one object out at multiple resolutions, upscaling to your preferences. Check out the below tutorials for more info:

• Exporting
• Exporting: Layers
• Exporting: Slices
• Exporting: Continuous
• Exporting: Automatic Directory/Folder Creation (1.5)
• Exporting: Multiple Outputs from a Single Slice (1.5)
• Exporting: Transparent and Coloured Backgrounds (1.5)

[SlipperyBrick]

Is creating big icons and scaling them down better? This isn't for a game by the way its for actual software (a game engine). The icons need to be dds format but I can export as png and then convert them.

I'm just wondering how should I create the icons, I looked at a workflow called pixel perfect where every pixel is snapped to a grid realistically its impossible to do that especially when your icons have curves.

What methods are used when graphic designers create UI elements as this is what I am creating.

[Dan C]

12 hours ago, ScrotieFlapWack said:

Is creating big icons and scaling them down better?

Provided you don't have a file size limit I can't see any issue with this, although it depends on the method of downscaling that the software will apply, as if it re-samples the image you may end up losing small details. 

Most will use the vector persona in pixel view when creating UI, as you are given access to a wider control in your design when creating in vector, but the icon will display as though it's been rasterised, giving you a better idea of how it will look when exported. You can also change your snapping preset to our UI Design option, which may help with alignment etc.