2.2对齐原则
我们在刚开始设计一张设计作品时，往往会将文本和图片放在那里，全然不考虑页面上的其他项，这样就制造出一种杂乱无章的感觉。所以，如果缺乏对齐原则的掌握而导致设计的杂乱无章，那么这必将是一个失败的设计作品。
2.2.1 什么叫对齐
所谓对齐，是指任何元素都不能在页面上随意安放，每一项都必须与页面上的某个元素存在视觉联系。在使用对齐原则时需特别小心，不能页面上刚好有个空间就把元素随意放进去。
如果页面上的一些元素是对齐的，那么这样会得到一个更内聚的单元。即使对齐的元素没有在同一个单元内，但是在视觉效果中会有一条线将元素连在一起。
2.2.2 对齐例子分析
下面我们将通过一款名片的3种布局方式来详细分析下“对齐”原则所要注意的相关问题。
案例分析一
下面我们来看一款名片设计，如图2-69所示。这是为儿童图书馆所设计的一款邀请卡，虽然这是一种很典型的布局，但是所犯的错误是致命的，在如此小的空间内将不同元素分散地摆放在一起，造成了混乱的视觉效果。
图2-69
你觉得从事设计的人能选这款邀请卡片吗？显然不会！
找出问题
第1点：在这个小小的空间中放置了3处孤立的内容，整个卡片看上去，就好像元素的文字信息是随意填上去并被黏住一样，而且所有元素都与卡片上的任何其他元素没有关联，如图2-70所示。
图2-70
第2点：装饰素材随意摆放，给读者带来混乱的视觉引导。
案例分析二
现在来换下信息的布局，将两侧的信息摆放在名片的中部，同时整个画面采用居中对齐的方式进行摆放，如图2-71所示。
图2-71
现在你觉得图书馆的小朋友会喜欢这款邀请卡片吗？我觉得依然不会。
找出问题
第1点：这种情况比上一个案例的分布稍微好一点，文本项都进行了分组，使之具有合理的亲密性，但文本本身居中对齐，并在页面上居中放置，使整个版面显得过于呆板而且缺少活泼感，如图2-72所示。
图2-72
第2点：将装饰元素过分缩小，使整个页面形成两边对齐的边界，但边界的视觉效果太不明显，实在看不出那条“对齐线”的强度。
案例分析三
下面我们对邀请卡的内容进行调整，将相关的元素归纳为一组，使它们建立适当的对齐原则，这样就可以很好地解决上面两个案例所犯的错误，如图2-73所示。
图2-73
如果这款卡片设计的用色以及元素搭配都合适，我相信读者一定会喜欢这款卡片。
成功原因
第1点：将所有的元素都适当调整了一下，使它们按照同一种方式对齐，现在信息立刻就更有条理性了，并且将相关的元素分组建立更近的亲密性，对于信息的组织也是有帮助的。
第2点：在上面显示的案例中，文本也是对齐的，但那是采用的居中对齐，如果在文本中为左对齐或右对齐，让文本联系在一起的那条看不见的线会更加明确，因为现在有一条“硬”的竖边，这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。
第3点：在本案例中，采用了右对齐的排列方式，尽管这是一条看不见的线，但是它很明确，连接了文本的边界，也正是这个边界的强度为布局提供了力度。
2.2.3 对齐原则总结
居中对齐是设计初学者最常使用的对齐方式，这种对齐方式在视觉上是最舒服和最安全的。使用对齐原则可以创建出一种更正式、更稳定的外观，但此原则的缺点是中规中矩，通常缺少趣味性。
作为一个设计初学者，必须要充分利用亲密性，并结合明确的左对齐或右对齐进行设计，并不是要完全摒弃对齐原则，或者从一开始就强制自己避开对齐原则。
2.2.4 实战：设计啤酒广告
项目背景分析
本例要制作的是一款饮料海报设计，运用黄色为海报的主色调，搭配活泼的矢量元素，同时使用了左对齐的文字对齐原则，也注重元素之间亲密性的体现。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
这是一款为啤酒设计的海报，在这幅设计作品中很明显没有运用到对齐原则，也没有运用到亲密性原则，这是所犯的致命错误，在空间内把所有的元素杂乱地放在一起，使视觉效果看起来杂乱无章，没有秩序感，如图2-74所示。
图2-74
方案二
虽然我们将人物的方向调整了，而且也将文字进行了对齐，但是标题文字过大，使整个画面具有压迫感，并且将文字规矩地摆放在一起，使海报缺少了活跃感，降低了海报的视觉效果，如图2-75所示。
图2-75
方案三
在这幅设计作品中，我们重新摆放了每个元素的具体位置，并将人物缩小，使标题文字可以适合摆放在画面上方，并且产生了舒服的视觉效果，将文字的方向进行了适当的调整，但整个文字的摆放还是依据左对齐原则进行设计，使整个作品文字既增加了活泼感又简洁大方，如图2-76所示。
图2-76
项目制作流程
制作背景
确定背景的色调，是一个作品的开始。
01启动Photoshop CS6，按Ctrl+N组合键新建一个“饮品广告设计”文件，具体参数设置如图2-77所示。
图2-77
02设置前景色为（R：91，G：60，B：6），然后按下Alt+Delete组合键填充“背景”图层为前景色，效果如图2-78所示。
图2-78
03单击“矩形工具”
，然后在选项栏中设置绘制模式为“形状”、填充颜色为（R：247， G：158，B：30），接着在画面中绘制矩形图形，效果如图2-79所示。
图2-79
04在“图层”面板下方单击“添加图层样式”按钮
，在弹出的菜单栏中选择“投影”命令，然后在“投影”对话框中设置“距离”为24像素、“大小”为29像素，具体参数设置如图2-80所示，效果如图2-81所示。
图2-80
图2-81
05单击“圆角矩形工具”
，然后在选项栏中设置绘制模式为“形状”、填充方式为（R：2 5 0， G：155，B：27）到（R：249，G：197，B：1）渐变，接着设置渐变样式为“径向”，如图2-82所示，最后在画面中绘制一个圆角矩形，如图2-83所示。
图2-82
图2-83
添加光束等元素
添加光束元素，使视觉效果更加丰富。
01单击“自定义形状工具”
，设置填充为（R：249，G：191，B：5），然后在“自定义形状”拾色器中单击按钮
，在弹出的菜单栏中选择“符号”命令，如图2-84所示，接着在弹出的对话框中单击“追加”按钮
，再选择如图2-85所示的图案，最后绘制出如图2-86所示的图形。
图2-84
图2-85
图2-86
02执行“滤镜>模糊>高斯模糊“命令，在弹出的“高斯模糊”对话框中设置“半径”为30.5像素，如图2-87所示，然后按下Ctrl+Alt+G组合键创建剪贴蒙版，效果如图2-88所示。
图2-87
图2-88
03单击“钢笔工具”
，然后在选项栏中设置绘制模式为“形状”、填充颜色为（R：76，G：255，B：6），接着在画面绘制河流形状，最后按照相同的方法绘制完整河流图像，效果如图2-89所示。
图2-89
04新建“图层4”，单击“画笔工具”
，在“画笔”预设选取器中单击按钮
，然后在弹出的菜单中选择“载入画笔”命令，如图2-90所示，接着在弹出的“载入”对话框中选择光盘中的“素材文件>CH02>素材2-9.abr”文件，这样就将外部的画笔载入到Photoshop中了，如图2-91所示。
图2-90
图2-91
05设置前景色为白色，然后在画面下方多次绘制水花，效果如图2-92所示，接着在图层面板下方单击“填充图层蒙版”按钮
，结合使用“画笔工具”
隐藏多余部分，效果如图2-93所示。
图2-92
图2-93
06打开光盘中的“素材文件>CH02>素材2-10.png”文件，将其拖曳至当前文件中并调整其位置，效果如图2-94所示。
图2-94
07新建“图层6”，然后单击“钢笔工具”，接着在选项栏中设置绘制模式为“路径”，最后在画面创建选区，效果如图2-95效果。
图2-95
08单击“渐变工具”
，然后打开“渐变编辑器”对话框，接着设置第1个颜色的色标为（R：62，G：54，B：52）、第2个颜色的色标为（R：154，G：152， B：150）、第三个颜色的色标为（R：70，G：70，B：70）、第4个颜色的色标为（R：149， G：149，B：149）、第5个颜色的色标为（R：31，G：31，B：31），如图2-96所示，最后按照图2-97所示的方向填充选区线性渐变色。
图2-96
图2-97
09按照相同的方法，在画面绘制更多图形，完整耳机效果如图2-98所示。
图2-98
10单击“钢笔工具”，然后在选项栏中设置绘制模式为“形状”、填充方式为（R：255，G：151，B：2）到（R：249，G：208，B：97）渐变颜色。接着设置渐变的旋转角度为27°，如图2-99所示，最后在画面绘制多个斜切形状的矩形，效果如图2-100所示。
图2-99
图2-100
11导入光盘中的“素材文件>CH02>素材2-11.jpg和素材2-12.png”文件，然后调整好图层的位置，效果如图2-101所示。
图2-101
制作字体效果
制作立体的字体效果，使设计更加完整生动。
01使用蓝色“横排文字工具”
（字体：Stencil Std）在绘图区域中输入文字，然后执行“编辑>自由变换”命令，接着按住Ctrl键同时拖动各锚点调整文字倾斜角度，效果如图2-102所示。
图2-102
02执行“图层>栅格化>图层”命令，然后双击KARL图层，在弹出的“图层样式”对话框中单击“斜面和浮雕”样式，接着设置“深度”为103%、“大小”为43像素、阴影颜色为（R：8，G：55，B：95），如图2-103所示，再单击“斜面和浮雕”样式下面的“纹理”选项，具体参数设置如图2-104所示，效果如图2-105所示。
图2-103
图2-104
图2-105
03在“图层样式”对话框中选择“内阴影”样式，然后设置“不透明度”为39%、“阻塞”为46%、“大小”为1像素，具体参数设置如图2-106所示，效果如图2-107所示。
图2-106
图2-107
04在“图层样式”对话框中单击“投影”样式，然后设置“距离”为25像素、“扩展”为33%、“大小”为24像素，具体参数设置如图2-108所示，效果如图2-109所示。
图2-108
图2-109
05按照前面相同的方法，创建更多文字来丰富画面，效果如图2-110所示。
图2-110
06新建“图层17”，再设置前景色为（R：254，G：68，B：236），然后单击“钢笔工具”
，接着在画面绘制一条路径弧线，最后选择“画笔工具”
，打开“画笔预设”选取器，参数设置如图2-111所示。
图2-111
07单击“钢笔工具”
，然后在画面单击右键，接着在菜单栏选择“路径描边”命令，最后在弹出的“描边路径”对话框中勾选“模拟压边”选项并单击“确定”按钮
，最终效果如图2-112所示。
图2-112
2.2.5 实战：设计音乐狂欢节海报
项目背景分析
本例要制作的是一张音乐狂欢节的海报设计，运用动感的人物和具有设计感的边框组成整个作品的重要结构，而整个作品中文字的摆放运用到居中对齐的原则，但是该作品中添加的分割线和调整的文字大小没有使整个作品显现出呆板乏味的视觉效果，反倒体现出该作品别具一格的设计氛围。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
整个作品使用黑色的黑体进行排版，并运用了右对齐原则进行排列，白色的字体运用的有些莫名其妙，并没有给作品带来点睛的效果，反倒造成整体视觉效果过于暗淡，文字的排版也是杂乱无章，没有一点可取之处，如图2-113所示。
图2-113
方案二
我们将人物的亮度进行了适当的调整，如图2-114所示。在运用字体颜色和组合上进行了适当的考虑，使文字和图像相互呼应，并具有一点的联系感，但视觉效果还是过于欠缺。
图2-114
方案三
在这幅设计作品中，我们重新调整了每个元素的具体位置，并将重要文字摆放在图像的中部，使人一目了然，并且利用分割线将信息很好地进行分类，使读者产生了舒服的视觉效果，虽然居中对齐原则存在一定的缺点，但是我们可以适当地添加一些元素去破解居中对齐原则所带来的版面过于呆板和缺乏活泼感等缺点，最后达到最佳效果，如图2-115所示。
图2-115
项目制作流程
制作特效背景
提高人物的整体色调，制作出星光的特效。
01导入光盘中的“素材文件>CH02>素材2-13.jpg”文件，效果如图2-116所示。
图2-116
02新建一个图层，然后打开“渐变编辑器”对话框，接着选择系统预设的“前景色到透明渐变”，如图2-117所示，最后按照从上到下的方向为图层填充线性渐变色。
图2-117
03在“图层”面板下方单击“添加图层蒙版”按钮
，为本图层添加一个图层蒙版，然后使用“渐变工具”
在蒙版中从下往上填充黑色到白色的线性渐变，接着设置该图层的“混合模式”为“叠加”，效果如图2-118所示。
图2-118
04新建一个图层，然后使用白色“画笔工具”
，并在选项栏中设置“不透明度”为20%，接着绘制出光的效果，最后设置该图层的“混合模式”为“叠加”、“不透明度”为50%，效果如图2-119所示。
图2-119
05导入光盘中的“素材文件>CH02>素材2-14.png”文件，然后设置该图层的“混合模式”为“叠加”、“不透明度”为80%，接着执行“图层>图层样式>外发光”菜单命令，打开“图层样式”对话框，最后设置“混合模式”为“亮光”、“大小”为27像素，如图2-120所示，效果如图2-121所示。
图2-120
图2-121
06导入光盘中的“素材文件>CH02>素材2-15.png”文件，然后将图像移动到画面的右上角，效果如图2-122所示。
图2-122
07新建一个图层，然后使用黑色“画笔工具”
在画面的边缘处进行涂抹，接着设置该图层的“混合模式”为“变暗”，效果如图2-123所示。
图2-123
08在“图层”面板下方单击“创建新的填充或调整图层”按钮
，在弹出的菜单中选择“色相/饱和度”命令，然后在“属性”面板中设置“色相”为-3、“饱和度”为24、“明度”为-5，具体参数设置如图2-124所示，效果如图2-125所示。
图2-124
图2-125
添加文字元素
文字的排版使用了居中对齐的原则，使用分割线将文字信息很好地进行分类。
01使用“横排文字工具”
（字体：Impact）在画面上输入文字信息，效果如图2-126所示。
图2-126
02选择“画笔工具”
，然后按住Shift键绘制出3条直线作为分割线，效果如图2-127所示。
图2-127
03选择“自定义形状工具”
，然后在选项栏中设置绘图模式为“形状”、填充颜色为白色、“形状”为“拼贴2”，如图2-128所示，效果如图2-129所示。
图2-128
图2-129
TIPS
此处绘制图像，可以直接复制，也可以直接使用“自定义形状工具”
绘制多个。
04选择“矩形工具”
，然后在选项栏中设置绘图模式为“形状”、描边颜色为白色、形状描边宽度为“1点”、描边类型为虚线，如图2-130所示，最终效果如图2-131所示。
图2-130
图2-131
2.2.6 实战：设计酒店网页界面
项目背景分析
本案设计的是一款酒店网页设计，该设计从整体色调上讲究和谐统一，大气之中又包含现代感，展现企业战略目标的综合实力，同时又可以传达出企业的专业服务，版面设计上，运用了左对齐的方式和亲密原则进行排版，新颖独特，动态与静态恰当融合，吸引人的同时又给人以视觉享受。
方案设计分析
在本项目中，我们设计了3种方案。
方案一
这是为一连锁酒店所设计的网页，在这幅设计作品中很明显运用到对齐原则，但是在段落文字进行编排时，文字很明显显得有些杂乱无章，而且在网页的链接处，没有进行细致的对齐原则，没有秩序感，如图2-132所示。
图2-132
方案二
我们添加了很多图片元素，使整个作品显现出饱满，并且在重要的位置制作了特殊效果，但在网页中部图片的摆放有点过于分散，使观者的视觉不能很好地集中在一起，没有起到一个良好并舒服的视觉效果，如图2-133所示。
图2-133
方案三
在这幅设计作品中，我们重新摆放了每个元素的具体位置，并将正文中的图片重新进行对齐摆放，将图片和正文的内容运用了左对齐原则，使整个画面具有一个更正式、更稳定的外观，同时，该作品充分地利用了亲密性的设计原则，使整个作品既不乏味又具有设计感，如图2-134所示。
图2-134
项目制作流程
制作网格背景
制作网页设计时，因文字的信息量比较大，所以一般使用标尺拉出参考线。
01启动Photoshop CS6，按Ctrl+N组合键新建一个“酒店网页设计”文件，具体参数设置如图2-135所示。
图2-135
02执行“视图>标尺”命令，然后在显示的标尺区域拉出参考线，效果如图2-136所示。
图2-136
03设置前景色为（R：1 5 9，G：184，B：188），然后新建“图层1”，接着选择“矩形选框工具”
，最后沿画面上方标尺创建一个矩形选区，同时按下Alt+Delete组合键填充前景色，效果如图2-137所示。
图2-137
04新建“图层2”，然后使用“矩形选框工具”
沿画面下方参考线创建一个矩形选区，接着选择“渐变工具”
，打开“渐变编辑器”，设置第1个色标的颜色为（R：183，G：184，B：184）、第2个色标的颜色为白色、第3个色标的颜色为（R：183，G：184，B：184），如图2-138所示，最后从左向右为“图层2”填充使用线性渐变色，效果如图2-139所示。
图2-138
图2-139
TIPS
参考线以浮动的状态显示在图像上方，并且在输出和打印图像的时候，参考线都不会显示出来，同时可以移动、移去和锁定参考线。
05新建“组1”图层组，然后在该组中新建“图层3”，接着使用“矩形选框工具”
在上方图像中创建选区并填充任意颜色，效果如图2-140所示。
图2-140
06选择“图层3”，然后按下Ctrl+J组合键复制，接着调整矩形位置，最后按照相同的方法复制更多矩形并调整，效果如图2-141所示。
图2-141
添加图片元素
添加图片元素，丰富整个作品的设计感。
01打开光盘中的“素材文件>CH02>素材2-21.jpg”文件，然后将其拖曳至当前文件中并调整位置和大小，接着按下Ctrl+Alt+G组合键创建剪贴蒙版，效果如图2-142所示。
图2-142
02继续打开“素材2-22.jpg～素材2-26.jpg”文件，然后分别将其拖曳至当前文件中并调整位置和大小，接着分别创建剪贴蒙版，效果如图2-143所示。
图2-143
03在“图层”面板下方单击“创建新的填充或调整图层”按钮
，然后在弹出的菜单中选择“自然饱和度”命令，接着在“属性”面板中设置“自然饱和度”为-86、“饱和度”为-10，如图2-144所示，最后按下Ctrl+Alt+G组合键创建剪贴蒙版，效果如图2-145所示。
图2-144
图2-145
04设置前景色为（R：194，G：194，B：193），然后新建“图层20”，接着按下Alt+Delete组合键，同时创建图层剪贴蒙版，最后设置该图层“混合模式”为“叠加”、“不透明度”为80%，效果如图2-146所示。
图2-146
05新建“图层21”，然后按下Ctrl+Alt+G组合键创建剪贴蒙版，接着使用“矩形选框工具”
在画面创建一个矩形选区，最后设置前景色为黑色，效果如图2-147所示。
图2-147
06选择“渐变工具”
，然后打开“渐变编辑器”，同时选择“前景色至透明”渐变色，如图2-148所示，接着从下至上为“图层21”选区填充使用渐变色，最后设置该图层“不透明度”为50%，效果如图2-149所示。
图2-148
图2-149
07新建“图层22”，然后按照前面相同的方法，再次叠加一个线性渐变，效果如图2-150所示。
图2-150
08新建“图层23”，然后使用“矩形选框工具”
在画面创建一个矩形选区，同时填充前景色，效果如图2-151所示。
图2-151
09双击“图层23”，然后在弹出的“图层样式”对话框左侧勾选“投影”样式，接着设置“大小”为18像素，如图2-152所示，效果如图2-153所示。
图2-152
图2-153
10打开光盘中的“素材文件>CH02>素材2-27.jpg”文件，然后将其拖曳至当前文件中并调整大小和位置，接着创建剪贴蒙版，效果如图2-154所示。
图2-154
11按住Ctrl键，同时单击“图层23”缩览图创建选区，然后新建“图层25”，接着选择“渐变工具”
，在选项栏单击“径向渐变”按钮
，最后在选区中心往外填充“图层23”渐变色，同时设置该图层“混合模式”为“正片叠底”，效果如图2-155所示。
图2-155
12移去第1条横向参考线，然后新建“图层26”，接着使用“矩形选框工具”
在画面相应位置创建矩形选区，同时填充白色，最后设置该图层“不透明度”为50%，效果如图2-156所示。
图2-156
13新建“图层29”，然后选择“椭圆选框工具”
，在画面绘制多个正圆选区，并分别填充为（R：3 2， G：70，B：96）和白色，效果如图2-157所示。
图2-157
14新建“组2”图层组，然后按照前面相同的方法绘制3个矩形框，接着依次打开“素材2-28.jpg～2-30. jpg”文件，同时分别拖曳至当前文件中，制作出与前面相同的照片展示，效果如图2-158所示。
图2-158
添加文字元素
文字元素的排列，运用到了左对齐和亲密性原则。
01新建“组3”图层组，然后在该组中新建“图层28”，接着使用“矩形选框工具”
在画面上方创建矩形选区，同时填充为白色，效果如图2-159所示。
图2-159
02新建“组4”图层组，然后使用黑色“横排文字工具”
（字体：方正综艺简体）在绘图区域创建相应文字，效果如图2-160所示。
图2-160
03执行“视图>显示>参考线”命令，以取消显示参考线，然后打开光盘中的“素材文件>CH02>素材2-31.png”文件，接着将其拖曳至当前文件中，效果如图2-161所示。
图2-161
04打开光盘中的“素材文件>CH02>素材2-32.psd”文件，然后分别将“图层1”至“图层3”拖曳至当前文件中，最终效果如图2-162所示。
图2-162