Create an awesome portfolio layout
Hello my friends. Today I will show you how to create another website portfolio.
You can use this tutorial to create also a professionally blog layout. Apply for a VIP account if you want to download the PSD file and XHTML / CSS template for this tutorial.
The most important think in this tutorial is the Damask texture i have used.
Let’s start by creating a new document with the following sizes: 960 x 900 pixels. For start I will use the following color for the background #3b2f26
If you don’t know how to add the color, I suggest you to use Paint Bucket Tool, and after you select the foreground color click on your canvas.
One of the most importation parts of this layout is to the background. I will give you a nice seamless damask pattern for you to use. Download the following image on your computer, and then open it on Photoshop
After you have the texture opened, go to Edit > define pattern. Choose a name for this pattern and click ok. You can now close this document. On our layout please create a new layer above the background layer. The shortcut to create a new layer is (CTRL+SHIFT+ALT+N). Select Paint Bucket Tool, and on the top of your screen select Pattern.
Click on time inside your document, and then change the blending mode to Overlay
With Rounded Rectangle Tool, I will make some shapes
I will right click on the grey shape layer (and I will choose rasterize layer)
Then I will grab Rectangular Marquee Tool, and I will make a selection on the bottom part of the grey shape
Then hit the Delete key from your keyboard, and press CTRL+D to deselect
I will add the following layer styles for this shape
This is my result
With Ellipse Tool, I will create a dark shape. I will place this shape under the orange navigation bar
Then I will go to Filter > Blur > Gaussian blur. You will be asked if you want to rasterize the shape. You can click on OK, and then on the Gaussian blur window set the radius to 3.
I will lower the opacity for this shape to 20%
I will make one more time a selection on the bottom part of this shadow, and I will hit the delete key from my keyboard
Then I will press on CTRL+D to deselect my selection
With the same technique as above I will create on the bottom of the header a similar effect. I will not explain one more time the steps. This is my result so far. Click on the following image to see the full size layout
I will create another layer (press CTRL+SHIFT+ALT+N) on top of all layers, and with Pencil Tool, and with a small brush (1 pixel) I will create 2 lines
I will use one more time Rounded Rectangle Tool, to create another 3 shapes
For all these shapes I will add the following layer styles
This is my result so far
Now I will add some text and images. Please click on the next image to see the full size layout
I will work further on the header. ON the right side I want to create a slideshow. I will create there one round shape
I will cut the left side of the shape, and then with Warp tool I will modify the shape to look like mine
Then with Ellipse Tool I will create s small circles.
I will drag these small shapes under the white shape. The one where you will see some random images from your slideshow
I will duplicate the orange shape, and I will rotate it to the right. You can see that I will change the color for this shape to black
Then I will go to Filter > Blur > Gaussian Blur, and I will change the radius value to 2 pixels
I will select Custom Shape Tool, and I will add a small arrow over this orange shape
With The same technique I will create a similar design on the right side
I will create a new layer above the damask texture layer, and with Brush Tool I will add a simple drawing
Then I will change the blending mode for this layer to Overlay. This is my final result
Please note that you can change the look of this layout very easy. If you don’t like the Damask texture used in tutorial, you can use another seamless pattern from our set of Photoshop Pixel Patterns.
If you want to download this PSD layout you need to apply for a VIP account. You can download the layered PSD layout, with ( xhtml / css template ) and also our entire collection of PSD layouts, and premium resources
642-845 practice questions help you get all the required knowledge so you can get high score on your 650-177 as well as 642-825 exams.
Responses to “Create an awesome portfolio layout”
Trackbacks
- Best Photoshop Tutorials, Brushes and Textures of May 2009 | CrazyLeaf Design Blog
- 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com
- The Most Popular Photoshop Tutorials of all Time
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine
- 50+ Best Photoshop Web Design Tutorials - Themeflash : One Stop For All Your Web Resources
- 90 New And High Quality Photoshop Web Layout Tutorials | Graphic and Web Design Blog - Inspiration, Resources and Tools
awesome layout, man it looks so cool
Damn that looks so pro.
Thank you so much for making this tutorial.
How can I use the texture on a black background?
Do not change the blending mode to overlay. If you want to change the color of the damask texture, you can press on CTRL+U to bring the Hue/saturation window. Play with the sliders until you are happy with your result
very nice portfolio layout I like this, thanks for tut. and inspire..
A tutorial for a portfolio huh? I wonder what kinda person needs a tutorial for a portfolio.. perhaps the kind that needs tutorials to fill it also. No negativity, just saying, makes no sense. Still nice though.. even though a portfolio should reflect something “personal” I might be wrong
Nice to read you post and know that we can use this tutorial to create own professionally blog layout. Thanks for the detail information given in the tutorial and hopefully it would be help me for my next project. Keep it up.
Very nice tutorial, thanks
Very nice tutorial, thanks
Oops…forgot to say great post! Looking forward to your next one.
the menu bar is way too long, but anything else is great mate ;]
Hi admin, thanks for the nice tutorial.
I have a question though: What font did you use for the headings (Latest Work, Grafpedia Blog, etc.)? Thank you!
I like the clean look of the design. have you tried the 960 grid?
A good tutorial. Thanks.
Myriad Pro – Condensed. Please let me know if you need more details
Whoa… this site is pretty awesome
your layout is really well designed, and your blogs are (judging from what i’ve read) very interesting. heehee… consider yourself favorited. 
Very good tutorial. Great step by step instructions. I love the style of the layout.
To Anthony Alexander, someone who is semi handy with Photoshop might need a portfolio tutorial to show pics of stuff he has made.
One question, where can I find the code to add pictures to, and automate the slideshow? Thanx again.
I like the slideshow control buttons very much, thanks for this tutorial.
Great tutorial thanks
Good tutorial. I personally liked the details in the header.
Cool! I really like the damask background that was used here. Excellent play on colors as well. The orange blends well with the brownish shade of the background. The subtle lighting effect provides a nice highlight to the header. The overall look is clean, organized, and really classy. Thanks!
greattttttttttttttttttttttttttttttttttttttttttttt
Great post… good suggestions…thanks!
Nice layout
got most of it done by now. however I have a small request and remark.
remark: there is only one image (where you show what color your stroke should be) where you added the hex value of the color. I used my color picker extention of firefox to get the other color codes. maybe a thing to add in future tutorials.
question: what font did you use? would also be a nice thing to add to the tutorials.
for the rest nice layout, nice website to
I am using very much the following fonts:
Trebuchet, verdana, myriad pro , Tahoma
For me it is very easy to add the color codes. All i want is to let users to add their own colors. Working with colors is one of the most important things when you design a website.
oh ok my bad
great tutorial 
my result
http://i119.photobucket.com/albums/o134/krike06/portfolio1.jpg
if I change a few extra things can it be used for commercial purposes? (I will be coding it for CMS themes and sell it)
We do not allow commercial use for our layouts. You can use though for your website
very usefull tutorial. Thx for sharing
OMG! Brilliant tutorial. Thanks a ton. I specially liked the 3d effect.
Real good tutorial;) Nice effects. Awesome 3d buttons.
very nice tutorial, thnx
Very nice layout and good tutorials.
Thank you very much.