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 Partner Image Map Banner Tutorial

Discussion in 'Articles & Resources Archive' started by Michael, Apr 27, 2012.

  1. Michael
    I Love YTtalk
    Messages:
    22,248
    Likes:
    15,787
    This tutorial is to help YouTube partners have a banner at the top of their channel, the process can be complicated for newcomers to HTML and Photoshop so there is a small learning curve but I will explain things as easily and in depth as possible.

    Okay first off you will want to have created your partner background, something similar to the ones on PimpMyChannel are the most fitting for the current YouTube layout but if you fancy creating your own from scratch you can use Photoshop and edit around those on PimpMyChannel, we currently dont have a free layout PSD for partners at the time of writing this:

    http://pimpmychannel.com/partners/

    Okay for our example I will be using this one here:

    http://pimpmychannel.com/partners/modern-warfare-3-partner-background/

    Download it and open it in your image editor, preferably Photoshop.

    1. Using the Crop tool as pictured below, crop the top section like so (click thumbnails to make bigger):

    View attachment 664

    You will want the width to be 970 pixels, if you cant get it perfect it doesn't have to be pixel perfect although the image map hotspots will be slightly off. Re-crop until your banner is 970px wide and you shouldnt have any issues. I believe the height of the banner is around 150px although I am sure I heard you can make it less in your options on YouTube.

    2. Now save your banner, it can be any type of image file.

    3. Now visit here http://www.maschek.hu/imagemap/imgmap

    4. Once there, click the first browse button, then select your banner to upload and then click the accept link, your banner will appear:

    uploading-banner.jpg

    5. Once upload draw where you would like an area that links to somewhere, the website by default uses a rectangle but you can change it by clicking where it says Rectangle. In my example I want the Facebook icon linking to Facebook and the Twitter icon linking to Twitter, I drew my first square around the Facebook icon and I can edit where it links to where it says HREF, this is where you put in the URL you would like the hotspot to link to. I then drew another over the Twitter icon, which is the second row down and I set the HREF to our forum Twitter profile.

    The alt you may leave blank, if you choose to fill it in, put something that describes the image it is for, in the example I could use Follow Us for the Twitter icons alt text, this only appears when hovering the icon.

    Where it says target you can leave that as default or opt to open in a new browser window when clicked by choosing target New Window.

    Here is a screenshot of what mine looks like:

    hotspots.jpg

    I have drawn arrows to show where to click if you become confused over which one is which if you have multiple links in your image map.

    6. When you are finished adding all the links/HREFs you can then click the small blue HTML icon shown below which generates the code you need for your image map/banner.

    View attachment 667

    7. Now your code is at the bottom of the page, select it all, right click, copy and then paste into the image map/banner code area on YouTube and then save your changes. (I am not a partner so I cannot show you this step fully)

    Your image map and banner should now link correctly, if the hotspots are slightly off you can adjust them quite easily. If you have issues with the maschek.hu website here are some more image map generators that are online so there is no need for software:

    http://www.image-maps.com/

    http://www.mobilefish.com/services/image_map/image_map.php

    http://www.pangloss.com/seidel/ClrHlpr/imagemap.html

    A live demo of this tutorial can be seen here:

    http://www.youtube.com/user/iChatApps

    If you need any help with this either post in here or make a new thread and I am sure you will get any help that is needed. I hope that this is complete enough for anyone reading.
     
    davion100, JD´s World and VlogRays like this.
  2. VlogRays
    I Love YTtalk
    Messages:
    3,138
    Likes:
    2,037
    Cash:
    $0
    I want to use this!
     
    Michael likes this.
  3. JTAphotographs
    Ask me anything. ANYTHING! o_O
    Messages:
    2,644
    Likes:
    1,000
    Cash:
    $194
    Shame I can't do this :( but anyway, when I become a partner LOL I'll use this :D
     
    Michael likes this.
  4. Michael
    I Love YTtalk
    Messages:
    22,248
    Likes:
    15,787
    Hopefully we will all be able to eventually, even I cant try this out 100% which makes the tutorial a bit harder to make/explain :D
     
  5. Voice of Vanessa
    Dimple-Smiles <3
    Messages:
    811
    Likes:
    676
    Cash:
    $434
    This thread helped me a lot when I made my banner. Thank you so much Michael!
     
  6. VlogRays
    I Love YTtalk
    Messages:
    3,138
    Likes:
    2,037
    Cash:
    $0
    I just noticed your a partner! Congrats!
     
    Voice of Vanessa and Michael like this.
  7. Voice of Vanessa
    Dimple-Smiles <3
    Messages:
    811
    Likes:
    676
    Cash:
    $434
    (hugs) thanks Ray <3
     
    itsameray likes this.
  8. Michael Carlyle
    The Active Member!
    Messages:
    4,363
    Likes:
    1,320
    Cash:
    $6,990
  9. JD´s World
    I Love YTtalk
    Messages:
    613
    Likes:
    293
    Cash:
    $687
    Is this tutorial still up to date regarding the making of ze banner?

    JD
     
  10. Michael Carlyle
    The Active Member!
    Messages:
    4,363
    Likes:
    1,320
    Cash:
    $6,990
    Yes ;)
     

Share This Page