Tip:
Highlight text to annotate it
X
Hey! What’s up guys, Fazil here! Welcome to the
final part of the website layout series. If you haven’t already watched any of the
previous then I’ll have those annotated on the screen or the links are going to be
in the description! In this tutorial we are going to be completing the rest of the website
but before we get on to the tutorial i just wanted to thank all subscribers for being
subscribed. I just hit 200 subscribers! moving along to the tutorial, as i said earlier we
are going to be completing the rest of the website starting with the video block.
So first of all you just wanna grab the Rectangular Marquee tool then go to the top options bar
and change this to fixed size and set the height to 31 px and the width could be whatever
you want. Click at the bottom of this and you should
see a selection. After that, drag a horizontal guide at the end of the selection from the
rulers. If you don’t have rulers enabled, you could do so by going to View and then
select rulers. After you have the guide setup press Control plus D on the keyboard to deselect
and that’s going to be Command D for Mac. So the guide we just created right there is
for the spacing we need between the video block and these blocks on the top.
So now that we have that let’s create the video block!
First all select the Rectangular shape tool and set that to fixed size by going to the
top gear icon here. then change the width to 993 px and the height to 348 px. Create
the block and roughly position it in the center and if the color isn’t black by default
then set it to black. Next thing you wanna do is drag in the screenshot
of the video and position it properly. I will have the link for the image down below in
the description. Now let’s select the line tool and create
a line dividing the video and the empty space. Now select the type tool and then type in
your text of choice. I am using Century gothic for the font and the size entirely depends
on you! Just to be organized we are going to create a folder with the all the video
block elements in the group. Alright so this completes the video block,
but for now we are going to skip the social links and create the footer and don’t worry
I am going to show how to do make it at the end.
So, for the footer select the rectangular shape tool and it should already be set to
fixed size. Change the width to 1024 px and the height to 176 px.
So let’s make the shape by clicking and dragging and making sure that the outline
is inline with the bottom of the body. For the layer styles like the gradient overlay
all you have to do is copy the layer styles from the header and paste them to the footer.
Ok! Now let’s add in the text for the footer by using the type tool on the left. for the
text i am going to type in my name! and if you want to add the little copyrights symbol
then you could do that by selecting the custom shape tool and the third last symbol is the
copyrights one. You can also add the Registered Trademark
symbol which is next to it. and also the trademark symbol which is last. so that completes the
footer. For the social links select the rectangular
shape tool and it should already be set to fixed size.
This time leave the width to 1024 px and change the height to 60 px. also make sure to set
the color to white. While creating the rectangle make sure that
the top of the of the box starts with the footer.
so now that we have the box let’s begin typing in the names of the sites.
After you select the type tool, change the font to century gothic, the size to 36 pt,
and the color to #3d3d3d.
Now i am going to type in facebook..... twitter...... and google+.
Other than that we are done guys! We have completed the website layout! If you liked
the series then hit the like button and if you want to watch more content like this then
be sure to subscribe it’s FREE!
Until next time guys! My name’s Fazil thank you for watching and I’ll talk to you guys
in the next one!