Difference between revisions of "Skin Creation"
(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...") |
|||
| Line 1: | Line 1: | ||
==Instructions== | ==Instructions== | ||
| − | + | 1. 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.<br> | |
| − | + | 2. Draw the different parts: | |
| − | + | ||
| − | + | ===Backgrounds=== | |
| − | + | ||
| + | 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.png | ||
screen_retroarch.png | screen_retroarch.png | ||
| Line 22: | Line 25: | ||
game_menu.png | game_menu.png | ||
| − | + | ===Bezels=== | |
| − | + | ||
| − | + | * '''Red''' area: this is the overscan area. Do not draw important things here since most TVs won't display this area. | |
| − | + | * '''Blue''' area: this is the main drawing area. It is calculated in a very conservative way so that every TV will display its content. | |
| − | + | * '''Yellow''' area: this corresponds to text areas so be careful with what you put here because text could result unreadable. | |
| − | + | * '''Green''' area: this is an optional drawing area: | |
| − | + | ||
| − | + | ===Bezels - Transparent=== | |
| − | + | ||
| − | + | Make the adjustments to fit these transparency images 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. | |
| − | + | ||
| + | ===UI=== | ||
| + | |||
| + | * '''arcade-*, flag-*, freq-*, region-*''': all of them corresponds to the different UI selectors. | ||
| + | * '''logo''': it is the image displayed in the '''screensaver'''. | ||
| + | * '''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. | ||
Revision as of 23:07, 5 May 2020
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:
Backgrounds
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
Bezels
- Red area: this is the overscan area. Do not draw important things here since most TVs won't display this area.
- Blue area: this is the main drawing area. It is calculated in a very conservative way so that every TV will display its content.
- Yellow area: this corresponds to text areas so be careful with what you put here because text could result unreadable.
- Green area: this is an optional drawing area:
Bezels - Transparent
Make the adjustments to fit these transparency images 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.
UI
- arcade-*, flag-*, freq-*, region-*: all of them corresponds to the different UI selectors.
- logo: it is the image displayed in the screensaver.
- 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.
