标 题: 视觉中心的摆放原则及实例分析
发信站: BBS 水木清华站 (Mon Jun 2 14:12:40 2003)
看北大未名里的ascii培训提到了构图,虽然我从来没学过这些东西,不过
曾经看了一些文章,现在来班门弄斧,聊聊画面的视觉中心。
画面的视觉中学尝见的有以下三种
1、九宫格
│ │
│ │
───┼───┼───
│ │
│ │
───┼───┼───
│ │
│ │
在传统的平面构成当中,对视觉中心最保守的办法是“九宫格”法,这个在东西方
的理论中都有论述,包括现在相机的智能取景对焦功能也是参照此不变法则。
九宫的中心和九宫周围的四个交叉点是是安排视觉中心元素的理想位置。
2、黄金分割
这个大家都知道,0.618,西方较推崇的,也是自然界所暗自遵循的,不详细讨论
了
_
3、√2
现代的设计,比例不采用黄金分割,而是2的开方,转成小数比例大概是0.707,
这样的方式给人更多感觉到工业性和人为的痕迹,比自然黄金比更有"人文科技感"
大概常用的视觉中心摆放位置就这么几种了,至于各个元素间的搭配不属于这里
的讨论范围,见谅。
下面结合例子来看看上面理论的应用,光讲理论太枯燥了
先看我贴的几个图吧(后面把图补上了)
每张图上都画出了参考线条,具体为:白色的是九宫格线,靠近中心的是黄金分
割线,外侧的是根方二线。
1' xp.jpg
http://www.smth.edu.cn/bbscon.php?bid=6&id=24621&ap=231
MS Office XP 宣传片头一,强调XP(经验),所以用了个沧桑的底图。布局很规矩
2' kiss.jpg
http://www.smth.edu.cn/bbscon.php?bid=6&id=24621&ap=20059
一个MTV的画面,分割很精确的!视觉中心(就是两个人的嘴啦)在九宫格左上点。
柱子将画面1/2分
3' mbl.jpg
http://www.smth.edu.cn/bbscon.php?bid=6&id=24621&ap=38763
美宝莲的广告,分割得相当精确,眼睛位置自己体会吧
下面就是ascii里面的实际应用了,一张全屏幕的图一般是78*23,这样我们可以
按照上面的比例来计算一下各种分割方法的视觉中心的大概位置
_
九宫格 黄金分割 √2
0.666 0.618 0.707
横 52 48 55
纵 15 14 16
当一张图的视觉中心在上面表格的位置,整张图的感觉应该不错
我们先来分析一下 flubber 的“神话传说”进版画面
,⌒
╱/
╰─╮ ______________ /│︳ ( ____
╰╯ ─╯ ╭──╯ By flubber │\\ ) 卍▏
╰─╮ │ ╭-─╮│╭─╮ )│\ ( ︵ ▏
╭┼╮╭┼╮ ╭-╯╰┼─╯ ◣ , / ││ ︶ ) ▏
╭─┼┤│╰┼┼╮╰╮╭-╰╮ ◢█ (\/ \ \ ( ▏
╰─╯│╰─┼╯╰─╯╰─-╯─╮◥█◤ )_ │ \ ︳ ︵ _) ▏
│ │ ╭─ ──╮╭──╮ ╭──┈┈ ╲\ │\╱ ▏
╭╯ ╭╯ │ ╭────╯╰╮╭╯╭─-╯ |\ \(\ ▏
│╭─┼─╯ ╭─-──╯╰─╯ ▕ ╲ \\ ▏
│╰─┼──╯ ╰─╯ ╭╮︵ │▕╲) \ ▏
╰╮ ╰─╮ ︵ )╱⌒╯ /︳│() ﹜ ▏
│╭──╯ ╭~め //│/ ) ╱ ▏
│╰ ⌒﹀╯ (⌒~)╮ ╱/ //╱╱( ▏
▕ │ ._ (\ ﹖ ) / │ /╱ ) ▏
▕┐ ╰╮ , ══╤══㏕══╰/-╮_ ╭﹀⌒﹀╯ ┌▏
▕卐 ( \( \(") , ( / _~☆╯ 卐▏
▕卍┌┐ . _︵ ╲╮ \_︶ / /╱-╯ ┌┐卍▏
▕卐卍┘ ┌┐ ┌┐ ︶ ﹚// ( ))︺ ( ) └卍卐▏
▕卍卐卍卐卍BM:canper nezha crygarden (╭╯ \(( ︵\ ヘ﹀ ┌卍卐卍▏
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ︶ ╲︶ ~) ▔▔▔▔▔▔▔▔
` ﹀"
视觉的中心当然是仙女的头部,您如果有耐心可以数一下这个头所在的位置坐标,
呵呵,我帮你数过了,横向:从48-55,纵向:14-16!发髻“め”的坐标(53,14),恰好
是九宫的右下角,耳朵“?”的坐标为(53,16),横向为九宫,纵向为根号2!惊讶吧,一
切都是附和分割标准,完美而精确的构图!
再来看一个我自己的画吧
▁
▂▄▄▂ ▅─、◣
◢﹉╲ ▏◥◣╲ ◣
◣ ◥◣) \ ▃▁ \ ▍ /╱
◣ `▇▆ ╲ ◣◣ ̄
╲) ◢╱ / \ 〞◢ ◣
只做仰卧  ̄~″▎ ┃ \ ◤ ▎
◢▊ ┃ ▕▃ ◢ ▌
不做起坐 ▉◢▕▃_▁\ ▂▃▄◤‥.▆◥▊
▊▎:◥█▆▋▇▇█◤ ▊˙◢ ◢
▍ ◣  ̄ ▃  ̄ ▎ ◤▍
◥◣◣ ◤ ◣▁ ▁◢ ◣◥ ▎
── Garfield ◣ ◤ ︵ ◥ ⿺◤
◢~╲_,乀╭( \__◥◤▁◤
▃▃▍, \/╭( ╲丿▇▆ ̄
乁 ╰( ╲_丿 ◥◣▍
▍ │ ╲ 丿 /,◢
▉ 人 ▇ _-╯ ▊
◣▁_╱ ╲__ ╱ ◥◣
▍ ▇▆▇ ◢ ▎lstar
Garfield,为什么要把它放在这么一个位置呢?可以查一下Garfield的鼻子的位置
(48,12),黄金分割点!
呵呵,大概就是这些了。需要说一点,真正画图的时候没必要去记住那么多的数字,
还去数格子,这些数字也是在众多的被人们认可的设计基础提炼出来的,平时只要眼睛
看得顺眼大概查不了多少。这些数字和规则只是为了你的不时之需。
理论来自于实践,而又去指导实践!
btw:我是个外行,不是很懂,专家如果看到有什么不对请提出来,多多指教。呵呵
Title: Principles and example analysis of placement of visual centers
Sending station: BBS Shuimu Tsinghua Station Mon Jun 2 14:12:40 2003
I saw that the ASCII training in Peking University Weiming mentioned composition, although I have never learned these things.
I have read some articles before and now I am going to try my best to talk about the visual center of the picture.
There are three types of visual learning in the picture:
1 Nine Palace Grid
Among the traditional plane compositions, the most conservative method for visual center is the nine-square grid method. This method is used in the East and West.
It has been discussed in the theory, including the intelligent viewfinding and focusing function of current cameras, which also refers to this unchanging law.
The center of the Nine Palaces and the four intersections around the Nine Palaces are ideal locations for arranging visual center elements.
2 golden section
Everyone knows this. 0.618 is more respected in the West and is also secretly followed by nature. We will not discuss it in detail.
Got it
3 2
In modern design, the ratio does not use the golden section, but the square root of 2. When converted into a decimal, the ratio is about 0.707.
This method gives people more sense of industriality and artificial traces, and has a more "humanistic and technological sense" than the natural golden ratio.
There are probably only a few commonly used visual center placement positions. As for the matching of various elements, it does not belong here.
Scope of discussion Sorry
Let’s take a look at the application of the above theory with examples. Just talking about theory is too boring.
Let’s take a look at the few pictures I posted first. I’ll add them later.
Reference lines are drawn on each picture. Specifically, the white ones are the nine-square grid lines, and the ones near the center are the golden points.
The outside of the secant line is the root square line
1'xp.jpg
http: www.smth.edu.cn bbscon.php?bid 6&id 24621&ap 231
The first promotional video for MS Office
2' kiss.jpg
http: www.smth.edu.cn bbscon.php?bid 6&id 24621&ap 20059
An MTV picture is segmented very accurately. The visual center is the mouth of two people. Click on the upper left corner of the nine-square grid.
The pillar will divide the tableau into 1 2 points
3'mbl.jpg
http: www.smth.edu.cn bbscon.php?bid 6&id 24621&ap 38763
Maybelline's advertisement is very precise. You can experience the position of the eyes yourself.
The following is the practical application of ascii. A full-screen image is usually 78*23, so we can
According to the above ratio, calculate the approximate position of the visual center of various segmentation methods.
Nine Palaces Golden Section 2
0.666 0.618 0.707
Horizontal 52 48 55
Vertical 15 14 16
When the visual center of a picture is at the position of the table above, the whole picture should feel good.
Let’s first analyze flubber’s Myths and Legends advancement screen
,⌒
By flubber swastika
,
⌒﹜
め
⌒ ⌒
.﹖
, ㏕ ⌒
卐 " , 卐
swastika . swastika
卍卍﹚卍卐
卍卍卍卐卍BM:canper nezha crygarden ヘ 卍卍卍
"
The center of vision is of course the fairy's head. If you have the patience, you can count the coordinates of the head's location.
Haha, I have counted it for you. The horizontal direction is from 48 55 to the vertical direction 14 16. The coordinates of bun め are 53,14, which is exactly
It is the lower right corner of the Nine Palaces. The coordinates of the ear? are 53,16. The horizontal direction is the Nine Palaces and the vertical direction is the root number 2. Surprise? 1
Everything is in line with the segmentation standards, perfect and precise composition
Let’s take a look at another painting of mine.
Just lie on your back
No sit-ups.
:
Garfield
,乀
,丿
丁丿
丿 ,
people
lstar
Why did Garfield put it in such a position? You can check the position of Garfield's nose.
48,12 Golden Section
Haha, that’s about it. I need to say that there is no need to remember so many numbers when actually drawing.
Count the grids. These numbers are also extracted from many recognized design foundations. Normally, all you need is your eyes.
You probably won't be able to check much at first sight. These numbers and rules are just for your occasional needs.
Theory comes from practice and guides practice
btw I am a layman and don’t know much about it. Experts, please tell me if you see anything wrong. Haha.