Create an impressive videographer website portfolio layout in photoshop

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.

Step 1

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

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.
Videographer website portfolio

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.
Videographer website portfolio

Step 4

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

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

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

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.
Videographer website portfolio

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

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.
Videographer website portfolio

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.
Videographer website portfolio

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.
Videographer website portfolio

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.
Videographer website portfolio

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.
Videographer website portfolio

Step 8

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

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%.
Videographer website portfolio

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.
Videographer website portfolio

Joe Granados the author

Joe Granados is the owner 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

Leave a Reply