Fork MediaPortal on GitHub
MediaPortal Windows Media Center
MediaPortal Wiki > Wiki Help > Contribute to Wiki > Images/Screenshots

Images/Screenshots

Was this page helpful?

    Content should be enhanced by illustrations and screenshots as much as possible! If you are explaining a complex procedure, sample screenshots are usually essential for clarity.

    Screenshots

    Use the Titan skin for all GUI screenshots, except where you need to describe a skin related feature which is not visible in Titan. All MediaPortal GUI screenshots should be widescreen, since most users now use widescreens.

    Image Type

    MediaPortal Screenshots

    An easy way to create GUI screenshots is to simply press KeyF11.jpg in the MediaPortal GUI. It will be saved to the My Pictures folder using the resolution of the MediaPortal window (do not resize MediaPortal to some weird size before taking the screenshot).

    Try to keep the file size around about 500 - 600 kB or less. When taking GUI screenshots this most likely means that the image needs to be saved as a jpeg file. Try not to compress the image too much since quality will suffer. Especially when displaying red text on blue background for example. You may use a free program like GIMP to better fine tune compression vs file size.

    The screenshot may be attached to a Wiki page in full HD resolution but remember to change the Image Size to Large using the image's properties configuration (right click the image).

    Generally, try to create a screenshot of the only the relevant data, not the entire screen. This can save updating when other elements of the screen change but the essential data does not.

    Windows Screenshots - Config, Installer, etc

    Use png format. For best results save at no more than 550 px wide. Then images do not need to be resized and will be much clearer as text is usually smaller.

    Image Formats

    Use the following image formats to ensure high quality images while keeping file sizes down:

    • JPEG: for photos and graphic intense screenshots (like of the MediaPortal interface). Preferred quality factor is between 75% and 95%.
    • PNG: for graphs, logos and screenshots of regular Windows programs and dialogs. On average this will prevent the noise and blurring you get with JPEG images. Transparency can be used, but keep in mind that Internet Explorer only supports alpha transparency from version 7 and up.
    • GIF: when you need simple animations and for images with very few colors (no gradients). Note that not all output devices (for example PDF documents) supports animation.

    Image Quality

    Resizing images almost always results in a reduction of quality, depending on the software you use. You will always get better quality if the image can remain the original size, which works for smaller images. Thus, it is best to crop an image to the relevant portion, and save it at a width of 550 px or less so it will fit nicely in the Wiki without resizing. Of course, for screenshots in the GUI it is nice to be able to click on the image for a larger version.

    Attach an Image

    First, check to see if the image or screenshot already exists in the MediaPortal Wiki. Search, or navigate to the appropriate section. If a screenshot exists, you can link to it easily, then if or when the screenshot is updated, it will be updated everywhere.

    You can search or browse once you select the insert image button, however search only searches precise file names and it is much easier to browse for images using the Navigation Pane.

    Note: You cannot attach a file or image until the page exists. For new pages, you must first enter at least a Page Title and save the page. Then you may attach files or images.

    Inserting Existing Screenshots or Images

    1. In your page, position your cursor where you wish to insert a screenshot or other image.
    2. On the Edit Menu, select the Image button.
      1. If the image is already attached to the current page it will appear in the Insert Image Dialog.
      2. If the image is attached to a different Wiki Page, select Browse, navigate to that page and select the image file.
      3. If you wish to insert a link to an image on the web, go to the Search tab and paste/enter the link - however, keep in mind web links often change so you need to check/update the page periodically.
    3. Select Image Size = Large (images will popup to full image size if clicked).
    4. Select Alignment.
    5. Click Insert Image, and you are done!

    Uploading New Screenshots or Images

    If a screenshot does not already exist, create one. You may always use KeyF11.jpg (or assign Take Screenshot to a Remote Key) in MediaPortal. This will save screenshots in your Pictures\MediaPortal Screenshots\date folder. 

    1. Save your file in the correct image format (see above).
    2. Give your file a relevant name - such as ConfigTool.png not 10.png- this is very helpful when searching for existing screenshots.
    3. Select the Attach File option at the bottom of the Wiki page (you can do this while in Edit Mode).
    4. Use Classic Uploader for three or less images, Flash Uploader for more.
    5. Add a description to the file - to aid in searching and recognizing images, especially when the file name is not descriptive enough.
    6. Click Attach Files.

    Note: You cannot attach a file or image until the page exists. For new pages, you must first enter at least a Page Title and save the page. Then you may attach files or images.

    Updating an Existing Screenshot or Image

    A screenshot may be used on several different Wiki pages. When it needs to be updated you may use Attach New Version to update all pages at once.

    1. Find the attached screenshot and click Actions > Attach New Version
    2. Select the updated file and click Attach New Version

    The new file does not have to be of the same size or have the same name. All pages using this file will automatically use the updated screenshot.

    Creating an animated screenshot

    Sometimes it is not possible to fit everything you'd like in a single screenshot, for example when doing screenshots of Titan dialogs like in the example below.

    MediaPortal - Settings - Videos - Video.gif

    In this case it might be a good idea to create an animated GIF instead of two screenshots (where some options will display in both images).

    Creating an animated image using GIMP

    1. Take screenshots of each step and load up all images as layers in GIMP. For some reason they need to be in reverse order so let the last image be on top of the layer list. You can step through each frame by Filters > Animation > Playback to make sure the layers are in the correct order.
    2. (Optional) Make a selection around the interesting part and choose Image > Crop to Selection. This will apply to all layers.
    3. Choose Filters > Animation > Optimize (for GIF) to remove parts of the frames that doesn't change to save file space.
    4. File > Export > Filename.gif. This will open the Export Image as GIF dialog where you select As animation and Use delay entered above for all frames = 750 ms.



    Tag page (Edit tags)
    • No tags
    Running the latest version?

    V1.8.0 - released July 2014
    Releasenews | Download
    Changelog
     | Requirements
    HTPC
    Team-MediaPortal
     
    About
    Contact |  Press
    Partners