Jul 1, 2009

Posted by Robin Hoods in Freebie, Photoshop | 2 Comments

Create a Gorgeous Premium Portfolio Layout

layout-200Hello 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.

Preview full size layout

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

damask
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.

250

Click on time inside your document, and then change the blending mode to Overlay

337

With Rounded Rectangle Tool, I will make some shapes

338

I will right click on the grey shape layer (and I will choose rasterize layer)

414

Then I will grab Rectangular Marquee Tool, and I will make a selection on the bottom part of the grey shape

514

Then hit the Delete key from your keyboard, and press CTRL+D to deselect

614

I will add the following layer styles for this shape

713

813

913

1013

This is my result

1118

With Ellipse Tool, I will create a dark shape. I will place this shape under the orange navigation bar

1214

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.

1313

I will lower the opacity for this shape to 20%

1412

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

1513

Then I will press on CTRL+D to deselect my selection

1611

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

1712

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

1810

I will use one more time Rounded Rectangle Tool, to create another 3 shapes

1910

For all these shapes I will add the following layer styles

2010

2116

This is my result so far

2212

Now I will add some text and images. Please click on the next image to see the full size layout

2312

I will work further on the header. ON the right side I want to create a slideshow. I will create there one round shape

2410

I will cut the left side of the shape, and then with Warp tool I will modify the shape to look like mine

259

Then with Ellipse Tool I will create s small circles.

269

I will drag these small shapes under the white shape. The one where you will see some random images from your slideshow

279

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

288

Then I will go to Filter > Blur > Gaussian Blur, and I will change the radius value to 2 pixels

299

I will select Custom Shape Tool, and I will add a small arrow over this orange shape

307

With The same technique I will create a similar design on the right side

3113

I will create a new layer above the damask texture layer, and with Brush Tool I will add a simple drawing

3211

Then I will change the blending mode for this layer to Overlay. This is my final result

339

Portfolio1

Related Posts :

  1. Kn6z3J lpbvokpjhryd, [url=http://vcdurtinyuhw.com/]vcdurtinyuhw[/url], [link=http://qesimufblkaq.com/]qesimufblkaq[/link], http://yttxrtskisey.com/

  2. Keep up the good writing

Trackbacks/Pingbacks

  1. 5+ Beautiful Wordpress Premium Themes @W3Graphix - [...] pre-built features to save you time. Preview the various layouts including blog pages, FAQ ’s, portfolio and a working ...

Leave a Reply

CommentLuv Enabled
Web Statistics