Famebit
  1. Join the largest paid sponsorship network. No contracts, no gimmicks, get paid quick. New sponsorships are added daily. Join at famebit.com

    Dismiss Notice

Youtube Thumbnail Safe-Space! Template for Better Thumbnails.

Discussion in 'Branding & Design' started by ohaple, May 10, 2014.

  1. ohaple
    YTtalk Mad
    Messages:
    374
    Likes:
    155
    Cash:
    $95
    Hey guys! I am back with another tutorial that I think many of us can benefit from. The topic is thumbnails. You may have noticed that when you go to different sites, your thumbnails show up differently. This can mean that your viewers will not see what you intended, possibly resulting in less clicks.

    Here is the video complete with examples, below is the equivalent written guide if you prefer that. :)


    So on many platforms, parts of your thumbnail will get cut off. I have compiled these to allow you to maximize impact on any platform! Youtube recommends a 1280x720 size for thumbnails, so this guide will be based on that resolution.
    -On your youtube homepage, sub feed, and side-bar of recommended videos, the thumbnail appears small with the timestamp on the bottom right. This takes up a good portion of your thumb.
    -On many embedded sites and your featured video slot, a large play button takes up the center of your screen.
    -On many embedded sites (blogs, forums, etc.) the title of the video will be in a black bar across the top of oyr thumbnail.
    -Mobile is the worst, with some of your thumbnail cut off of every side.
    -Some other rare instances will display a 4:3 aspect ratio player. Since your thumbnail is 16:9 (1280x720) this means that the sides of your thumbnail will be cut off to a great degree. We will not be including this in our safe zone because of the rarity, and the huge impact.

    So we know all the places our thumbnails will be impacted. I took the liberty of creating a .png template to accurately display these. You can download the image, and put it on top of your thumbnails in your photo editing program to see how your thumbnails look. Here is the template.
    [​IMG]

    Here is an example of one of my thumbnails that does a bad job:
    [​IMG]

    Here is a thumbnail that does a good job:
    [​IMG]

    Hope this helps you improve your thumbnails and get more clicks to your videos! Be sure to add any questions or other tips below!
     
  2. JackPlus
    Well-Known Member
    Messages:
    62
    Likes:
    10
    Cash:
    $0
    I actually had no idea about the mobile cut off! Thanks heaps for this!
     
  3. ohaple
    YTtalk Mad
    Messages:
    374
    Likes:
    155
    Cash:
    $95
    Yeah. I noticed it on a few of my thumbnails, got interested to investigate. I will note that making thumbnails with this safe zone in mind will not be quite as attractive when shown in its full form (text may not be as large, etc.) but it will a least be good on all formats.
     
    JackPlus likes this.
  4. Brighton West
    Active Member
    Messages:
    34
    Likes:
    15
    Cash:
    $36
    Thanks - I always forget not to put a face in the middle of a thumbnail and then end up with a play button on their nose. This is great!
     
  5. ohaple
    YTtalk Mad
    Messages:
    374
    Likes:
    155
    Cash:
    $95
    I use this as a saved template, so I can now quick check it on every thumbnail. I also have noticed that on some sites the play button may be a bit larger, but a transparent grey button in stead of the red.
     
  6. Michael
    I Love YTtalk
    Messages:
    22,251
    Likes:
    15,857
    This will be in our next newsletter, great work and thank you for sharing, I think I should keep one of these in my PSD thumbnail templates and just switch it on whenever I am making one with its opacity lowered. If you do one for 1920 x 1080 that would be awesome :D
     
  7. ohaple
    YTtalk Mad
    Messages:
    374
    Likes:
    155
    Cash:
    $95
    Adjusting the opacity can help for some designing. Personally, I use it at full opacity just as a final check before exporting the JPG thumbnail. Glad you enjoyed it. :)

    Attached is the 1080 version, but the reason I chose 720 was this; quoted from the official Youtube help section.

    "Custom thumbnail best practices
    Size

    Your custom thumbnail image should be as large as possible, as the image will also be used as the preview image in the embedded player. We recommend your custom thumbnails:
    • Have a resolution of 1280x720 (with minimum width of 640 pixels).
    • Be uploaded in image formats such as .JPG, .GIF, .BMP, or .PNG.
    • Remain under the 2MB limit.
    • Try to use a 16:9 aspect ratio as it's the most used in YouTube players and previews."

    [​IMG]
     
    #7 ohaple, May 11, 2014
    Last edited: May 11, 2014
  8. TheDoctor_13
    I Love YTtalk
    Messages:
    1,833
    Likes:
    672
    Cash:
    $2,226
    Interesting, I thought the title and time was the only thing you had to watch out in thumbnails, but good tips. Are those images the right size / proportional? I would love to download / make a .psd template.
     
  9. ohaple
    YTtalk Mad
    Messages:
    374
    Likes:
    155
    Cash:
    $95
    They are all proportionally sized from examples I could find. The top title and play button vary some with the size of the player, but the sizes I used are the common ones I saw.
     
  10. KoreaExplored
    Well-Known Member
    Messages:
    61
    Likes:
    16
    Cash:
    $0
    I have been using your template for about a month now. I really appreciate the time you put in to help us out on this. Thanks so much!
     

Share This Page