Home > PhotoShop Tutorials > Tutorials > The Balance and Composition of Layout

The Balance and Composition of Layout

Previously we talked about relative symmetry, this section let’s get to know what’s the balance of layout.

1.What’s the balance of layout?
First let’s take a look at a simple contrast demonstration.

Statue of Liberty is at the center of the picture surrounded by symmetrical blank. It is balanced.

Move the statue to the right side of the picture, now there’s too much on the right and too less on the left. The balance is ruined.

This is like one side of the balance is too heavy so that the other side is lifted. Balance is ruined. Therefore, to maintain the left and right side of balance level, we should add something on the left.

The rule is to add something alike. It’s the equivalent of perception. If add text in full accordance with image, it will make the picture stiff and dull. And it also will take away the spirit. Meanwhile, the most important primary and secondary relationship is hard to distinguish because of the entirely equality of ration.

Other than text ratio, same rule also can be applied to image ratio. In principle, nearly same is fine, not entirely equal.

2. The key to balance is balanced center.
We’ll use photographs to illustrate.

Out of these two photographs, which one is more balanced?

The reason why this one is unbalanced is that the center is on the top left and in the middle while there is no element on the bottom right side.


Out of these two photographs, which one is more balanced?

The photograph will be more balanced with important elements on the bottom left and top right corner.
Here is a tip. If there are important elements at the two points of diagonal, then the photograph is basically balanced.


Out of these two photographs, which one is more balanced?

In this photo, there’re elements both at center and on bottom side while the top part is blank. This is typical top is too much while bottom too less.
In this chapter, contrast demonstrations are conducted through images. Let’s try to place image with text and see the outcome.

It is almost balanced with text filling in the blank.
In the photo, left is too much while right too less and its opposite, and top is too much while bottom too less are all unbalanced. And center and position are important to make the photo more like a whole part, rather than divided and scattered elements.

3. Methods of balanced composition
In this section, we’ll demonstrate the methods of balanced composition..
Real case: A promotional poster for a western restaurant.

Method 1: occupy the center
Key point: Place theme element in the central axis of image, which is the relative symmetrical mentioned in the last section.
a. Place main subject in the position of central axis.

b. Place main title, logo, price and slogan in the central axis.

c. Make a light gradient in the background to heighten atmosphere in a better way.

Method 2: Diagonal composition
Key point: It is critical to locate the important element in the layout diagonal.
a. Place the theme on bottom right corner.

b. Put text on top left corner and extend it to bottom. Place unimportant text somewhere else.

Method 3: occupy all of the corners
Key point: Place elements on all of the corners. Although it will make the layout heavy, it makes image rich. It is a method that is frequently used.
a. To enhance appetite, we put photos on all diagonals, which is also diagonal composition.

b. In order to maintain cohesive layout, we put critical text at center, which is also diagonal track.

c. Put other information on the corner outside of diagonals, the composition has been finished.

Method 4: S-type composition
Key point: Put important elements in layout in S-type or Z-type. Other elements can be placed in blank space.
a. Determine the position of S-type or Z-type as well as text.

b. Place important elements in the previous imaginary image.

c. Add text. Even though the overall contracture has been completed, it’s not lively. Then add something else.

d. Add some “useless” element. It will upgrade the overall level of work.

Method 5: Occupy the whole image
Key point: Amplify vital elements. Some images can be dealt with “bleeding” treatment, which will deliver a lively vibe.
a. Crucial elements are dealt with amplifying bleeding treatment. In the meanwhile, pay attention to the perspective relations.

b. Place text at top center. The image should be filled with picture on the top and text on the bottom, which is also a balanced composition.

Method 6 and 7: Fill image with picture on the left and text on the right or its opposite
The above mentioned two composition methods are frequently used so as to keep the balance between left and right, especially commonly used in horizontal images.

To make layout balanced, we can use original photographs, cutouts and pictures.

Method 8: Comprehensive method
Key point: In the above cases, a lot of them are using not one but several methods altogether.

You can compare them with the mentioned composition methods and analyze how many methods each image is using.

4. Summary
For any composition method used, there should be a reason. For different composition, methods and feeling ought to be different. On one hand, it depends on what’s the vibe client is trying to deliver. On the other hand, it also depends on you existing information and material.

Anyone is welcomed to redistribute and quote the content only if he or she notes its origin. http://4-designer.com/2015/04/the-balance-and-composition-of-layout


Link to this page:

Pic link:


Important note:
Pin for file decompression: 4-designer.com