排版《玉女心经》之构图续章
一日不见，如隔三秋！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 转眼， 几十载光阴又呼啸而过， 仿若那白驹过隙， 不变的， 还是诸位对寡人的思念之情。https://img.zcool.cn/community/016d106062a46c11013e87f4c02169.gif 为了回应这份思念， 所以，我~又~来~啦！ 毕竟，受诸位思念情深， 一日不更，如坐针毡。https://img.zcool.cn/community/01ac9d6062a46c11013fb117a99372.gif 终于呀终于， 寡人通宵达旦的写完了这篇， 闲话少说，一起来修炼吧！！ 上篇构图文章完了后， 众爱卿都了解不同的构图形式啦， 但还有小伙伴私信问寡人，不知道具体怎样安排构图才比较合适~https://img.zcool.cn/community/01f84a6062a46c11013fb117d41f48.gif 寡人思量了几秒， 得出了结论，要做好构图满足三点即可~1.根据主体造型做构图 2.注意视觉引导 3.注意版面调性https://img.zcool.cn/community/01ac8d6062a46d11013e87f409a16b.jpg 咱先来看第一条，根据主体造型做构图。
来看问题，下面俩版面，哪个感觉更舒服？
https://img.zcool.cn/community/0135ff6062a46d11013e87f4500949.jpg 这个把标题放到右上角， 而下面的「C」把标题放到中间~https://img.zcool.cn/community/01c36e6062a46d11013fb117c161ef.jpg 这呀，就难选啦！毕竟AC都是很有诗意的名字！https://img.zcool.cn/community/010df86062a46d11013fb1178ba006.jpg 好吧，明眼人都知道「烟雨山岚 A」更适合， 原先的图片，左下角重，右上角空。https://img.zcool.cn/community/01850f6062a46d11013e87f41075af.jpg 换句话说就是， 主体位于版面左下角， 我们自然要在右上角加入标题， 组一个「对角线构图」！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01b73f6062a46d11013e87f4b957c4.jpg 这样一来，版面整体比较平衡~https://img.zcool.cn/community/011ce46062a46d11013fb117a5731a.jpg 而「江山如梦 C」， 文字放于中间， 但版面依然左边重，右边空， 没有平衡性！ 所以给人感受不太舒服~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 上面的例子虽然比较简单，但已经说明啦主体造型与构图的关系啦~ 简而言之就是， 哪里空就往哪里放文字， 一切都是为了让版面平衡舒适~https://img.zcool.cn/community/0184796062a46e11013fb1173103a1.jpg 下面放几个图考一下大家， 条件是不得挪动主体位置，旋转主体也是不可以哟~https://img.zcool.cn/community/0104e96062a46f11013e87f4c706b9.jpg 这个绝世侧颜，文字放哪里才比较合适嘞？ A.左下角 B.居中 C.右下角 聪明的你，肯定选对啦，https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0123b96062a46f11013e87f40613b1.jpg 画面只有左下角比较空旷， 文字自然要放到左下角，组一个对角线构图啦！！https://img.zcool.cn/community/01c3cd6062a46f11013fb11776b50c.gifhttps://img.zcool.cn/community/0151406062a46f11013fb117966e78.jpg 恭喜选「C」的爱卿， 你们答~错~啦，这题必须选「A」鸭！https://img.zcool.cn/community/01629d6062a46f11013e87f459033e.jpg 继续下一个题，https://img.zcool.cn/community/0118956062a46f11013e87f44e2272.jpg 向日葵的图片在下方，那么咱们文字应该放哪儿嘞？ A.上方 B.上方 C.上方 这题还用选咩？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png版面下方都被图片占完啦。 文字老哥是有苦说不出， 除了老老实实待在上面， 也无处可去，无家可归， 真的是小可怜本怜~https://img.zcool.cn/community/0163ca6062a47011013fb1174141bf.gif 所以这题，文字信息要放上面，组一个上下构图~ BUT， 就算知道啦是上下构图了， 不少爱卿可能会排成下面这个样子。https://img.zcool.cn/community/01ab4e6062a47011013fb11771bbfc.jpg 爱妃：“陛下说笑啦，哀家连这样的也排不出呀！” 寡人：“那朕得考虑给冷宫送点温暖啦~”https://img.zcool.cn/community/01ae926062a47011013e87f411bd2c.gif 上面文字都是居中对齐的排法~ 没什么大问题，但也不出彩， 中规中矩，按部就班， 传统且古板。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 很多爱卿都有此问题， 其实只要花点心思再去尝试下， 就能得到一个更别致的版面~ 比如把居中对齐打散，换成其他的对齐形式， 版面立马就会不一样咯！https://img.zcool.cn/community/01cc616062a47011013e87f4cb1687.jpg 像这个文字整体左对齐， 小标题放于右侧竖排。 「展」字也做了一点设计变化~ 给人的感觉就不像居中对齐似的古板啦！ 所以众爱卿要勇于尝试， 普通的版面跟别致一些的版面，可能就是千步之遥~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/011a556062a47011013fb11715f5be.jpg 那么， 像这个向日葵的版面， 还可以不可以更好嘞？ 当然可以啦， 寡人作为 苍茫大地之主宰， 浩浩乾坤之统帅， 浪荡天下、骚霸八荒， 让其更上一层楼，只需刹那之间~https://img.zcool.cn/community/01edd86062a47011013fb1173e5680.jpghttps://img.zcool.cn/community/01e9ee6062a47011013e87f4ceaae1.jpg 现在依然是上下式构图， 但主标题分为左右排开，其他信息居于中间， 设计感强了不少~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 所以同样的构图， 不同的文字编排形式，也会跟人不同的感受哟！ 也想达到寡人睥睨天下之功？ 那就尽情的尝试吧~https://img.zcool.cn/community/01acb56062a47011013e87f48b9ba5.jpg 尝试的多了，就会发现， 寡人真的不可超越~ 才怪！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 众爱卿乐于尝试，只会比寡人更强~ 加油干巴得~！ 再来看下个考题，这次咱搞点有难度的~https://img.zcool.cn/community/01d4056062a47111013fb1179a3e1b.gifhttps://img.zcool.cn/community/0181276062a47111013fb117c43852.jpg 血红色的银杏叶，文字应该放哪里嘞？ “禀告陛下，臣不会！”https://img.zcool.cn/community/0172586062a47111013e87f43ec540.png 嘿~！刚才一处留白，众爱卿都木得问题， 怎么变成两处留白就不会了嘞？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 其实也是换汤不换药， 图中两处留白， 咱把文字放置于两处留白中就阔以啦！ 一般排法就是， 一处放标题，一处放正文。 那么问题来啦，究竟哪里放标题，哪里放正文呢？ 既然没经验，那就试呗~ 多尝试，总没问题~https://img.zcool.cn/community/0124ac6062a47111013e87f4be39e2.jpg 银杏叶下边的空间比较大， 刚好适合放大标题，很 Nice 吧！https://img.zcool.cn/community/01ba106062a47111013fb117f251a6.gif 那么我们再试试把标题放另一处留白可不可行~https://img.zcool.cn/community/01edbf6062a47111013fb117e56a0f.jpg 标题挡住了图片的焦点， 银杏叶是这个主体最精彩的部分， 但现在被文字挡住过多， 且银杏叶下方的留白大了~ 整体的感觉就差了不少耶！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 要改变也很简单，只需要把银杏叶下移就阔以啦，https://img.zcool.cn/community/01c0ca6062a47111013e87f4963ffc.jpg 现在只挡住一丢丢银杏叶，问题不大， 版面木得问题~ 但咱们之前说过，硬性条件是不得移动或旋转主体（还不是为了锻炼大家~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）。 在此种条件下， 那必须还是第一个标题在下，正文在上的比较合适。https://img.zcool.cn/community/0129d86062a47211013e87f41a919c.gif 再看此题， 这个人物图片， 画面中留白较少， 加文字该加在哪儿嘞？https://img.zcool.cn/community/0174126062a47211013fb11779495b.jpg 这种绝对留白比较少的，我们就要看虚实变化啦！ 虚就是虚化的部分，实就是聚焦的部分。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 像这个人物照片，聚焦部分在脸部和手部， 而身体靠下的地方是虚化的！ 所以要加文字， 肯定加到下面没对焦的地方比较好~https://img.zcool.cn/community/017dc36062a47211013fb117949233.jpg 花了两分钟，字体设计也搞了一哈~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 其实上面银杏叶的案例，跟这原理相通， 重要的地方肯定就是聚焦的地方~ 而这些地方，一般是不能挡住太多的， 而虚化的地方，不那么重要， 咱就可以放置文字或其他元素来丰富细节~https://img.zcool.cn/community/01420c6062a47211013fb117fdcc1c.jpg 接下来来个挑战， 看看这条鱼，咱们可以怎么排？https://img.zcool.cn/community/01c1ab6062a47211013e87f48f0216.jpg 这条鱼在版面中间偏上，且四周留白很大， 根据鱼做居中构图肯定是阔以滴~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 不过说到居中构图，大部分爱卿会中规中矩的排。https://img.zcool.cn/community/0124766062a47211013e87f447f199.jpg 虽然没问题，但多去尝试， 机缘巧合之下便会羽化登仙，排的更为别致哟~https://img.zcool.cn/community/0110976062a47211013fb117ec69ef.jpg 这里仅是将主标题换了种排法， 设计感就增加了不少！https://img.zcool.cn/community/011a1c6062a47311013e87f4d9a2a3.jpg 当然啦，因为鱼下面空间空间比较大， 所以做成上下式构图也是没问题的~https://img.zcool.cn/community/01a6e26062a47311013e87f494ab6f.jpg （不愧是喵妃，好棒棒哟~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png） 众爱卿这么聪慧， 肯定能想到这两种构图形式， 但实际上， 鱼两侧还是有很大的空间~ 若想要更好的利用版面， 咱就得把鱼两侧的空间也利用咯， 所以这里也可以排成四角式构图或包围式构图， 传达的信息更大更饱满， 肯定是棒上加棒！https://img.zcool.cn/community/0132ae6062a47311013fb11771419f.jpg 四角式构图，文字放于鱼后， 下面区域摆放详细信息，很Nice吧！https://img.zcool.cn/community/0104c66062a47311013fb117892b3f.jpg 包围式构图， 加入线框元素，做一个复古的风格~ 鱼跟后面的网格做出空间感， 详细信息放于下方， 也Nice！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 通过上面的例子说明了，构图并不是只有一种解法， 同样的主体位置关系，也可以有几种构图形式哟~https://img.zcool.cn/community/01ee916062a47311013e87f41aedd2.gif 上面几个例子还是在不能挪动、旋转主体的硬性条件下~ 如果主体可以挪动、改变位置，那么可尝试的操作就更多啦！ 主体挪到左边，文字便可放到右边； 主体挪到下边，文字便可放到上边， 但不管主体位置怎么改变， 根据主体来构图都是不变的原则哟~https://img.zcool.cn/community/01a84d6062a47311013e87f4a3ca26.jpg 接下来咱们看第二条，注意视觉引导
这个视觉引导，主要指的是图文之间的引导~https://img.zcool.cn/community/01f9d86062a47311013fb11762c0a9.jpg 比如上篇文章中，周杰伦《叶惠美》的专辑海报~https://img.zcool.cn/community/015c266062a47411013fb117c24c3b.jpg 本身照片就是个十字形构图，文字顺着这个构图方向来排， 能起到很好的引导阅读的作用~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 接下来咱们看个问题，下面俩版面，哪个感觉更舒服？
https://img.zcool.cn/community/01fea46062a47411013e87f4ce362d.jpghttps://img.zcool.cn/community/0136ac6062a47411013e87f4ed0f1b.jpg 这还用说嘛，一看就是「A」呀！ 毕竟「目光所致，皆是深情」，就跟本喵的特质一样！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 而「C」呢， 相看两厌，一别两宽， 这一听就不是撒子好事呀！ 所以，就算「C」再舒服，俺也不选！哼╭(╯^╰)╮https://img.zcool.cn/community/012b5e6062a47411013fb1177e2c7c.gif 寡人碍于众爱卿的皮鞭，就认真讲解吧！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 两者都是左右构图的结构， 但人物的朝向是不一样滴。https://img.zcool.cn/community/017e3a6062a47411013fb117741bac.jpg 「A」顺着人物的面向，视觉刚好会流向主标题， 这不就引导大家伙儿看向了关键信息嘛~ 这是比较舒服的视觉引导！https://img.zcool.cn/community/012a256062a47411013e87f424f61f.jpg 而「C」，这家伙跟标题相看两厌， 背对标题，懒得多看一眼！ 那我们的视觉流向，通常会顺着人物朝向跑到版面外面！ SO，「C」的视觉引导不如「A」舒服！ 自然就「目光所致，皆是深情A」更好啦！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 当然啦，像这种背对标题的形式并非绝对不能用~ 想要表现距离感、落魄、无助等感受， 还是可以适当运用的~ 只不过它的视觉引导性不如面面相觑的形式。 接下来，咱同样考一下大家~https://img.zcool.cn/community/01d3f36062a47511013e87f4455927.jpg 上篇文章中这个案例， 为何把人物放到左上角，而不是右上角嘞？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 聪明的你们，肯定晓得啦！ 人物向右下方低头，放左上角，刚好可以看到右下角的字鸭~ 这不就是妥妥的视觉引导咩！！https://img.zcool.cn/community/013cd76062a47511013fb117ee12e2.jpg 如果向这个一样，放到右上角~ 那我们顺着人物的目光看下去， 是一片寂寞， 视觉引导肯定就不好咯！https://img.zcool.cn/community/01fae86062a47511013fb1176f3179.jpg 所以，众爱卿在安排版面构图与布局时， 视觉的引导也要好好思考哟！ 再看下面问题~https://img.zcool.cn/community/01b3756062a47511013e87f48085b6.jpg 这张窈窕淑女，咱应该怎么去排嘞？ 相信不少爱卿会选择上下式构图， 此图人物脸部为聚焦部分，下面为虚化部分， 用上下式构图肯定是木得问题的！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 但要排的更巧妙，就要运用图片本身的光影进行视觉引导~https://img.zcool.cn/community/01f2826062a47511013e87f463d9ff.jpg 图片的光影，刚好是十字形轴线， 我们便可以根据这条十字轴，按视觉引导进行编排~https://img.zcool.cn/community/01ff096062a47511013fb11793f0c3.jpg 如此一来，版面与图片的关系会更巧妙哟！https://img.zcool.cn/community/01bcbd6062a47511013fb117affe3a.jpg 最后，咱们看一下第三条，注意版面调性！
版面调性其实就是版面气质， 而决定版面气质的， 就是咱这套功法前几章所讲的， 跳跃率、图版率、版面率、留白等。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 好的版面和构图， 自然是要考虑其本身所传达的气质的！https://img.zcool.cn/community/01d3146062a47511013e87f4aae8a8.jpg 拿向日葵的海报来说~https://img.zcool.cn/community/0144df6062a47611013e87f4babddd.jpg 肯定是「热烈阳光 C」的感受更好~ 不少爱卿也都能看出「C」更好、更舒服， 却说不出个所以然来~ 毕竟「A」的排版也没问题， 那为啥「C」更好嘞？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 当然是因为， 他更贴合主题气质啦！ 首先，标题是盛开、盛夏， 让人联想到的肯定是热烈、热闹~ 而整个版面的配色也非常热烈的， 红黄暖色调，非常温暖~ 那么我们在编排上就应该强调这种热烈、活泼的感觉！https://img.zcool.cn/community/0136366062a47611013fb1170cf227.jpg 「高冷寂寞 A」的留白太大，跳跃率也不够， 所以虽然排版细节没问题， 但热烈、活泼的感受却不强~https://img.zcool.cn/community/0123d86062a47611013fb117a56495.jpghttps://img.zcool.cn/community/0170776062a47611013e87f4bff89b.jpg 而「热烈阳光 C」，文字跳跃率非常大， 并且缩小了留白面积，让图片本身「热烈、活泼」的气质更强烈，自然更棒！https://img.zcool.cn/community/01d4a66062a47611013e87f4402960.png 所以说，气质调性这块， 也是在构图时就应该考虑的~ 具体的天地法则， 寡人所胡编乱造的《玉女心经》前几篇都有， 这里就不再概述啦~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 不过值得一说的是， 除了像上面例子「向日葵」气质强烈的项目， 也有气质不强烈的项目~ 那么对于气质不强烈的项目， 我们设计师需要根据自己的理解赋予它气质！ 到底是用简约的，还是用热烈的？ 取决于我们自己哟！ 比如「鱼游万里」的例子，https://img.zcool.cn/community/0181846062a47611013fb117bdbb63.jpg 可以运用法则让他有格调、高冷一点~https://img.zcool.cn/community/01620c6062a47611013fb11789add6.jpg 也可以让其饱满、有活力一点！ 具体要表现哪一点，就看诸位自己的理解与感悟啦~ 在这种气质不强烈的项目中， 我们是导演，是设计的主宰， 在设计中，天地与我们幷生， 我们，赋予设计灵魂！https://img.zcool.cn/community/01141e6062a47711013e87f4086fa0.jpg 兜兜转转，又是4500字啦~ 这篇，寡人主要讲了一下， 自己对于构图和版面的理解， 不晓得众爱卿修炼的如何啦~https://img.zcool.cn/community/0114bd6062a47711013e87f42eb1b0.jpg 那么今天就到这儿啦~ 众爱卿，下期不见不散！https://img.zcool.cn/community/0123786062a47711013fb117fec723.jpg 虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把构图细节说清楚， 所以各位大佬，留言告诉寡人吧！ 彼岸花常在，离歌一曲，肝肠寸断~
页:
[1]