Create A Standard Background Image For Your YouTube User Page With Photoshop

rightalign   Create A Standard Background Image For Your YouTube User Page With PhotoshopBasic graphic design tutorials are all pretty universal whether you are using Photoshop, the GIMP, or even Pixelmator. For instance, the ability to adapt to your image editor is going to be very flexible in this particular tutorial on YouTube, so aspiring graphic designers, have no fear if you do not own a full-blown Adobe image editor.

In this article, you will learn how to create a standard YouTube channel background. Granted, your image editor should have layering capabilities in order to be compatible with the tutorial (so don’t use Microsoft Paint), and it really is what you make it. Creativity isn’t included, so make sure to bring your own.

Preparing The Canvas

It doesn’t really matter if you have updated to the Cosmic Panda YouTube interface or if you have just stuck with the original. This background should work with whatever you are using, but if you find something wrong with it, then just crop and alter as you see fit. I will be using Photoshop Elements 9 for this tutorial, but like I said, you should be able to follow along, and I will try to write as generally as possible.

First, you should open up a new file with dimensions that have a width of 1800 pixels and a height of 1298 pixels. This will serve as your main background, so if you plan on adding any artwork to this layer, then you will end up only seeing part of it. As mentioned in the MakeUseOf article about creating a Twitter background, you should limit all artwork on this layer.

Img114   Create A Standard Background Image For Your YouTube User Page With Photoshop

As a note, you should know that if you are using Cosmic Panda, then it is likely that only the top half of this graphic will be viewable (up to a rough estimate of 650 pixels). However, for those that are using the original YouTube theme, you should go into your YouTube settings and make the background color match the background graphic that you are creating.

Img210   Create A Standard Background Image For Your YouTube User Page With Photoshop

Setting Up The Dividers

YouTube backgrounds are a little difficult to work with because instead of aligning left, they happen to align right. That is why you should set up a couple of dividers as visual reminders that let you know just how much space you have to work in. To help solve this, you should open up a new file that has a width of 416 pixels and a height of 1298 pixels. After you have opened this one, make another one that has a width of 976 pixels and 1298 pixels. When you have created them both, use the paint bucket to fill them with two bright contrasting colors.

Img82   Create A Standard Background Image For Your YouTube User Page With Photoshop

Img93   Create A Standard Background Image For Your YouTube User Page With Photoshop

After you have completed this task, copy and paste the smaller divider as a new layer onto your main background. Line it up perfectly against the right side of the project window. You should do the same with the second larger image, except line it up against the side of its smaller counterpart.

As you might be able to guess, the larger one serves as a place holder for where most of your channel content will be shown, and with that being said, if you feel like adding content in the same area as the smaller divider, then this is your chance. Just know that all content in this divider area can be hidden if the browser window is resized.

Img53   Create A Standard Background Image For Your YouTube User Page With Photoshop

Img63   Create A Standard Background Image For Your YouTube User Page With Photoshop

Creating A Side Banner

As you may know, YouTube only allows its affiliates to have fully-fledged banners at the top of their channels. However, as a standard user, you can get around this by placing an image on the left side of your channel’s content. That being said, since it is merely a background, the image could be covered due to window resizing in some browser displays.

To create this banner, you should open a new file that has a width of 226 pixels and a height of 622 pixels. Try to use either a transparent background or a background that matches your main canvas’ color, and then place whatever artwork you desire within this box.

Img102   Create A Standard Background Image For Your YouTube User Page With Photoshop

After you have completed doing so, you should copy and paste the entire image onto your main canvas, placing it just next to the larger divider and touching the very top border. I used a simple color for the sake of the tutorial, but what you put in this box is completely up to you.

Img73   Create A Standard Background Image For Your YouTube User Page With Photoshop

If you are satisfied with how your background will appear, you are now free to delete both dividers. I recommend saving as a JPEG file when it comes to YouTube, but if you can manage to save your background as a different file under the required size limits, then by all means do so. Furthermore, do not select the option to repeat your image vertically or horizontally after uploading it to YouTube.

After all is said and done, you could very well end up with an image like the one below. Don’t mind the extra space to the left and to the bottom, for these voids will be unseen when viewed in a browser.

Img115   Create A Standard Background Image For Your YouTube User Page With Photoshop

Img123   Create A Standard Background Image For Your YouTube User Page With Photoshop

Conclusion

Hopefully, this tutorial has helped you with making your own YouTube background. As an endnote, I want to remind you that each of the elements are fully customizable, so bend and tweak them however you see fit.

What other methods do you use to create YouTube backgrounds, and which editing software did you use to make yours? Also, where can we find your YouTube backgrounds?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

12 Comments -

Robdup12345

Great article, but I think the resolution should be set at 72 for screen purposes. Even though it doesn’t really really matter, I find it’s good practice.

What I do when making custom backgrounds (for any service), I start with a screenshot of a good looking design and set up guides or blocks of color and design on top in something like photoshop. Works for any service.

J. Lockhart

I come from a background in print media, so I’ve just become accustomed to the 300. Lately, I’ve actually even been throwing around 600 for higher quality resolution, but how exactly does 72 help?¬†

It seems like whenever I do it, the quality seems just a little fuzzy on my end. (You seem to have hinted that you do a great deal of design work, and I just want to be able to apply it to future projects.)

Also, that is kind of what I did. I actually just took a screenshot of the basic YouTube layout and then built around it.

Anonymous

i used to do print media for a few years before i switched to web, been doing it for 6+yrs now.

basically all screens display 72dpi(ppi to be exact).. which means that if you put a higher rez image up there.. it will usually cause all kinds of scaling issues.. plus it really doesn’t help in clarity, thats just a myth. what you’ll endup with is an image that will take ages to load.¬†

heres what you do(add this as the last step in your tutorial if you like) when your design is complete, don’t use the “save as” a jpeg option. use the “save for web” option, it will save the image in 72dpi, while giving you options to increase or decrease the quality(it displays your original image and the web optimised version side by side for comparison while you tweak the settings).¬†

note:web optimised should be viewed at 100%, zooming in will always make them look grainy coz they arn’t meant to be viewed that way.

J. Lockhart

Right on. I have used the save for web option, but it just seems a little clunky on my editing software. However, that might just be how it runs on my system. Nice tip, though. I’ll use it for future tutorials when it comes to these graphics. I like how we can all learn together on these things.

E. Mantooth

I’m shocked that you claim to work with print media and web graphic design and yet lack a fundamental understanding of the purpose of a PPI setting.

First of all, you claim that “basically all screens display 72dpi(ppi to be exact)”. That’s literally almost the opposite of the truth. That would be true if “basically all screens” were 800×600 and 14″ diagonal. Or 11″ at 640×480.¬†Most monitors now are between 95-110 PPI (although the iPhone 4 is 326 ppi!).

Second, PPI is completely irrelevant in this scenario. It doesn’t matter what you set it to. At all. If you create something that’s 226×622,¬†1 pixel in any graphic = 1 pixel on a monitor. Period.

So what’s the PPI setting for? Notice the dropdown where you can change between the different units? Pixels, inches, etc. If you want to create a graphic that is exactly 1″ wide on a 100ppi display, the graphics editor calculates that you’ll need an image that’s 100 pixels wide. This is only useful if you’re creating a UI for a specific device and want to know exactly how big image will APPEAR to be. For example, the iPhone 4 (326ppi) will need a 326 pixel wide image to appear 1″ across.

This why PPI/DPI is mostly used in print, because it actually does something useful. If I want to print an 8×10″ image from my printer, which I can set to run at 300dpi, Photoshop says I’ll need an image that is 2400×3000.

J. Lockhart

Thanks for clearing it up, E. Mantooth.

Mike

I have read and found that YouTube doesn’t align left or right. It starts in the middle and blocks out the part for video. ¬†I just did a background right justified to see if it had changed and it hasn’t.¬†

J. Lockhart

Very odd. It just seemed to be aligned to the right for me. I knew for sure that it didn’t align left. Much appreciated.

Mike

I’m confused by what you write early on.

“YouTube backgrounds are a little difficult to work with because instead of aligning left, they happen to align right.”

Looking at the image you have and what is shown after with the YouTube player it proves it is center justified. 

This is the youtube channel I just did.  
http://www.youtube.com/user/BridgeTownChallenge
I right justified and left a an image on the right that was part of my Twitter background. When I first did it they barely showed and were outside the borders of my screen.  If I adjust for the middle 960 pixels not counting I can position the images right where I want.  I have not tested this with Cosmic Panda yet.

It really seems like you made this much more difficult than it had to be.

J. Lockhart

It appears that you just found something that I might have not noticed. Either that, or they changed things when they switched over to Cosmic Panda (even for standard YouTube). I guess I just didn’t realize it aligned in the middle.

Thanks for pointing it out.

J. Lockhart

I believe this article and the comments all together has caused a little confusion. However, I’m thinking it’s all starting to work now. Phew. This is how I made my original background, so I just kind of did it the way that I knew how.¬†

We can just say that it’s become a group project, right?

RapGamer

Very good info that will definitely be used.