Hardcore Design – How to Create a Designer Portfolio in Wood Style
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
Set the Layout Dimension
We set 1024 x 1500px
Copy and Past the Background
Now we can past our wood and choose the position that we prefer.
Rename the background
Dont't forget to rename all the levels.
Set the Vertical Guides
Can be useful use 2 vertical Guides.
Building the Header Menu
Let's build a transparent panel at the top of the layout.
Select the Rectangle Tool
Choose the Color of the Panel
Choose RGB #CCCCCC
Create the Panel
Rename it
Resterize it
Don't forget to resterize the shapes.
Set the Panel Opacity
We set the panel opacity to 50%
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.
Rename the Levels of the Last Works
Allow/Disallow Guides
As you prefer
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
After, right click on > layer and choose blending option
Set the opacity
the drop shadow
and the Outer Glow
Ok, now right click on this layer and choose Duplicate Level. Choore an other name for this layer.
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
The Title of the Central Box
Set the Font
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.
The Footer
Duplicate the central box and rename the new layer
Place the new layer at the bottom of the layout.
Choose a photo for the Freelancer profile, insert it into footer panel and after select the rectangle tool.
Create Scotch Effect
Create a white rectangle
rename the 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.
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)
Now we add other text into footer panel.
Info and Contacts
Good, now the header menu...
Set the Text of the Header Menu
Don't forget the 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
See the results and after place it ad you prefer.
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.
Do the same with the notepad and add the text (Last Offers for example...)
The notepad finished
Again for the last time, do the same with a pair of 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
