This tutorial is going to teach you the best method to create a Portfolio Template (oriented to the Webdesign and the 3D creation). Its modern style will get a professional and serious aspect to your company.
I will also bring you the proof that it is easy to customize the atmosphere of a website even using only one background, and that it is useful for the Webdesigners to download the Grafpedia's resources to avoid to waste their time!
But before to start it, see below the final result you will get at the end of this Photoshop tutorial:
For all of you, who cannot wait any more longer, you can download the .psd source file of this subject, in this way, click easy on this link or on the blue button on the bottom of this page.
STEP 1 Create a document
Open Photoshop^, then go to menu File>New and enter these values below :
Press on the OK button and your new picture apears. Before to start the next step, ensure that the Layers and Information window is opened (if not, retrieve it going to the Window menu).
STEP 2 Create the menu
During this tutorial, I will often use the guides, they are useful for me to easier create the different parts of my graphical interface and also to put them correctly at their perfect place on my document.
I will not explain the guides for all steps, but I remind you this rules now : To create a guide, press Ctrl/Cmd + R to display the rulers and easy click on the horizontal ruler (to create a horizontal guide), keep the pressed and slide the mouse to the correct position. Release the keys, a guide is automatically created (illustrated by the green line over your picture). To move a guide, use the Move Tool (V), click on the guide and slide it again to its new place.
We go back now to your Template. Create a new group and name it the top. Then, create a new layer. Using the Rectangular Marquee Tool (M) and the Information window, create on this layer a 1000 x 80 pixels rectangle. Fill in it with the black colour and add two layer styles (to add a layer style, go to menu Layer>Layer Style> et select the style).
Create now a new layer and name it the border top. Use the Rectangular Marquee Tool (M) and the Paint Bucket Tool (G) to create a line (1000 x 3 pixels, colour #040404). Apply same process to create under, another line (1000 x 1pixels with this colour: #2e2e2e).
Regarding the logo, I easy used the Text Tool (T) using the Adobe Gothic Std fond. Notice that I shared my title on two different layers (a first one Graf and a second one pedia).
On each layers texts, add an internal shadow and a gradient overlay. See below the layer styles setting:
Use now the Rounded Rectangle Tool (U) to create a rectangle (100 x 36 pixels, using the guides or the information window) on the right border of your document (50 pixels from the border). Then, add these three layer styles:
Remember these layer styles, they will be used many times during this tutorial.
Use now the Text Tool (T) to add the RSS members counter and import into your picture the icon you can download from this page.
Use tihs colour #7a7a7a for the text as well as for the icon.
Use the Text Tool (T) to add the links of the menu, on the left side of the counter. Use the same styles to create the rounded rectangle under the active link. Change the link colour to this blue: #2c8abd.
See below the result regarding the top of this theme.
We are now ready to create the carousel. Go first to the following page to download the background pack. Choose the best of them (depending of you) and import it into your document. Let 410 pixels free between the bottom of the menu (on the top) and the bottom of the carousel.
Create now a new layer over the background and use the Rectangular Marquee Tool (M) to create a thin white border of 3pixels. Set this layer under the fusion mode Soft Light and reduce the opacity to 50%.
Create a new layer and an active selection (900 x 440 pixels). Fill in this selection with white (use the Paint Bucket Tool). Set the background to 0% (the option just under opacity located in the layer window). And add the layer style.
Go now to Google or import your best own picture over the white rectangle. Resize or cut the picture to be sure to keep a size of 880x420px.
STEP 4 Create the shadow
There will be a shadow under the carousel, to create it, duplicate first the layer regarding the white rectangle. Place this copy under the white rectangle and rename it shadow. Remove now the layer styles (right click on the layer and select Delete the layer styles). Use then the Move Tool (V) to lower the layer to the bottom from 50 pixels.
Press the keys Ctrl/Cmd + T to activate the free transformation and reduce the height (taking the border on the top and move it to the center.) and Press Enter to validate. Go to the menu Edit>Perspective and press on the left top border and move the border to the inside).
Go to menu Filtre>Fluff >Gaussian fluff and enter a value of 12pixels.
To finish this shadow, reduce the opacity to 80 pixels.
STEP 5 The Title of the carousel
To create the title of the carousel, create first a new group and name it Title&arrow and create a new layer. Use the Rectangular Marquee toll (M) to create an active selection on the bottom of your picture (880 x 50 pixels). Fill in this selection with the black colour and reduce the layer opacity to 70%
Now, you are going to create on the left of the picture, a black square, which will be able to receive arrow used to spring from a picture to the next one. Create a new layer and an active selection of 50 x 50 pixels. Fill in this selection with black colour and reduce the opacity to 80%. Apply same process on right side.
Download the arrow available on this page. Then insert it into your picture. To switch the arrow direction, go to menu Edit>horizontal symmetry.
Add two layer styles on the layer: shadow and gradient overlay. Put same arrow type on the right side.
Use the Text Tool (T) to add your title in the center of the bar (font used: Androgyny).
Create a new layer and name it the white border. Then, create a new active selection on the bottom of the white rectangle. Fill in this selection with withe.
To finish, reduce the layer opacity to 70%
STEP 6 Create the page numbering
Regarding the page numbering of the carousel, select the layer of the white framework and create an active selection on the top of the carousel (156 x 20) Fill in the selection with white colour.
Use the Ellipse Tool (U) to create some rounds in the rectangle (use the blue # 195b85), and add an internal shadow onto each round.
To create the active link, duplicate on of the rounds. Delete the layer style and change the fill in colour to this blue: #98cfec. Press the keys Ctrl/Cmd + T and reduce the size to 80%.
See below the final result of the top area of this template.
STEP 7 The contents
Regarding the first line of contents, use i.e. to give a description of the services of the company; you need to create first a new group and to name it content. Use now the Text Tool (T) to create a title ((font Androgyny) and a description (font Helvetica). Go to this page http://www.iconfinder.com/search/1/?q=iconset%3Afuturosoft_icons and import to the lft of the text.
Place the two layers of texts and icon into a group and name it box1. Do same thing for the two blocks.
You need now to create now a button under each block, to do it, use the rounded rectangle (U) and create a rectangle (90 x 24 pixels). Add three layer styles on this button: stroke, gradient overlay, internal shadow. Follow the setting below.
And for the text in the button.
To create the shadow under the button, duplicate the button layer and place this copy under the button. Delete the layer styles and change the colour by the white. Click right now on the layer and select rasterize layer. Go to menu Edit>Transform>Perspective and move the left top side to the left. Go now to menu Filter>Fluff>Gaussian fluff (2pixels). Add a layer mask (menu layer> Layer mask>Reveal all). Use the Gradient Tool to hide the top of the shadow.
Create a new layer and place it under the boxes 1 2 3 and the buttons. Use the Rectangular Marquee Tool (M) to create an active selection including the contents. Fill in this selection with red colour.
Add now a gradient overlay onto the layer.
Add a layer mask and use the foreground gradient -> transparent in black on the left side to the inside and on the right side to the inside.
STEP 8 Menu Portfolio
The second block of contents displays the three last realizations of the company, in a mini Portfolio. These thumbnails can be ordered with a horizontal menu. You have now to create this menu. Select the rounded rectangle (U) and create a rectangle of 890x50px. Add a gradient overlay.
Use the Text Tool (T) and add your title. Add a shadow on the text.
On the right side of the menu, use the Text Tool (T) to add the links (in grey). Regarding the active link, use same rounded rectangle than the one used in the top menu and change the colour of the link to the white.
STEP 9 Create the thumbnails
Create a new group you name the box1. Create a new layer and a selection of 268x171px. Fill in the layer with the grey #f1f1f1. Add a stroke.
Create a new layer and name it the shadow. Use the Rectangular Marquee Tool to create a rectangle under the thumbnail. Use the Gradient Tool (foreground-> transparent in black) to create this shadow.
Use a layer mask to hide the left and right side of the shadow.
Put your thumbnail into the grey rectangle. Use the Text Tool (T) to create a title, a description and a blue link at the end of the text.
Duplicate the group including the thumbnail two times and move the copies to cover the whole width of the picture.
STEP 10 Create the footer
And now, the biggest step of this tutorial. Create a new group you name footer. Create a new layer you name footer. Use the Rectangular Marquee Tool to create an active selection on the bottom of your picture. Fill in it with colour: #131313.
Create a new layer and create a rectangle selection with a size of 1000x50pixels. Fill in this selection with the colour: #1f1f1f. Add an internal shadow.
Retunr to iconfinder.com to retrieve other icons. Use the Text Tool (T) to create the title and a links list.
Follow same process to create a column of comments and a partnerships list.
Same thing on the right, but you need to create a form: an input using the rounded rectangle (U) (and the colour #1f1f1f).
Add three layer style on the rectangle : shadow, internal shadow, stroke.
Create a button under the input using the rounded rectangle (U). Add three layer styles: internal shadow, gradient overlay and stroke.
See below the preview of whole footer.
Really on the bottom of the document, on the grey band, add the Copyright using the Text Tool (T). Place the text on the center.
To finish the template, duplicate the layer of the dark grey border really on the top of your template and put this copy over the footer.
The template is now completly finished, without any guides.
Thank a lot for all of you reading this tutorial from Grafpedia. Do not hesitate to help us, publishing the link of this page on your Facebook page or on your Twitter account.
