How to draw the site

How to draw the site

In creation of the website the stage of drawing of design of pages which will be imposed and published in a network subsequently is very important. In this article you learn how by means of Adobe Photoshop to draw the competent model for the site on the basis of which you will be able to form more difficult models subsequently.

It is required to you

- Adobe Photoshop program

The sponsor of placement P&G Articles on the subject "How to Draw the Site" How to establish joomla on local How to establish the design on the site How to look at files of the site



Create in the Photoshop the new file (Ctrl+N) with sizes of 1040х1400 where is 1400 height. Include display of rulers (Ctrl+R) and establish in settings of a ruler pixels as units of measure.


Start extending directing so that they corresponded to borders of blocks of the model. Stretch lateral borders so that to the brim there were 40 pixels. The upper and lower bounds also have to leave on 40 pixels from each party to background borders.


Then allocate directing which will make width of the top cap – 200 pixels from the upper bound of a background down.


To create saydbara at the left and on the right the model, establish directing on 240 pixels from background border at the left, and on 800 on the right.


Recede on 5 pixels inside from the left and right saydbar and carry out two more vertical directing. Then carry out two more directing on 245 pixels at the left and on 795 on the right.


Now measure 30 pixels from border of a cap and carry out horizontal directing for the horizontal menu.


Allocate with rectangular allocation by means of a key M narrow area of the horizontal menu which you just planned. Choose the instrument of filling and fill in area in the neutral light gray color.


Choose the instrument of filling and fill in area in the neutral light gray color. Press in the Vydeleniye-Modifikation-Szhatiye menu, specify parameter in 1 pixel and press "OK". Fill in area with lighter shade of the gray – you will have a menu frame.


Create a new layer and select the suitable image for an icon or a logo of the site, and then open it.


Insert on a new layer into a cap the image, having placed it from the left edge. More to the right of the image enter text heading of the site by means of any font.


Make out blocks of the site in the same color scale, as just created cap. Allocate area of the left saydbar and perform with it the same operations on filling in two flowers, as with the menu block.


Make the same with the central wide block of content. Copy a layer with the left saydbar and place it as the right saydbar.


Add the text on the model – choose a neutral font and enter menu headings, examples of news, photos, the section of tags and references.


Finish registration of the model with creation of "cellar" or a footer – register copyrights and the contacts there.