How to do caps for the websites

How to do caps for the websites

The principle ""is met on clothes"" it is fair not only concerning people, but also concerning the websites. Website clothes - its design. And the design defines that impression which is made at the visitor in the first several seconds of viewing a resource. This impression is especially important as defines his further behavior. The first element of design which is seen by each user who visited the website - his ""cap"". A cap - the person of a web resource. Therefore each beginning web designer wants first of all to learn to do caps for the websites.

It is required to you

  • - Internet access;
  • - modern browser;
  • - editor of raster graphics (GIMP, Photoshop);
  • - optionally: editor of vector graphics (CorelDraw);
  • - optionally: the 3D environment - modeling (Blender, 3DStudio);
  • - optionally: sheet of paper, pencil or handle.

Instruction

1. Develop the concept of future cap of the website. Ideally, the original idea should be the cornerstone of the concept. At a lack of the ideas it is possible to gather inspiration, analyzing already existing successful solutions. Reflect result of creative researches in a type of an outline sketch in the sheet of paper. The sketch should display structure of future cap of the website with the indication of the ""rubber"" places and areas filled with images. At this stage it is quite good to think over also the approximate color scheme of design of a cap.

2. Select the cap sizes. Actually, it is worth determining accurately only one its parameter - height. As a rule, on height of a cap of the websites are fixed, and it does not depend on the logical permission influencing display options of fonts. In other words, it is worth selecting value of height of a cap in pixels. At the same time it makes sense to consider a possibility of placement in a cap of banners or blocks of contextual advertizing. Concerning width it is necessary to decide on the minimum value, having selected at least one ""rubber"" area allowing adaptation of a cap to the different sizes of the web page.

3. Create a cap template in the graphics editor. In the new document add a transparent layer to which transfer the sketch according to the selected geometrical parameters. Height of a layer should correspond to cap height. Width can be taken any, but it is more than minimum size, having left spaces under horizontal ""rubber"" areas"". Designate in a template of a zone of the fixed and varying sizes, the zones intended for filling with freeze frame images, images of a background.

4. Find or create freeze frame images for placement in a cap template. The logo and some unique elements can be created in the vector editor or the 3D environment - modeling. It is rather simple to find thematic images on free image banks in the Internet.

5. Insert a background, a logo and freeze frame images into a website cap template in the graphics editor. Add a background and each image to a separate transparent layer. Place layers optimum. Moving images in layers, achieve their ideal configuration corresponding to earlier created template.

6. Save the resulting image of a cap. Save the detail design in a ""native"" format of the graphics editor. Then execute saving the consolidated image of a cap in a format without loss of quality (for example, PNG).

7. Create a cap HTML-template if it is necessary. Open the consolidated image in the editor. Make cutting from it the images corresponding to areas of fixed size. From the places corresponding to ""rubber"" areas cut images 1 pixel wide. Save all images on a disk. Impose HTML-preparation of a cap, using the saved images.

Author: «MirrorInfo» Dream Team


Print