This tutorial for Photoshop has been written especially for web designers willing to increase their knowledge their technical capacity to create graphical templates for web sites. I wanted to create a layout regarding high-tech subjects, but with a bit of inspiration you can adapt it for several different themes. You have also to know that a psd source file is attached to this tutorial. You can use it to retrieve some styles or several elements.
See below the Template you are going to create with this Photoshop tutorial:
Introduce is now finished, you can start right now the tutorial.
STEP 1: Create a new document
Open your Photoshop software and go to menu File>New and enter the name, width and height of your picture (1000x 1100 pixels). Press now on the OK button.
STEP 2 : Top area
Create a new group: header. Create now a new layer (menu layer>New>Layer) and name it Top. Use the rectangular marquee toll (M) to create an active selection (1 000x30 pixels). Fill this selection with the blue #1f5289.
STEP 3 :Header
Do same thing on the second layer: header. But add this time an gradient overlay (menu layer > Layer style > Gradient overlay) using colors: #286bb2 > #348ae1.
STEP4 : Border
Create now a thin border on the top of the header. To do it, create first a new layer, then create an active selection all around the header (for this, right-click with your mouse on the layer thumbnail and choose select the pixels).
Change the foreground color by the white and with help of the Paint Bucket Tool (G), fill the selection with white color. Select now the Rectangular Marquee Tool and move the selection to 3 pixels to the bottom (using the directional arrows) and press the Del key.
To finish, reduce the layer opacity up to 50%.
ETAPE 5 Rounded Rectangle
The top area of the page includes a rounded rectangle. Then select the Rounded Rectangle Tool (U) and :update the radius to 10px. Create a rectangle on the top side using colour #1e5288.
STEP 6 The logo
Open the file logo.psd attached to this tutorial, then make a drag and drop of the group into your folder. Use now the Move Tool (V) to place the logo on the top left of the template.
STEP 7 Search engine
Create a new group and name it search engine. Use for this, the Rounded Rectangle Tool (U) and the white color to create the search filed. To finish, use the loop form of the Photoshop customized forms (U) to create the small loop.
Step 8 Some links
Use the Text tool (T) to add some hypertext links in the blue area.. In my example, I used the Helvetica LT font with the colour blue #7ea4ce.
Step 9 Complex shadow
To create this complex shadow, create a new shadow and name it
shadow. Create an active selection under the logo (all along the width
of the document), then a black gradient (use the Foreground
gradient>Transparent available in the selector of the Gradient Tool B) form the top to the bottom.
Add now a layer mask on the layer (menu layer>Layer mask>reveal
all), then create a gradient on the left (from the left to inside) and
to the right (from the right to inside)
Step 10 The menu
Create first a blue rectangle colour #348ae1, size 900 x 30 pixels.
Use now the rounded rectangle to create the active slot on the menu.
To create the gradient in the rectangle, I have used a gradient overlay and an internal shadow (see the setting below).
To finish, use the Text tool (T) to add some links in the two menus (font Helvetica LT bold, colour white).
Step 11 Create the carousel
Use same tool to create the contents of the carousel located just over (this place will be perfect to promote one of your items).
Create a new layer, name it the bokeh. Change the brushesbokeh available in the pack attached to this tutorial.. To do this, double-click on the file bokeh.abr
Select now the Brush Tool (B) and select the bokeh form (previously added), open the window brush and update the values to disperse your form without regularity (you can play with vary distances, the number of forms, the opacity etc...)
Create two form columns (with the white colour), then change the layer blending mode and reduce the opacity to 30%.
Add the picture of the iPhones (or the high-tech item of your choice) over the forms. In my example I have used a group of iPhones, picture retrieved from the official Apple web site (thanks a lot Apple).
Step 12 Add the icons
The area under the header will be useful to communicate heavy information or to promote your services. Each chapter is illustrated with an icons pack you can directly download by with address. Then, download it right now and import each icon into your folder.
Use again the Text tool (T) to create the contents regarding each icon. Underline the last words to illustrate the link to read all details.
Step 13 Complex shadow2
Duplicate the complex shadow previously created, then use the Move Tool (M) to put it under the icons block.
Step 14 Create the articles
Regarding the blog area, each article includes : a thumbnail, one text (subject, description, author, date) and a button. In the page, you have to create the first thumbnail. To do it, use a picture of your choice, by my side, I used a picture about high-tech; the picture size : 210x120 pixels. To finish, create a blue shadow #126ab5 (use for this operation, a layer style, menu layer>layer style>shadow).
Use again the text tool (T) to create the subject, description and publish date.
Use now the rounded rectangle (radius 50px) to create the button, (regarding the gradient, use same style than the one used for the active slot of the menu).
Step 15 The comment
The comment is dispalyed in a small block. Use the rounded rectangle as selection and polygonal selection to create the two blue forms. Use as colour: #348ae1 (for foreground) and #25629f for the shadow.
Put all layers used to create the first post into a group, then duplicate the group two times.
Step 16 The sidebar
Using same technical method than the one used during the creation of the menu ,create a multi tabs block in the right area.
Use the Rounded Rectangle Tool (U) to create the content of the list of links. Add to this rectangle, a layer style (see setup below).
Step 17 Newsletter
Use again the rounded rectangle to create a new blue block. Apply same gradient for the menu (active slot).
Use the Text tool (T) to create the title and the description registration to the newsletter.
Use one more time the rounded rectangle (U) with a radius of 10px to create the text filed (for the email) and the register button (use colour #1f5288).
See here the result :
Step 18 Last step for footer
Create a new layer, then create an active selection on the bottom of your picture (use the Rectangular Marquee Tool (M)). Use now the Paint Bucket Tool (G) to fill the selection with blue colour #286bb2.
Create a 3 pixels border on the top of your blue rectangle (using this dark blue #1f5288. Then, create a rounded rectangle (radius 10pixels) with same colour than the one located on the right side of the Template.
Use now the Text tool (T) to add the title of the button, then use the Ellipse Tool and the customize form (U) to create the arrow.
Create a new selection (30 pixels far away from the dark blue border) on the bottom of your picture. Create a new layer. Use the Gradient Tool (foreground -> transparent) with black colour to create a shadow. Reduce the opacity to 30%.
Use the Text tool (T) to add a title and a small chapter of description.
Same thing regarding the second block, but add a small thumbnail and an arrow.
Use on the top, the RSS icon available on this page, to create the description link:
http://www.iconfinder.com/icondetails/65846/128/feed_rss_icon
Add a shadow on the internal icon as well as a colour overlay to give a good aspect. See below the setting:
Use again the Text tool (T) to create partnerships list.
ETAPE 19 Le logo
Use the rounded rectangle (U) to create a rectangle over the shadow.
Update the colour of the rectangle, using same blue than the one used for the background of the footer. Then, duplicate the group regarding the logo and put the copy over the rectangle. Use the Text tool (T) to add the Copyright.
See now, the result of the whole Template :
