Hello, in this tutorial we will be remaking the top of YouTube. The finished product will look something along the lines of this..

Remember to view the larger versions of images click on each image



So, let's start out with a new document.



Notice the background is set to white, so we don't need to change that later.

We will start by making the logo. The font that YouTube use, is called Alternate Gothic No. 2 - Which has to be paid for, but there are many other free fonts available that look just as good.

So, make a new layer (Layer > New > Layer) and grab your Rounded Rectangle Tool with a radius of 10 pixels, and then draw a similiar shape to the one below.



Go to that layers blending options (Layer > Layer Style > Blending Options) And add the following settings:



After clicking OK, we must first add the text (and then the highlight)

I used Arial Narrow, set to size 40pt in white, with a character width of 81%. Now, we can go back into the blending options (Layer > Layer Style > Blending Options) And add the following settings



Which will give you something that looks like this..



Now let's add that highlight, pay attention. There are a couple of ways to do this, So.. i'll use the method that will be more useful to you in the future.

Make a new layer.

On your keyboard, hold down CTRL, and click the thumbnail of that youtube button layer (remember it? The one with the red gradient) Which will make a selection around it..



Now, click Select > Modify > Contract > 2 pixels. - Which obviously makes our selection contract.



Now, use Edit > Fill To fill that white (Or select white as your foreground colour, and use ALT + Backspace



Now, with it still selected.. click the Add Layer Mask Button



Cool. Now, let's set our foreground color to BLACK (#000000) and grab a soft paintbrush tool. (45px size, 0% hardness is fine) And brush away the parts that you don't need. After, lower the opacity down to about 60%



Now, the reason that mine and Youtube's logos look different at this stage.. is because they save theirs at quite a low quality gif.. so instead of using all of their 256 colours, they might only be using 10. Let me lower the quality of it and show you.. which uses 20 colours.



Anyway, let's add the "YOU" text. It's the same text as the TUBE one, but just in #131313.



I've gone back to using 256 colours now again by the way.

The "Broadcast Yourself" - I used Century Gothic at size 12pt in #6E6E70. The TM logo, can be generated by.. holding ALT and pressing 0153 on your numpad (on the right..)



The text on the right is obviously very simple. I have used Arial, size 12pt. The links are in #0033CC underlined, and the | lines are #AAAAAA



Really, any globe can be used next to the Sign Up button. Use this one even.. copy it.. paste it on and scale it down using Edit > Free Transform.





Let's do the "Home" tab now. Set your foreground colour to #D5D5D5, make a new layer - and grab your Rounded Rectangle Tool... set at 4px. Draw a shape like below.



Right. Remember the technique we used for the highlight on the logo? Well we are going to use it again now

- Make a new layer
- hold CTRL and select the layer with the shape on
- Select > Modify > Contract - 1px
- Fill it white (Edit > Fill)
- Add the layer mask

But this time, we can set our gradient to black and white.. and let our gradient fade the white out instead... and lower the opacity down to about 85%..

Continues on next page>>>