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.

STEP1 Create the document

Open your Photoshop software then create a new document: 1000×1200 pixels.

Create now a new layer (go to menu Layer>New>Layer), rename the layer Top. Use now the Rectangular Marquee Tool (M) to create an active area. To finish, fill this area with black color.

STEP2 Add the logo

Use the Text Tool (T) to create the logo.

STEP3 Search engine

To create the search engine, use the Rounded Rectangle Tool (U) with a radius of 6px and the colour #6a6a6a. Then add on the input and after on the button, the layer styles as shown here:

On the input:

Then on the button:

And to finish, on the text:

STEP4 Create the menu

Update the foreground color by the white, then use the rounded rectangular tool to create a 900×50 px rectangle. Then right click on the layer with your mouse and click on pixilate the layer. Use now the Rectangular Marquee Tool to remove a 10px height line on the bottom of the menu.

To finish, add a layer style on the menu. To do it, go to menu Layer>Layer style>Gradient overlay. See the setting here:

Use the Text Tool (T) to add the links. Create a rounded rectangular behind the first link. Use the yellow color #e99709.

Go to this page : http://www.iconfinder.com/search/?q=iconset%3Asocial and download the two icons: Twitter and RSS. Then import these icons into your documents. Press Ctrl/Cmd + T to reduce them and add an internal shadow and a color overlay (go to menu Layer>Layer style>internal shadow).

Setting of layer styles to add on the icons:

Use the Text Tool (T) to add the counters and apply a shadow.

STEP5 Create the carousel

Create a new layer and rename it background. Create now under the menu, a 900×250px active area and fill it with the Paint Bucket Tool (G) and color #bbbbbb.

Create now a new layer and name it border. Put it under the layer background. Fill the selection with the yellow #e99709. Move the selection 4px to the top and press key Del.

To create the arrow of the carousel, create a 300×85px active area. Create a new layer, fill the selection with black color. Add now a gradient overlay (use colors #a3a3a3 > #bbbbbb from the bottom to the top).

To create the first line, you need to add a triangle on the right to create the arrow, and to create the triangle, use the customized form of Photoshop.
Duplicate first the rectangle one time and move it to the top. Duplicate the rectangle a second time and remove the gradient overlay.

Use the customized forms tool (U) to create the arrow.

Add a new gradient overlay but use for this time, colors #020202 > #515151.

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

Import now the picture, put the layer of the picture under the arrows.

STEP6 Create the contents

To create the main contents of the template, create first a new group (menu Layer>New>Group) and name it Content. Use now the Rectangular Marquee Tool (M) to create a 900×455px active area, under the carousel. Create a new layer and name it background, change to foreground color by the grey. Use the Paint Bucket Tool (G) to fill the selection (use color #d9d9d9).

Create a new group and name it box1 and a new layer and name it box1. Use the Rectangular Marquee Tool (M) and the Paint Bucket Tool (G)to create a 260×395px rectangular with color #ebebeb. Add to this layer an external glow.

Add the title with the Text Tool (T)

Import your picture.

And now a text of description, and a button you can create with the rounded rectangular tool and yellow color #e9980b.

To finish the content, duplicate two times this group and put them all along the width of the page.

STEP 7 The footer

Create a new group and name it the footer. Duplicate the top layer (created during the first step). Rename the copy background and put it into the Footer group. Use the Move Tool (V) to place the black rectangular on the bottom area of the template.

Use one more time the Text Tool (T) to create a title, a description (find one on lipsum.org) and the button (always the same one).

Create a title on the right « Last pictures » and place it under several thumbnails to simulate a small pictures gallery.

To finish, add the Copyright and enter again the name of your website to make a reminder.

The template is now finished, wonderful and ready to be coded in HTML5 / CSS3 : )

If you like this tutorial, you can easy help us, sharing this link on your Facebook or Twitter groups and we will thank you a lot in this way.

To continue reading content about tutorials, you can visit our area dedicated to tutorials.

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

Sign up now for a VIP account for just $49/year and get access to this tutorial plus many other premium resources and tutorials. If you already are VIP on Grafpedia, sign in and click on the download button.

Your web site design is now finished. But this result is only a simple picture you cannot update to change or to add actions. It is the reason you need now to cut it off in several graphical parts, one for the icons, one to illustrate the buttons etc…. These graphical parts will be added to your HTML web site pages using CSS proprieties, even you are going to create a web site with HTML5/CSS, CSS proprieties are going to take place of several pictures (internal shadow, shadow, gradient etc…).

Step 1 Creation of HTML file

It is time now to enter into the HTML part of this tutorial. Start to create the needed files,in this way, access your work folder, create a new folder, name it mytemplate. Open your favorite edit code software (by my side, I work with Notepad++) and go to menu File>New. Select HTML as type of file and press the “Create” key. Go back right now to the menu File and this time, select “save-as”. Enter name “index.html” and save your file in your folder.

Step 2 Basic tags

Take care on the source code to be visible on your screen (as well as your software is put on mode “to edit source code”) In case of HTML code lines displayed on screen, select all of them, then delete them (to be able to create an HTML type file). On line 1, enter the type of document: <!DOCTYPE html>, then, just under, enter the language used on the page: <html lang=”fr”> (do not forget to close the <html> tag on line 3). Add now inside, the tags <head> and <body>. To finish, add the tag <metacharset=”utf-8″> into the header of the page and the tag <title>. See below the code you have to get:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Créer un template HTML5</title>
  </head>
  <body>
  </body>
</html>

Step 3 First HTML5 tag

Code back to the code source located in your index.html file, drop some lines between the tags. Declare now a new tag <section> which will include the whole content of the web site (it will also center the Template). Add inside this tag, the ID: content. See below the line to add into your HTML file.

<section id="content"></section>

Step 4 The Top

Enter now into the high import step of the subject. Start first to create the top of the web site, including 3 blocks: the logo, a links list and a search engine. Group the 3 blocks in a tag <header>, this tag is needed to create the area of the top of the web site (as well as for the top area of all other blocks: footer, article, section etc…). See below the code source updated.

<section id="content">
  <header></header>
</section>

Step 5 The links

Drop some links between the tags <header>,then declare a new tag <nav>. Then, create a new tag <a> and add inside the properties href and title. Now, copy/paste several times the line regarding the link to get a list of links.

<nav>
  <a href="" title="homepage">Home page</a>
  <a href="" title="…">…</a>
</nav>

Step 6 The searchengine

To finish the top of the page, continue with the creation of the search engine. To do it, drop a ligne under the tag </nav> then then enter a new tag <form>to initialize the form.

Declare inside a first tag <input/> then put properties name and type. Create a second tag input with type: button. See below the code lines to add to your index.html file.

<form class="search">
  <input name="" type="text">
  <input name="" value="!" type="button">
</form>

Step 7 Block dark grey

A dark grey rectangle is located under the header (just under the caroussel). To create this area, use a tag div. Drop a line under the form, then declare a new tag div. Addinside the ID dark. Seebelow the HTML code to add.

<div id="sombre"></div>

Step 8 The carousel 1/2

The caroussel is created a sort list which is located in a HTML5 tag section. Go back to the source code of your index.hmtl file, then drop a line under the div created orevously and declare a new tag <section>. Add now inside the ID, the tag slideshow. See below the lines to add to your HTML file.

<section id="slideshow"></section>

Step 9 The carousel 2/2

Drop a line between the tags <section> and declare a new tag <ul></ul>to create a new list. Declare inside a tag to create a line and to add the picture of the carousel. To do it, use the HTML tag <img/> with properties src (path to access the graphical file) alt and tittle. Repeat it 3 times to create 4 lines in the list. See below the code to add to your index.html file.

<ul>
  <li><imgsrc="img/slider_photo1.png" alt="" title="Light Trails" /></li>
  <li><imgsrc="img/slider_photo1.png" alt="" title="Light Trails" /></li>
  <li><imgsrc="img/slider_photo1.png" alt="" title="Light Trails" /></li>
  <li><imgsrc="img/slider_photo1.png" alt="" title="Light Trails" /></li>
</ul>

Step 10 Complex shadow

To create the complex shadow under the carousel, you need to create a new div. Drop one line under the section and create a new tag div, then add inside the ID shadow. See below the lines of code to add to your index.html file.

<div id="ombrage"></div>

Step 11 Introduce

You mist now create the main block of the web site : an introduce, three little blocks to display the last published articles on the the web site, and a block to display the last Twitter messages. To create the Introduce block, declare a tag <section>, then, add inside an ID intro. Inside again, add fake text, with the tag <strong>around the first sentence. To create the small arrow on the right side of the hypertext link, use the HTML codes: · et›

<section id="intro">
  <strong>…</strong> …<a href="" title="">…&middot;&middot;&rsaquo;</a>
</section>

Step 12 Last articles

To create the three blocks including the articles (pictures, tilte and text), declare first a new tag <section>, then add an ID Thumbnail. Inside this new tag, declare a new tag . See below the few lines to add to your index.html file.

<section id="vignette">
  <article></article>
</section>

Step 13 Contents

The tag article previously created will be useful to receive the article content; the logo, the title, the chapter and the button. Then, drop some lines between the article tag and declare a new picture (using the graphical filecontent_photo1.png) with the tag <img/>.

Using now the fake text LoremIpsum, create a title (with the tag h2), then a chapter of text (tag p) and create the button with the tag of hypertext link a. See below the updated code.

<article>
  <imgsrc="img/content_photo1.png" alt="photo1" />
  <h2>…</h2>
  <p>…</p>
  <a href="" title="">…&middot;&middot;&rsaquo; </a>
</article>

Step 14 Twitter messages 1/3

The lastblock is regarding the Twitter messages. Go to the code source of your page, then drop some lines after the last tag section previously created. Declare a new tag section and add inside an ID Twitter. Enter a message inside (use again a fake text LoremIpsum).

<section id="twitter">
  Le message
</section>

Step 15 Twitter messages 2/3

Fill out the tag section with two pictures. Start to declare two new tags <img and insert the sources : oiseau.png (bird) , then twitter_quote.png. Add now in the first tag, class: bird and in the second one, class :apos. Regarding the pictures, you can find them in the work folder delivered on the CD. See below the lines to add into the tag section create during the previous step.

<img src="img/oiseau.png" class="oiseau" alt="twitter" />
<img src="img/twitter_quote.png" class="apos" alt="guillemet" />

Step 16 Twitter message 3/3

To finish with the Twitter block, drop one ligne under the pictures and declare a new tag <div>. Add inside the class: at. Add now, between the tag div, the author name of the Twitter message. See below the line to insert to finish the Twitter block.

  <div class="at">@TechnoBlog</div>

Step 17 Footer

We are already arrived on the creation step of the footer, this step is the last creation for this web site. Drop one/two line(s) under the tag section (of the Twitter block), then declare a new tag footer. This tag HTML5 is useful to create the bottom of the complete block (page, article, section etc…).

  <footer></footer>

Step 18 1st block of the footer

You need now to create different blocks for the footer. Drop some lines between the tags footer, then declare a new tag article and insert inside an ID: foot1. Drop a line and declare an hypertext link with a class t (to create the title). Insert now, under a tag chapter including another hypertext link. Seebelow the code to add to your index.html file.

<article id="foot1">
  <a href="#" class="t" title="">notre société</a>
  <p>…<a href="" title="">En savoir plus</a></p>
</article>

Step 19 2nd block

Same thing to apply to create the second block. Drop one line under the first block, then declare a new tag article and insert inside an ID: foot2. Create now a new title with a tag of hypertext links and declare under it a new chapter.

<article id="foot2">
  <a href="" class="t" title="">Titre</a>
  <p><strong>Sujet</strong><br/>… <a href="" title="">En savoir plus</a></p>

Step 20 Social links

For the conclusion of the second block of the footer, add a list including icons which will be useful to manage the links forwarding to the social networks. To insert the pictures, use the tags <img/>,then put an hypertext link all around these pictures (use the tags <a href => </a>). See below the source code to add to finish the second block.

  <a href="" title="rss"><imgsrc="img/icone_rss.png" alt="rss" /></a>
  <a href="" title="facebook"><imgsrc="img/icone_facebook.png" alt="facebook" /></a>
  <a href="" title="twitter"><imgsrc="img/icone_twitter.png" alt="twitter" /></a>
  <a href="" title="vague"><imgsrc="img/icone_vague.png" alt="vague" /></a>
  <a href="" title="flickr"><imgsrc="img/icone_flickr.png" alt="flickr" /></a>
</article>

Step 21 The 3rd block

The third block is simple. Drop a line under the tag article previously created, then create a new tag article. Insert inside the ID foot3, then start to create the title of the block with the tag <a> and class: t. Declare now a list with 5 lines, using the tags <ul> et <li> (remind that the closing tag li is now optional with the version HTML5). See below the lines of code to insert to your HTML file, to create the last block of the footer.

<article id="foot3">
  <a href="" class="t" title="">partenaires</a>
  <ul>
    <li>Kitgrafik.com
    <li>GrafikNetwork.com
    <li>Themeforest.com
    <li>WonkaStudio
    <li>Premiumvectorpacks.com
  </ul>
</article>

Step 22 Last tags of the page

To really finish the Template, the last tags HTML to be used are located under the footer, they are needed to add the Copyright on the page. To do it, drop a line under the tag footer, then declare a new tag article, add now inside an ID copy. Add at least the Copyright.

<article id="copy">
  <p>texte</p>
</article>

Step 23 First test

The HTML structure of the web site is now finished. In your HTMLeditor, press on keys Ctrl/Cmd + S to save work. Explore and open your folder « tuto18 » then double-click on your HTML file to open your Internet Explorer (better to select Chrome) and check the result of the display of your web site. For sure, for the moment it is not really nice to watch, but you can now appreciate the evolution between this version without CSS and a version with CSS3!

Step 24 Create a layer style

Go back to your HTML editor, then go to menu File>new and select CSS for the type of file. It opens a blank layer style. Press keys Ctrl/Cmd + S to « save-as ». Put this file into same folder than index.html file (folder « tuto4 »). To finish, create the link between the HTML file and your layer style SS. To do it, copy the code line below between the tags in index.html.

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

Step 25 General Styles

It is time now to apply a style. Go back to your layer style, then type body { }, and between { and }, use the CSS properties to change the background color of the page by :#fff (background-color), apply the pictures bg_header.png et bg_footer.png (background-image), the background position, first one on the top, second one on the bottom (background-position), background repate of the picture on x axe (background-repeat), the font Verdana, the color #101331 and the size to 12px (font-family, font-size, color).

body {
  background-color:
  background-image: url(../img/bg_header.png), url(../img/bg_footer.png);
  background-position: top, bottom;
  background-repeat:repeat-x;
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  color:#101331;
}

Step 26 Add the fonts

Advice you do not use exotic fonts with the web, except using HTML5 which can support ttf or otf files to be able to use all type of polices you want. To do it, put the files in the folder of your website, then use the property @font-face to include the useful files.

@font-face {font-family: Titillium; src: url('../fonts/TitilliumText22L001.otf');}
@font-face {font-family: Tiza; src: url('../fonts/Tiza.otf');}

Step 27 Put the website in the center

To put the website in the center, write in the layer style #content { } then update the width of the div to 960 pixels using the property width. Update the external margings right and left to auto, then, update the relative position. See below the faw lines to add to your CSS file.

#content {
  width:960px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

Etape 28 Put the website in the center

It is now the step dedicated to the customization of the elements. Write in your style layer, header { } then use the poperties to change the background color to #d8d8e8 (background-color), then width to 940 pixels and height to 35 pixels. Add an internal margin of 20 pixels on the left side, and on the top of 15pixels (padding-left et padding-top). To finish, update the raltiv position (position). See below the lines to add to your layer style.

header {
  background-color:#d8d8e8;
  width:940px;height:35px;
  padding-left:20px;
  padding-top:15px;
  position:relative;
}

Step 29 Create the logo 1/2

The logo is created with 2 words, with a different police for each of them using: Titilliumfor the first one and Tizafor the second one. In real, first word is customized with the tag h1 and the second one with the tag span. With CSS, you write: header h1 { }, then between { and } apply propretyfont-family to update the characters size to 25 pixels, to update color to and margin-top to add an external negative margin to 10 pixels.

headerh1 {
  font-family:Titillium;
  font-size:25px;
  color:#656873;
  margin-top:-10px;
}

Step 30 Create the logo 2/2

To customize the second word, write in your layer style header h1 .blog { }, then update the font to Tiza (font-family), the color to #afafbd (color), the left internal marging to 5px (padding-left), the bold to 100 (font-weight) and finish creating a shadow with values: horizontal row 0px, vertical row -1px, size 0px and color #000. See below the lines to add to your CSS file.

headerh1 .blog {
  font-family:Tiza;
  color:#afafbd;
  padding-left:5px;
  font-weight:100;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 255);
}

Step 31 Customize the menu 1/2

To go ahead with the header customizing, it is time now for the list of links. In your layer style, enter nav { } and start first to update the position of the block to the right (float), then add a margin on the right (170 pixels) and a margin on the top (25 pixels) (margin-right and margin-top).

nav {
  float:right;
  margin-right:170px;
  margin-top:-25px;
}

Step 32 Customize the menu 2/2

As soon as the menu is at the correct position, start to work on the links. To do it, type nav a { } and update the left and right external margins to 12 pixels (margin-left and margin-right) as well as the color of the text #8b8b99 (color) and remove the underline of the links (text-decoration), light reduce the lines space (letter-spacing). To finish with this step, add a shadow with these values: horizontal and vertical alignment to 1px, size to 1px, color #fff. See below the lines making perfect the style of the menu.

nav a{
  margin-left:12px;
  margin-right:12px;
  color:#8b8b99;
  text-decoration:none;
  letter-spacing:-0.02em;
  text-shadow:1px 1px 1px #fff;
}

Step 33 The search engine 1/3

To finish th header, you have to customize the search engine. This one includes an input (text field) and a button. These two fields need different styles you will discover soon in next steps, because the first thing to do is to customize the form. Type in your CSS file .search { } and change the form to absolute to 10 pixels from the top and 0 droit the right border.

.search {
  position:absolute;
  right:0;
  top:10px;
}

Step 34 The search engine 2/3

Write now .searchinput[type=text] { } to indicate the styles of the text fields. Use the properties to change to height to 25 pixels and the width to 110 pixels (height et width), then the color of the text to the black with a size of 12 pixels (color et font-size), left internal margin to 30 pixels, right external margin to 20 pixels (margin-right). Add a border with a radius of 4 pixels, un border of 1px solid #c2c2c2. To finish, create a gradient in the background using color: from #ededed to #fff (gradient). See below all the lines added to your file to customize the text filed of the search engine.

search input[type=text] {
  height:25px;
  width:110px;
  color:#000;
  padding-left:30px;
  margin-right:20px;
  font-size:12px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border:1px #c2c2c2 solid;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
  background: -webkit-linear-gradient(top, #ededed, #fff);
  background: -moz-linear-gradient(top, #ededed, #fff);
  background: -ms-linear-gradient(top, #ededed, #fff);
  background: -o-linear-gradient(top, #ededed, #fff);
}

Step 35 The search engine 3/3

Drop a line and type .searchinput[type=button] { } for the botton type input. Change height to 15 pixels and width to 17 pixels (height et width). Add the picture loupe.png in the background (background-image), then change the background properties: no-repeat, bottom, transparent (background-repeat, background-position, background-color). Init the border to 0, put botton to absolute on the top (5px), on the left (10 px) (position, top, left). See below the last lines used to customize the search engine. That’s all regarding the header customizing.

.searchinput[type=button] {
  height:15px;
  width:17px;
  background-image:url(../img/loupe.png);
  background-repeat:no-repeat;
  background-position:bottom;
  background-color:transparent;
  border:0;
  position:absolute;
  left:10px;
  top:5px;
  color:transparent;
}

Step 36 The block under the carousel

Under the header, you can see a very big rectangle block, color dark grey, created previously with a tag div. Customize it now, entering #ombre { } in your CSS file.
Use now the CSS properties to change the color of the background to #343843, the height to 200 pixels and the width to 960 pixels. To finish, update the position to relative.

#sombre {
background-color:#343843;
height:200px;
width:960px;
position:relative;
}

Step 37 The slideshow 1/5

It is certainly the biggest part of CSS, building of the slideshow.

The slideshow is located in a section, which is over the dark block. To do it, go back to the code of your layer style and type #slideshow{ }, change the right and left margins to automatic mode (margin-right et margin-left), add a negative margin to 180 pixels (margin-top) and change the position to relative, then define the z-index at 9.

#slideshow {
  margin-right:auto;
  margin-left:auto;
  margin-top:-180px;
  position:relative;
  z-index:9;
}

Step 38 The slideshow 2/5

Once the slideshow located at the correct place, update the look of the pictures which are going to be displayed. In this case, you only need to round the angles adding a radius. To do it, enter #slideshowimg { }, then define a radius from 7 pixels (border-radius).
See below the lines to add to your CSS file.

#slideshowimg {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

Step 39 The slideshow 3/5

Enter #slideshowul { } and change the position to relative (position), overflow to hidden (overflow) and init the internal and external margins to 0 (margin et padding). Enter now #slideshowul li { } and change the position to absolute (positrion), then put the block on the top to the left side (top -left), init the external and internal margins to 0 (padding et margin) and cancel the chips (list-style).

#slideshow ul {
  position:relative;
  overflow:hidden;
  margin:0;padding:0;
}
#slideshow ul li {
  position:absolute;
  top:0;left:0;
  margin:0;
  padding:0;
  list-style:none;
}

Step 40 The slideshow 4/5

Last action regarding the slideshow customization is the page numbering. Write first #pagination { } and force the drop to next line with clear:both, update width to 75 pixels, add on the top an external margin (margin) from 35px and an internal to 0 px 0 (padding). Enter #pagination li { } and cancel the chips (list-style), align the lines on the left (float) and add an external margin on the right side and one on the left side from 3px (margin).

#pagination {
  clear:both;
  width:75px;
  margin:25px auto 0;
  padding:0;
}
#pagination li {
  list-style:none;
  float:left;
  margin:0 2px;
}

Step 41 The slideshow 5/5

To finish the page numbering, enter #pagination li a { } and change height and width (width et height), then, define a very big text-indent to disappear the text (text-indent). To finish, add the pictures pagination.png and background (background). To update the look when the chip is active, you have to create a new class which will change the default style of the link. In this case, enter #pagination li .active { } and change the backround position to move it from 10 pixels to the bottom (background-position).

#pagination li a {
  display:block;
  width:10px;
  height:10px;
  text-indent:-10000px;
  background:url(../img/pagination.png);
}
#pagination li a.active {
  background-position:0 10px;
}

Step 42 Complex shadow

You need now to create the complex shadow located under the slideshow. Then, apply same method than the one used for the dark rectangle. Go back to the source code of your layer style and enter #ombrage { } and use properties to change width to 915 pixels and height to 50 pixels. Add a picture as background slider_ombre.png, and apply the position as relative.

#ombrage {
  width:915px;
  height:50px;
  background-image:url(../img/slider_ombre.png);
  background-repeat:no-repeat;
  position:relative;
}

Step 43 Introduce

It is time now to work on the main content of the website, meaning the introduce, the last articles and the Twitter block. Regarding the introduce, go back to your layer style and enter #intro { }. Change text align, width to 920 pixels, apply a 10px external margin on the top and one on the bottom from 40px, position to relative and the z-index to 4. To finish, easy update change the colour of the links present in this introduce, by the grey: #786880 (color), remove the underline (text-decoration).

#intro {
  text-align:justify;
  width:920px;
  margin:10px auto 40px auto;
  position:relative;
  z-index:4;
}
#intro a {
  color:#787889;
  text-decoration:none;
}

Step 44 Te last articles

Three blocks are located under the introduce, they includes the three last articles of the web site. These blocks are created with the tag section and three tags article. Here now, the way to customize them: go back to the source code of your layer style and enter #vignette { }, change the external margin from the left to 20px, height to 350px and the position to relative. Enter #vignette article { } and change the width to 292 px, align to the left (float), text-align to justify, and a margin on the right to 21 pixels. To finish, add an internal margin on the bottom 20 pixels on the chapter including the thumbnails blocks.

#vignette {margin-left:20px; height:350px; position:relative;}
#vignette article {width:292px;  float:left; text-align:justify; margin-right:21px;}
#vignette p {padding-bottom:20px;}

Step 45 Create the button

To create the button located under the texts, enter in your layer style #vignette a { } then
Use the CSS properties to add « rounding the angles » with a radius of 7 pixels (border-radius), to change the background colour to #e2e2e2 (background-color), to change the text colour by #787889, to remove the underline (text-decoration), to add an internal shadow on the top and on the bottom from 5 pixels, on ythe left and on the right from 7 pixels. To finish, add a shadow following the setting : vertical and horizontal align from 1 pixel, size 1 pixel and colour #fff.

#vignette a {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background-color:#e2e2e2;
  color:#787889;
  text-shadow:1px 1px 1px #fff;
  text-decoration:none;
  padding:5px 7px 5px 7px;
}

Step 46 Hover effect

To finish, add a shadow to the block when the mouse of your visitor is hover on the button. Write #vignette a:hover { } then add the shadow using the property box-shadow As well as the values : vertical and horizontal align 0px, size 4 pixels and colour #666.

#vignette a:hover {
  box-shadow:0px 0px 4px #666;
}

Step 47 Twitter Block 1/2

It is time now to customize the Twitter block. To do it, enter in your layer style #twitter { }, then change the width to 670 pixels, the height to 80 pixels (width and height). Add a left external margin of 20 pixels and one on the bottom, 80 pixels (margin-left et margin-bottom), an internal on the left and on the top from 250 et 30 pixels (padding-left et padding-top).

/* TWITTER */
#twitter {
  width:670px;
  height:80px;
  margin-left:20px;
  padding-left:250px;
  padding-top:30px;
  margin-bottom:80px;

Step 48 Twitter Block 2/3

Continue to work on the syles rounding the angles with 10 pixels of radius (border-radius). Change the background colour to #b8ddf3 (background-colour), use the Georgia font (font-family). Change the size and colour of the font (font-size et colour), apply the italic mode (font-style), change the relative position of the block (position) and add a shadow on the text following the setting: vertical and horizontal align 1 pixel, size 1pixel and colour #fff.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#b8ddf3;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:17px;
color:#458cc5;
font-style:italic;
position:relative;
text-shadow:1px 1px 1px #fff;
}

Step 49 Twitter Block 3/3

To finish this Twitter step, find now some style to put the bird icon, the brace and the author of the message at the correct place. Go back to the source code of your layer style and enter #twitter.oiseau { } change the position to absolute (position), put the block at 50px from the left side and at 20px from the top (left et top). Similar regarding the brace, but put it at 180px from the left side and at 0px from the top (left et top). Write now #twitter .at { } and put the block at 240px from the left side in absolute and at 120 px from the top (position, left et top). Change the font as Arial as well as the colour to #0e4C8b, the size 12px (font-family, colour et font-size). For the last operation, remove the shadow (text-shadow).

#twitter .oiseau {position:absolute; left:50px; top:20px;}
#twitter.apos {position:absolute; left:180px; top:0px;}
#twitter.at {position:absolute; left:240px; top:120px; color:#0e4c8b; font-family:arial; font-size:12px; font-style:normal; text-shadow:none;}

Step 50 Footer

To start working on the footer, you have first to customize the main content. To do it, enter footer { } and use the CCS properties to change the width to 960px, the height to 200px (width andt height) and update the colour and the size of the texts (font-size et colour) and add a gradient in the background of the block, using the colours : #343844 -> #25292F. To finish, change the position to relative mode (position).

/* FOOTER */
footer {
  width:960px;height:200px;
  font-size:10px;
  color:#d8d8e8;
  background: -webkit-gradient(linear, left top, left bottom, from(#343844), to(#25292F));
  background: -webkit-linear-gradient(top, #343844, #25292F);
  background: -moz-linear-gradient(top, #343844, #25292F);
  background: -ms-linear-gradient(top, #343844, #25292F);
  background: -o-linear-gradient(top, #343844, #25292F);
  position:relative;
}

Step 51 Customize the links

In the footer, many hypertext links are used, you are going to customize all of them by one unique operation. Fir this, enter in the footer a { } and update colour by #d8d8e8, then for the colour regarding the colour used by the mouse movement over the link, write footer a:hover { } and change the colour by #fff (color). See below the lines to add into your CSS file.

footer a {color:#d8d8e8;}
footer a:hover {color:#FFF;}

Step 52 The Chapters

Put the blocks articles at the correct place, write footer article { } and change align of the block to the left (float), add a 20px internal margin on the top and on the left (padding-top et padding-left). Update now the chapters (balise p) located in the footer writing footer article p { } and update the width of the lines to 17px (line-height), update the internal margin by top 20px and bottom 15px (padding-top et padding-bottom).

footer article {
  float:left;
  padding-top:20px;
  padding-left:20px;
}
footer article p {
  line-height:17px;
  padding-top:20px;
  padding-bottom:15px;
}

Step 53 The listes

The block on the right includes a list of hypertext links. To update this list, easy write footer article ul { } in your CSS file and update the internal margin to 20 pixels (padding-top). Update the lines with footer article li { } and height to 17 pixels (height). See below the two lines to add to your layer styles.

footer article ul { padding-top:20px; }
footer article li { height:17px; }

Step 54 A style for each block

Each block get its own width you need to indicate in your layer style. In the source code of your CSS file, write footer #foot1 { } and update width to (width), add a 50px external margin on the right (margin-right). Similar action is required for the block 2 with width of 370 pixels. Regarding block 3, apply a width of 175 pixels (without margin).

#foot1 { width:215px; margin-right:50px; }
#foot2 { width:370px; margin-right:50px; }
#foot3 { width:175px; }

Step 55 The titles

There is a title before each block customize like: (in your layer style) footer article .t { }, use properties to update colour by #fff (color), background colour #24272c (background-colour). Remove underline (text-decoration), then add a 10px internal margin on the right and on the left, and 5px on the top and on the bottom, round the angles using a 12px radius (border-radius). See below the few lines to add to your CSS file

footer article .t {
  color:#fff;
  background-color:#24272c;
  text-decoration:none;
  padding:5px 10px 5px 10px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

Step 56 Copyright

To close the rework of the layer style, you need to customize the bar which will get the Copyright. In your layer style, enter #copy { } and use the CSS properties to update the background colour by #d8d8e8 (background-colour), the size to 11px and the text colour to #3d4151. Define now the width to 940 pixels (width), add an internal margin (20px) on the left and one of 12px on the top (padding-left et padding-top). To finish, update height to 28px. See below the lines to add to your layer style.

#copy {
  background-color:#d8d8e8;
  font-size:11px;
  color:#3d4151;
  width:940px;
  padding-left:20px;
  padding-top:12px;
  height:28px;
}

Step 57 Insert the Javascript

The Template is now done, you have only one more thing to do: to animate the slideshow. To do it, you are going to use the javascript named Craftyslide. Go to the official page to download the files: http://projects.craftedpixelz.co.uk/craftyslide/ then create a new folder js/ da,sotre (work folder) and unzip both javascript files . Go back to the source code of your index.html file and copy the following two lines (between the tags <header> of your file).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"><!--mce:0--></script>

Step 58 Activate the Slideshow

To activate the slideshow, drop a line and declare a new tag <script>. Copy out the line you can find after chapter. Do not forget to save your both files index.html and styles.css (press on keys Ctrl/Cmd + S).

<script type="text/javascript"><!--mce:1--></script>

Step 59 Final tests

The Template is finished, you can test it now. Explore your files and from your work folder, double-click on index.html file to open it in your internet browser (better to choose one of the last versions of Chrome or Firefox). Check the slideshow and all blocks. In case something does not work perfect, refer to the correct step.

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.