2.4对比原则
在设计中我们常常会运用到对比，对比原则也是为页面增加色觉效果的最有效途径之一，并且很容易吸引读者去阅读。
2.4.1 什么是对比
如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别不是很大，那么你做出的效果并不是对比，而是冲突，对比原则是指如果两个元素不完全相同，就应当使之不同，而且应当是截然不同。运用对比原则可以在不同元素之间建立一种有组织的层次结构，并且还有一个重要原则：要想实现有效的对比，那么对比就必须强烈，千万不能畏畏缩缩。
2.4.2 对比例子分析
下面我们将通过网页设计的3种布局方式来详细分析对比原则所要注意的相关问题。
案例分析一
下面我们来看一款网页设计，如图2-225所示。这是为设计公司制作的企业网站，但是不管是画面上的文字还是图片中的文字都没有突出的效果，显得单调而呆板；网页的表现形式应是活泼多样的，而这样的画面无论是色调还是版式都没有说服力。
图2-225
你觉得客户会选择这款网页吗？显然不会！
找出问题
第1点：当你打开链接看到这样的网页时会是什么感觉？色调单一，而这又不是最大的问题，最大的问题是下面的两排文字，文字样式和大小一样，排列方式也一样，如图2-226所示，毫无对比，读者能看出导航在下面吗？
图2-226
第2点：整个画面由一张图和几段零落的文字组成，但是图片的意义并不大，谁也看不出来网站到底是做什么的，画面缺乏一个大的标题。
案例分析二
现在来换下画面的布局，将之前的大图置于中下方，上面列出了企业的服务项目，并变化了导航的位置，如图2-227。
图2-227
你觉得客户会选这款网页吗？我觉得依然不会。
找出问题
第1点：这张画面感觉比上一张要好一点，但是依然存在问题，虽然将导航的位置上移了，但是导航和正文的字体样式、大小几乎没有差异，很难突出重点。
第2点：主题中突出了设计二字，但是字体太过呆板，对比不够强烈，且好像悬挂在画面上，与画面不相容，而正文的文字对比太弱，如图2-228所示。我想除非读者对这些内容非常有兴趣，不然没有人愿意去阅读这一段繁琐的文字。
图2-228
案例分析三
画面经过再次调整，将不同的元素进行区分，建立对比性，这样就可以很好地解决上面两个案例所犯的错误，如图2-229所示。
图2-229
在读者第一眼看到这个网页时，至少会因为画面的视觉效果而产生阅读的兴趣。
成功原因
第1点：对比是为页面增加视觉效果最有效的途径之一，很容易吸引读者去看一个画面，对比还能在不同元素之间建立一种有组织的层次结构。
第2点：如果两个元素不同就会产生对比，倘若两个元素存在某种不同，但差别并不是很大，那么你做的效果并不是对比，而是冲突；所以如果两个元素不完全相同，就应当使之不同，而且应当是截然不同，这是突出重点的最好方式。
第3点：上面两个画面就是缺乏对比，图片的大小和样式相差不大，文字的颜色、大小几乎都一样，没有突出重点，让读者在浏览时很难捕捉到有效信息。
技术专题：在实际设计作品时运用对比原则
在实际设计中，我们可以运用到很多元素的对比原则。比如大字体与小字体的对比、典雅oldstyle字体与粗体sanaserif字体的对比、细线与粗线的对比、冷色与暖色的对比、平滑材质与粗糙材质的对比、水平元素与垂直元素的对比、间隔很宽的文本行与紧凑在一起文本行形成的对比、小图片与大图片形成的对比。
值得注意的是：不要使用12点大小的字体与14点大小的字体进行对比，也不要使用0.5点的线与1点的线进行对比。此外，相近的颜色也不适合进行对比，比如黑色和深棕色进行对比，也是不合适的。
2.4.3 对比原则总结
人们总是喜欢看到有对比的事物，如果页面上放了两个不完全相同的元素，比如两种不同的字体或者两种不同的线宽，这样才能有效地吸引人们的眼球。值得注意的是：要实现有效的对比，这两个元素就必须截然不同。
对比的根本目的有两方面，这两方面相辅相成，无法分开。一个目的是增强页面的效果，另一个目的是有助于信息的组织。对比元素不能让读者混淆，也不能错误地强调。
疑难问答：
Q:
如何实现对比原则以及需避免的问题是什么？
A:
实现对比原则可以通过字体的选择、线宽、颜色、形状、大小、空间等来增加对比的效果。对比的途径有很多，当然最终的目的都是为了增强画面的视觉效果，而且对比必须强烈。
在运用对比原则时，要避免以下3个问题。
第1个：不要将一种粗线与一种更粗的线进行对比。
第2个：不要将棕色的文本与黑色的标题建立文本。
第3个：要避免使用两种或多种类似的字体。
如果在作品中使用了对比原则，那么在使用不同元素的时候，干脆就让它们截然不同！
2.4.4 实战：设计食品宣传单
项目背景分析
本例要制作的是一款食品宣传单设计，运用了具有纹理质感的背景，使用对比原则进行文字的排版设计，添加一些带有健康元素的食物素材，淋漓尽致地表现了该幅作品所要表达的内容，使作品整体体现出简洁大方的风格。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
下面我们来看一款食品宣传单广告，如图2-230所示。这是为一家快速便利店设计的宣传单，在这幅设计作品中很明显运用到了居中对齐的原则，但是信息放置过于分散，在字体的使用上没有突出重点信息，读者无法辨别出哪个是主要文字，哪个是讲解文字，这是所犯的致命错误，所以看起来杂乱无章，没有秩序感。
图2-230
方案二
我们进行了较大的调整，将主体文字与次要文字信息进行了对比，并且使用对比色作为底色来突出文字，但是次要文字的摆放没有设计感，使整体的视觉效果缺少了活跃感，降低了作品的视觉效果，如图2-231所示。
图2-231
方案三
我们重新设计了主体文字的方向，并且重新选择了下方次要文字的字体选择，使整体效果更具有设计感，下方使用圆形图像作为铺底，设计文字按照圆形图像的外形进行摆放，增加了活泼感，圆形图案中的文字使用了大小不一的字号进行摆放，运用到了设计中的对比原则，使整个作品中的文字既具有活泼感又简洁大方，如图2-232所示。
图2-232
项目制作流程
寻找合适背景
选择具有纹理的背景，使整个作品更具有质感。
01导入光盘中的“素材文件>CH02>素材2-41.jpg”文件，效果如图2-233所示。
图2-233
02导入光盘中的“素材文件>CH02>素材2-42.jpg”文件，然后设置该图层的“混合模式”为“正片叠底”，接着按Ctrl+J组合键复制一个副本图层，效果如图2-234所示。
图2-234
03导入光盘中的“素材文件>CH02>素材2-43.png”文件，效果如图2-235所示。
图2-235
04导入光盘中的“素材文件>CH02>素材2-44.png”文件，然后将“生菜”图层移动到“食物”图层的下方，接着执行“图层>图层样式>内阴影”菜单命令，打开“图层样式”对话框，最后设置“混合模式”为“叠加”、阴影颜色为白色、“不透明度”为80%、“距离”为5像素、“大小”为25像素，如图2-236所示。
图2-236
05在“图层样式”对话框中单击“投影”样式，然后设置“不透明度”为45%、“距离”为15像素、“大小”为35像素，如图2-237所示，效果如图2-238所示。
图2-237
图2-238
06在“图层”面板下方单击“创建新的填充或调整图层”按钮
，在弹出的菜单中选择“色相/饱和度”命令，然后在“属性”面板中设置“饱和度”为20，如图2-239所示，效果如图2-240所示。
图2-239
图2-240
07导入光盘中的“素材文件>CH02>素材2-45.psd”文件，然后调整好图层的位置，效果如图2-241所示。
图2-241
08导入光盘中的“素材文件>CH02>素材2-46.png”文件，然后执行“图层>图层样式>投影”菜单命令，打开“图层样式”对话框，接着设置“不透明度”为35%、“距离”为40像素、“大小”为12像素，如图2-242所示，效果如图2-243所示。
图2-242
图2-243
添加文字元素
添加具有底色的文字效果，使文字的视觉效果更加明显。
01新建一个图层，然后使用“钢笔工具”
绘制一个合适的路径，接着设置前景色为（R：111，G：20，B：62），并使用前景色填充该路径，最后使用“横排文字工具”
（字体：Goya）在画面上输入文字信息，效果如图2-244所示。
图2-244
TIPS
字体的颜色为（R:242，G:200，B:53），而且使用了冷色与暖色的对比原则。
02继续使用“横排文字工具”
在画面上输入文字信息，然后执行“图层>图层样式>投影”菜单命令，打开“图层样式”对话框，接着设置“距离”为2像素，如图2-245所示，效果如图2-246所示。
图2-245
图2-246
03设置前景色为（R：9，G：51，B：0），然后使用“横排文字工具”
在画面上输入文字信息，接着调整好方向和大小，效果如图2-247所示。
图2-247
04导入光盘中的“素材文件>CH02>素材2-47.png”文件，如图2-248所示，然后使用“椭圆工具”
在图像的左下角绘制一个白色的圆形，效果如图2-249所示。
图2-248
图2-249
05确定当前图层是形状图层，然后执行“图层>图层样式>渐变叠加”菜单命令，接着单击“点可按编辑渐变”按钮
，在弹出的“渐变编辑器”对话框中设置第1个色标的颜色为（R：1，G：40， B：3）、第2个色标的颜色为（R：82， G：89，B：6），如图2-250所示，最后返回图层样式对话框中设置“缩放”为150%，如图2-251所示。
图2-250
图2-251
06在“图层样式”对话框中单击“外发光”样式，然后设置“混合模式”为“叠加”、“不透明度”为35%、“大小”为44像素，如图2-252所示，效果如图2-253所示。
图2-252
图2-253
07使用“横排文字工具”
在左下角输入文字信息，最终效果如图2-254所示。
图2-254
2.4.5 实战：设计教师节海报
项目背景分析
本例要制作的是一张教师节海报。不管是在室内还是在室外，海报随处可见。此例主要针对的人群是学院广大师生，整体色调比较稳重但又不能过于呆板，让人有耳目一新的感觉。不同的文字能营造出不同的感觉，文字的选择是本案例的重要因素，所以画面利用文字对比和元素对比制作效果，以达到最好的视觉浏览效果。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
下面我们来看一下海报设计，如图2-255所示。这张海报运用最简单的版式和最普通的文字，底色较轻，文字为白色，两者对比太弱，教师节的主题文字不够明显，很难吸引读者的眼球。
图2-255
方案二
下面的做了一些改变，色彩相对要丰富一些，在主题文字的效果上做出了改变，具有立体感，突出了主题，但是下面的文字还是过于规矩，不能让读者快速地抓住有效信息，在字体的选择和颜色上有待调整，如图2-256所示。
图2-256
方案三
这是再次调整后的海报，将底色加深，主题文字增加背景，更加突出立体化效果，同时把正文部分文字进行调整，大小对比，凸显重点，适当添加点缀元素，在视觉上和内容上都更加出彩，如图2-257所示。
图2-257
项目制作流程
制作背景
海报的第一印象应该是突出，有质感，能在第一眼抓住读者的视线，此款教师节海报通过对比原则制作出具有冲击力的视觉效果。
01启动Photoshop CS6，按Ctrl+N组合键新建一个“教师节海报”文件，具体参数设置如图2-258所示。
图2-258
02新建一个“底色”图层，然后选择“渐变工具”
，接着打开渐变编辑器，设置第1个颜色的色标为（R：32，G：131，B：155）、第2个颜色的色标为（R：31，G：55，B：57），最后使用径向渐变拉出渐变色，如图2-259所示，效果如图2-260所示。
图2-259
图2-260
03新建一个“提亮”图层，然后使用“椭圆选框工具”
绘制出一个圆形选区，接着设置前景色为白色，并用前景色填充选区，效果如图2-261所示。
图2-261
04执行“滤镜>模糊>高斯模糊”菜单命令，然后在“高斯模糊”对话框中设置“半径”为135像素，如图2-262所示，效果如图2-263所示。
图2-262
图2-263
05使用“横排文字工具”
（字体：华康简综艺体）在绘图区域中输入文字，效果如图2-264所示。
图2-264
TIPS
这里选择华康简综艺体的主要原因是此字体偏活泼而不失稳重，能更好地搭配画面的风格。
06单击“创建文字变形”按钮
，然后在弹出的“变形文字”对话框中设置“样式”为“扇形”、“水平扭曲”为7%，具体参数如图2-265所示。
图2-265
TIPS
在做文字变形效果时需在文字输入状态。
07单击“添加图层样式”按钮
，在弹出的菜单栏中选择“投影”命令，然后在“投影”对话框中设置阴影颜色为（R：6 6，G：6 4， B：65）、“角度”为120°、“距离”为8像素、“大小”为8像素，具体参数设置如图2-266所示，效果如图2-267所示。
图2-266
图2-267
08新建一个“阴影”图层，然后使用“钢笔工具”
绘制出一个字体阴影路径，接着按Ctrl+Enter组合键将路径转化为选区，效果如图2-268所示。
图2-268
09选择“渐变工具”
，然后打开渐变编辑器，设置第1个颜色的色标为（R：252，G：72，B：127）、第2个颜色的色标为（R：81，G：19，B：34），接着使用线性渐变拉出渐变色，如图2-269所示，效果如图2-270所示。
图2-269
图2-270
10使用相同的方法制作其他文字阴影效果，效果如图2-271所示。
图2-271
立体化文字效果
立体化能够塑造出三维效果，使海报更具有视觉冲击力。
01选择“教师节”图层，按Ctrl+J组合键复制出一个副本图层，然后选择“黄色阴影”图层，按Ctrl+J组合键复制出一个副本图层，接着按住Ctrl键同时选中两个副本图层，按Ctrl+E组合键合并为“倒影”图层，最后按Ctrl+T组合键进入自由变换模式，单击鼠标右键，在弹出的菜单中选择“垂直翻转”命令，效果如图2-272所示。
图2-272
02确定当前图层为“倒影”图层，单击“添加图层蒙版”按钮
，然后选择“渐变工具”
，接着在渐变编辑器中设置第1个颜色为白色、第2个颜色为黑色，最后使用线性渐变按照从上到下的方向为蒙版填充渐变色，如图2-273所示，效果如图2-274所示，完成后设置“倒影”图层的“不透明度”为60%，效果如图2-275所示。
图2-273
图2-274
图2-275
03新建“彩虹”图层，然后使用“钢笔工具”
绘制出彩虹路径，接着按Ctrl+Enter组合键将路径转换为选区，最后使用渐变工具
，打开渐变编辑器，设置第1个颜色的色标为（R：104，G：248，B：161）、第2个颜色的色标为（R：40，G：163，B：90），再使用径向渐变拉出渐变色，如图2-276所示，效果如图2-277所示。
图2-276
图2-277
04在“彩虹”图层单击“添加图层样式”按钮
，在弹出的菜单栏中选择“投影”命令，然后在“投影”对话框中设置“角度”为120°、“距离”为7像素、“大小”为10像素，具体参数设置如图2-278所示，效果如图2-279所示。
图2-278
图2-279
05使用以上方式制作出其他效果，如图2-280所示。
图2-280
06使用“横排文字工具”
在绘图区域中输入“致礼恩师”，然后选择适合的字体和大小，接着使用相同的方法制作出所有文字，效果如图2-281所示。
图2-281
07导入光盘中的“素材文件>CH02>素材2-48.png”文件，然后调节好大小与位置，最终效果如图2-282所示。
图2-282
2.4.6 实战：设计街舞户外广告
项目背景分析
本例要制作的是一张舞蹈表演的户外广告，浏览人群是非常广泛的，首先应具有传播信息和视觉刺激的特点，即吸引观众发生兴趣，并在瞬间自然产生刺激、传达、印象的视觉心理过程，将传达的信息尽快准确地传递给观众，并形成深刻的记忆。此案例利用了一些具有视觉冲击力的元素，将字体对比和色调对比巧妙结合，最终产生了令人满意的画面效果。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
下面我们来看一张户外广告设计，如图2-283所示。此例列举了主题元素和主题文字，但除此之外没有过多的装饰，文字没有任何效果，所以达不到视觉冲击力的效果，更难引起读者的注意。
图2-283
方案二
下面的案例在色调和文字上都做了一些改变，对主题文字进行了加粗和突出，但是由于对比不是那么强烈，因此并没有达到理想的效果，不能产生视觉冲击力，适当地增加对比和有关元素可以增强画面效果，如图2-284所示。
图2-284
方案三
这是最后经过调整的方案，增加了背景的对比，对主题文字进行放大，将有关文字集中排列，将文字信息更全面快速地传递给读者，同时增加有关元素，例如各种光效，也是具备视觉冲击力的重要因素，如图2-285所示。
图2-285
项目制作流程
制作背景
设计任何东西都应该先确定好要制作出怎样的设计风格及画面效果，而画面背景是第一步，对色调的把握尤为重要。
01启动Photoshop CS6，按Ctrl+N组合键新建一个“舞蹈户外广告”文件，具体参数设置如图2-286所示。
图2-286
02新建一个“底色”图层，然后使用“渐变工具”
，接着打开渐变编辑器，设置第1个颜色的色标为（R：255，G：220，B：83）、第2个颜色的色标为（R：53，G：83，B：9），最后使用线性渐变拉出渐变色，如图2-287所示，效果如图2-288所示。
图2-287
图2-288
03新建一个“圆圈”图层，然后使用“椭圆选框工具”
绘制出一个圆形选区，接着设置前景色为白色，并用前景色填充选区，最后设置图层的“不透明度”为90%，再按Ctrl+J组合键复制出其他图形，如图2-289所示，效果如图2-290所示。
图2-289
图2-290
04导入光盘中的“素材文件>CH02>素材2-49.png”文件，然后调节好大小与位置，接着设置该图层的“混合模式”为“柔光”、“不透明度”为70%，效果如图2-291所示。
图2-291
05导入光盘中的“素材文件>CH02>素材2-50.png”文件，然后调节好大小与位置，接着设置“混合模式”为“强光”，如图2-292所示，效果如图2-293所示。
图2-292
图2-293
TIPS
这里设置图层混合模式为强光是为了融合背景，增加画面视觉冲击力。
06分别导入光盘中的“素材文件>CH02>素材2-51.png和素材2-52.png”文件，然后调节好大小与位置，接着分别设置这两个图层的“混合模式”为“颜色减淡”和“滤色”，效果如图2-294所示。
图2-294
07分别导入光盘中的“素材文件>CH02>素材2-53.png和素材2-54.png”文件，然后调节好大小与位置，接着分别设置这两个图层的“混合模式”为“线性减淡（添加）”和“滤色”，效果如图2-295所示。
图2-295
08分别导入光盘中的“素材文件>CH02>素材2-55.png～素材2-57.png”文件，然后调节好大小与位置，接着分别设置“混合模式”为“叠加”“滤色”“柔光”，效果如图2-296所示。
图2-296
添加文字信息
文字信息是海报的重要元素之一。
01设置前景色为（R：5 7，G：79，B：19），然后使用“横排文字工具”
（字体：Arial Black）在绘图区域中输入文字，效果如图2-297所示。
图2-297
02将文字栅格化，然后导入光盘中的“素材文件>CH02>素材2-58.png”文件，接着使用“移动工具”
将花纹素材置于文字之上，按Ctrl键载入文字选区，最后选择“字”图层，按Ctrl+J组合键复制出选区内的图像，再按Ctrl+D组合键取消选区，效果如图2-298所示。
图2-298
03分别导入光盘中的“素材文件>CH02>素材2-59.png和素材2-60.psd”文件，然后调节好大小与位置，效果如图2-299所示。
图2-299
04分别导入光盘中的“素材文件>CH02>素材2-61.png和素材2-62.psd”文件，然后调节好大小与位置，接着设置“字”图层组的混合模式为“叠加”，效果如图2-300所示。
图2-300
05导入光盘中的“素材文件>CH02>素材2-63.psd”文件，然后调节好大小与位置，效果如图2-301所示。
图2-301