In this tutorial we show you how to create and install your own custom background image for your YouTube channel. We will be doing this in Photoshop CS5.5. Unfortunately we can’t do the entire web-page in Photoshop just the background. The rest of the details like border colors, typography etc need to actually be set in your YouTube channel itself. You do not have access to CSS for this so you are limited in these options, however the background itself you can do pretty much what ever you want within reason.
As an example I have put one up on my YouTube for you. Feel free to take a look and comment.
http://www.youtube.com/user/ripperorb
Photoshop CS5.5: Creating a YouTube Theme
First thing we need to do is get ourselves a copy of a good YouTube template. I have put a link at the bottom of this tutorial to one. It is a PNG so if you have Fireworks it will try to open it but open it in Photoshop then save it as a PSD for future use so that photoshop will open it as default.This template gives you an idea of where each element within the content section will sit in relation to your design. First thing you should do with it when you download it is change the file width to 2000px but keep the template itself centered. Then re-save it to keep as a template for use further down the track. It was saved at the smaller size to keep the bandwidth down. But you will want it at this width whenever you are using it.
Once you have done that everything is ready for us to begin working on our custom background in Photoshop. When you open the template in Photoshop the first thing you should do to it is work on then lock the template layer. You cant do to much to change this on your YouTube channel itself except change its color and transparency.
To change the border color in your template select your magic wand tool and click on the top border element to highlight it, then hold the shift key and click on the bottom element. You should now have both sections selected. Change to your paint bucket tool and select the color you would like this border to be. Make sure you write this color code down as you will need to enter this when we upload everything to YouTube. Using the paint tool click on both the top and the bottom elements to color them. This is to help you get and idea of how your background will look against the content on your channel.
You may want to put a rectangle on a layer underneath it to replicate the content wrapper on YouTube. So create a new layer and make sure it is below the original template layer. Draw and rectangle that it roughly the same size as the original template but make sure that nothing protrudes out from underneath the top layer. Set this rectangles color and transparency to how you want it to look on YouTube. Now if your background image goes under your YouTube content you will see how it looks. Remember when setting the transparency YouTube will only allow you to set your transperency in 10% increments.
Once you have set up make sure they are centered and then lock both layers so we don’t accidently move them and throw our background out of whack. Remember YouTube backgrounds are set to center themselves unless you set them to tile, which if your reading this you don’t want to do that. So as YouTube will be centering every thing we want to work around the template we have created. Try to keep our background elements as close to that template as possible. Any important elements you want everyone to see should be kept with 2-300px of the edge of our content area. That way it doesn’t matter what size monitor you viewers are using they will always see that content up and down each edge of your channel content.
So now all we need to do is create another layer and drag it below the 2 layers we created before. This is for your artwork. Create all your artwork on this layer and ensure it is all kept underneath the template layers. For those viewers that have wider screens you should fade your image to a background color on each edge. That way if someone with a wider screen than you designed for comes along your image will smoothly fade into a color rather than just stop dead. It looks more professional. The same should always done at the bottom.
Once you have created your image, hide your top 2 layers so just your background image layer is showing and save it for web and devices. This image has to come in at under 256k or YouTube won’t accept it. Once you have gotten your image finished and under that file size we are ready to upload everything to YouTube.
Uploading your YouTube theme to YouTube
Putting your theme into place is actually quite easy. Naturally we start by logging in. When you are logged in go to your channel and up the top of your channel page you will see a button “Themes and Colors” click that and then click “new theme”.
Remember the color code I said we needed to keep handy earlier put that in the background color. Beside background image hit browse and locate your background image and upload it. If you wanted to have transparency change your transparency levels. Once you have all your color, transparency and typography settings done hit Save changes and you now have a new YouTube Theme.
Hope you found this helpful and see you again next time.
Important Notes
- If you do not specify your YouTube background to tile it will automatically center itself
- The content on a YouTube page is 960px wide and is centered
- Maximum File size is 256k. Smaller files will help your load times however.
- To account for wider screens make your images 2000px wide and fade the edges to a solid color you can match in your profile options.
- Transparent elements must be increments of 10% opacity.
Resources
PNG template for Youtube themes
