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.
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.
Artist, designer, blogger, wordpress theme designer, entrepreneur, developer, social media enthusiast and founder of Cgbaran for more information about me check out: BrnCreative
3 Comments
Charles Blackwell
Hello. Great tutorial! I am really starting to get into web design and I could really use some slicing help. Could you do a follow up on slicing this template?
Baran
Hi Charles thanks. I’m planning to post slice tutorials for both layout tutorials but i’m busy these days working on CgBaran Tube they will be here as soon as i have time
Eartha Fladung
As I was reading then skimming through the myriad of comments above, another reason came to mind. On a blog with many comments I often do not comment even though I may have something to say. I may be repeating something already said and often do not have the time to read all comments that have already been made.