CgBaran

I’m going to show you how to design a portfolio layout in this tutorial. This is final result.

Lets start with creating a new photoshop file. But first throughout this tutorial don’t forget to name your layers and also group them. We will be creating lots of layers and you can easily lost track of them. After this warning lets create a new photoshop file with dimensions, 1200 x 1050 pixels.  By using your gradient tool, with colors set to #7e8aa2 and #263248 fill your background layer with linear gradient.

Lets go from top the bottom. For navigation part, use your rounded rectangle  tool, set radius to 30 and create a rounded rectangle. Move your rectangle to top of your document. As seen on image you will only use bottom half of it. Then apply fallowing layer effects to it.

Next we are going to add navigation text and logo.  I’m going to use a basic text for logo. Font is impact and colors are #ff9800 and #263248.  I use arial bold with color #263248 for navigation.

For separators use your pencil tool and draw a 1 pixel line with color #263248. Then duplicate this layer, go to layer effects and using color overlay change its color to white. Finally use move tool and tap left arrow one time. It will push it 1 pixel left.

It’s time for featured work section. I added some text. I used bell gothic std font for featured work text with color #ff9800. For others,  i use arial.  Use your rounded rectangle tool with radius 10 for learn more button. Apply following layer effect and add your text over it.

For featured work image crate a new layer, using rectangle tool create a white rectangle. Choose an image, bring it to photoshop free transform to fit your design. So far you should have something like this.

Create a new layer on top of the image. By using rectangle tool create a black rectangle bottom of the image.

Lower this layers opacity to %25. Add some text.

Now is time for content. Select rounded rectangle tool, set radius to 20px and create two rounded rectangles into separate layers.

Next i added some content to site. I use bell gothic std with colors  #ff9800 and #263248 for headers. Arial font has been used for other text with color #263248. For containers behind recent works, webdesign, print design and video editing sections create a rounded rectangle and apply following effects.

When its all finished you should have something like this.

Finally, create a white rectangle for footer area. Apply following effect to this layer and add some text.

I hope you enjoy this tutorial. If you have any questions you can comment here. For more tutorials don’t forget to follow me on twitter and subscribe to rss feeds. Also you can find hand picked tutorials all around the web from CgBaran Tuts.