Traditional Culture Encyclopedia - Photography and portraiture - The design theory of plane composition guides the design of banners

The design theory of plane composition guides the design of banners

The arrangement relationship between elements

The composition of all elements together

Understand several commonly used plane terms

< p> There are several arrangements between them: separation/tangency/overlap/transparent overlap/combination/reduction/difference overlap/overlap.

Separation: There is no contact between shapes and there is a certain distance between them.

Tangential: The edges between shapes are exactly tangent.

Overlap: The overlapping relationship between shapes, resulting in a spatial relationship of up, down, front and back.

Transparency: Shapes overlap with each other transparently, but do not create a spatial relationship between up, down, front and back.

Combination: Shapes combine with each other to form larger new shapes.

Deletion: Shapes overlap each other, and the overlapping shapes are cut off.

Overlap: Shapes overlap each other, and the overlapping part creates a new shape.

Coincidence: Shape and shape overlap each other and become one.

Example

Looking at all the elements (points, lines and surfaces) as a whole, the main forms are repetition, approximation, gradient, variation, contrast, aggregation, emission, specificity, space and contradiction. Space, segmentation, texture, optical illusion, etc.

Let’s give examples below:

(1) Repetition

Refers to the same image appearing more than twice in the same design. Repetition is design It is a commonly used technique in order to strengthen people's impression, create a regular rhythm and make the picture unified. The so-called sameness mainly refers to the sameness in shape, color, size, etc. in repeated compositions. For example:

Repetition of shape

Repetition of bones

Repetition of size

Repetition of color

Texture Repetition of

Repetition of direction

Example:

(2) Approximation

Approximation refers to the shape, size, color, They have different characteristics in texture and other aspects, which show the effect of vivid changes in unity. The degree of approximation can be large or small. If the degree of approximation is large, it will create a sense of repetition. A small degree of approximation destroys unity. For example:

Shape approximation

Bone approximation

Myopia example: A pair of twin sisters in Taiwan

Banner example: Same style Shoes of different colors, polka dots of different sizes.

(3) Gradient

It is an effect that I often hear about. It can be experienced personally in nature. When driving on the road, we will feel the trees changing from near to far. Gradient from large to small. For example:

Shape gradient

Direction gradient

Position gradient

Size gradient

Color Gradient of

Gradient of skeleton

Gradient of light and shadow

Examples of gradation of color: Emoticons from the Forbidden City Taobao some time ago

Give an example Example:

Example of size gradient: Emoticon package from the Forbidden City Taobao some time ago

For example:

The arrangement of shoes.

The texture shape of the background

(4) Contrast

Sometimes it is a contrast in form, sometimes it is a contrast in color and texture. Contrast can produce clear, positive, and strong visual effects that leave a deep impression. For example:

Contrast of shape

Contrast of size

Contrast of color

Contrast of texture

Position Contrast

Contrast of center of gravity

Contrast of space

Contrast of reality and reality

Examples of comparison: buyer show and buyer show. . .

Banner example:

(5) Dense:

Dense is a commonly used method of organizing drawings in design. The basic shape can be used throughout the composition. Spread freely, sparsely and densely. The sparsest or densest place often becomes the visual focus of the entire design. It is actually a case of contrast. The denser the place, the farther away it feels, and vice versa.

The density of points

The density of lines

The density of surfaces

Examples of density:

Examples of banners:

(6) Emission

It is a common natural phenomenon, and the rays of the sun are emitted. The emission has directional regularity, and the emission center is the most important visual focus. All images are concentrated toward the center or spread out from the center. Sometimes it can cause optical motion, a feeling of explosion, and a strong visual effect.

Center point launch

Spiral launch

Concentric launch

Launch examples: Star Trail/Water Wave/Avalokitesvara Bodhisattva The halo behind the background

Banner example: Radiation rays focus the middle part of the picture.

(7) Specificity

It means that the constituent elements deliberately violate the order in the orderly relationship, making a few individual elements stand out to break the regularity.

Specificity of shape

Specificity of size

Specificity of color

Specificity of direction

Specificity of texture

Specific example: In fact, various games similar to Lianliankan have this principle.

Banner example: A family stands in a row, and the smaller one is given a hand. A unique and playful feeling makes the picture less monotonous

(8) Space

Use of size: such as large near and small far.

Make use of overlap: front-to-back/top-to-bottom relationships.

Use shadows: Give objects a sense of three-dimensionality/space.

Make use of density: For example, the smaller the spacing, the denser it is, the farther away it feels.

Use perspective: parallel lines go from wide to narrow.

Use color: cool colors stay away and warm colors stay close.

Make use of texture: the rougher, the closer, the finer, the further.

Contradictory space: a space that does not really exist, imaginary.

The relationship between reality and reality: long shot/middle shot/close shot.

Example of contradictory space: A very popular game "Monument Valley" some time ago.

Examples of spatial banners:

(9) Division

Divide the whole into small parts. For example:

Conformal division

Free division

Proportion and quantity

Example of division: terraced fields from nature

Example of splitting a Banner: Color blocks of different proportions form the background of the Banner.

The arrangement of products can also play a role in dividing the screen.

(10) Texture

Also known as texture, due to the different materials of the object and the different arrangement, organization, structure, etc. of the surface, it produces a rough, smooth, soft and hard feeling. For example:

Changes in brush strokes

Rugged texture

Inkjet painting/dying

Built-in texture effect

< p> Texture examples: wood, etc.

Texture Banner examples: The background uses inkjet + coloring to form a very fashionable texture.

(11) False vision

Visual difference caused by spatial distance or surrounding environment. There are mainly the following types:

The two lines in the picture are of equal length. Since the arrows at both ends of the upper and lower line segments are in opposite directions, the arrows of the upper line segment occupy a larger space, so the upper line appears longer.

Most people tend to see vertical lines as being longer than horizontal lines, which is an overestimation illusion. This illusion is greatest when the horizontal line length is 8-10mm.

The two lines in the diagram are equal. It looks like the bottom one is shorter because of the illusion of perspective.

The left and right sides of a standard square appear larger than the top and bottom sides.

The black and white line segments in the picture appear to be longer than the black line segments because the white line segments are brighter and expand.

The side lengths of the three, four, and pentagons in the figure are all equal, but due to the differences in perimeter and area, the side lengths are different.

When a tall person and a short person are together, the tall person will appear taller and the short person will appear shorter.

Examples of trompe l'oeil: such as virtual and real hand-painted splicing, such as some photography works

What I want to explain here is that trompe l'oeil is more commonly used in some parallax animation web pages. There are also some app guide pages. The Banner example here may not be appropriate, but I can also show it to you:

For example, the yellow dots in this screen, the same yellow dots, in dark colors It is very prominent on the background, but it is almost invisible on the same yellow background. However, in fact, the origin has not changed, but the color of the background has changed, which causes us to see different results

< p> Original text from:

www.woshipm.com/ucd/406308.html