Layout design of Web pages (vi)

Design | Web 4. Image processing

The shape, size, quantity and the relationship with the background are closely related to the content of the image.

(1) Image contour Processing
The shape of the image can make the atmosphere of the page change, and directly affect the interest of the viewer. Generally speaking, the square is stable, serious, triangular sharp, round or curved shape of the soft and cordial, back to the bottom of the map and some irregular or no border image lively.

(2) The area of the image
The size of the image in the Web page can directly show its importance. Generally, the large image is easy to form visual focus, strong appeal, convey a strong emotion; small images commonly used to interspersed in the word group, appear concise and exquisite, there are embellishment and echoing the role of the theme of the page. In a page, if only large images without small images or fine text, it will appear empty, but only small images without large images and the lack of visual impact of the page.

The size of the image not only determines the master-slave relationship, but also controls the balance and movement of the page. The size contrast is strong, gives the person jumps the feeling, causes the protagonist to be more prominent, the size contrast weakens, then the page is stable, quiet. This is because, visitors to browse the page, the first will notice the large image, and then see the smaller image, this from large to small guide, so that the viewer's view of the page flow, it creates a dynamic, so that the page lively up.

Therefore, in the design of Web pages, we should first identify the main image and secondary image, enlarge the area of the main image, and reduce the secondary role to subordinate position. Only the size of the image and the appropriate combination of primary and secondary to form the best page visual effect.
(3) Number of images
The number of images is determined by the content. Use only one image, will make the content prominent, the page stability. Add an image, the page will be active as a result of contrast and echo. Add one more, then more lively, lively. However, limited to the current network transmission speed, the use of images must be cautious, large images will reduce the page display speed, even small images, if the use of too many, the same will make the page download speed slow. With the improvement of the network environment and technical conditions, this situation has changed a lot.

(4) The relationship with the background
The relationship between Web image and background is contrast and unification. In other words, the image and the background on the basis of harmonious unification, there should be a certain contrast, so that the main image more prominent. such as the precision of the camera lens with rough rock background, bright text to the background of the deep sky, or the use of no background and foil back to the bottom of the image, leaving a large area around the blank, are used in contrast to the main image play a prominent role.

5. The application of the image in the long page
Web pages are generally longitudinal (and specially designed to roll the screen horizontally), ranging in length from one screen to three screens, sometimes even more. When visitors browse the page, drag the vertical scroll bar to display the page one screen at a time, but that does not mean that we can separate the entire page and design each screen in isolation. The overall sense of the page is based on the image of the relationship, although the page is divided into several screens to display, but the continuity of the image or text should make the viewer get a complete, unified visual feeling. The designer has to do is to consider the overall, such as: To find harmony in the contrast, the establishment of the same visual identity, to deal with each screen and the entire page relationship.

(The above content extracts from Gu Qun industry and so on "webpage art design" a book, Shandong Fine Arts Press publishes. ）

Figure 19: As the main character image, both highlight the size of the contrast and enhance the affinity of the page.
Figure 20: The ingenious use of dynamic elements is more expressive than the print media. To cross the page of the long color block unified picture, the picture arrangement at will, the density is so, so that the overall style is both unified and change.