Designing skins optimised for Retina displays

Q&A about the latest versions
Post Reply
Andrew H
Posts: 86
Joined: Thu Apr 30, 2009 7:04 pm

Thu Nov 21, 2013 10:39 pm

I am working on a project where I would like the skin to be optimised for viewing on Retina displays, so that the controller buttons take advantage of the much higher pixel density of these screens and thus look crisper than they do on an older, non Retina screen.

I guess one way to do this would be to draw my buttons and create .png files at twice final size and then place them in the skin with the scale setting at 50%.

A drawback of this approach is that the skin editor's WYSIWYG window displays the buttons at their full size and ignores the scale instruction, which makes it difficult to visually place them relative to other elements.

Anyone have any ideas, please?


User avatar
Posts: 10997
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Thu Nov 21, 2013 11:15 pm

Hi Andrew,
Use SVG buttons, SVG's will be used in the HTML5 output and look good with the retina display as long as they are not scaled.
Flash will convert to png as it can not use SVG. However its still good to use the SVG in the skin as you can resize the SVG and then when you output it will be good quality.

For sharp images in Flash use SWF, you can convert an SVG to SWF in Adobe Illustrator or similar program. The same as SVG, they will look good as long as you don't scale them.
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Post Reply