You
know it is really important for the Webmasters to understand all new
functions supported by the HTML5, as well as the new technology attached
to CSS3 or jQuery. You have also to know that these new functions are
still recognized in the Web world, then, do not hesitate to use HTML5
functions to create a new web site. Do not waste your time any more
with the old versions, go ahead and move to the future using this new
HTML5.
For these different reasons, I want today with a full tutorial regarding
the creation of a web site, including all steps like : Design the
layout with Photoshop, Cut the layout and convet psd to xHTML.
Here the step one : how to design this beautiful layout, and below the preview of the final result :
Step 1 The tutorial
This tutorial will be useful for all webmasters to understand tricks and tips of the HMTL5 to create a web site with, because, main time, understanding what is happening during the graphic and publication of a HTML page is complicate. Then, step by step, I will be behind you to in this type of project. First step is regarding the creation of the Template using Photoshop, in the second step, we will continue learning to cut the picture to make it useful. As the final step, we will define a programming file with help of HTML5 and CSS3 to join the different graphical elements to give the final form of a web page.
Step 2 Create a document with Photoshop
In this way, create a new document under Photoshop. Open your software and go to menu File>New. A new window appears; enter the title of the picture and its width: 1000, its height: 1300. To validate, press the OK key, this action opens a new document. Press Ctrl/Cmd + S or go to menu File/Save as, to save your work right now.
Step 3 Fill the le header
To create the header, add un new horizontal guide on your document (50 px from the top of the picture) then user the Rectangular Marquee Tool (M) to create an active selection defined as 1000 x 50 px on the top (follow the guide previously created). Create now a new layer (menu Layer>Menu>Layer) and use the Paint Bucket Tool (G) to fill the selection (use grey #d9d8e8).
Step 4 Import of the logo
The logo includes two texts using two different fonts. A color overlay and an internal shadow are used to create the styles. But, for you, it will be easier because you can find the source file of the logo on the package attached to this page. Using Photoshop, open the file logo.psd, then slide and put the corresponding layers to your document.
Step 5 Add text
Select the Text tool (T), then add texts to create the links to the menu. Use the Move Tool (V) to place the links on the right side. Now go to the menu Layer>Shadow. Update the setup, distance: 1px, size: 0, blending mode: normal, opacity: 40% and to finish, color: white. See below, the result you have to get.
Step 6 Search engine
The search engine completes the right side of the menu. To realize it, select the Rounded Rectangle Tool (U) and change the radius to 4 pixels (see the option bar on the top of the screen) then, create a white rectangle. Go to menu Layer>Layer style and add a stroke as well as an internal shadow. To create the zoom, select the customized form (U), then find the zoom in the form selector (keep the upper case pressed while creating the form)
Step 7 Create the carousel
To create the carousel, add a black or a dark grey background. To do it, put a new horizontal guide to 250 pixels from the top, then user the rectangle marquee tool (M) to create an active selection under the menu till the guide previously created. To fill the selection, use the Paint Bucket Tool (G). To finish, add a gradient overlay using colors: #262930 / #343844 (to remind, the gradient is created with a layer style, available in the menu Layer>Layer style>Gradient Overlay.)
Step 8 Add a picture
The main carousel includes a really big picture, scrolling under a pagination effect.
To create the carousel, import the picture " picture1 " available in the
work folder from the zip file. Slide and put the file to the document,
in Photoshop. To finish this step, merge the layers regarding the menu,
into a group you name carousel (to create a group, go to menu
Layer>New>Group).
Step 9 Add the slogan
To complete the carousel, you are going to a slogan over the picture. To do it, select the Text tool (T), then enter the text. Now, create a new layer and use the Rectangular Marquee Tool (M) to create an active selection under the picture. To finish, use the Gradient Tool (G) to create a gradient from the top to the bottom, in the active selection, and set foreground color as black.
Step 10 Decrease the shadow
You need now to decrease the shadows located on the right and left sides, to do it, use a layer mask. Go to menu Layer>Layer mask> Reveal all. Set the foreground color to the black, then select the Gradient Tool (G) and create a gradient on the layer mask, from the left side to the inside, and after, from the right side to the inside.
Step 11 The pagination
To realize the pagination, create a new group and name it pagination. Select the Ellipse Tool and create four rounds: one dark grey and three other white rounds. To center the pagination, select the group, then, press the Ctrl/Cmd + A keys (to create an active selection around the picture), now select the Movev tool (V) and click on icon from the options bar: align the centers on the horizontal line.
Step 12 Central part
Now it is time to start to create the central part of the web site. This part will include a description of the web site, a small description of the last published articles (via three blocks) and a block used for the publication of the Twitter messages. Name it Content, then use the Text tool (T) to create a title and a description. In my example, Iused the filling text LoremIpsum you can find using this link : www.lipsum.org.
Step 13 Special link
At the end ofthe text, select the last sentence and update the color of characters to the grey medium. Go to the work folder from the package (the link to download it is available on the bottom of this page) to import the arrow.psd file to your document. Put a small arrow to the right of the last sentence to create an action link (this link refers to a pager including the description of the home page).
Step 14 Recent Articles
Regarding the recent articles, create a new group and name it box (I remind you that the creation of a group need to go to menu Layer>New> Group). Now select the Rectangle Tool (U) and create a rectangle defined as 290x140 pixels (use the information window to create a rectangle with correct sizes). Be sure that the new layer has been created in folder box, if not, place it in this folder.
Step 15 Import the picture
To import the picture, go to menu File>Open, then explore the folders to reach your work folder and double-click on file photo2.jpg. The picture get open, press on the Ctrl/Cmd + A keys to create a selection around the picture, then press Ctrl/Cmd + C to copy it. Go back to your work document and press on Ctrl/Cmd + V to copy it. To finish this step, use the Move Tool (V) to place the picture over the black rectangle.
Step 16 Layer Style
Select the layer regarding the black rectangle, then go to menu Layer>Layer style>Color overlay. Select the white color and as blending mode, normal. This step helps you to fill the rectangle with the white color.
Step 17 Complex shadow 1/2
To create this type of shadow, you are going to use same method than the method used to create the shadow under the carousel, meaning a layer mask. Create first a new layer and name it gradient and place it under the white rectangle. Use the Rectangular Marquee Tool (M) to create an active selection under the picture. To finish this step, select the Gradient Tool (G), set the foreground color to the black and create a gradient from the top to the bottom.
Step 18 Complex shadow 2/2
To finish this complex shadow, go to menu Layer>Layer mask>Reveal all, to add a layer mask (the layer mask, depending of the colors applied on the surface, can shadow some type of areas). Now select the Gradient Tool (G) and in the gradients picker, click on the second one (foreground -> transparent). Be sure the foreground color is the black and create a first gradient on the left side (from the left side of the gradient to the inside), then a second one on the right side (from the right side of the gradient to the inside).
Step 19 Description
The picture is finished, Care on the location of all elements (rectangle, picture and shadow) attached to this picture, they all have to be inside the group box1, now select the Text tool (T) to enter the description of this last article. Create first a text area under the picture and copy and paste some lines from LoremIpsum. Set up the first line to bold with a size of 14px, and a size of 12 pixels for the other lines.
Step 20 Button - more details
To let the web surfer to reach the whole article, a button is here for it. To create it, use the Rounded Rectangle Tool.
Create first a new group (you will put into the group box1) and nale it
button. Now select the rectangle rounded tool (U) and change the radius
to 10 pixels (check the options bar from the top of screen). Create a
rectangle with the grey
#e1e1df, enter the button description (using the Text tool) and add the
arrow arrow .psd too. To finish, add same shadow than the one used for
the links of the menu from the top (you can copy and paste the layer
styles with a right click on the layer and finish by a click on "copy
the style of the layer).
Step 21 Duplicate
To end the recent articles step, you will simply duplicate the group box1 (you understand now why you had to join all layers into an unique group). Right click on the group box1 (this your mouse), then select "Duplicate the group" and repeat this method one more time. Rename both copies box2 and box3 and use the Move Tool (V) to put them all along the width (use the Upper case keys and the right directional key to quickly put the groups at the correct place).
Step 22 Last Twitter message
The blue block finishing the main contents of the web page, is useful
to publish the last messages sent to a Twitter account. To create this
block, create a new group, name it Twitter and place it into the group
content. Set the foreground color to the blue #b9ddf3
and using the rounded rectangle (U), create the block all along the
width of the page. To finish, complete the rounded rectangle with a
small rectangle under same color, you will put on the bottom (use the Pen Tool (P)).
Step 23 Import the Twitter Icon
On the left side of the block, put the icon of the small Twitter bird (similar to the logo of the Twitter web site). Explore the work folder located on the zip file and apply a slide / paste of the file, directly from the folder to your document from Photoshop. These manipulations import automatically the file. Up to you to change the sizes, then press Enter. To finish this step, use the Move Tool (V) to correctly place the icon on the left side of the blue block. Now, complete the block using the Text tool (T). Use a size of 20pixels regarding the message and 12pixels regarding the author name.
Step 24 Last step
The last part of the web site (the footer page) includes three small blocks too: on the left side, a description of the web site, then a block publishing the last news of the web site (with links to social networks) and a list of partnerships. Create first a new group and name it footer. Now, use the Rectangular Marquee Tool (M) and create an active selection on the bottom of your picture (all along the width). Create a new layer in the footer group and name it background. Fill in the layer with black color and add gradient (via the layer styles) using colors: #343844 -> #262932.
Step 25 Gradient
Directly under the footer, add a transition gradient, to do it, go to menu Selection>inverse. Press the M key, press the top directional arrow (to move the selection to 1px to the top). To finish, create a new layer, select the Gradient Tool, set foreground to the black color and create a gradient into the active selection.
Step 26 The Title
To put the title of all block under the light, you will create a rounded rectangle (with a layer style). Select the Rounded Rectangle Tool (U) and change the radius to 30 pixels, then, set the foreground color to #24272c and create a rectangle on the left top of the footer. To finish, go to menu Layer >Layer style >internal Shadow and change the opacity to 40%, distance to 2 pixels and size to 4 pixels.
Step 27 Texts
To add texts, go back to the lipsum.org web site and copy / paste again the three first sentence of LoremIpsum. Regarding the title, jump one line and change the text to bold, add an underline on the last words of the paragraph to simulate a link (helping the surfer to discover more regarding the Company).
Step 28 Duplicate the title and the text
Now duplicate the rounded rectangle and the text, then use the Move Tool (V) to move the both copies to the right (in final, to create the second block of the footer). Enlarge the text area. Go to the link www.iconfinder.com to find the icons to illustrate the links to some social networks: Twitter, Facebook, RSS etc...
Step 29 Duplicate once again
Duplicate once again the rounded rectangle and the text, then use the Move Tool (V) to put the last block on the extremity of the right side of the footer of the page. Change the title and almost the text it seems to a list of links (in our case, the partnerships). This manipulation ends the creation of the footer.
Step 30 White Mask
To finish the Template, create a new layer and put it over all other layers (refer to the layers and groups locations in the Layers window). Select now the Rectangular Marquee Tool (M) and create an active selection from the top to the bottom (width of 20 pixels) on the left side. Set the foreground color to the white and fiil the selection using the Paint Bucket Tool (B), do same thing with the right side, reduce layer opacity to 50%.
This step closes the Template creation of this web site. (in fact, regarding a real web site, to define the home page, you would be necessary to create similar Template which will be used to create several web pages: page of contacts, page of services etc...).
