Home

Portfolio

Testimonials

Blog

Write for Us

Contact Us

Follow me

Subscribe RSS

Web Templates

Facebook Layouts

Corporate Branding

eCommerce Templates

CMS/Blog Templates

Custom Services

Free Website Templates

Build A Website Using 1000s Of Free Website Templates. Start Now!
Websites.Intuit.com

D e g s i n T a e r n d D y a k r P L o a o i f t y r l o n u i t P h o t s h o p
August 19, 2011 in Photoshop Tutorials Learn how to design a eye catching wooden textured Portfolio Layout in Photoshop!

Enter keyword...

Ok

1,450 Fans

LIKE

1,139 Followers

FOLLOW

Final Result
78 Subscribers
SUBSCRIBE

Categories
Articles Coding Tutorials Flash Tutorials Freebies Illustrator Tutorials Inspiration Photoshop Tutorials Resources Roundups Store

Advertise Here

1. First Download and install these Tileable Wood Patterns. Create a new document that's 10501030 pixels Double click on the background to unlock, then again to go into Blending Options and put in the options below.

Advertise Here

Advertise Here

converted by Web2PDFConvert.com

Advertise Here

Advertise Here

Find us on Facebook

Bloom Web Design

Like 1,461 people like Bloom Web Design.

Brendon

T-hly

Stew art

Say eem

Michelle

Gloria

Shareef

Joee

Bidy a

F acebook social plugin

2. Using the Rectangle Tool, draw a shape like below across the layer in the colour white. Set the Blending Mode on the layer to Multiply so it's invisible, double click into Blending Options and put in the settings below:

Partners
Tutorials Share Daily Roundups PSD Dude PSD Artist Become a Partner

3. Using the line tool (1px & white), draw a line across the layout while holding down the shift key (to keep the line straight).

converted by Web2PDFConvert.com

4. Holding down the shift key, select the rectangle & line layers, right click and Duplicate Layers (or drag them to the new layer icon). Place the duplicated layers on the footer area. I've changed the direction of the shadow by going into Gradient Overlay and changing 90 to -90.

5. Next write out the name of your website, I'm using the font Nilland. On the heading layer, double click into Blending Options and put in the following.

converted by Web2PDFConvert.com

6. Next write out the menu names in the font Nilland using the colour white. Using the Rounded Rectangle Tool draw a shape around one of the menu names for a Hover Example using the colour white. Set the Blending Mode to Multiply so it's invisible, then double click into Blending Options and put in the settings below.

7. For the slider, draw a shape using the rectangle tool. Double click into Blending Options and put in the following settings:

converted by Web2PDFConvert.com

8. Next using the Polygonal Lasso Tool draw around the slider leaving the right bottom corner out. Make sure your on the slider layer, then click on Add Layer Mask to crop off the corner.

9. Using the Pen Tool draw the folded corner shape, double click to go into Blending Options and put in the following settings:

converted by Web2PDFConvert.com

10. Using the line tool (white 1px) draw on the edges of the slider where I've pointed at below.

11. Next draw the shape below using the rectangle tool in the colour white. To rotate the shape press ctrl+t and rotate a corner. Double click to go into Blending Options and put in the Outer Glow setting below. Duplicate the shape and make it straighter by press ctrl+t and rotating, double click into Blending Options and put in the Gradient Overlay option below.

converted by Web2PDFConvert.com

12. Draw another smaller white rectangle to go in the center in the colour white. We'll be placing our slider image here later on in the tutorial.

13. Write out a heading for your slider, I'm using the font NIlland again. Double click into Blending Options and put in the settings below to add a nice effect.

converted by Web2PDFConvert.com

14. Next write out some more slider information in the colour white.

converted by Web2PDFConvert.com

15. Next draw a button using the rectangle tool, double click into Blending Options and put in the settings below. Choose an arrow from the Custom Shape Tool and place it on the button. Duplicate the button layers, press ctrl+t and flip the button over.

16. For the portfolio, draw the image thumbnail shape like below using the rectangle tool. Double click into Blending Options and put in the following settings:

converted by Web2PDFConvert.com

17. Draw another smaller white shape inside the thumbnail, ready for the image. Duplicate the image thumbnails and place evenly on the website layout.

converted by Web2PDFConvert.com

18. Draw the footer shape using the rectangle tool, double click into Blending Options and put in the Gradient Overlay below.

19. Write out some copyright & menu details.

converted by Web2PDFConvert.com

20. Lastly get an image you want on the slider and place it over the white rectangle you created earlier, click click the layer and click Create Clipping Mask. This will crop the image down to the size of the white rectangle.

converted by Web2PDFConvert.com

21. Do step 20. for the following portfolio images.

Final Result

Want more?

converted by Web2PDFConvert.com

Magnifying Glass Icon Photoshop Tutorial

Design & Animate Fancy Menu Buttons

How to Create a Custom Photoshop Brush Set Tutorial

Tags: dark, photoshop, portfolio, template, templates, trendy, tutorial, web templates, website design, wood texture

Ainsley
Ainsley Bevis is a passionate, and mostly self taught, Web and Graphic Designer based in Melbourne, Australia. Besides designing she also enjoys playing guitar, piano & walking her 2 dogs at the beach!

1 Comment Leave yours

1 Trackbacks
Photoshop Tutorials Roundup August 2011 | Pixel77 - [...] Design A Trendy Dark Portfolio Layout in Photoshop [...]

Leave a Reply
Name (required)

Mail (will not be published) (required)

Website

Message

Submit comment

Copyright 2011 Bloom Design Blog - All rights reserved Powered by WordPress - Blog Magazine Theme by ThemeShift.com

converted by Web2PDFConvert.com