Skin Creation

From RGB-Pi Wiki
Revision as of 23:03, 5 May 2020 by RTomas (talk | contribs) (Created page with "==Instructions== # Create a copy of the template skin folder located in <code>/home/pi/RGB-Pi/images/skins</code> and change to the name that you like. # Draw the different p...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Instructions

  1. Create a copy of the template skin folder located in /home/pi/RGB-Pi/images/skins and change to the name that you like.
  2. Draw the different parts:
    1. Backgrounds
      1. It is recommended to leave the backgrounds as simple and plain as possible, using few and dark colours. This will improve the text readability.
NOTE: all system menus support independent backgrounds. You can create different BGs for every system option menues creating the corresponding files:
screen.png
screen_retroarch.png
equalizer.png
sound.png
sound_retroarch.png
bluetooth.png
control.png
control_retroarch.png
network_retroarch.png
ext_data_source.png
system_retroarch.png
information.png
system.png
advanced.png
game_menu.png
    1. Bezels
      1. Red area: this is the overscan area. Do not draw important things here since most TVs won't display this area.
      2. Blue area: this is the main drawing area. It is calculated in a very conservative way so that every TV will display its content.
      3. Yellow area: this corresponds to text areas so be careful with what you put here because text could result unreadable.
      4. Green area: this is an optional drawing area:
    2. Bezels - Transparent: make the adjustments to fit this transparency into the bezel area. The simplest way is to make a selection in the bezel empty area and create a new image based on that selection. The recommended opacity is >= 50% for improving the text readability.
    3. UI
      1. arcade-*, flag-*, freq-*, region-*: all of them corresponds to the different UI selectors.
      2. logo: it is the image displayed in the screensaver.
      3. selector-front-* and selector-back-*: these are the images used for the text item selectors. The front ones are displayed on top of the text and the back ones behind the text.
NOTE: the back selector images are not provided in the template, so if you want to use the same you just simply make a copy of the front ones and rename them.