Create an impressive videographer website portfolio layout in photoshop

• Published by webdevtuts
• Posted on October 31, 2010
• 9 Comments

Today I have a new type of website layout tutorial for you all. In today’s tutorial I will be teaching you all how to create a videographer portfolio website layout. Check out the techniques i used in this tutorial and see what you come up with.

Things yous will need.

• Amienne Font
• Dots tutorial(Optional)

Step 1

Create new document 1360px x 800px 72dpi. Background Color #000(Black)

Note: Turn on your photoshop ruler(PX!).

Step 2

Now drag your guide lines to 200px on the left side and 1160px on the right side(Exact place). That should leave 200px on both sides.

Step 3

Select the rectangle tool and create a rectangle box for your nav. Then right click on the rectangle layer>>blending options>> Gradient overlay, double
click on the gradient bar Left color: #131313, right color: #343434. Now select the stroke option and make a 1px inside line, color #000000.

Step 4

Now select the type tool, font: Amienne, size: 51px and type out a word for your logo.

Right click on the logo layer>>blending options>>drop shadow. blend mode: multiply, opacity: 75, angle:120, distance: 0, spread: 0, size: 5.

Select the inner shadow checkbox now. blend mode: multiply, opacity: 75, angle:120, distance: 0, spread: 0, size: 5.

Select the color overlay. color: #ffffff. now select the gradient overlay check box. blend mode: normal, opacity: 100, gradient: Left color:#000000, Right color:#ffffff, style: linear, angle: 90, scale: 100.

Then select the stroke check box. size: 1, opacity: 100, position: outside, blend mode: normal, opacity: 100, color: #000000.

Step 5

Select the type tool, font: Amienne bold, color: #ffffff, size: 28px. Now write out the your portfolio items. After you have written out your portfolio items highlight the home option and change the color to #e4d640.

Step 6

Now select the rectangle tool then create a box for the bio. Then apply a gradient overlay to the box, left color: #000000, right color: #2a2a2a then you should have a faded box.

Select the custom shape tool color: #e4d640 and select the tile2 pattern. Stretch the tile so it fits within the box then change the opacity to 4% so that it is barley seen.

select the type tool, font: Amienne, size: 55px and type out your name. For the stars I used a separate type tool and created them separately on both sides. After you have your name create right click on the layer>>blending options>>gradient overlay. Left color: #c6bd2a, Right color:#ffed53. Now select the stroke check box>> 1px #000000. Apply the same option to your stars.

Step 7

Select the type tool, font: Arial, size: 12px, color:#ffffff and write a bio. I used gibberish text(Lorem Ispum).Then select the rectangle tool and create a scroll box and arrow to the right side of your text. Then apply a 1px stroke #000000 to your arrow and scroll bar.

Step 8

Create or a find a image about the same size as your bio area. I used an image from Google.

Step 9

Now lets create our portfolio items. Create 3 new portfolio items. width:320px height:260px. Then select the custom shape tool and select the triangle and create a sideways triangle for our play button. Then change the opacity 50%.

Step 10

now select the rectangle tool color #000000 and create a rectangle box for your footer. Then apply a gradient to it, left color:#080808, right color:#313131. Then duplicate the logo and re size it to 12px and write your copyright text. Then pick some of your favorite social icons and place them to the right of your footer. Finally drag in your background. Right click on the layer>>blending options>>pattern overlay and select the dots pattern. Make sure it is scale to 1%. Now you’re done.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts