CgBaran

Hello everyone. Today, I’m going to show you how to design a portfolio layout in photoshop.  This is the final result.

First start with creating a new photoshop file with dimensions 1050×890 px. Fill background layer with #cc617f. Create a new layer, by using rectangle tool create the white content background area and apply following style to this layer.

Next let’s design header part. For logo i use impact font with colors, #333333 and #cc617f. Add your navigation text then create a new layer and by using rectangle tool create small rectangles below text. For active page use #cc617f for others #cbcbcb. And header part is done.

For featured work section, create a rounded rectangle with following styles,  add some content to it.

Then we are going to add arrows. Create two circles and apply same stroke as featured area. By using custom shape tool add arrows on these circles filled with #cc617f.

Add some content to your design. You can find great free icons for use here. For lines, i used pencil tool with 4 px wide with color #cc617f. For read more buttons, apply same gradient overlay as featured work area to  rounded rectangles with 20px radius. Add read more text with impact font. Finally create a rectangle for footer section, fill it with color #333333 and add our text.

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.