Video Blog Web Page

Video Blog Web Page
Video Blog Web Page
In this Photoshop tutorial, we’ll go through the steps of creating a white and blue theme template. This design can be use for any type of website or blog.

Create a new file (File>New) that would have 788×1000 px and 72 dpi

Using the Rectangle Tool (U), try to draw the basic layer reserved for a site’s page. The layer’s color is #EFF2F5

Video Blog Web Page

Select the next demonstrated parameters by making a mouse click on the processed layer on the layers’ palette: Blending Options>Inner Glow

Video Blog Web Page

Blending Options>Stroke

Video Blog Web Page

 

Video Blog Web Page

Next we shall draw the menu’s button on the site’s header. Use for this operation the Rounded Rectangle Tool (U) with the radius 5 px.

Video Blog Web Page

The layer’s parameters: Blending Options>Inner Glow

Video Blog Web Page

Blending Options>Gradient Overlay

Video Blog Web Page

Gradient’s parameters:

Video Blog Web Page

Blending Options>Stroke

Video Blog Web Page
Video Blog Web Page

Make five copies of the layer containing the button. The copies should be situated from the right side to the left one. The fifth copy should be stretched out, applying the Free Transform selection.

Video Blog Web Page

Next we’ll represent the searching window out of the stretched button. The Rectangle Tool (U) in this case has the white color.

Video Blog Web Page

The layer’s parameters: Blending Options>Stroke

Video Blog Web Page

 

Video Blog Web Page

Represent the button for starting searching process near the searching window. Select for this operation the Rounded Rectangle Tool (U) with radius of 3 px.

Video Blog Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Video Blog Web Page

Gradient’s parameters:

Video Blog Web Page

Blending Options>Stroke

Video Blog Web Page

 

Video Blog Web Page

Insert the buttons’ titles on the site’s header and the inscription for the search and menu buttons.

Video Blog Web Page

 


Video Blog Web Page

It’s time for drawing the banner, choosing the Rounded Rectangle Tool (U) (radius 5 px).


Video Blog Web Page

The layer’s parameters: Blending Options>Inner Glow

Video Blog Web Page

Blending Options>Gradient Overlay

Video Blog Web Page

Gradient’s parameters:

Video Blog Web Page

 


Video Blog Web Page

 

Make a copy of the banner’s layer, replacing the copy’s color with the white one and move off the layer’s parameters out of the copy. Select the Add Anchior Point Tool to modify the element’s shape. Use also the Convert Point Tool to make the corrections on the highlight’s shape as it is demonstrated below:


Video Blog Web Page

The layer’s parameters: Fill 20%
Blending mode-Overlay


Video Blog Web Page

Insert the text on the made banner, keeping the next demands for the inscription:

Video Blog Web Page

video blog

Video Blog Web Page

latest video on the web


Video Blog Web Page

Write the name of the site’s section:

Video Blog Web Page

the main text

Video Blog Web Page

the link

Video Blog Web Page

the data’s parameters:

Video Blog Web Page

On the shown section we have to insert a special panel reserved for video player. In this case we’ll select the Rectangle Tool (U) of white color.


Video Blog Web Page

The layer’s parameters: Blending Options>Stroke

Video Blog Web Page

 


Video Blog Web Page

Introduce on the made video player’s panel the video file’s picture:

Video Blog Web Page

Next we have to add the play line indicator under the video file’s picture, applying the Rounded Rectangle Tool (U) with a radius of 5 px.


Video Blog Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Video Blog Web Page

Gradient’s parameters:

Video Blog Web Page

 

Video Blog Web Page

Using the same Rounded Rectangle Tool (U) (radius of 5 px), try to make the play line indicator of the color #1EA1FF. Press Alt button when using the Rectangle Tool (U) to cut out the indicator on the left side.


Video Blog Web Page

 

Video Blog Web Page

On the right and left indicator’s sides we’ll introduce the track’s duration:

Video Blog Web Page

 

Video Blog Web Page

We have to insert also the special button, reserved for conducting the video player. This time the used instrument is Ellipse Tool (U) of the color #575757

Video Blog Web Page

The layer’s parameters: Blending Options>Drop Shadow

Video Blog Web Page
Video Blog Web Page

Make a copy of the button’s layer and select the Free Transform option to place the copy as below:

Video Blog Web Page

Make one more button’s copy, replacing the copy’s color with #A6A6A6.

Video Blog Web Page

Create a new layer and use on it the Pencil Tool (B) (brush 1 px) of white color to draw the symbols on the player’s buttons.

Video Blog Web Page

Applying the last instrument, try to make the mail’s indicator. The color is #8D8D8D.

Video Blog Web Page

Insert the inscriptions on the player’s panel, keeping the demands from the next tables:

Video Blog Web Page

 


Video Blog Web Page

Use again the Pencil Tool (B) (brush 1 px) to represent the play indicator and the menu’s one. The color is #777777.


Video Blog Web Page

Now we shall apply the Line Tool (U) to picture several vertical dividing lines on the video player’s menu. The color in this case is #BDBDBD


Video Blog Web Page

Using the last instrument, draw a dividing line on the left video player’s side. The color is #C5C7C8.

Video Blog Web Page

It’s time for the lateral menu on the left side.

Video Blog Web Page

 

Video Blog Web Page

Categories

Video Blog Web Page

Use the Custom Shape Tool (U) to draw a small star near the lateral menu’s point. Choose the shape from the next table:

Video Blog Web Page

 

Video Blog Web Page

The layer’s parameters: Blending Options>Drop Shadow

Video Blog Web Page

Blending Options>Gradient Overlay

Video Blog Web Page

Gradient’s parameters:

Video Blog Web Page

Blending Options>Stroke

Video Blog Web Page

 

Video Blog Web Page

Make nine copies of the star’s layer and select the Free Transform option to situate the copies the same way the next picture indicates it.

Video Blog Web Page

 

Video Blog Web Page

Selecting the earlier applied instruments (the Custom Shape Tool (U) and Rectangle Tool (U)), it’s possible to represent several small stars and two rectangles. The elements’ color is #1EA1FF.

Video Blog Web Page

Insert their titles between the made elements:

Video Blog Web Page

 

Video Blog Web Page

Getting a better result is possible if combine in a group all the layers composing the elements under the player’s panel and the inscription there (hold on Ctrl button to mark out the appropriate layers and press the left mouse’s button to take the marked layers on Create a new group selection). Create a new file (File>New) with 2×1 px and 72 dpi. Choose the Pencil Tool (B) (brush 1 px) and the color #858585 to draw the pattern from below.

Video Blog Web Page

Edit>Define Pattern
Make a horizontal dividing line under the drawn earlier elements, using the Line Tool (U).

Video Blog Web Page

The layer’s parameters: Fill 0%
Blending Options>Pattern Overlay

Video Blog Web Page

 

Video Blog Web Page

Insert the inscriptions of the already watched video files, under the dividing line, taking care of the demands from below:

Video Blog Web Page
Video Blog Web Page

The additional information about the file:

Video Blog Web Page

the main text:

Video Blog Web Page

the link:

Video Blog Web Page

Make a copy of the earlier made horizontal interrupted line under the video player. Merge Down the layers (CTRL+E). Turn over the copy on 90 degrees and erase the unnecessary elements, applying the Eraser Tool (E).

Video Blog Web Page

Insert the pictures of the earlier watched video files:


Video Blog Web Page

 

Make two copies of the elements’ group we’ve represented under the video player’s panel. Choose then the Free Transform option to place the copy under the video files’ pictures:


Video Blog Web Page

On the last stage we’ll introduce the corresponding number of the users’ comments and the rating of the video files.

Video Blog Web Page

 


Video Blog Web Page

 


Video Blog Web Page

Finished!

View full size here.