This new tutorial for Photoshop is useful once again to help you to create a layout for your website.
This template is dedicated to websites regarding stars and showbiz. You are now invited to create this template (see below) step by step, and all of you, having interest for more, can find the source file including the layers as well as the layer styles.
Template preview:
Advice: Pictures and texts are coming from different websites and you are not allowed to use them for your own projects. Please, use pictures with free rights, from Fotolia or from Shutterstock (i.e.)
You are now ready to start this photoshop tutorial?
STEP 1 Create the file and the Header
Open Photoshop, then create a new document (1200x1500 pixels).
Create a new group (menu Layer>New>Group) and name it header. Select the Rectangular Marquee Tool (M) and create an active selection of 1000x110 pixels. Create a new layer (menu layer> new> layer) and name it background. Use now the Paint Bucket Tool (G) and fill the selection.
Add a layer style (menu layer>Layer style>Gradient Overlay). Set up the Gradient as shown below.
Open the psd file and import the logo sliding and dropping the folder Logo.
Now on the right, use the Rounded Rectangle Tool (U) with a radius of 10 pixels to create the search engine (an input and a button). Regarding the icon Zoom, you are welcome to download an icon from www.iconfinder.com. Regarding the Text, use the Text Tool (T).
Add two layer styles on the button: a border and a gradient overlay, and only a border all around the input. Apply the setting below:
STEP 2 The menu
Create a new group and name it Menu. Use now the Rounded Rectangle Tool (U) with a radius of 4 pixels (create the rectangle under the logo all along the width).
Retrieve the rectangle selection (click right with the mouse on the thumbnail of the layer and select "Select pixel"). Go to menu Selection>Change>Reduce. Enter 1px and press on button OK.
Change the foreground colour by the black, select the gradient overlay tool (G) then use the foreground gradient -> Transparent to create a grey shadow over the menu.
Use the Text Tool (T) to add the menu links. Add to the text a white shadow of 1 pixel.
ETAPE 3 Create the band
Regarding the band, create first a new group, name it band. Create now a rectangle and use the Rectangle Tool (U). Go to the menu Edit>Transform>Perspective and update the rectangle (add shown on the picture below). Add on the rectangle, the same type of gradient as the one used for the search engine button.
Apply same method to the smaller rectangle (see the picture bellow) and add a gradient too (menu Layer>Layer style> Gradient overlay).
Use the Move Tool (V) to put the rectangle on the band (on the right side).
Duplicate the layer of the small rectangle, then go to menu Edit>Transform>Flip horizontal). Place the layer on the left side of the band.
Use now the Text Tool (T) to add your text (in our example, a Twitter message). Add two layer styles on this layer: an internal glow and a shadow.
Use this link http://www.iconfinder.com/ to download the Twitter icon... then using the slide and drop method, insert the icon into your band. You can now add three layer styles: a shadow, an internal shadow and a colour overlay. Follow the setting below.
Check now the final result:
STEP 4 Create content
The website includes two columns used to display last news, interviews or pictures galleries. It is up to you to update the titles regarding your needs.
Create first a rounded rectangle (510 x 350 pixels) using the rounded rectangle (U) with a radius of 10px and the dark red colour #860609.
Import now your picture onto the red rectangle. To create the rounded corners of the picture: create an active selection all around your red rectangle. Select the layer regarding your picture and go to menu Select>Invert Select> Invert and press of the Del key.
Duplicate the red rectangle, then press keys Ctrl/Cmd + T and reduce 20% of the rectangle size (check the option bar on the top of your screen). Add a gradient overlay to this new rectangle (with a red clearer on the bottom)
Use the Text Tool (T) to fill the bottom area of the rectangle, with a title and a description of the last news published on the website.
Create a new group and name it Little post. Using the rounded rectangle (U) and a radius of 10px, create a new 100px x 100px square and use the previous red
Duplicate the square and update its colour to the white #fff. Add now a layer Mask (menu Layer>Layer Mask>Reveal all). Use the Elliptical Marquee tool (M) to create a selection over the white square. Fill this selection with black colour to shadow the selected part (check that the layer mask is active). To finish, use the gradient First->Transparent in black to create a gradient from the bottom to the top. This method generates a reflection.
Import a thumbnail and place it under the reflection.
To finish, use the Text Tool (T) to add a title and a small description.
Put the layers regarding this small news into a new group. Duplicate the group three times. Use the Move Tool (V) to place the news on two columns.
STEP 5 Create the news list
A graphical title is to be applied before the news list. To create this title, create first a new rounded rectangle (510x40) and use the red previously used.
Use the method used for the square to create a reflection.
Add your title using the Text Tool (T). Add a border to this text (menu Layer>Layer style>Border)
Duplicate the red rectangle and on the copy, update the colour using the yellow/orange colour #ee931a. Use now the layer mask as well as the polygonal lasso (M) to shadow the left area (see the picture below).
Regarding the shadow, create a new layer using the foreground Gradient Tool -> transparent in black. Update the layer to overlay mode and reduce opacity to 50%. To finish, use again the Text Tool (T) to add the link to give the possibility to read the whole news.
Use one more time the Text Tool (T) to create a links list under the title.
The right area of the website includes same elements than the left area but with other sizes and other pictures. Then duplicate your groups to create the right area of your template.
ETAPE 6 The footer
Regarding the page bottom, create first a new group (menu layer>New>Group) name it "the footer". Create a rounded rectangle, 980X80 pixels.
Use the Text Tool (T) to add to the rectangle : links to the forms description of the most "trendy" stars, and under, the Copyright as well as the most important links of the website.
Duplicate now the group Logo and place the copy on the right area of the footer. Add a red border on the first star.
Return now to the iconfinder website to retrieve icons of Twitter, Facebook and/or RSS. When downloaded, insert the icons under the red rectangle. Add on each icon a colour overlay.
The template is now finished.
