Create Sleek and elegant portfolio website plus a free psd

Now we are going to create an elegant and clean portfolio layout. This portfolio is suitable for photographers and other artists who want to showcase their work, and for that there will be sections for images and latest work. And you can showcase whatever you like. While designing we’ll be using some very simple and basic styles and gradients to enhance the appearance to achieve a stylish portfolio template.  So let’s start.

Preview

Level of difficulty : Beginners

Estimate time :   45 to 60 minutes

Resources:-

Images:-  1, 2, 3, 4, 5, 6 or from Here.

Camera:- Camera Vector

Icons:- Search, twitter, facebook, Digg

Step 1

Create new document 850x850px, and then use the paint bucket on with #000000 color to get a nice black background.

Step 2

Then add the camera image in the background on upper right side with opacity 50%, then click on Add layer style and add an Outer Glow.

Step 3

Now we are going to create some buttons using Rounded Rectangle Tool, radius 10 px, with the color #ff7200.

Step 4

Now click Add layer style, and click on Gradient. Keep the outer color stop on both side of #ff6e02, and the middle one should be #ffa400.

Step 5

Now we need to add some other effects, for this click on layer > new to create a new layer. Select Polygon tool, radius 10 px, with the color #ffffff with opacity 25%. Make it cover half of our button. (In case you are wondering where the camera go, I unchecked the camera layer so you can have a clear view of the buttons)

Only keep the part which is covering our button remove the rest with eraser tool.

Step 6

Repeat the same process to create the remaining buttons using this #1f1f1e as a main color this time. And add pages name using type tool.

Step 7

Now create rectangular box using Rectangular tool, and fill it with #242424 and place it on the right side.

Then add an image in the middle.

Step 8

Now using the same rectangular tool create 4 boxes under the big box. And fill it with color #242424, then repeat the same process and add some Images.

Step 9

Now add a new box using Rectangular tool and fill it with color #180904, and add the basic info in it.

Step 10

Above the info box create another small box with rectangular tool and fill it with color #180904, then add a search icon (search icon is available in the resources above) on the side.

Now using the same rectangular tool create a small rectangle and fill it with color #0e0503.

Step 11

Now we are going to create our footer. For this create a box with Rectangular tool, fill it with color#180904. If you like you can also add some gradient like I did. But to start just follow the simple stuff.

Step 12

Then add the twitter, facebook and dig icons on the right side of the footer. ( These icons are available in the resources mentioned above)

Step 13

Then using the type tool add the page links on left side of the footer, dividing each with line tool. And we are done.

 

Try it and let me know what you think, you can get the free original psd of this tutorial simply pressing the button below. Have fun!


 

13 comments

  1. JennyQw /

    Hey, I followed your tutorial and it turn out great. Thanks

  2. Alainz Jack /

    I’m interested in the psd. Thanks

  3. Awesome tutorial. Thanks very much for sharing it.

    • Tyler /

      Couldn’t agree more:)

  4. Ashleyy /

    Just tried your tutorial, absolutely brilliant! Thanks man

  5. Miadika /

    I thougt Photoshop was meant to adjust pictures, this is great.

  6. Wezill /

    It´s awesome but not easy for me, cause I don’t speak english very well

  7. Can’t wait to get this! I can feel a pretend heart attack coming so I can stay home from Uni and enjoy this.

  8. I can’t stand waiting to get my hands on this delicious portfolio…

  9. Cristobal Inmon /

    Nice..

  10. Brengle /

    Amazingly website, I like how your website looks! The layout is great!…

  11. can you send me the psd file

    • Simply click the “Download button” to get the PSD. Thanks

Trackbacks/Pingbacks

  1. Photoshop Web Layout Tutorials - [...] 18. Create Sleek and elegant portfolio website [...]
Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes