PSDFan Extra

Design a Colorful Vlogging Web Layout

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Start by creating a new layout (1000X1400px).

We’re going to start by laying out canvas guides to help structure our layout.

Lay out the following guides:

Vertical Guides:

50px, 350px, 600px, 650px, 700px, 950px

Horizontal Guides:

200px, 550px, 700px, 900px, 1000px

Step 2

Create a new layer called ‘background’. Select your entire canvas and fill it with d12b5d.

Create a new layer called ‘radial gradient top’.

Drag out a white to transparent radial gradient from the very top center of your canvas.

Reduce this layer’s opacity to 20% and change it’s blend mode to ‘overlay’. This will make the light effect much more subtle, giving just a subtle highlight to your header:

Duplicate your ‘radial gradient top’ layer and move the duplicate layer down so that your duplicate highlight starts at your 550px horizontal guide line:

Step 3

We’ve going to create a simple logo for our Vlog.

Start by pasting in the camera icon from the movies icon pack in the resources section for this tutorial.

Then apply some next to the right of this:

Logo Text Settings:

Font Face: Carson
Size: 30pt
Kerning: -50
Color: ffffff (for small text) and ffd800 for the larger text.

Now apply a subtle drop shadow blending option to your text layer:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 25%
Angle: 120
Distance: 1px
Spread: 0%
Size: 2px

Step 4

Download the ‘simple dividers’ web elements pack from FanExtra (see resources section for this tutorial). Paste in the first divider from the pack, positioning it just underneath your logo area.

Reduce it’s opacity to 60% to make it slightly more subtle:

Step 5

Now apply some text underneath your divider for menu links.

Menu Text Settings:

Font Face: Arial
Styling: Bold
Kerning: 75
Color: ffffff

Apply a subtle drop shadow to your text to help it stand out against your background more:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 25%
Angle: 120
Distance: 1px
Spread: 0%
Size: 2px

Use your lasso tool to create a series of white ‘play’ icons next to each menu item:

Step 6

Now we want to create an active state for our menu.

Start by creating a white rounded rectangle behind your ‘home’ link (10px radius).

Now reduce the fill opacity of this layer to 8%, leaving the main layer opacity at 100%.

Apply an inner glow blending option:

Inner Glow Blending Option Settings:

Blend Mode: Screen
Opacity: 15%
Color: ffffff
Source: Edge
Choke: 0%
Size: 10px

Step 7

Download the Komodo social media icon pack from the resources section. Paste in several of the icons that are relevant to your blog, positioning them to the left of your logo.

Type out some account related links and position them to the right of your logo:

Now type out some sketchy text above your links, using the Jenna Sue font links to in the resources section for this tutorial.

Sketchy Text Settings:

Font Face: Jenna Sue
Size: 24
Kerning: 0
Color: ffffff

Also download the FanExtra Sketchy Arrows brush set found in the resources for this tutorial and create a light pink arrow pointing to your account related links:

Apply some sketchy text and a sketchy arrow to the left side of your header above your social media icons:

Step 8

Using your guides create a large black area in the center of your canvas. This will be the background for your featured video player:

Now grab a screenshot of your featured video. Later your will embed the video using code.

I used a video of me and my good friend Matt performing a cover of one of our favorite bands. If you’re interested you can check out the video here. (I’m the one on the right).

Step 9

Let’s create some browsing buttons to navigate between featured videos easily.

Create a white circle in the center of the black area to the left of your featured video:

Reduce the opacity of this circle to 16%.

Then create a new layer called ‘arrow’. Reduce this layer’s opacity to 20%. Use your lasso tool to create a white arrow within your circle:

Place the ‘circle’ and ‘arrow’ layers within a single layer group. Duplicate this group and move your duplicate arrow button to the right of your featured video area. Then with this layer group selected go to edit>transform>flip horizontal.

Step 10

Now apply a heading underneath your featured video area.

Paste in one of the icons from the FanExtra movie icon pack.

Then type out some heading text. Apply the drop shadow blending option that you used on your menu text.

Heading Text Settings:

Font Face: Carton
Size: 24pt
Kerning: -50
Color: ffffff

Step 11

Paste a series of video thumbnails underneath your ‘latest videos’ heading.

Step 12

Create a rounded rectangle shape (10px radius) underneath your video thumbnails. It can be any color, as we’re going to style it using blending options:

Now apply a gradient overlay and drop shadow blending option:

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: ranging from fe9700 to ffd100
Angle: 90

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 14%
Distance: 2px
Spread: 0%
Size: 5px

Step 13

Now apply a brown (5d321b) custom shape arrow to your button, as well as some brown Arial text saying ‘OLDER VIDEOS’. This will allow users to browse back through your vlog archives:

Step 14

Open up your simple dividers web elements kit again and copy/paste the 10th divider into your original document.

Go to edit>transform>rotate 90 CCW and use your guides to position it between your left column and the empty space in your right column.

Also reduce this dividers layer opacity to 20% to make it more subtle:

Step 15

Add some content to your right column.

This column is really just reusing layer styles and font settings from the rest of your layer, so I won’t repeat them again.

The sign up button uses the same layer styles as your ‘older videos’ button.

The heading text settings are the same as your ‘LATEST VIDEOS’ heading, and the smaller text is the same as your menu:

Step 16

To construct your site’s footer create a new layer called ‘footer’.

Select the bottom 50px of your canvas and fill it with black:

Use your lasso tool to create an upwards black arrow from the center of your black footer bar.

Then add some text to your footer:

Footer Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 9f9f9f

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.

Download Source File for this Tutorial

Related Posts

• Create a Simple, Stylish Custom Youtube Background
• Design a Sleek Textured Blue Portfolio
• Design a Modern Portfolio Layout