有人问过我模仿和抄袭最大的不同是什么，我认为模仿是学习，注重的是过程，能让自己在从中有所收获，不是用来让别人看到的。抄袭是目的，注重的是结果，让自己完成任务、获得虚荣、解决眼前的一些问题，但是会有几个人在完成任务的时候真正沉下心去研究过你所借鉴的图片呢…… 这次的版式从最基本的大配图应用讲起，大配图是版式中极为常见的应用类型，让配图和其他元素合理共存，是这种版式 需要解决的难点。 [align=center][img=山岩ps小课堂28-1_02.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/37HjzHxS_T5Q6.jpg[/img][/align] 关于几何法我们上一期已经讲过，就不去赘述了，这次的版式结构从大框架来说是相对简单的，需要注意的细节部分是[color=#FF0000]每一个元素之间的距离控制[/color]，这个会在下边的参考线部分做更细致的说明。 [align=center][img=山岩ps小课堂28-1_04.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/V8myTbwS_DVPB.jpg[/img][/align] [b]使用条件：[/b]文案内容以短文段形式为主（比如介绍有几个功能，有哪些材料等）搭配主体图片或体现文案内容的图片。这种版式比较常用于页面的中上部分，尤其是在[color=#FF0000]介绍产品属性[/color]时极为常见，由于内容表达简单易懂（文字部分、配图部分罗列明确），是思路短缺的时候非常好用的[color=#FF0000]应急版式[/color]类型。 [b]版式特点：[/b]版式的核心特点是[color=#FF0000]贯穿画布两侧的大配图[/color]的应用。由于版式结构简单明确，配图的大小、质量都会对图片产生直观的视觉影响。 [b]注意细节：[/b]①只要涉及到配图的应用，第一个想到的就必须是[color=#FF0000]清晰度[/color]的问题。清晰度的好坏直接影响对图片的第一感官，设计师一定要养成使用高清图片的习惯。 [align=center][img=山岩ps小课堂28-1_06.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/sq2A9Mka_xbWq.jpg[/img][/align] ②配图的应用一定要注意[color=#FF0000]视觉重心[/color]的把握，视觉重心是当前配图的重点区域，我们要通过合理的方式让观者的[color=#FF0000]第一视觉点[/color]集中到这个位置上，让配图的展示价值最大化。[color=#FF0000]三等分线[/color]的应用是最常见的视觉重心的确定方式，只需要把要表达的重心区域放到三等分线的交界处即可。在自定义形状、裁剪工具中都能找到三等分线。下图中，相对于第一张图，第二张图的看起来更有意境，构图也更美观。 [align=center][img=山岩ps小课堂28-1_08.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/9brWYHhD_8HS3.jpg[/img][/align] 除了三等分线之外，我们也经常会用到[color=#FF0000]黄金比例[/color]去确定视觉重心，例图中狮子眼睛的位置就是在两条黄金比例线的交界处。 [align=center][img=山岩ps小课堂28-1_10.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/pUMfPrV6_7gvj.jpg[/img][/align] 黄金比例是1:0.618，所以我们在制作参考线的时候单位改成[color=#FF0000]百分比[/color]，水平和垂直各自做两条61.8%和38.2%的线就可以确认出画面中的黄金比例位置。 [align=center][img=山岩ps小课堂28-1_12.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/p5gzOQBP_M59F.jpg[/img][/align] ③配图的应用要注意配图的[color=#FF0000]整体色调[/color]与整个图片表达主题的关系，偏向于柔和的主题尽量[color=#FF0000]明艳一些[/color]，偏向于刚硬的主题尽量[color=#FF0000]暗淡一些[/color]。旅游是一种放松活动，倾向于柔和，配图的用色可以明亮饱和，体现愉悦性、舒适感。 [align=center][img=山岩ps小课堂28-1_14.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/Dvrcr5Za_n5LN.jpg[/img][/align] 电子竞技激烈刺激，倾向于刚硬，配图的用色可以低保和高对比，体现紧张感。 [align=center][img=山岩ps小课堂28-1_16.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/OmTrgKyZ_6MDH.jpg[/img][/align] ④配图要在[color=#FF0000]美观度和质感[/color]上做好把控，常言道作图五分钟，找图俩小时，对自己的配图质量高标准，是设计师对自己的作品应当保持的一种正确态度。假设某个产品的属性中，就要介绍有青苔的参与，同样都是青苔的照片，质量差异显而易见。 [align=center][img=山岩ps小课堂28-1_18.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/DJdwyDDb_uHPb.jpg[/img][/align] ⑤配图在追求美观的同时一定不能忽略[color=#FF0000]表达的主题[/color]，如果当前版块的目的就是展示产品的整体外观，那么即便图片再美观，我们也不能选择表达功能性，或者展示细节的图片。 [align=center][img=山岩ps小课堂28-1_20.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/arJOBNqI_DICw.jpg[/img][/align] [b]配色思路：[/b]上一篇提过，配色要先从主体的感官属性出发，选择[color=#FF0000]两个[/color]主要用来搭配的颜色，当前版式的目的是体现狮王的威严，从这个角度出发黑色是最好的选择，所以另外一个颜色要从与黑色相搭的颜色中选择。 ①黑色常用的配色有[color=#FF0000]红色、黄色和白色[/color]。 ②红色与黑色的搭配往往能使画面更加深沉，有厚重感、历史感、压迫感，所以很多武侠类网游页面都会选择这种配色关系，不过因为红色最主动的颜色属性，很[color=#FF0000]容易喧宾夺主[/color]，而当前图片是想让狮子作为第一视觉切入点，所以红色可以舍弃。 ③黄色具有警示作用，是很多告示牌经常选择的颜色，表达危险性是可以，但是由于黄色是活跃色，[color=#FF0000]压不住氛围[/color]，狮子的威严感表达不出来，所以也可以舍弃。 ④黑白搭配既能满足狮子的第一视觉点，也能以黑色为主体现威严感，所以这里选择白色会比其他颜色更合适。（这里一定要强调，红色或黄色搭配在这里不是说不行，不好看，而是[color=#FF0000]不合适[/color]，颜色只要搭配得当都不会难看，但是跟整体的主题符不符合就要看设计师的把控和理解能力）。 [align=center][img=山岩ps小课堂28-1_22.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/GpNtKJSV_XOGy.jpg[/img][/align] [b]网格思路：[/b]当前图片的制作依然选择20列网格的方式，这里重点要说的是高度部分的应用，由于网页制图的特殊性，我们相对于平面来说对于高度的定义会更加自由，平面的宽高尺寸很多都是限定的，而网页大部分是宽度限定，而高度是可以自由发挥，也就是说我们可以自上而下控制元素们的距离，最后再确认画面高度(这个方法在平面领域也可以使用，对于版心的确认放到最后一步即可）。 ①以两个列宽为主画一个正方形来确认当前版式的[color=#FF0000]高度基准[/color]。 [align=center][img=山岩ps小课堂28-1_24.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/BDSZ32TI_ID9A.jpg[/img][/align] ②配图的高度以这个基准为单位，结合文案内容的多少可以定出大致的范围，当前板块文案数量适中，配图和文案的占用面积大致相似，所以把配图的高度定义到画布中心左右即可，尽量保持与[color=#FF0000]高度基准的倍数关系[/color]（这里是三倍高度）。狮子的位置上边提过可以通过黄金比例确认，其他文字可以以相应的参考线为基准摆放(这里只是粗略的摆放，后边会再精细操作）。 [align=center][img=山岩ps小课堂28-1_26.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/QOrDWxuc_OTPB.jpg[/img][/align] ③文段上方如果离配图底部一倍的高度基准会显得比较疏远，所以通过保持比例关系，这里选择[color=#FF0000]二分之一[/color]的高度基准。文段下方到版块的底部可以留出一倍的高度基准，如果版块之前的预留高度超过了这个部分，裁掉即可。这里要解释一下，为什么文段离上方是二分之一，离下方是一倍关系，由于整个版式上半部分体积是比较大的，如果底部的收尾太过快速，会[color=#FF0000]增强头重脚轻[/color]的感觉，所以这里选择了以一倍大小的方式让视觉延伸出去，弱化头重脚轻的视觉效果。 [align=center][img=山岩ps小课堂28-1_28.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/44wDKd6W_IsKS.jpg[/img][/align] ④文段下方保留1倍大小虽然能缓解头重脚轻，但是由于空间太大会显得很空，这种时候比较常用的方式就是可以[color=#FF0000]选择一些装饰方式进行空间的补充[/color]，所以原图的横线就出现在了二分之一处。横线的宽度大于文段的宽度，与上方配图一起包裹住文案部分，让视线更容易集中到文段上。 [align=center][img=山岩ps小课堂28-1_30.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/aKO3qzhN_RNhs.jpg[/img][/align] 这是这张图片的最终参考线效果，版式的魅力也在于此，一张看似简单的图片，制作的过程中有着设计者诸多的思考和探索，图片中看似不经意的小形状、小线条，都有它存在的价值和用意，[color=#FF0000]存在即合理[/color]——这是我认为版式最有意思的地方。 [align=center][img=山岩ps小课堂28-1_32.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/HPp6H4d4_5FgT.jpg[/img][/align] 标题部分文字的行距跟上一篇文章一样，是以[color=#FF0000]小字的高度[/color]为单位确认的。 [align=center][img=山岩ps小课堂28-1_34.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/QrMJtfPW_2pLN.jpg[/img][/align] [align=center][img=山岩ps小课堂28-1_35.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/x2UG2uVQ_Mt4m.jpg[/img][/align] [b]延展思路：[/b]当前版式的核心特征是贴合画布两侧的大配图使用，所以[color=#FF0000]贴合画布[/color]和[color=#FF0000]大配图[/color]都可以作为延展的点去思考。 [b]延展方式：[/b] ①在做延展的时候，尝试[color=#FF0000]位置变化[/color]是很好的思维方式，如果保留配图贴合画布两侧的特点，可以从上、中、下、左、右五个方向做位置的调整。 [align=center][img=山岩ps小课堂28-1_37.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/LMrQbvyh_JKZJ.jpg[/img][/align] ②配图贴合画布两侧的特点，我们可以[color=#FF0000]弱化[/color]它，让配图跟画布四周都不贴合。 [align=center][img=山岩ps小课堂28-1_39.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/Bac2EQN8_meMu.jpg[/img][/align] 也可以[color=#FF0000]强化[/color]它，让配图填充整个画布，把文案摆放到配图内侧。 [align=center][img=山岩ps小课堂28-1_41.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/TfsHCKOz_GnOD.jpg[/img][/align] 文案底部也可以[color=#FF0000]增加框架[/color]，让文字更加突出。 [align=center][img=山岩ps小课堂28-1_43.jpg]http://bdn.135editor.com/files/users/417/4174976/201806/hVfkgxAn_ZeNN.jpg[/img][/align] 结合上一篇的内容，我们还可以通过[color=#FF0000]点、线、面、形状轮廓变化[/color]等对大配图进行更多的延展处理，篇幅关系就不一一演示了，如果不清楚，可以结合上一篇文章的延展部分进行理解。下一篇我们会在大配图应用的基础上再增加一个元素的切入点，让版式变得更加丰富。我希望能够通过一个系统、有序的讲解，让大家对版式有更好的理解，尤其在思维上能有一个好的突破，再次感谢大家多年的支持与厚爱。