In this article we will talk about sites that developers create manually, i.e. type-up.

The article is intended for users familiar with HTML And CSS . It is also advisable to know at least the basics Adobe Photoshop

One of the stages of creating a real website is creating a PSD template. You can also come across such names as layout, design or source.

The template is ordered to the designer. The designer draws the layout in Adobe Photoshop and saves it in PSD format.

What is PSD format?

For a better understanding, you can give a simple life example. As a child, everyone glued appliques. We cut out a house from paper and glued it on. We cut out the Christmas tree and glued it on. And so on until the work is ready.

Now you can imagine a situation in which the figures were cut out, laid out on the sheet in the right places, but not yet glued. So, the PSD file format can be compared to an application on which the figures have not yet been glued, but they have been arranged in the desired order.

Thanks to this, each such “figure”, or rather each individual fragment of the template, can be saved as a separate picture, which can then be used on the site.

Here is the layout of the page that will be created.

Once we have a ready-made template in PSD format, we can go directly to the layout

1. Create a folder in which the layout will be stored, for example “Site”.
2. In the “Site” folder, create a folder for images, for example img.
3. In the “Site” folder, create a folder for styles, for example css.
4. Now you need to launch Adobe Photoshop and open the psd file in it. From here you need to “pull out” all the images that will be used on the site.

Here you need to pay attention to the “Layers” button. In the figure it is highlighted with a red oval.

This button turns the layer window on and off. Layers are the very parts of the appliqué that are not glued together. For convenience, the layers are divided into folders that can be collapsed and expanded. The principle of operation is almost the same as in Windows Explorer.

The first step is to collapse all folders. Expand as needed.

Now you can start “pulling out” pictures

The first thing you need to do is select the frame tool. Then select only the part that limits the site logo

After this, press the Enter key. Everything except the selected area will be cut off.

Now you can remove the background. To do this, you need to turn off the background layer.

To quickly find the layers you need, you can do the following:

Here the layer is named "Shape 2". Clicking on the eye image makes the layer invisible.

However, there are two more layers that also need to be disabled. The actions are similar.

Now you can save. To do this you need to do the following:

Choose from 4 proposed options, and from the proposed second one. Extension select gif.

File name logo.gif . Save the file to a folder img . Other images should be saved there as well.

You can follow these principles:

• photographic quality – jpg
• photographic quality with transparent background– png-8 , not satisfied with the quality - png-24
• few colors in the image – gif

In order to return the original version before cropping, you need to open the history window

Click on the file name and set the appropriate scale.

Other images are saved in the same way.

The same goes for the paw image that appears when you hover over a menu item.

Other images are optional. It can be on white, it can be on transparent.

Here you should choose the saving option very carefully, because in PSD sources there are often images with poorly processed edges. Here's an example:

The image was saved on a transparent background. However, when viewing it in black, poorly processed edges are visible. But when using a light background, this defect may not be noticeable.

For the background you will need to cut out a small picture that will fill the page like a tile. However, in this example the background is not repeating. Therefore, it is better to find a similar picture. Or you can try to select it by cutting out various fragments from the background.

Start of layout. Wrapper. Site header.

Layout will be considered using HTML5 and CSS3.

You need to create an HTML file in your site folder. For example index.html.

In folder css create file style.css .

In addition, in the folder css you need to place the file reset.css with the following code

/* v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: collapse; border-spacing: 0; )

The fact is that different browsers may have different settings for the same tag. To ensure cross-browser compatibility, they must be reset. The above code was developed by Eric Mayer.

First in index.html you should write the main tags.

For a tag in styles you need to set the background.

As already mentioned, the background is not repeated here. Therefore, it would be more rational to choose any similar one.

Body( background-image: url(../img/bg.gif); )

Now you need to create a site wrapper - a block in which all the content will be placed.

Next to the closing one