On Icons And Images

Tips for Designers

Here are some tips that you might find useful as you develop icons or other drawable assets:

Common naming conventions for icon assets

Try to name files so that related assets will group together inside a directory when they are sorted alphabetically. In particular, it helps to use a common prefix for each icon type. For example:

Asset Types	Prefix	Example
Icons	ic_	ic_mixxx.png
Icon templates	ic_template_	ic_template_library_and_preferences.svg
Library icons	ic_library_	ic_library_playlists.png
Preferences icons	ic_preferences_	ic_preferences_broadcast.png
Skin templates	skin_template	skin_template_outline.svg

Working space organisation

mixxx/res/images/

ic_mixxx.ico

Windows icon container. A full set should contain 16×16, 32×32, 48×48 and 256×256.
Microsoft Vista+ Icons Guide

~~ic_mixxx.png~~ mixxx-icon.png

Note: Original name mixxx-icon.png restored since Linux seems not to like underscores for icon file names in .desktop files. This resulted in missing application icons on Gnome/KDE with mixxx.desktop .
Application icon for Linux .desktop file . Primary size for application icons 48x48
Desktop Entry Specification
GNOME icon specification
QT Desktop File Standard

ic_mixxx_window.png

Window icon displayed in the corner of an application's top-level windows. Recommend size for Window icons 48x48
Setting the application icon in QT 4

mixxx_install_logo.bmp

Bitmap image to display on the header of installers pages for Windows NSIS installer. Recommended size 150x57.
NSIS Modern UI Documentation

library

Sub-folder that holds all 48x48 *.png icons for display in Mixxx library widget

preferences

Sub-folder that holds all 48x48 *.png icons for display displayed in Mixxx preferences dialog

templates

Sub-folder that holds various templates for image files

ic_template_mixxx.svg = multilayered Inkscape template for Mixxx application icon, holds special layer for 16x16 icon too
ic_template_library_and_preferences.svg = multilayered Inkscape vector template for all icons in library widget, preferences dialog & skins library style.
ic_template_keyboard_mapping_sheet.svg = multilayered Inkscape vector template for keyboard mapping chart (for printout, documentation...)
logo_mixxx.svg = multilayered Inkscape vector template for Mixxx logo (holds bw variant too)
logo_mixxx.png = Mixxx logo bitmap
skin_template_outline.svg = multilayered Inkscape vector template for Outline skin. See Creating Skins.

mixxx/res/osx

application.icns

Apple icon container for display in in Mixxx` *.app bundles for OS X.
A set of icons that consist of pairs of icons (standard and high resolution) for each icon size—16x16, 32x32, 128x128, 256x256, 512x512.
Optimizing for High Resolution
Apple Human Interface Guidelines

VolumeIcon.icns

Apple icon container for display in Mixxx` *.dmg images for OS X.
A set of icons that consist of pairs of icons (standard and high resolution) for each icon size—16x16, 32x32, 128x128 ( 128 is maximum size OS X desktop grid, enough for dmg`s)

The naming convention in the icon containers is: icon_<sizeinpoints>x<sizeinpoints>[@<scale>].png where <sizeinpoints> is the size of the icon in points, and <scale> is @2x for the high-resolution version. (Don’t add a scale for standard resolution.) Additionally, the filename must use the icon_ prefix.