The principle of "being greeted by clothes" is true not only for people, but also for sites. The dress of the site is its design. And it is the design that determines the impression that the visitor has in the first few seconds of viewing the resource. This impression is especially important because it determines his future behavior. The first design element that every user who visits the site sees is its "header". The cap is the face of the web resource. Therefore, every novice web designer wants to first of all learn how to make headers for sites.
Necessary
- - access to the Internet;
- - modern browser;
- - raster graphics editor (GIMP, Photoshop);
- - optional: vector graphics editor (CorelDraw);
- - optional: 3D modeling environment (Blender, 3DStudio);
- - optional: sheet of paper, pencil or pen.
Instructions
Step 1
Develop a concept for the future site header. Ideally, the concept should be based on the original idea. When ideas are lacking, inspiration can be gained by analyzing existing good solutions. Reflect the result of creative research in the form of a sketch on a piece of paper. The sketch should reflect the structure of the future header of the site with the indication of "rubber" places and areas filled with images. At this stage, it's a good idea to think over an approximate color scheme for the header design.
Step 2
Select the size of the header. Actually, it is necessary to clearly define only one of its parameters - the height. As a rule, the height of the site headers is fixed, and it does not depend on the logical resolution that affects the display parameters of the fonts. In other words, you should choose a value for the header height in pixels. In this case, it makes sense to take into account the possibility of placing banners or blocks of contextual advertising in the header. With regard to the width, you should determine the minimum value, highlighting at least one "rubber" area that allows the header to adapt to different sizes of the web page.
Step 3
Create a header template in a graphics editor. In a new document, add a transparent layer to which you will drag the sketch according to the selected geometric parameters. The layer height should match the header height. The width can be taken as arbitrary, but larger than the minimum size, leaving space for horizontal “rubber” areas.”In the template, designate zones of fixed and variable sizes, zones intended to be filled with static images, background images.
Step 4
Search or create static images to place in your header template. The logo and some unique elements can be created in a vector editor or 3D modeling environment. It is quite easy to find thematic images on free photobanks on the Internet.
Step 5
Insert the background, logo and static images into the site header template in a graphics editor. Add the background and each image to a separate transparent layer. Arrange the layers in the best way. By moving images in layers, achieve their perfect layout, corresponding to the previously created template.
Step 6
Save the resulting header image. Save the working project in the native format of the graphics editor. Then save the flattened header image in a lossless format (for example, PNG).
Step 7
Create an HTML header template if needed. Open the flattened image in the editor. Cut out images from it that correspond to areas of a fixed size. From the places corresponding to the "rubber" areas, cut out the images 1 pixel wide. Save all images to disk. Layout the HTML header using the saved images.
