Gadgetory


All Cool Mind-blowing Gadgets You Love in One Place

How to make a YouTube Mobile Banner [2011]

2011-01-18
hey guys welcome back to another mkbhd video is you might have noticed on the top of my channel here there is a new section besides all these called the mobile options section and if I expand you're gonna notice this is a brand new section that YouTube partners have that includes a mobile channel banner so you can now have graphics on your MDOT youtube.com/ version of your site so if you have a channel that has a banner on your desktop version why not have it on the mobile version so today I'm going to be showing you guys how to make a banner for the mobile version of your YouTube channel now there really aren't too many restrictions with this mobile channel banner all you need to note is that there are two of them there is a portrait version for when their device is in portrait mode and that has its own resolution and a landscape version for when they rotate their device there's a little more room so there's a slightly bigger landscape channel banner I'm gonna go ahead and make the portrait version of the banner in this tutorial and you can go ahead and do whatever you want for the landscape version but it can be pretty similar if you'd like for this project for the portrait channel banner I'm using GIMP which is the GNU image manipulation program it's free and multi-platform but if you have Photoshop that will do as well now taking a look at what the youtube site says the portrait version is 320 by 50 pixels so what we're gonna do is make a new document here and this is just going to read freeform 320 by 50 pixels not a whole lot of editing going on here in terms of video editing but I'm going to be showing you making of a very simple banner now as you can tell when this is on the mobile site it's going to be really really small so there's not a whole lot of things you can do with this small amount of space so one of the things I suggest is just having a simple gradient and a text box and an image of some sort so when I say simple gradient I mean like a background of two different colors maybe your channel has a sort of a red and black theme so you can choose red to black gradient or a red to a darker red gradient something like that and you can make a gradient just like that a new gradient really is something that can make it just a little bit more visually appealing in terms of where shows up on the Moodle site it really catches the eye so now that you have a bright red background on the white YouTube mobile site you can really add some contrast by putting some text in there so I'm going to add text on the left-hand side and go ahead and line it up with all the rest and put it on the left-hand side I'm going to say for example mkbhd now you could put subscribe in that box you could put you know click here to view more videos in that box you can put whatever you want there but make sure it has some sort of contrast with the rest of your image so I have this black and I wanted to change use the font that I've used in a lot of my videos a lot of you guys were asking what the font that was and that is babe s new and it's available at dafont.com so if you guys are familiar with installing free fonts on your computer you can definitely do that so that will be centered on that side of the banner see it's a nice simple text box you know has quite a bit of contrast with the red background now that alone on the youtube site still will be pretty readable see as small as I make it it's still pretty visible and one more thing that I'm going to add is another image that I have my watermark is a PNG image and it is just the bottom right hand corner and I can go ahead and I open that up and GIMP and I'll put it on the right hand side corner here so I'll go ahead and open that in a new GIMP window sorry about the graphics so this is the image that I want to take I can go ahead and edit copy and paste this image to be on the right-hand side and here you can see it's a little too big for the banner I currently have gone on so what I will do is scale it down now remember we said this whole thing this banner right here was 50 pixels tall so we're going to go ahead and make this a 50 by 50 image scale it down and bring this back into view so now on the top of this background we have a a floating image that we can put wherever we want and hopefully it will be you know wherever we want it to be and still when you zoom out on the YouTube mobile site wherever you put this it's going to be pretty visible you can decide you know what image you want to put there things like that I'm not actually going to add this I'll delete this now but you get the point you can add whatever you want to this little strip banner here now when you're done you need to make sure you save it to the appropriate file type so you can go to file save as and make sure you save this as a PNG or jpg image so I'll save this as mobile banner dot PNG and put this on my desktop for good luck and hit save and GIMP or Photoshop whatever you're using will ask you to export it and we'll go ahead and save everything there now we can close GIMP here is the mobile banner on our desktop so now what we want to do is go ahead and implement this on our YouTube channel so we're gonna go back to youtube.com and go ahead and upload this banner I'm not gonna upload this particular banner because I have a different one that I've uploaded but I'll show you what you need to do to upload it it's really quite simple you go back to your channel of course and you'll go back to that mobile options button click it and go down here to the portrait channel banner which is what we just designed up here in the corner we can delete this one and there will be a select file button and you can go ahead and upload that selected file also make sure you have the banner button over here checked to the left and you can add any URL you want say you want to add your website when someone taps on your banner on their iPad or iPhone or Android device or something like that you can go ahead and add your website or an external link or whatever you want to be there once you're done with all this customization you can select your colors which are probably going to be the same as what you leave on your typical channel on the desktop version and hit Save Changes and just like that you will have a banner on the mobile version of your site so now let's go ahead and check out see what it looks like alright guys so on my droid we're going to take a look at the final versions of the banners that I made for the mkbhd youtube channel I made a little bit of changes I actually used a white to gray gradient and use my logo in the right-hand corner and some different text but overall if you guys want to check it out on your own mobile device you can follow these steps to find it and view the final versions of these banners yourself right now I'm searching for marques Brownlee in mobile YouTube and I can just click on the first video and underneath the link on that first video is a link to my channel so we'll click my name and take a look at those banners this portrait version of the banner just has my logo in the bottom right hand corner and says one word subscribe it's very big text so it's very visible even on smaller screens rotating it to landscape changes the one word subscribe into two words subscribe today so as you can see I took pretty good advantage of the increased estate that I got with turning it widescreen and I added two words instead of one and back in portrait it's just one word subscribe so I think that's a pretty good use of the banner making it just a little bit different but still very consistent in the theme so that's about it for this tutorial I know it was an absurdly long video I normally don't make video seven-and-a-half minutes long but I'm sure this will be helpful for a lot of people who are looking to get their channel off the ground and have a mobile banner to go with it all so in the end and KB HD signing out see you in the next video peace
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.