FanArt

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.

Using FanArt in Kodi
Fanart is as of Kodi version 9.04 available both for Music and Videos.

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.

Music FanArt in Kodi
= 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.

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.

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.

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.

Good and Bad FanArt Examples
Good Fanart: The content fills the entire image and there are no masked menu areas.

This below is the result of the above good Fanart Fanart image with the automatic upper-left vignette applied via skinning.

Bad Fanart: The image below has the vignette pre-applied, which will result in a poor automatic vignette.

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.

= 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.

FanArt Infolabels
There are four infolabels that are available to a skin which can be used for the display of fanart.

DialogVideoInfo.xml
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.

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.