Want to download this PSD layout ? Register for a VIP account and download in unlimited access our collection (more 70.000 graphic items).

I used for this tutorial, the Vector pack Landscape from grafpedia.com, as well as some icons I found on this page, or some illustrations coming from the website http://culturedcode.com/things/iphone/. Then, you will not find these pictures in the psd file.

Before to start this Photoshop tutorial, have a look on the final result below.

We can now start the tutorial. For all of you publishing the link of this page on their Twitter, Facebook or StumbleUppon to help us to promote it, I thank you a lot

STEP 1 Create a document

Open Photoshop, then go to menu File> New and enter the values: Width 1 000 and Height 1 200px.

Press the OK key. Your new picture appears on screen. Be sure the layers windows is opened (to open it, go to menu Window>Layers).

Create a new layer and name it the bg_header. Set the foreground colour to this blue #3288c3. Use the Rectangular Marquee Toll (M) to create a selection with a size of 1000×450px, then use the Paint Bucket Tool (G) to fill it.

Add a gradient on this blue block, to do it, go to menu Layer>Layer style> Gradient Overlay.

STEP 2 Create the first menu

A menu including a logo and a set of links, will take place on the top of the template. A shadow will be added under it. To create the shadow, create first a new layer and name it shadow. Set the the foreground colour to the black, then select the Gradient Overlay tool (G) (and from the Selector, choice the Foreground Gradient -> Transparent). Now create on your picture, a black gradient overlay from the top to the bottom (see the picture below).

To finish it, add a layer mask on this layer to shadow the left and right sides. Go to menu Layer>Layer Mask>Reveal all. Create now a gradient overlay on the right and on the left.

Create a new layer and name it bg . Use the Rectangular Marquee Toll (M) to create a selection defined with values 1000 x 40px. Fill this selection with the white colour. To finish, reduce the opacity to 40%.

Add a layer Mask on the layer and shadow the top of the menu.

Regarding the logo, type the name of your website (I used the Androgyne Font). Then, add on this text three layer styles : Shadow, internal shadow, gradient overlay.,

To finish the menu, add some links on the right (Font used : Helvetica). For the active link, I just used a rounded rectangle with the blue colour #3d85c1.

See below the final result of the menu.

STEP 3 Create the Header

Create first a new group and name it the header. Use the Text Tool (T) to add the main slogan of the website. In my example, I used the Androgyne Font.

To give a style to the text, reduce the opacity of the second layer to 60%. For the title, add same layer styles as them added on the logo. Step to the button creation. To doo it, create a new group and name it button. Use now the Rounded Rectangle Tool (U) to create the shape of your button (use a radius of 6px).

I added at least 5 layer styles: shadow, internal shadow, internal glow, gradient overlay and outline.

Use now the Ellipse Tool (U) to create a round over the button (do not forget to keep the Uppercase key pressed to create a perfect round).

Add two layer styles on your round, a shadow and an internal shadow.

To finish, use the Custom Shape tool (U) to create a little arrow in the centre of the round. A a shadow on the arrow.

To finish the button, use the Text Tool (T) to add the title. Add now an outline and a shadow on the text (menu Layer>Layer style>Outline and Shadow).

STEP 4 The clouds

To create the clouds, start to download the vector pack available on this page :
Then import the clouds one by one to generate a complete line.

Join all layers into one group (and name this group clouds). Add a blending mode on the group. To finish this step, use the Rectangular Marquee Tool (M) and the Paint Bucket Tool (B) to cut the clouds (see picture below).

Download the UI iphone Retina kit available on this page http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/. Open now the psd file and slide and drop the document regarding the IPhone. Duplicate the group and reduce the Iphone size to a value of 5%. Use the Move Tool (V) to place it on the left of the first one.

Use the Text Tool (T) to add a description of your software, set the colour text of the end to this blue #2a638c and import an arrow (by my side, I often use this website resources: Websitebullets.

STEP 5 Some touches

Go back to the Landscape vector file (already downloaded on this page). Copy and paste the plane on the top right of your slogan.

Then, the birds.

To finish the carousel, create a links list using the Text Tool (T). Regarding the active link, just create a rounded rectangle (use the Rounded Rectangle Tool (U) with a radius of 6px).

STEP 6 The contents

The page is composed with two blocks: the first block with more information about the software ((screenshot and text) and the second with links for downloads.
Regarding the first block, create a new group and name it the details. Create anew layer and a selection of 880×220px. Fill this selection with white colour. Apply same method to the second block but with this colour #4f9aca. Move your selection of 2px to the bottom and press the Del key. It will keep only a thin blue border.

Create a new group and name it the box1. Create inside a rounded rectangle with a size of 150×80px with same blue colour used previously.

Add inside your picture.

Duplicate this group 5 times and place the blocks with a space of 20px between each of them. To simulate the hover effect, set the colour of the rectangle one of the blocks to this orange: #ff7f2a. Then, create a new layer, retrieve your picture selection. Fill it with the black colour and reduce opacity to 40%.

To finish the step regarding the blocks, import the zoom.psd icon file available from the pack of this tutorial (the blue link on the bottom page) and place it over your block .

Use the Text Tool (T) to add a title on the right of the 6 screenshots.

Apply same method to the two small texts under. Regarding the icons, they come form the here page:: http://www.iconfinder.com/search/?q=iconset%3Afatcow

STEP 7 The second block of contents

Regarding the second block, create a new group. Do same thing as what done for the first block, but a difference, placing the blue border on the bottom (and not on the top as done for the first block). Use the Text Tool (T) to add hypertext links (font helvetica 12px). Create a blue rectangle under the active link.

Create now a blue button on the left side of the block. To create this button, use same styles than the styles used to create the orange button from the header (switch colour from the orange to the blue).

Use again the Text Tool (T) to add a title, a chapter and an orange link.

STEP 8 Import the landscape

To create the landscape, nothing can be easier than the landscape vector ! Open the landscape file under Illustrator, then copy and paste the hill (from Illustrator to Photoshop). Enjoy making your own landscape, importing flowers, trees, clouds, etc…

Create a new layer and put it under the layer named Landscape. Set the foreground colour to the pale-blue #d1f3ff, select the Gradient Tool (G) (foreground -> transparent) and create a gradient from the bottom to the top.

Add now a button Available on appstore. To create this button, I used this free file: http://corrupteddevelopment.com/customizable-app-store-download-buttons/ and I only changed the gradient and outline colours.

To finish, create a new layer, and place it this time over the landscape layers. Use the Rectangular Marquee Tool (M) to create an active selection with a size of 1000×45px. Fill your selection with this green colour #137109 and go to menu Layer> Layer Style> Internal shadow. Use now the Text Tool (T) to add the Copyright.

Go now to the website iconfinder.com to retrieve some networks icons and import them into you Photoshop document. Place these icons on the right side of the footer and add a colour overlay into each icon (menu Layer>Layer Style>Colour overlay).

Here is the final result of your template :

And without the guides:

This Photoshop tutorial is now finished, I hope you like it. To help us, why not to publish this page link on your Twitter, Facebook or Stumble Upon account(s). I send big Thanks for all of you ready to do it.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Each part of this website is efficient and can be used for all types of scripts dedicated to a dating website (newsletter, search engine, etc…..).

Want to download this PSD layout ? Register for a VIP account

Pictures: I bought on Fotolia.com a licence for the picture displayed in the carousel. It means that you do not get any right to use it (it explains why the download psd file does not include this picture). You can download it or another picture too, by your side, from Fotolia.com.

Before to start this tutorial, please see below the final result. You can also free download the icons pack on this page.

We can now start the creation of the template.

STEP 1 Create a document

Open your Photoshop software, then go to menu File>New and enter a name, width and height for your document. To validate, press the OK key.

Your document appears on screen. If you do not see the layers windows, display it going to menu Window>Layers.

Put a horizontal mark to 10px, and at 20px from the top of your picture. Use the Rectangular Marquee Tool (M) to create a band with a size of 1000×10px. Create a new group and name it the Top (to create it go to menu Layer>New>Group). Then create a new layer into this group and name it bg (to create a new layer go to menu Layer>New>Layer). Fill up now your selection with the Paint Bucket Tool (G) and the colour #a40000.

Create now on the right a higher band, 20px. On the right side of this band, colour this part this the colour #850000.

To finish, use the Text Tool (T) to add your first slogan. Add a shadow on the text (go to menu Layer>Layer style>Shadow).

STEP 2 Create the logo

To create the logo, create first a new group and name it the logo. Use the Text Tool (T) to add the name of the website (font used: Androgyne*) and under the slogan (font used: Helvetica).

*To download from: http://www.dafont.com/androgyne-tb.font

Then slide and drop the icon with shape of heart, available from the special Saint Valentine’s day pack. Remember you can free download these icons from this page.

STEP 3 First menu

On the right of the logo, you must find a small horizontal menu including very important links. This menu is really easy to create. Create first a new group that you name the menu. Use then the Text Tool (T) to simulate the links. Regarding the hover effect, use the Rounded Rectangle Tool (U) with a radius of 4 to create a rectangle under the last link (fill up this rectangle with this colour #eee4e4).

STEP 4 Second menu

There must be a second menu just under, bigger, then easy to discover. Create a new group and name it the menu. Use the Marquee tool (M) to create an active selection with size of 1 000w 40. Create anew layer and fill your selection using this colour #eee4e4.

Use again the Rectangular Marquee Tool (M) to create a rectangle over the band, and a border of 2px width under the band (see picture below). Fill up these elements using colour #a40000. To finish, use the Text Tool (T) to add the first link.

Use one more time the Text Tool (T) to add the other links.

STEP 5 Create the button

Now, we have to work on the button to register, which will be on the right of this button. Follow the process to create this button.

1 Create a rounded rectangle with a radius of almost 40px (use the rectangular rounded tool (U) and the colour #a40000).

2 Apply two layer styles on this rectangle: an internal glow and a gradient overlay (go to menu Layer>Layer style>internal glow).

3 Duplicate your rounded rectangle (right click on the layer and select duplicate the layer) Then change to white the colour of filling up. Reduce now the size using the free transformation (Ctrl/Cmd + T to create a red border around the rectangle).

4 Go to menu Layer> Layer Mask>Reveal all, use the Foreground Gradient => Transparent on the layer mask to create a reflection.

5 Add the text using the Text Tool (T). Add a shadow on the text.

6 To finish, import the icon with a cherry shape available from the pack of icons.

See here the final result:

STEP 6 Create the carousel

Create a new group and name it the carousel. Import your picture (the picture must take all the width of your document). Use the Marquee tool (M) to cut your picture on its height to respect a size of 670px.

Use the rounded rectangle toll (U) with the colour #a40000 to create a rectangle with a size defined as 900×230px. To create a rectangle with the correct size, remind you can use help of the guides or you can create a rectangle and use the free transformation to enter the correct values of the size.

Create a shape of heart over your rectangle and use this time the colour #820000. To create this shape, use the custom form tool (U), check now the picture below.

Hit uppercase key while drawing the shape.

Add a layer mask on the layer (menu layer>Layer mask>reveal all) then colour in black the external part of the red rectangle.

Use now the Text Tool (T) to add a new slogan as well as a description of the website.

STEP 7 Search engine

To create the search engine, create first a new group that you name the form. Use the Text Tool (T) to enter the several labels and other contents. Regarding the inputs, easy use the Rectangular Marquee Tool (M). Add an outline to these rectangles (menu Layer>Layer styles>Outline).

On the right of each white rectangle, create a square using same tool. Add two layer styles on this square: an outline and a gradient overlay.

Put an arrow over the rectangle (you can find this con on this page: http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
Add now two layer styles to this icon: a colour overlay and a shadow.

See now the result:

Duplicate your document to create to columns for your form.

To finish the form, use the same method to create the second button (refer to step 5).
For the icon, go to this page to find all what you need: http://www.iconfinder.com/search/?q=zoom.

STEP 8 Create the page numbering

To close the part regarding the carousel, you need to add a page numbering on the left side of the picture previously added. Create a new group and name it the page numbering. Create now three rounds defined with a size of 12×12px (two of them in red #850000 and one in black #fff).

Check below the result:

STEP 9 Create the contents

The content of the website includes two different parts:

- One part to display the online members, the last subscribers or the most popular of them.

- One part to display a description of the website, the services or the last news.

Create first a new group that you name the women. Create then a new rectangle defined with a size of 440×250px, using colour #eee4e4 as filling up.

Use the Text Tool (T) to add the title of the block.

Use same style as the one used for the form (on the right of the inputs) to create a counter of connected people.

Go to Google to look for pictures of nice girls, adding under each picture, age and name of the girl.

Duplicate the women group and name it the men. Put this group on the right side of your picture.

See the result with the two blocks.

STEP 10 Second part of contents

Regarding this part, nothing is complicate. Create a new group that you name the description. Create a new layer and a red border of 2px height and import the icons. Use now the Text Tool (T) to add texts. To finish, add two buttons with same styles as them previously used

STEP 11 The footer

Regarding the footer, create first a new group, then use the Rectangular Marquee Tool (M) to fill up the bottom part of your picture (use the red colour #a40000). Use same tool to create a rectangle with a size of 1 000 x 40 that you place just under your picture (fill up this rectangle again with this red colour #820000).

Create a new group named the box1. Create a title using the Text Tool (T) with the font Androgyne (colour white, size 20px).

Use one more time the Text Tool (T) to simulate a list of links.

Create a new layer and use the brushes with an arrow shape (you download them from this link:: http://www.grafpedia.com/vip-downloads/325-bullet-icons-pixel-arrows

Duplicate twice the box1 group. Use the Move Tool (V) to put the copies at their correct place.

Regarding the last block, you are going to create a register form for the newsletter. To do it, add a title and a description as done for the other blocks.

Create the rectangle using the Rectangle Tool (U) and add three layer styles: internal shadow, colour overlay, outline. See the setting below:

Create now a new button (refer to step 5 for the technical method)

STEP 12 Add the Copyright and the links for social networks

Last step is regarding the Copyright of the website, as well as some links for social networks like Twitter and Facebook. Create a new group and name it the Copyright. Use the Text Tool (T) to add the Copyright on the left side of your picture.

Add three icons on the right, fill up these icons with the colour #d72626. Notice that I found these icons on this website: http://www.iconfinder.com/search/?q=iconset%3Asocial

This tutorial is now finished. Wasn’t it easy?

Do you need more? Notice that you can read these other tutorials about Photoshop, from Grafifpedia.com:

• How to Create a Unique Wordpress Theme
• Create a clean PSD layout with a 3D look
• Design a creative unusual layout
• Design a realistic website layout in photoshop
• Create an awesome portfolio layout

If you like this article, you could help Grafpedia publishing it on your Facebook, Twitter or StumbleUpon account(s) or on your website. Thank a lot in advance for all of you working in this way!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

In this Photoshop tutorial, you are going to learn how to create a template especially for the Prestashop CMS. After the creation, you will integrate it in a file type compatible with Prestashop.

Want to download this PSD layout ? Register for a VIP account

The Template of this Photoshop tutorial is adapted to shops regarding audio items, computers or all high-techs items
Before to start this tutorial, please check the final result bellow:

You are now ready to begin.

SETP 1 Create a document

Open Photoshop software then go to menu File>New and enter the document size (in my example 1500×1000px). Press the Ok Key to display the picture.

Use now the Rectangular Marquee Tool (M) to create a selection with a size of 1000×50px (use guides to get help). Create a new group and name it top, create a new layer too and name it backround. Fill the selection with black colour (use the PaintBucketTool (G)).

Go to menu Layer> Layer Style> Gradient overlay and use the settings below.

Use now de the Horizontal Type Tool (T) to add a welcome message (using the Arial font 12px). Select the text layerand go to menu Layer> Layer Style> Drop shadow. Set the options as show here:

At the right of your page, add a scroll menu for the currencies. To create the scrolling list, use a rounded rectangle.

Import now several flags to access the shop in different languages. Reduce the layers opacity to 60% for the inactive flags.

See below the result of the top side of your page

STEP 2 Create the header of the page

Regarding the header, create a new group and name it « the header ». Create now a new layer and name it background, then create a selection with a size of 1000×50 pixels and fill it with the grey #d8d8e8.

Use the Horizontal Type Tool to create your logo. Two fonts are needed: TitilliumText14L Bold, TizaNegra. Add an internal shwadow on the text.

A search engine on the right side of the header will be useful to look for an item from the shop. To create the search engine, use the RectangularMarqueeTool (U) and add three layer styles : Drop shadow, Innershadow& Stroke.

To create the zoom, use the Custom Shape Tool (U) and select the shape “Search” in the picker.

Add the links using the Horizontal Type Tool (T), then add a shadow onto the text.

See now the top and header results.

STEP 3 Create the carousel

Create a new document, name it carousel, then use the Rounded RectangularTool (U) to create a rectangle defined with size 960×460px. Illustrate with pictures, in my example I used pictures from the website Apple.com

Regarding the page numbering, create a group and name it « pagenumbering », then create 6 circles. To do it, use the EllispeTool (U) and the grey colour #4c4f5e and purple #9842d4.

STEP 4 Create the first column

The pages includes two vertical menus (one on the left, one n the right), as well as a column of contents located in the centre. This step is regarding the creation of the first column.

Create a new group and name it the column1, then with the Rounded Rectangle Tool (U) create a rectangle defined with a size of 180×33px. Add three layer styles: Innershadow, Gradient Overlay & Stroke.

Use again the Rectangular Type Tool (T) to add the title of the menu: Sections. Add a drop shadow.

Create now a shadow under the title. To do it, create frist a new layer and place it under the grey rounded rectangle. Use the Gradient Tool (G) (avec le gradient Foreground -> transparent black) to create a gradient from the top to the bottom. Then go to menu Layer> Layer Mask>Reveal All and use same gradient on the left (from the left to the centre) and on the right (from the right to the centre). This method is needed to shadow and attenuate the external parts of the shadow.

Use the Rectangular Type Tool (T) to create a list of links. Use the colour grey #9b9ba3.

STEP 5 Offers

The column 1 finishes by a blog which promote an item of the shop with a special offer. To create this blog, create first a new group and name it box2. Use the Rounded Rectangle (U) to create a rectangle defined with a size of 180×300px. Go to menu Layer> Layer Style> Drop shadow to add two layer styles : Drop shadow & Stroke.

Use one more time the Rounded Rectangle (U) to create a rectangle (174×30px size). Then go to menu Layer> Layer Style> Gradient overlay and set up it as show below. Then add the title with a shadow (1px depth)

Regarding the gradient

Regarding the shadow on the text

Add a product picture. (in my example, I used a picture of an Ipad found on Apple Store).

Use now the Rectangular Type Tool (T) to add the product. To create the button, use the Rounded Rectangle Tool (U) with a radius of 60px. The title is the same as the one use for the box.

To finish, we need to create a grey gradient on the bottom box. To do it, create a new layer just over the rectangle and name it gradient. Then create an active selection around the rectangle (to do it, press Ctrl/Cmd and click on the VectormaskThumbnail). Go now to the menu Select>Modify>Contract and enter value 2px. To close the subject, use the Gradient Tool (G) with the gradient Foreground -> Transparent (foreground colour grey #bbbbbb) from the bottom to the top.

Do not forget to correctly order your layers.

See now the result of column1

STEP 6 Contents of the centre

It is time now to create the contents on the website centre. This part, i.e. put under the light, the last items added onto the shop or the most popular… For this part,, you will use the styles already used for the column, that example why I will not take long time on next steps.

Create first a group and name it the content. Create a title (like on the column of the left).

Put in a new group, the layers regarding a product offer (on the left, with the picture, the title, the description, the price and the button). Duplicate this group to put 6 products on the central area. You can update description of each product.

To create the page numbering, duplicate the rectangle and the shadow used for the title. Put this copy under the products.

Use now the Rectangular Type Tool (T) to add the numbers : 1 2 3 4 5… and to activate the page, create an ellipse using the Ellipse Tool (U) under the number “1”. Add the layer styles: Innershadow & Stroke.

See result of the 2 first columns.

STEP 7 Last column

And now, the last column which includes three blocks: the basket, a products selection by brand and an automatic offer (in our case, free deliveries).

Regarding the basket, create frist a new group and name it basket. Create now with the Rounded Rectangle Tool (U), a rectangle with a size of 180×170px. Then add the purple gradient previously used for the buttons. To finish, duplicate the shadow of the titles (column of the left) and put it under the purple block.

Then add the basket content using the Rectangular Type Tool (T).

Use again the Rounded RectangularTool (U) with a radius of 60px to create two rectangles. Add on these rectangles, two layer styles: Drop shadow & Gradient overlay.

Add now the text into the buttons. Use the colour #595959. Add a shadow on the texts (menu Layer> Layer style> Drop shadow).

In the column of the left, duplicate the title of the box regarding the brands, and put it on the right side.

Create a new scrolling list using the Rounded Rectangle Tool (U), use the grey #e5e5e5. Add a shadow on this rectangle.

Regarding the last block, create a new group and name it the free shipping. Create a new rounded rectangle (same style as the one used for the column 1), add the text and the button. Regarding the picture of the box, use Google picture or buy a picture on Fotolia.com.

See here the final result with the three columns.

STEP 8 Create the footer

The footer includes three parts : one part for offers or reduce codes (tickets), one part with the most important links and the newsletter from and one part with the Copyright.

Create for the first part, a new group and name it the footer. Create a new group into this group and name it part1. Duplicate the grey band used on the top of your template and put it into the group part1.

Use the Rectangular Type Tool (T) to add your slogan. Add a drop shadow on this text.

On the right, place a purple button to read more details about this offer. The purple button has been created previously, use same styles.

STEP 9 The seconde part of the footer

Create a new group and name it the Part2. Then with the RectangularMarqueeTool (M), create a selection under the grey bar, on the rest of your picture. Create a new layer, name it background and fill your selection with this colour #343844 and the PaintBucketTool (G).

Create a rounded rectangle (radius 60px) using this grey #202326. Add an Innershadow to this rectangle. To finish, use the Rectangular Type Tool (T) to simulate a title and a list of links.

Use same method to create three lists of links.

One the last column, use same title, but instead to create a list of links, add a text to invite your visitors to subscribe to the newsletter.

Create now the input of the form using same styles same the styles used for the titles.

Create a purple button to validate the form. Use the button use previously on the website, but add a stronger shadow.

The second part of the footer is now finished.

STEP 10 Last part of the footer

Create a new group and name it the part3. Use the RectangularMarqueeTool (M) to create a selection on the bottom of your picture (1000×50px). Create a new layer and name it background and fill your selection with the colour #060708. Add an innershadow to this layer.

Use the Rectangular Type Tool (T) to add the Copyright. Use this colour #3d4151.

Add on the right the different accepted modes of payment, it is very important for an online shop. Use again the Rectangular Type Tool (T) but this time, using this colour #d8d8e8 and add the logos regarding the differents modes of payment. (you can get them from inconfinder.com).

Before to close this tutorial, do not forget to order correctly all your layers.

And now, see the final result of your layout.

You now use to integrate this design into an HTML/CSS document, and it it after in the hands of a developer to create a template adapted to Prestashop. On our website, we teach you to become a designer and not a developer
PSD File : If you need to download the psd file used in this tutorial, click on the blue button here.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Very important notice: this kit has been designed by Grafpedia and delivered on the website of our partnership webdesignerdepot. Please, go to this link to download the kit.

Want to download this PSD layout ? Register for a VIP account.

Before to start this tutorial, check here the final result:

It is time now to start the creation:

STEP 1 Create the document

Open Photoshop and go to menu File> New, define the width and the height: 1000×1800 pixels.

Press the OK button to open the new document.

Create a new group (menu Layer> New> group) and name it Top. Use now the Rounded Rectangle Tool (radius 3px) to create a rectangle defined with values 900 x 60 pixels. Use the the blue #66b5ed to fill the rectangle. Apply now three layer styles: an internal shadow, a gradient overlay and an outline. Activate the layer style, select the layer and go to menu Edit> Layer style> Inner Shadow.

The styles used are available from the psd file joined to the Balio kit.

STEP 2 Logo and menu creation

To create the logo, use first the Horizontal Type Tool (T) to add the blog name and the slogan (in my example I used the fonts Helvetica and Angelina).

Apply now the layer styles on the blog name: shadow, internal shadow and gradient overlay (follow the settings below)
To create the arrow, I only easy used the hard brush (1px), and I drew my arrow by hand on the new layer.

To create the buttons, download the Balio ki UI Kit and open the psd file regarding the menus, then slide and drop the buttons.

STEP 3 Create the carousel

Create first a new group and name it carousel. Use now the Rounded Rectangle Tool (U) to create a 900×325px rectangle.

I encourage you to surf on the web to find a picture to fill the carousel. In my case, I have selected a very nice illustration from Monkey Island.

Create now two guides, 20pixels height, on the bottom of the carousel. Then, create a new group and name it page numbering. Create a rounded rectangle defined with the values 800×40px (used the Rounded Rectangle Tool (U)). To finish, use the styles defined on the grey buttons of the Balio kit.

Regarding the page numbering, same method using the psd file from the Balio kit for page numberings.

To finish, create two arrows for the rectangle (one on the left side, other on the right side). These arrows are available from the Balio kit too.

See below the carousel final result:

STEP 4 Create the boxes

For the creation of the blocks including the three last news, create first a new group and name it box, then create a second group box and name it box1. Create now a rounded rectangle defined as 280 x 220 pixels with colour #f5f5f5. At an outline to the rectangle.

Add now an illustrated picture, with a size of 266 x 133pixels.

Use the Text Tool (T) to add a title and a small description to the news.

And put a button « Read more » on the centre of the rectangle. This button is available from the Balio kit (psd file download-centre).

To finish, duplicate two times the element box1 and use the Move Tool (V) to place the news on your layout width.

STEP 5 Premium offer

To captivate the visitors to go to the premium area of the web site, I created a blue band. To create this band, create a new group and name it premium. Create now a rectangle with 60pixels height, all along the width of the picture (the band styles are available in the menu.psd file from the balio kit).

Use the Text Tool (T) to add the slogan, then add the grey button on the right. Texts styles and button are available from the Balio kit (button and menu psd file).

Group the band, text and button layers into the premium group. Select this group and go to menu Layer> Layer mask> Reveal all. Select the Gradient Tool (G), then in the picker gradient, select the second Foreground to transparent (with foreground black color). Use this gradient on the left (from the left to the center) then on the right (from the right to the center).

STEP 6 Create the must of apps

A menu on the right recapitulates the most popular apps of the website, to create this sidebar, create first a new group and name it the sidebar. Use Rounded Rectangle Tool (U) to create a rectangle defined as 280 x 480 pixels and use same styles as styles used for the news.

Regarding the title creation, use the styles you can find in the survey file from the Balio kit. Regarding the stars, you can find some of them on the website iconfinder.com.

Go to the website app store, then copy a logo from one apps (in my example the game angry birds).

Use the Horizontal Type Tool (T) to add the title and the author’s name.

Add now a blue download button on the right (use the Read more button of the news).

Regarding the progress bars, use the psd file download center or survey from the Balio kit.

To create the « Like » link, go to the iconfinder website and look after word Like;) Add now on the icon and on the text, a gradient overlay #6d6d6d.

Put all layers regarding the first apps into a group (name it app1), then duplicate the group 4 times and use the Move Tool (V) to apply all apps on one unique column.

STEP 7 An app on the top

On the left of the sidebar, an app is highlighted. To create this section, create a new group you name top app. Add now a new app’s logo (go can return to the app store).

Go back to the file regarding the menus of the Balio kit and insert the menu 9.

To create the gallery, copy and paste one of the illustrations of picture of the app.

Then, two more others on both sides of the first picture. Reduce the opacity of these two new pictures. Do same for two new pictures. The perspective effect results of reduce of size of each picture (to reduce a picture size, press the Ctrl/Cmd + T keys to activate the free transformation).

STEP 8 Create the footer

To create the footer, start to create a new group and name it footer. Go to the psd file of the menus from the Balio kit and slide and drop the elements to create a blue border and a grey band.

Use now the Horizontal Type Tool (T) to simulate the titles and the links. For the icons, you can fibnd some of them on our favorite website iconfinder.com (the styles are available in the psd file menu from the Balio kit).

Regarding the newsletter form located on the right, use this time the file Balio-UI-Kit-login-form.psd to find the input and the button.

To finish, create a new layer and place it under the texts layers. Create with the Rectangular Marquee Tool (M) a selection with a size of 900×250px. Use the Paint Bucket Tool (G) to fill the selection with the grey: #edf2f6.

STEP 9 Finish with the Copyright

To finish the Template, create a last one group and name it the Copyright. Create a new layer and create under the footer, a selection with a size of 900×5px. Use now the Paint Bucket Tool (G) to fil lit with the grey: #67737c.
Use the Horizontal Type Tool (T) to add the Copyright.

Use the Balio-UI-Kit-ribbon-social.psd file to add three icons on the right for Twitter, RSS and Facebook.

The template is now finished.

With this tutorial, you can see that we can really easy create a layout using the Balio kit. This method can be applied to all ressources we deliver on Grafpedia. Why to waste your time, when you can easy used psd file ready to use?

Download :
Kit Balio : The kit is available via the website of our partnership webdesignerdepot, to download the Balio kit, click here.

The psd file of this template: you can download it too (used to create this tutorial), but it is reserved to the Grafpedia’s VIP members. To create an account, click here. Then, to download the psd file, click here.

Thanks to all reading this new Photoshop tutorial on Grafpedia. If you like it, you can help us if you promote this tutorial on your social networks Twitter, Facebook and/or Stumble Upon. We appreciate readers a lot doing this effort.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

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.

Want to download this PSD layout ? Register for a VIP account

Template preview:

The PSD file:
Click here to download the psd source.

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 (1200×1500 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 1000×110 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 (510×40) 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.

Thanks to all reading this new Photoshop tutorial on Grafpedia. If you like it, you can help us if you promote this tutorial on your social networks Twitter, Facebook and/or Stumble Upon. We appreciate readers a lot doing this effort.

If you like this tutorial, you will certainly have interest for these other articles published on Grafpedia:

• How to Create a Unique Wordpress Theme
• Create a clean PSD layout with a 3D look
• Design a creative unusual layout
• Design a realistic website layout in photoshop
• Create an awesome portfolio layout

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Clicking here, you can get the .psd file.

And visit our partner: Tutorialzine to download this template in HTML5 format.

Regarding the pictures used in this Template: To create this tutorial, I bought the licences of the pictures from the websites shutterstock.com and fotolia.com. If you have not owner of these licences, you are not agreed to use these pictures. It is the reason I have not include them into the psd file to download.

STEP 1 Create your document

Open your Photoshop software and create a new 1000×1500px document.

Create now a new group (header) and a new layer (background). To create a group or a layer, easy click on the small icons located on the bottom of your layer window. Use the Rectangular Marquee Tool (M) to create an active selection (1000×40px). Fill this selection with the black colour using the Paint Bucket Tool (G). Reduce the layer opacity to 80%.

Open the bird.psd file available from the zip file attached to this tutorial and import it into your document. Use the Text Tool (T) to complete the logo (in my example, I used the Engel font available on this page).

Use again the Text Tool (T) to create a call number on the right.

To finish the first step, create a share line using the Text Tool (T) and the dash from the Verdana font.

Here the result:

STEP 2 The carousel

Make emotions, this method is used by the relief associations to generate a case of conscience which produces a donation. In my example, the website is dedicated to child help, I inserted a picture of a child to illustrate the relief agency auction. Select the picture of your choice and import it into your document.

Use now, once again the Text Tool (T) to add the slogan. Create a donation button, to do it, use the Rounded Rectangle Tool with a radius of minimum 50px (blue #0d9ce0). To finish, add a shadow on the text located in the button.

See here the result of the carousel.

STEP 3 Create the menu

Create a new group (menu) as well as a new layer. Create a black rectangle (1000×40px) on the layer (colour #000000). Put it on the bottom of the picture with the child and reduce the layer opacity to 80%. Use the Text Tool (T) to simulate some links. On the first active link, create a blue (#0d9ce0) rounded rectangle using the Rounded Rectangle Tool (U), with a radius of 3 pixels.

To create the Twitter counter, go to this link to download the icon. Import it into your picture. Add on this layer a colour overlay (menu layer>layer style> colour overlay). Use now the Text Tool (T) to complete the counter.

STEP 4 Add the content

It is now time to add the main content. Create a new group (content) and create after, a title and a share line of dashes using the Text Tool (T). Import a beautiful picture.

Use again the Text Tool (T) to add a small description (I retrieved fake text from lipsum.org). Use the rounded rectangle (U) with a radius of 3px to create the button.

Put all layers (title, sharing, picture, description and button) into a new group (box1). Then right click (mouse) on this group and select “Duplicate the group”. Make it a second time. Use now the Move Tool (V) to place both copies along the page width.

STEP 6 The newsletter

Regarding this type of website, the newsletter is an important tool. This part will be dedicated to register new members. Create a new group (newsletter) then create a blue (#0d9ce0) rectangle (1000×40px).

Use the Text Tool (T).

Use the Rounded Rectangle Tool (U) with a radius of 3px to create the form (input and button).

See now the result:

STEP 7 The footer

Up to the footer close this tutorial. Create a new group (footer). Create a new black (#010101) rectangle on the bottom part of your document.

Create one more time a title (same process used for the main content).

Use the Text Tool (T) to simulate a list of the last donations registered by the charity center. The lines as well as the button are created using the Rounded Rectangle Tool (U) with a radius of 3pixels.

On the right of the footer, there is a drop-down list for the last messages posted by the contributors of the relief agency. Create first a new group (testimonials) and create a new title.

Create a square now using the rounding rectangle (U), then use the Pen Tool (P) to create a profile. Use the Text Tool (T) to insert the message. Group the layers into a new group (message1).

Duplicate the group two times. Use the Move Tool (M) to align the messages on a column.

To finish, select the group message3, then go to menu Layer>Layer mask>Reveal all. Use the Foreground>Transparent and create a black gradient from the bottom to the top.

Use now the Text Tool (T) to create the counter. Duplicate the logo and place it in the background (press Ctrl/Cmd + t keys to activate the free transformation).

Create a blue button using the Rounded Rectangle Tool (U).

STEP 8 The Copyright

To finish the layout, create for the last time, the group Copyright and create a rectangle (1000×60px) with colour #272727. Create the Copyright with the Text Tool (T) on the left and on the right, add the social network icons : Wordpress, Twitter, Facebook and RSS (find them on iconfinder.com).

The Template is now finished, see the final result:

Thanks a lot to you reading this tutorial, if you like it, please, help to promote it on Twitter or on Facebook.

To continue your reading, I propose to you to reach these other tutorials:

• How to Create a Unique Wordpress Theme
• Create a clean PSD layout with a 3D look
• Design a creative unusual layout
• Design a realistic website layout in photoshop
• Create an awesome portfolio layout

To download the psd file, click here on the blue button.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

This is the reason I suggest to you today to work on a tutorial dedicated to the creation of a newsletters Template customized with Christmas colours. This tutorial is accessible to all web-designers levels, and it takes no more than 30 minutes to execute it.

Want to download this PSD layout ? Register for a VIP account

Before to start, check below the final result:

Notice that I attached to this tutorial, the psd source file used to create this template. Click here to download it.

STEP 1 Create the document

Open Photoshop software, then go to menu File>New and enter a name, width and height definition of your new picture (600×1500) and finish by clicking on the OK key.

Create a new layer and name it Top. Use now the Rectangular Marquee Tool (M) to create an active selection of 55px height, all along the width. Use the Paint Bucket Tool (B) to fill in this selection and add two layer styles: a shadow and a gradient overlay.

Add the logo now (on the left side) as well as the newsletter reference (on the right side).

See below the final result of the first step.

STEP 2 Create the header

Create a new goup (menu layer>new>group) and name it header. Use the Rectangle Tool (M) to create an active selection (600×540px). Use now the Paint Bucket Tool (B) to fill in the selection with the red #cc0001.

Update the foreground by the with #fff. Select the Gradient Tool (G), select on the top the foreground gradient > transparency (in the selector) then radial as gradient form. Create a new layer, name it gradient and create a white radial gradient on the centre.

Change the layer opacity to 80% and the fusion mode to overlay.

Create the snow, tree, and notice board illustrations , I used the vectorial illustration available on vectorious.net at this page. Open the file with Illustrator and copy the snow (Ctrl/Cmd + C). Paste it into your document. (Ctrl/Cmd + V).

Use same method to import the trees.

Similar for the notice board

To finish, import the snow

Use the Text Tool (T) to enter the message you want to deliver to your readers. I used three different fonts: Helvetica LT, LT Condensed and Ballparck. On Christmas word, I added two layer styles: shadow and gradient overlay.

STEP 3 Give value to your products

Under the header, it displays a selection of nine items of the web-store (no web-store! you can replace items by what either else). A thumbnail, a title and a reduce button are attached to each item. There is nothing difficult to create the thumbnail and the title, but regarding the reduce, create a red round with the Ellipse Tool (U) and add three layer styles: internal shadow, gradient overlay and outline.

Put the layers regarding the first item into a new group. Duplicate it 5 times (to duplicate, right click with your mouse, on the group and select Duplicate the Group). Use now the Move Tool (V) to place them on two lines.

STEP 4 The button

The items, with help of a button, invite the visitors to go to the Web site. To create a button, create first a new group and name it button. Select the Rounded Rectangle Tool (U) and change the radius to 10 pixels. Create a rectangle (520×60px) and go to menu Layer>Layer Style>internal shadow. Add three layer styles: internal shadow, gradient overlay and outline.

Use the Text Tool (T) to add the title of the button (font Ballparck). Add a shadow on this text.

To finish, add on the right of the button, a icon with Christmas theme. You can find several icon regarding Christmas on this page.

STEP 5 Twitter et Facebook

The footer includes three elements: a bar to define the social networks, an update area and a Copyright. For the first element, create a new group and name it The footer. Create into this first group, another group and name it The wood. Use the Rectangle Tool (U) to create a 600×45px rectangle. Go to menu Layer> Layer style>shadow. Add an internal shadow and a patterns overlay.

Go now to Iconfinder to download the Twitter and Facebook icons. Import them into your picture. Use now the Text Tool (T) to add the titles. On each icon and text, add a colour overlay, an internal shadow and a shadow.

STEP 6 Last updates

Create a new layer and name it background. Create an active selection (600×330px) and fill it with the colour #0b5930 using the Paint Bucket Tool. (G).

Create a new group and name it Blog. Use the Text Tool (T) to create a title, a text (get help from lipsum.org) and a button (use for it the Rounded Rectangle Tool (U)). On each layer, easy add a shadow.

Duplicate the group Blog and put the copy on the right.

STEP 7 The Copyright

To finish the Template, create a new layer and a 600×700px rectangle using the Rectangle Marquee Tool (M). Fill this active selection with the Paint Bucket Tool (B)and colour #073b20. Use now the Text Tool (T) to add the Copyright.

The Template is now all done. If you like this tutorial, do not hesitate any more to share it on Twitter, Facebook and StumbleUpon. Thank a lot to you all to read this tutorial and for readers bringing their help to share it.

The web designers can download the psd source file of this template, with a click here or on the blue button below.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Find here the link to download the .psd file: Download the .psd file.

We can now start with the tutorial.

STEP 1 Create a document

Open Photoshop and go to menu File>New. Enter a name, the width and the height (1 000×1 600 px). Press OK key.

Create now a new layer, name it background. Then use the regular marquee tool (M) to create an active selection all along the width, with 445px height.. Use now the Paint Bucket Tool (G) to fill the selection.
Got to menu Layer>Layer style>Gradient Overlay, then pattern overlay (click here to download the pattern) and follow this setting:

Create again a new layer and name it gradient. Change the foreground colour to the white, then use the Gradient Tool (G) (Foreground>Transparency) with the radial mode, to create a light on the centre of the background. Change now the layer to the overlay blending mode and reduce opacity to 60%.

STEP 2 Create the menu

Create a new group, menu Layer>New>Group and name it menu. Create now an active selection on the top of your picture (height 82px). Create a new layer, name it background and put it into the folder menu. Fill in the selection with black colour and add an internal shadow and a colour overlay.

On the right side, use the Text Tool (T) to add some hypertext links, change the colour to blue #6680d0 for the first link.

Create one more new layer and place it under the links. Create an active selection around the first link and fill the selection with a dark blue #111217. Create a second layer as well as a 2px border on the bottom of this area.

To create the logo, you only need to type your text with the NFS font available on this address: http://www.dafont.com/fr/search.php?psize=m&q=NFS+font then, add several layer styles: shadow, internal shadow and gradient overlay.

STEP 3 Last Article

Create a new group and name it Info. Create inside a new layer, name it bottom background. Create a 1 000×45 active selection on the bottom of the big blue rectangle.. Fill this selection with the Paint Bucket Tool (G) and add three layer styles: shadow, gradient overlay, outline.

You have now to create on the right, the button of this bar. To do it, create first a new layer and an active selection (143×43px) over the bar. Fill this selection and add same layer styles than the previous used, but with clearer colours.
To create the arrow, use the Ellipse Tool, and the customize forms tool (U), with the Triangle form. Add an internal shadow into the circle.

Create a new layer and create an active selection on the left of your layer (defined as 550×320px). Fill this selection with white colour using the Paint Bucket Tool (G). Change the opacity of the background to 30% and add a shadow, an overlay of colour and outline.

Import a video play game picture. You will put it onto the centre of your white rectangle.

Regarding the page numbering, create three small rounds with the Ellipse Tool (U) and add inside an internal shadow

To finish, add the title and the article description on the right, use for it the Text Tool (T).

The layout top is already done.

STEP 4 Content

The first part of the content is composed of four small easy blocks, each of them including: an icon, a title, a text descption. The icons are here available: http://www.tutorial9.net/downloads/nixus-icon-pack-60-beautiful-premium-icons-free/ , for other elements, you only need to use the Text Tool (T).

Put all layers reagrding the first block, into a group you name news1. Duplicate this folder three times and name them news1, 2, 2 and 4. Use the Move Tool (V) to place them on the lines.

To finish, you are going to work on the creation of a background under your news. To do it, create a new layer, name it background and place it under the four newsgroups. Create now an active selection (1000×700px), directly under the top, and fill the selection with the colour #f7f6f2 then add an internal shadow.

STEP 5 Last articles

The last articles are located on the home page too. For this, create a new group and name it post1. Use the Rectangular Marquee Tool (M) to create a 290×350px rectangle. Fill this selection with black colour and add the layer styles: overlay of colours and border. Use one more time the Rectangular Marquee Tool (M) to create a white rectangle on the bottom of this box.

Use the Text Tool (T) to add a fake text.

To finish, add a new video play game picture and duplicate the button used in the carousel, to get a new button.

Duplicate two times the group post1 and name these groups: post1, 2 and 3. Use to finish, the Move Tool (V) to place them on a line.

STEP 6 Twitter

Just over the footer, there is a band used to display the last twitter messages posted by the webmaster. To use it, create a new group and name it Twitter. Create a 1 000×50px new selection and a new layer. Fill this selection with the colour: #1b2130.

Create now a new layer, a thin border and a button located on the right. Use as colour, bleu #6680d0.

Download now this icon and import it into your folder. Reduce it and put it on the left side. Add a colour overlay #1b2130, then use the Text Tool (T) to simulate a Twitter message.

See below the result:

STEP 7 Create the footer

Regarding the footer, create a new group and name it footer. Create now a new layer and a selection all along the bottom of your document. Copy / paste on the new layer, the layer styles used on the carousel background.

Create a second group and name it column1. Use the Text Tool (T) to create a title, as well as fake texts. Regarding the button, use the Rectangular Marquee Tool (M) to create a rectangle with the colour #0f131b.

Apply same action regarding the second column.

Apply same things to the newsletter subscription form. Inputs and buttons are also created using the Rectangular Marquee Tool (M) and the Paint Bucket Tool (G) for the filling up.

See below result of footer :

STEP 8 The bottom page

The bottom page is used to publish the website Copyright. To do it, create first a new group, name it bottom. Use the Rectangular Marquee Tool (M)to create a 1000×45px selection. Fill it with the Paint Bucket Tool (B) with colour #0a0c11 and add an internal shadow.

Use the Text Tool (T) to add the Copyright.

Go now to the wonderful website Hongkiat (http://www.hongkiat.com/blog/free-social-media-icon-sets-best-of/) and download an icon set for your social networks. Import the icons onto your picture, put them on the right side of your bottom page.

The Template is completely done, see the result :.

If you like this tutorial, please, share it on your Twitter or Facebook groups or on Stumble Upon too. Gratefulness to you if you in this way.

To download the .psd source file of this template, click here or on the blue button.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

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 000×30 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 : 210×120 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 :

A zip file is attached to this tutorial, it includes the brushes, the logo and the .psd file of the Template created during this exercise. You need to get a VIP access to connect to the download area, to be able to download the file. To create a VIP account, please, click here

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Here the step one : how to design this beautiful layout, and below the preview of the final result :

Step 1 The tutorial

This tutorial will be useful for all webmasters to understand tricks and tips of the HMTL5 to create a web site with, because, main time, understanding what is happening during the graphic and publication of a HTML page is complicate. Then, step by step, I will be behind you to in this type of project. First step is regarding the creation of the Template using Photoshop, in the second step, we will continue learning to cut the picture to make it useful. As the final step, we will define a programming file with help of HTML5 and CSS3 to join the different graphical elements to give the final form of a web page.

Step 2 Create a document with Photoshop

In this way, create a new document under Photoshop. Open your software and go to menu File>New. A new window appears; enter the title of the picture and its width: 1000, its height: 1300. To validate, press the OK key, this action opens a new document. Press Ctrl/Cmd + S or go to menu File/Save as, to save your work right now.

Step 3 Fill the le header

To create the header, add un new horizontal guide on your document (50 px from the top of the picture) then user the Rectangular Marquee Tool (M) to create an active selection defined as 1000 x 50 px on the top (follow the guide previously created). Create now a new layer (menu Layer>Menu>Layer) and use the Paint Bucket Tool (G) to fill the selection (use grey #d9d8e8).

Step 4 Import of the logo

The logo includes two texts using two different fonts. A color overlay and an internal shadow are used to create the styles. But, for you, it will be easier because you can find the source file of the logo on the package attached to this page. Using Photoshop, open the file logo.psd, then slide and put the corresponding layers to your document.

Step 5 Add text

Select the Text Tool (T), then add texts to create the links to the menu. Use the Move Tool (V) to place the links on the right side. Now go to the menu Layer>Shadow. Update the setup, distance: 1px, size: 0, blending mode: normal, opacity: 40% and to finish, color: white. See below, the result you have to get.

Step 6 Search engine

The search engine completes the right side of the menu. To realize it, select the Rounded Rectangle Tool (U) and change the radius to 4 pixels (see the option bar on the top of the screen) then, create a white rectangle. Go to menu Layer>Layer style and add a stroke as well as an internal shadow. To create the zoom, select the customized form (U), then find the zoom in the form selector (keep the upper case pressed while creating the form)

Step 7 Create the carousel

To create the carousel, add a black or a dark grey background. To do it, put a new horizontal guide to 250 pixels from the top, then user the rectangle marquee tool (M) to create an active selection under the menu till the guide previously created. To fill the selection, use the Paint Bucket Tool (G). To finish, add a gradient overlay using colors: #262930 / #343844 (to remind, the gradient is created with a layer style, available in the menu Layer>Layer style>Gradient Overlay.)

Step 8 Add a picture

The main carousel includes a really big picture, scrolling under a pagination effect.
To create the carousel, import the picture « picture1 » available in the work folder from the zip file. Slide and put the file to the document, in Photoshop. To finish this step, merge the layers regarding the menu, into a group you name carousel (to create a group, go to menu Layer>New>Group).

Step 9 Add the slogan

To complete the carousel, you are going to a slogan over the picture. To do it, select the Text Tool (T), then enter the text. Now, create a new layer and use the Rectangular Marquee Tool (M) to create an active selection under the picture. To finish, use the Gradient Tool (G) to create a gradient from the top to the bottom, in the active selection, and set foreground color as black.

Step 10 Decrease the shadow

You need now to decrease the shadows located on the right and left sides, to do it, use a layer mask. Go to menu Layer>Layer mask> Reveal all. Set the foreground color to the black, then select the Gradient Tool (G) and create a gradient on the layer mask, from the left side to the inside, and after, from the right side to the inside.

Step 11 The pagination

To realize the pagination, create a new group and name it pagination. Select the Ellipse Tool and create four rounds: one dark grey and three other white rounds. To center the pagination, select the group, then, press the Ctrl/Cmd + A keys (to create an active selection around the picture), now select the Movev tool (V) and click on icon from the options bar: align the centers on the horizontal line.

Step 12 Central part

Now it is time to start to create the central part of the web site. This part will include a description of the web site, a small description of the last published articles (via three blocks) and a block used for the publication of the Twitter messages. Name it Content, then use the Text Tool (T) to create a title and a description. In my example, Iused the filling text LoremIpsum you can find using this link : www.lipsum.org.

Step 13 Special link

At the end ofthe text, select the last sentence and update the color of characters to the grey medium. Go to the work folder from the package (the link to download it is available on the bottom of this page) to import the arrow.psd file to your document. Put a small arrow to the right of the last sentence to create an action link (this link refers to a pager including the description of the home page).

Step 14 Recent Articles

Regarding the recent articles, create a new group and name it box (I remind you that the creation of a group need to go to menu Layer>New> Group). Now select the Rectangle Tool (U) and create a rectangle defined as 290×140 pixels (use the information window to create a rectangle with correct sizes). Be sure that the new layer has been created in folder box, if not, place it in this folder.

Step 15 Import the picture

To import the picture, go to menu File>Open, then explore the folders to reach your work folder and double-click on file photo2.jpg. The picture get open, press on the Ctrl/Cmd + A keys to create a selection around the picture, then press Ctrl/Cmd + C to copy it. Go back to your work document and press on Ctrl/Cmd + V to copy it. To finish this step, use the Move Tool (V) to place the picture over the black rectangle.

Step 16 Layer Style

Select the layer regarding the black rectangle, then go to menu Layer>Layer style>Color overlay. Select the white color and as blending mode, normal. This step helps you to fill the rectangle with the white color.

Step 17 Complex shadow 1/2

To create this type of shadow, you are going to use same method than the method used to create the shadow under the carousel, meaning a layer mask. Create first a new layer and name it gradient and place it under the white rectangle. Use the Rectangular Marquee Tool (M) to create an active selection under the picture. To finish this step, select the Gradient Tool (G), set the foreground color to the black and create a gradient from the top to the bottom.

Step 18 Complex shadow 2/2

To finish this complex shadow, go to menu Layer>Layer mask>Reveal all, to add a layer mask (the layer mask, depending of the colors applied on the surface, can shadow some type of areas). Now select the Gradient Tool (G) and in the gradients picker, click on the second one (foreground -> transparent). Be sure the foreground color is the black and create a first gradient on the left side (from the left side of the gradient to the inside), then a second one on the right side (from the right side of the gradient to the inside).

Step 19 Description

The picture is finished, Care on the location of all elements (rectangle, picture and shadow) attached to this picture, they all have to be inside the group box1, now select the Text Tool (T) to enter the description of this last article. Create first a text area under the picture and copy and paste some lines from LoremIpsum. Set up the first line to bold with a size of 14px, and a size of 12 pixels for the other lines.

Step 20 Button – more details

To let the web surfer to reach the whole article, a button is here for it. To create it, use the Rounded Rectangle Tool. Create first a new group (you will put into the group box1) and nale it button. Now select the rectangle rounded tool (U) and change the radius to 10 pixels (check the options bar from the top of screen). Create a rectangle with the grey
#e1e1df, enter the button description (using the Text Tool) and add the arrow arrow .psd too. To finish, add same shadow than the one used for the links of the menu from the top (you can copy and paste the layer styles with a right click on the layer and finish by a click on “copy the style of the layer).

Step 21 Duplicate

To end the recent articles step, you will simply duplicate the group box1 (you understand now why you had to join all layers into an unique group). Right click on the group box1 (this your mouse), then select “Duplicate the group” and repeat this method one more time. Rename both copies box2 and box3 and use the Move Tool (V) to put them all along the width (use the Upper case keys and the right directional key to quickly put the groups at the correct place).

Step 22 Last Twitter message

The blue block finishing the main contents of the web page, is useful to publish the last messages sent to a Twitter account. To create this block, create a new group, name it Twitter and place it into the group content. Set the foreground color to the blue #b9ddf3
and using the rounded rectangle (U), create the block all along the width of the page. To finish, complete the rounded rectangle with a small rectangle under same color, you will put on the bottom (use the Pen Tool (P)).

Step 23 Import the Twitter Icon

On the left side of the block, put the icon of the small Twitter bird (similar to the logo of the Twitter web site). Explore the work folder located on the zip file and apply a slide / paste of the file, directly from the folder to your document from Photoshop. These manipulations import automatically the file. Up to you to change the sizes, then press Enter. To finish this step, use the Move Tool (V) to correctly place the icon on the left side of the blue block. Now, complete the block using the Text Tool (T). Use a size of 20pixels regarding the message and 12pixels regarding the author name.

Step 24 Last step

The last part of the web site (the footer page) includes three small blocks too: on the left side, a description of the web site, then a block publishing the last news of the web site (with links to social networks) and a list of partnerships. Create first a new group and name it footer. Now, use the Rectangular Marquee Tool (M) and create an active selection on the bottom of your picture (all along the width). Create a new layer in the footer group and name it background. Fill in the layer with black color and add gradient (via the layer styles) using colors: #343844 -> #262932.

Step 25 Gradient

Directly under the footer, add a transition gradient, to do it, go to menu Selection>inverse. Press the M key, press the top directional arrow (to move the selection to 1px to the top). To finish, create a new layer, select the Gradient Tool, set foreground to the black color and create a gradient into the active selection.

Step 26 The Title

To put the title of all block under the light, you will create a rounded rectangle (with a layer style). Select the Rounded Rectangle Tool (U) and change the radius to 30 pixels, then, set the foreground color to #24272c and create a rectangle on the left top of the footer. To finish, go to menu Layer >Layer style >internal Shadow and change the opacity to 40%, distance to 2 pixels and size to 4 pixels.

Step 27 Texts

To add texts, go back to the lipsum.org web site and copy / paste again the three first sentence of LoremIpsum. Regarding the title, jump one line and change the text to bold, add an underline on the last words of the paragraph to simulate a link (helping the surfer to discover more regarding the Company).

Step 28 Duplicate the title and the text

Now duplicate the rounded rectangle and the text, then use the Move Tool (V) to move the both copies to the right (in final, to create the second block of the footer). Enlarge the text area. Go to the link www.iconfinder.com to find the icons to illustrate the links to some social networks: Twitter, Facebook, RSS etc…

Step 29 Duplicate once again

Duplicate once again the rounded rectangle and the text, then use the Move Tool (V) to put the last block on the extremity of the right side of the footer of the page. Change the title and almost the text it seems to a list of links (in our case, the partnerships). This manipulation ends the creation of the footer.

Step 30 White Mask

To finish the Template, create a new layer and put it over all other layers (refer to the layers and groups locations in the Layers window). Select now the Rectangular Marquee Tool (M) and create an active selection from the top to the bottom (width of 20 pixels) on the left side. Set the foreground color to the white and fiil the selection using the Paint Bucket Tool (B), do same thing with the right side, reduce layer opacity to 50%.

This step closes the Template creation of this web site. (in fact, regarding a real web site, to define the home page, you would be necessary to create similar Template which will be used to create several web pages: page of contacts, page of services etc…).

Want to download this PSD layout ? Register for a VIP account

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.