Skip to content

On Icons And Images

jus edited this page Jan 12, 2013 · 6 revisions

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

ic_mixxx.png mixxx-icon.png

ic_mixxx_window.png

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

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.

mixxx/res/unused/images

holds all the unused files lurking for some reasons in //mixxx/res/images/ // until

Clone this wiki locally