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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Copy and Past the Background

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

Image may be NSFW.
Clik here to view.

Rename the background

Dont't forget to rename all the levels.

Image may be NSFW.
Clik here to view.

Set  the Vertical Guides

Can be useful use 2 vertical Guides.

Image may be NSFW.
Clik here to view.

Building the Header Menu

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

Select the Rectangle Tool

Image may be NSFW.
Clik here to view.

Choose the Color of the Panel

Choose RGB #CCCCCC

Image may be NSFW.
Clik here to view.

Create the Panel

Image may be NSFW.
Clik here to view.

Rename it

Image may be NSFW.
Clik here to view.

Resterize it

Don't forget to resterize the shapes.

Set the Panel Opacity

We set the panel opacity to 50%

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

Rename the Levels of the Last Works

Image may be NSFW.
Clik here to view.

Allow/Disallow Guides

As you prefer

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

After, right click on > layer and choose blending option

Set the opacity

Image may be NSFW.
Clik here to view.

the drop shadow

Image may be NSFW.
Clik here to view.

and the Outer Glow

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

The Title of the Central Box

Set the Font

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

The Footer

Duplicate the central box and rename the new layer

Image may be NSFW.
Clik here to view.

Place the new layer at the bottom of the layout.

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Create Scotch Effect

Create a white rectangle

Image may be NSFW.
Clik here to view.

rename the scotch layer

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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)

Image may be NSFW.
Clik here to view.

Now we add other text into footer panel.

Image may be NSFW.
Clik here to view.

Info and Contacts

Image may be NSFW.
Clik here to view.

Good, now the header menu...

Set the Text of the Header Menu

Image may be NSFW.
Clik here to view.

Don't forget the Flags!

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

See the results and after place it ad you prefer.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

The notepad finished

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.