|This page or section may require cleanup, updating, spellchecking, reformatting and/or updated images. Please improve this page if you can. The discussion page may contain suggestions.|
Fan art, also known as Backdrops, are high quality artwork that is displayed in the background as wallpapers of media center GUI menus. FanArt is typically made to be displayed as a backdrop when metadata about a specific Movie, TV Show, or Music Artist is displayed on the screen, as both eye candy and to set the mood. In some Kodi skins, fanart is also sometimes used as a sort of landscape alternative to posters.
XBMC Media Center supports backdrops for Movies, TV Shows, Music Artists/Groups/Bands, and Weather conditions.
This first image is an example of some FanArt. It is a fan created image honoring the show Stargate Atlantis. FanArt can of course take many forms, this is just an example. Kodi will take this image and then use it in your video library. When you are browsing through the seasons or episodes of Stargate Atlantis, Kodi will display the FanArt in the background.
This second image shows just one example of how Kodi can display the FanArt backdrops. Exactly how the FanArt appears is dependent on the skin you are using. This image is with the Fusion skin, and other skins will present a different view. Whatever television show you are browsing, FanArt will be shown as long as FanArt is available.
2 Using FanArt in Kodi
Fanart is as of Kodi version 9.04 available both for Music and Videos.
2.1 Video FanArt in Kodi
Video FanArt is available in the video library, both for television shows and movies. It has to be enabled via the Settings, Skin settings "Custom" panel. FanArt is retrieved from user submitted FanArt at sites such as TheMovieDB.org (TMDB), TheTVDB.com, fanart.tv and htbackdrops.com.
In order to use TV show FanArt you must be using the TheTVDB.com scraper. When you scrape a show for show information, FanArt is automatically retrieved and the highest user rated FanArt is used by default.
Movie FanArt is available for most movie scrapers by way of TheMovieDB.
You can also have your own custom FanArt background:
Display of the FanArt is entirely dependent on how the skin chooses to use the image, for TV shows it is generally displayed when browsing the season and episode nodes.
You may change FanArt by using the "Get Fanart" button in the Media Information Screen.
2.2 Music FanArt in Kodi
You can also have your own custom FanArt background via fanart.jpg in the artist folder.
3 Make your own FanArt for Kodi
Fan Art is high quality artwork that is displayed in the background of HTPC (Home Theater PC) menus. Since FanArt is displayed behind other content in most cases, we place more restrictions on the formatting of the image. When you make FanArt backdrops for Kodi try to create high-quality full screen images in 1920x1080 or 1280x720 pixel resolutions (both are in widescreen aspect-ratio). When creating FanArt try to avoid having logos or any kind of text to avoid overlapping with media info shown by Kodi GUI skins, and do not have any preconception on where the menu will be displays as not all skins are designed the same.
3.1 FanArt sources
Websites where to download and upload FanArt from and to:
- fanart.tv A large collection of images for specialist art types such as ClearLOGOs, ClearART and cdART, for both TV and Music
- themoviedb.org (TMDb) has a lot Movie FanArt images in original Full HD size (1920x1080) and you can search site by movie name.
- thetvdb.com has large collection of TV Shows FanArt images.
- htbackdrops.com (Home Theater Backdrops) has large collection of music artist FanArt images (also offers FanArt for weather and games).
- moviebackdrops.com has large collections of movies FanArt images (limited to 1280x720).
- celebutopia.net/forum has large collection of Movies and TV Show posters and promo images.
- movieposterdb.com has large collection of high-quality movie posters available for download for a small subscription fee.
3.2 File Properties of FanArt
All FanArt files must be in JPG format. The resolution must be either 1920x1080 or 1280x720. Compression artifacts in don't appear in most JPG images if the compression is set to 70% or higher. As a result, we've set file size limits to persuade people to compress their fan art. These limits are 800k for 1920x1080 images and 600k for 1280x720. These limits will be adjusted upward if necessary. If you cannot compress your fan art to fit these limits without artifacting, please post a message on our forums with a link to the image.
3.3 Image Design of FanArt
All fan art images for a specific series should be significantly different. This means that there should not be 2 copies of the same image, one for each resolution. Simply adding a logo or changing a color scheme to an existing image does not qualify as being significantly different. If you have and improved version of an image (better quality source, etc), post on our forums and we'll consider replacing the existing art with your copy.
Please try to avoid placing series logos and text on fan art. Many HTPC (Home Theater PC) media center applications will already be displaying the series banner so showing the series name again is redundant. If you do add a logo, please make sure it is as high quality as the fan art image itself.
Do NOT place predefined menu areas in your image. The important content in the image should fill as much of the image as possible, with no gradients or borders added for menus. When you upload an image we will automatically create menu masked areas for applications to use. If you add these areas yourself, it will result in two gradients being applied to your image.
3.3.1 Good and Bad FanArt Examples
The below shows the result of the above bad Fanart image with the automatic upper-left vignette applied. Note that due to the automatic vignette, the content is now approximately 25% of the size it should be. This would be far worse in an image with a non-black vignette, since you'd get a gradient in the middle of the image.
Bad Fanart: There are two things wrong with the image below. First, it has the gradient for the menu area already applied, which will result in a result similar to the one above. It also has a predefined menu area in the lower left of the image. This makes assumptions as to where the menu and content will be located for the end-user. Not all skins/systems work the same.
Bad Fanart: Do not, like in the example below, resize low-resolution images to the resolutions we require. This looks awful. If you can't find high-resolution source images to work with, allow a more talented artist to assemble lower quality images into a high-resolution composite.
4 Skinning a Kodi skin for FanArt
The following information is designed for skinners who wish to create a skin for Kodi or modify an existing skin to take advantage of FanArt. End users need not worry about this information.
There are two aspects to FanArt. There is the image, which is the most prominent aspect of FanArt, and then there are the FanArt colors. Skins may use either or both. The colors are three colors designed to "go with" the image and may be used to alter the interface colors if desired.
4.1 FanArt Infolabels
There are four infolabels that are available to a skin which can be used for the display of fanart.
|Fanart.Image||Used in an image control to display the currently selected fanart for the parent TV show|
|Fanart.Color1||Returns the first of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.|
|Fanart.Color2||Returns the second of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.|
|Fanart.Color3||Returns the third of three fanart colors in the currently selected fanart theme for the parent TV Show. Colors are arranged lightest to darkest and generally provide a light highlight color, a dark highlight color, and a neutral or matte color.|
Any skin that supports FanArt should provide the user a button to select a different FanArt. This button works similar to the "Get Thumb" button in DialogVideoInfo.xml and must have a control ID of 12.
4.3 More About FanArt Colors
One fun aspect of FanArt support is that it is more than just an image. Kodi has support for FanArt themes which means the skin has the ability to completely adapt the current view to the image and the colors in the image. It can do this through the use of the three fanart color infolabels. When FanArt images are uploaded by a user to TheTVDB.com, they are asked to select three colors, or the system auto-generates three colors, which are designed to "go with" the image and provide a light highlight color, a dark highlight color, and a neutral matte color.