PSDFan Extra

Create a Simple, Stylish Custom Youtube Background

This tutorial will go through the steps of creating a custom Youtube background. It is an essential part of your channel as it will attract viewers and give them an idea of what your channel contains.

When you are following the tutorial it is quite a good idea to go to your Youtube page and frequently upload a JPG version of your PSD to check that everything is aligned and looking tidy. There’s nothing worse than finding something’s off slightly and you cannot go back to change it!

Final Image

As always, this is the final image that we’ll be creating:

Step 1

To start with open up your Internet browser and go to www.youtube.com. Login to your account, go to My Channel and select Themes and Colours. From here select the Grey Theme and save. Now logout, go back to your Channel Page and capture your channel page but none of the task/scroll bars or the bottom of your screen e.g. Mac Dock. Press cmd, Shift, 4 for Mac users to select the area precisely. For Windows users if you have Windows 7 you can use the Snipping Tool but if you don’t you will have to delete these bits out.

You will have to capture two images. One for the top of the page and then another picture for the bottom half.

Open up the screenshots in Photoshop. On the bottom half image press Cmd A or Ctrl A and then Cmd C/Ctrl C to copy it. Now paste the image into the top half image.

Go to Image, Canvas Size, select Pixels and enter 1800 into the Height box. This should give you lots of room to align both of these images. Move the top half of the Youtube page up to the top and then align the bottom half so it flows perfectly down the page. Remember to hold Shift whilst moving the images up and down else it will move sideways too. Once your done merge the layers together.

Step 2

Take the Eyedropper Tool and click onto the dark grey borders. Now with the Rectangular Marquee Tool create a square that goes around the video preview box area and fill it with the grey colour you just selected.

Select the Magic Wand tool and with a Tolerance of 2 click on the dark grey area. Now holding Shift click onto the bottom grey area.

Press Delete, deselect and then select the rest of the background and delete it also.

Now create a layer underneath and fill it with the colour black for now.

Step 3

OK, it’s time to start doing some design work at last! Create a new document with these settings.

Zoom in all the way, select the Brush Tool, put the size to 1 px and choose the colour black. Now hold shift and click and drag up and down a few times on the right hand side of the square. Then for the left hand side drag down once. It should look like this.

Go to Edit, Define Pattern and name it something like Stripe. You can now either close this document or save it in case you want to edit the pattern.

Back on the original document click on the Background layer twice to bring up the Layer Style Palette. Select and tick the box in Pattern Overlay. Click the down arrow in the Pattern box and your custom pattern will be in there.

For the Opacity enter 75, the Scale 180 and click OK.

Create a Group folder and name it Background. Put the Background layer into this and now create a new layer named Fade Out Side on top of the Background. Zoom out quite a bit and now select the Brush Tool with the colour Black. Select a 1000 px Brush with a softness of 0% and drag down (remember to hold Shift) the right hand side of this area, shown below.

Duplicate the layer and then go to Edit, Transform, Flip Horizontal and move the image over to the other side of the document so that the sharp black edge is directly running down the edge of the image.

Create a new layer in the Background group folder and name it Fade Out Bottom. Like with the sides using the same size Brush, colour and technique brush over from one side to the other.

Step 4

Create a new Group folder, name it Boxes and put the layer that contains the layout of the Youtube page into it.

So now it’s time to clean up the page and get the basics done to the layout so you can start to customize the page properly.
Grab your preferred selection tool and delete the Info, Favourites, Share etc piece of text.

Now we will create our own section boxes. To start with select show Guides and Rulers from the View menu. Drag out guides from both the vertical and horizontal rulers and place them around the boxes like so. This will help to make everything perfectly in line.

You will notice I did not place guides where the bottom boxes split for subscribers and comments. This is because these boxes will become far bigger when you have more subscribers and comments so it would then interfere with your design.

Create a new layer inside the Boxes group, above the layout image, name it Top and select the Rounded Rectangle Tool with a Radius of 3.
Zoom in and create a box around the top bar of the page. The paths will snap to the guides thus helping this process. Once the path is created choose the Eye Dropper tool and click onto the main background box. You can delete the path when you have finished the box.

Create a new layer for each box for the top section and repeat the previous process. You will notice there is a small triangle on top of the video information box. Grab the Pen Tool, create a path around the small shape and fill it with the same colour your using.
Your layout should be taking shape now.

Step 5

Now create another layer and another box for the small logo area on the bottom half of the layout. Keep creating new layers for each box and now drag out another box but instead of ending the box where it cuts off keep on dragging down and let go when it’s near the end of the document. This applies to the box beside it. This is how my image and layer palette looks.

You can now turn off the layer that had the image of the Youtube layout.

With the basic layout complete and the page ready to be customized feel free to vary these next steps and come up with your own ideas to make your page unique.

Step 6

Create a new layer on top of everything and pick the Brush tool, 1px and the colour #ffae00. Make a small line (hold shift) and let go. Now duplicate the layer and move the new line close to the other one and repeat this process. After a couple of times merge the layers and then duplicate them as it will be quicker. Move the lines so they are in between the top and bottom section. This is how mines looking like.

Move your lines to the left so there are around 6 small lines jutting out either side from the section boxes. If you need to create more simply duplicate the layer and then delete a section you don’t need. Remember to merge the layers!

Duplicate the layer again and transform its so running vertical. Move it over to the left and place it near the horizontal line. Delete a large section of the line so only a small amount remains for the text that we will put in next to it in the next step.

Repeat this for the right hand side.

Create a group folder and clean up the layers. Name the main line layer Lines, the left side,
Left Lines and the right side, Right Lines.

Turn the Opacity of the Group folder for the lines to 70%.

Step 7

Grab the text tool; find some space on your document, and type in your channel’s name. I used the font Haettenschweiler, size of 60pt and the colour #febc3e. Turn it anti clockwise 90 degrees and move it over to the left side where the lines meet.

Now create some more text that reads, Subscribe. Use the same settings. Rotate the text 90 degrees clockwise and move it to the other side in-between where the lines meet. You might need to edit the lines that run horizontal, as they might not be long enough/too long for the text. Simply grab a selection tool (I used the Rectangular Marquee Tool) and delete the required amount so the lines don’t go past where the text ends. If there’s not enough duplicate the lines layer, move it up or down then delete the bits you don’t need.

Create another Group folder named Text and put the two pieces of text inside it.

Step 8

We will now tweak the boxes colours and add some depth to them. Open the group folder that contains the Youtube boxes and proceed to decrease each of the layer’s lightness to -50 from the Hue/Saturation box.

Select one of the layers and go to the Layer Style. Use these settings and then copy them and paste them for each layer in this group. The left colour for the gradient is transparent and the right is Black.

Once done go to the Top Box layer and change the Angle and Scale shown in the next picture.

Step 9

Go back into the Background group and add a new layer called Shine just above the Background layer. Choose White for the foreground colour, grab the Pen Tool and draw a large curve that is similar to the picture below. Zooming out will help quite a bit, as it’ll be easier to curve the line.

Fill the selection with white, delete the path, set the layer style to overlay and the drop the opacity to 20%.

Now move the layer named Fade Out Bottom all the way to the top of the layer palette.

Step 10

This is the design finished. To put this onto your Youtube page go to File, Save For Web & Devices and put the quality to about 90. Now login to your Youtube account, click on My Channel and select Themes and Colours.

Click New Theme and use these settings. Where it says Background Image, click on browse and upload your JPG image.

Name your Theme and save it.

Congratulations, you have finished the tutorial! You can now add a lot more to the page if you like and design it so it is more suited to the genre of your videos.

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

Related Posts

• Create an Effective Coming Soon Page
• Design a Modern, Textured Portfolio Website
• Members Area Tutorial: Design a Rocking Grungy Band Website