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.
Digital artist, designer, blogger, WordPress expert, 3d animator, game development enthusiast and founder of Cgbaran for more information about me check out my portfolio
5 Comments
Dudeness
Why do you have the page size so big why not 760width or something?
Baran
I planned to use a css framework like 960 or blueprint css therefore i use width of higher values.
Dudeness
aaa I see thank you for you response. I love the layout BTW. great work!
Brent
Great Tutorial one question how would you setup to incorporate your design with html… By placing text in photoshop you would have to update the image file eveytime you changed something on the site?
Baran
Placing text on photoshop file is for demonstration purposes only. You should add your text with html and style it according to your photoshop file. You can check out cgbaran tutorials blog for photoshop to html tutorials. I’m planning to turn these layouts to css/html and write a tutorial but i don’t know when i’m very busy these days:)
One Trackback
[...] View Tutorial [...]