FanArt
FanArt (or "Fan art", also known as "Backdrops") is 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.
XBMC Media Center supports Fanart backdrops for Movies, TV Shows, Music Artists/Groups/Bands, and Weather conditions, (there is also a Fanart screen saver available).
What is FanArt?
Wikipedia defines FanArt as "Artwork that is based on a character, costume, item, or story that was created by someone other than the artist. The term, while it can apply to art done by fans of characters from books, is usually used to refer to art derived from visual media such as comics, movies or video games. Usually, it refers to artworks by amateur artists, or artists who are unpaid for their fan creations"
In a nutshell one could say that FanArt is artwork created by a fan of something.
Since FanArt is displayed behind other content in most cases, we place more restrictions on the formatting of the image, (see the section on "Make your own FanArt for XBMC" at the end of this article).
FanArt in XBMC
So how does FanArt fit into XBMC? From the perspective of XBMC, FanArt takes the form of background backdrop images which fans have created to go along with media they enjoy which is then displayed by XBMC while users are browsing the media the FanArt was created for, similar to a wallpaper on a desktop computer operating-system. Perhaps the best way to see this is with an example.
|
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. XBMC will take this image and then use it in your video library. When you are browsing through the seasons or episodes of Stargate Atlantis, XBMC will display the FanArt in the background. |
|
|
This second image shows just one example of how XBMC 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. |
|
Using FanArt in XBMC
Fanart is as of XBMC version 9.04 available both for Music and Videos.
Video FanArt in XBMC
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, and [htbackdrops.com 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 scrapers such as the TheMovieDB and the IMDb scraper scraper. 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. |
Music FanArt in XBMC
Music FanArt is available in the music library. Fanart is retrieved from user submitted fanart at sites such as htbackdrops.com.
You can also have your own custom FanArt background via fanart.jpg in the artist folder.
Make your own FanArt for XBMC
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 XBMC 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 XBMC 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:
- 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: This image below has the vignette pre-applied, which will result in a poor automatic vignette.
This bellow show 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 this 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 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 XBMC skin for FanArt
The following information is designed for skinners who wish to create a skin for XBMC 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.
| 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. |
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. XBMC 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.