Hardcore Design – How to Create a Designer Portfolio in Wood Style

layout finished

Hardcore Design - How to Create a Designer Portfolio in Wood Style

Recentemente ci siamo occupati di come si possa impiegare il legno nel webdesign mostrandovi quanto siano importanti i CSS per il background (e non solo) e alcuni esempi di Siti Web in cui il legno è stato ampiamente utilizzato con risultati eccellenti.

Oggi vogliamo mostrarvi come realizzare con Photoshop un Layout di un Portfolio personale in cui è presente il legno.

Buona lettura!

Recently we worked on how to commitments wood in webdesign showing you how important are the CSS for the background (and not only) and some examples of Web Sites where the wood has been widely used with excellent results.

Today we show you how to make a Photoshop Layout of a Personal Portfolio where there is wood.

Click on photos to large version

Download PSD + Lilliput Font

Set the Layout Dimension

We set 1024 x 1500px

set layout dimension

Copy and Past the Background

Now we can past our wood and choose the position that we prefer.

copy and paste background

Rename the background

Dont't forget to rename all the levels.

rename background

Set  the Vertical Guides

Can be useful use 2 vertical Guides.

vertical guides

Building the Header Menu

Let's build a transparent panel at the top of the layout.

Select the Rectangle Tool

rectangle tool

Choose the Color of the Panel


header color

Create the Panel

header panel

Rename it

rename header panel

Resterize it

Don't forget to resterize the shapes.

Set the Panel Opacity

We set the panel opacity to 50%

opacity of the header panel

Central Box

Now, create an other rectangle for the Last Works. It must be more largest than the panel created a moment ago. Resterize it and set the opacity to 50%

Adding Last Works

We want to insert 3 screenshots of the last works. After you can choose an AJAX techinique for this panel.

add last work

Rename the Levels of the Last Works

rename levels

Allow/Disallow Guides

As you prefer

alloow-disallow guides

We must create a simple navigation for our last works, so we add the left and right arrows to see all the screenshots. We can use the images or the characters > and <. For this layout we used  the characters.

Well, create the character >

Rename this layer

rename right arrow

After, right click on > layer and choose blending option

Set the opacity

trasparency arrow

the drop shadow

blending option arrow

and the Outer Glow

blending option arrow

Ok, now right click on this layer and choose Duplicate Level. Choore an other name for this layer.

duplicating right arrow

Next Step > Edit > Transform > Flip Horizontal

and now, press V  (or choose move tool) and place the < symbol on the left.

Right click on the right arrow layer and choose "Copy layer style"

Right click on the left arrow layer and choose "Paste layer style"

Preview of the Central Box

preview left arrow

preview right arrow

The Title of the Central Box

Set the Font

set font last works

Add the words "LAST WORKS" at the top of the central panel on the right and after the description of each works.

Check the layers of the description text.

description text layers

The Footer

Duplicate the central box and rename the new layer

duplicating central box

Place the new layer at the bottom of the layout.

place the footer

Choose a photo for the Freelancer profile, insert it into footer panel and after select the rectangle tool.

rectangle tool

Create Scotch Effect

Create a white rectangle

created scotch

rename the scotch layer

rename scotch layer

Rotate it (CTRL+T) as you prefer.

make it real!

press L (or choose Lasso tool) and use it to delete some part from the white rectangle created a moment ago.

creating real scotch whit photoshop

after, press canc button on your keayboard. Press CTRL+D and repeat the same process for the other side of the scotch.

Make it again for other sotch and place it on the photo.

Ok, right click on photo and scotch layers and set the blending option (same blending option for this 2 layers)

blending photo footer

Now we add other text into footer panel.

name surname

Info and Contacts


Good, now the header menu...

Set the Text of the Header Menu

set text menu

Don't forget the Flags!

placing flags

ok, now we create something very original!

Text Tool and write something between the header panel and the central panel (RGB #333333). After, right click on this nwe layer > blending option

blending webair

See the results and after place it ad you prefer.

set position webair

Very good, now the final steps!

Choose a mouse photo (or an other object) and place it on the background layer. After set the blending option of this object.

blending mouse

Do the same with the notepad and add the text (Last Offers for example...)

blending notepad

The notepad finished


Again for the last time, do the same with a pair of glasses.

blending glasses

Well Done!

Last Step

Add other icons between the header panel and the central panel, allow the guides (if you disabled them), check the position of all elements and the last details.

Ok, layout finished!

The Result

layout finished