How to Create a Website in Flat Design Style (Video Tutorial) HD

Flat web design tutorial from Designmodo. Used pack: Free: http://designmodo.com/flat-free/ Paid: http://designmodo.com/flat/ First, you make a new document, 1200 wide and 2900 high. It is easier to design the main menu with the logo if the auxiliary line is 100px. Open the file with the logo. Drag and place the logo on the left side of your design. Now, create the main menu to have a Helvetica font. Create 4 buttons: home, work, blog and contact. Using the move tool, place the menu in the upper right corner. Set the style of the font to bold and the size to 14pt. To simplify the designing process, create a color pallet which you can import. Now, pick the dark gray in the color pallet for the color of the text in the main menu. Open your UI design elements pack and locate the button which you will use for your menu. Using the move tool, click and drag the desired element into your design. The default text can be changed by a double click on the icon in the layer and then write in it SIGN IN. The next step is adapting the size of the button to your text. When you are finished and the button is put into its position, select these layers and group them. In order to place them more easily, drag the layer called grid940 from the Design elements pack. Now, go over to the design of the header section. Make a rectangle about 760px high. Pick again the color from the pallet that suites your design. Rename the layer Bg-header so you can manipulate it more easily. Now, create the main title with white letters and make their size 38pt and create the subtitle by duplicating the layer with the title but set the font size to 24pt here. Pick Huge button from the Design elements and drag it to your design. This button will call to action, write on it Sign up with facebook. Name your group as you named your button. To make the button more noticeable, make the stroke 1px thick and make it a darker color than the header background. The size should be adapted to the written text. Locate in the design elements pack a facebook icon and drag it into your call to action button. Place it in the middle of the header section. Place the MacBook picture in the lower half of the header. Open the document with the picture and drag it into your design. Place the picture so that the header background section cuts it in half. Place the screen shot on the screen of the MacBook to be an example of your work. Drag the picture onto your design and position it. Draw a rectangle which will serve as a mask. Place it under the screen shot layer and, while holding the ALT key on the keyboard, click exactly between the two layers. Position it a little better, and voilà, everything fits in perfectly. Now, draw three circles which will control the layer which your have created so far. Make the first orange and the other two gray. When the header is finished, you can group its layers. Now, we move over to creating the content section. Turn the grid on so that positioning will be easier