游戏UI设计第2章游戏UI设计软件及工作流程课件.pptx

1、 PPT模板： PPT课件： PS软件介绍软件介绍2.2 UI设计流程介绍设计流程介绍目录目录012.1 PS软件介绍软件介绍1.Photoshop CS6应用领域应用领域Photoshop CS6运用范围较广泛，可以用于平面广告设计，如图2-1所示；可以用于游戏美工，如图2-2所示；可以用于包装与封面设计，如图2-3所示；可以用于数码后期处理，如图2-4所示；可以用于网页效果图设计，如图2-5所示图2-1平面广告设计图2-2游戏美工设计图2-3包装与封面设计图2-4数码照片后期处理1.Photoshop CS6应用领域应用领域图2-4数码照片后期处理1.Photoshop CS6应用领域应用

2、领域2.Photoshop CS6操作界面介绍操作界面介绍Photoshop CS6操作界面如图2-6所示。图2-6 Photoshop CS6操作界面 2.Photoshop CS6操作界面介绍操作界面介绍（1）菜单栏）菜单栏【文件】菜单：主要用于对图像文档进行基本操作与管理，其中包括新建、打开、保存、导入、导出及打印等命令。【编辑】菜单：主要用于进行一些基本的编辑操作，如撤销、重做、复制、粘贴填充及自由变换等，它们都是图像编辑过程中常用的命令。【图像】菜单：主要用于对图像的操作，如调整图像和画布的尺寸、分析和修改图像的色彩、图像模式的转换等。【图层】菜单：主要用于对图层的创建和删除，以及添

3、加图层样式、蒙版等操作。【选择】菜单：主要用于选取图像区域，且对选择的区域进行编辑。【滤镜】菜单：该菜单包含了众多的滤镜命令，可对图像或图像的某个部分进行模糊、渲染、素描等特殊效果的制作。2.Photoshop CS6操作界面介绍操作界面介绍（1）菜单栏）菜单栏【视图】菜单：主要用于对Photoshop CS6的编辑屏幕进行设置，如改变文档视图的大小、缩小或放大图像的显示比例、显示或隐藏标尺、参考线和网格等。【窗口】菜单：主要用于设置编辑窗口，如切换文档、隐藏和显示各种面板等。【帮助】菜单：包括丰富的帮助信息，以及产品注册等信息。（2）快捷菜单）快捷菜单除了主菜单外，Photoshop还提供了

4、快捷菜单，方便快速地使用软件。选择不同的工具，在不同的图像编辑状态下，系统所打开的快捷菜单是不同的。2.Photoshop CS6操作界面介绍操作界面介绍快捷菜单2.Photoshop CS6操作界面介绍操作界面介绍（3）工具箱）工具箱Photoshop 工具箱中有很多工具可供选择，如图2-8所示使用这些工具可完成绘制、编辑观察等操作。在工具箱中部分工具图标的右下角有个小三角，表示该工具组中还有隐藏的工具未显示。直接在该图标上右键，即可调出该工具组的工具列表。图2-8 工具列表2.Photoshop CS6操作界面介绍操作界面介绍(4)使用面板和面板组使用面板和面板组在Photoshop中，按

5、Tab键可隐藏工具箱和所有显示的面板，再次按Tab键可恢复，如果仅隐藏所有面板，则可按【Shift+Tab】组合键。对于最右侧已展开的面板，单击其顶部的伸缩栏，可将其收缩成为图标状态。再次单击面板全部展开。图2-9 折叠和展开面板2.Photoshop CS6操作界面介绍操作界面介绍将鼠标移动到面板左侧边缘位置，即方框中的位置，鼠标指针变成双向箭头形状时，可调整面板栏的宽度。图2-10 调整面板栏的宽度2.Photoshop CS6操作界面介绍操作界面介绍当要单独拆分出一个面板时，可以选中对应的图标或标签并按住鼠标左键，然后将其拖动到工作区的空白位置。图2-11 拆分面板2.Photoshop

6、 CS6操作界面介绍操作界面介绍要组合面板，可以拖动外部的面板至想要的位置，直到该位置出现蓝色反光时松开鼠标，即可完成面板的拼命操作。图2-12 组合面板2.Photoshop CS6操作界面介绍操作界面介绍(5)选择工作区选择工作区如果在使用一段时间后工作变得很零乱，可以使用【窗口】中的【工作区】命令，将工作区恢复至自定义后的状态。执行【窗口】中的【工作区】命令，然后从子菜单中选择一种系统预定义的工作区布局，如“摄影”。图2-13 执行命令2.Photoshop CS6操作界面介绍操作界面介绍用户也可以根据自己喜欢布置工作区，然后执行“窗口”“工作区”“新建工作区”命令，输入自定义名称，将当

7、前工作区进行“存储”。图2-14 储存工作区2.Photoshop CS6操作界面介绍操作界面介绍(6)图像选项卡的调整图像选项卡的调整PhotoshopCS6所有打开的图片默认是以选项卡的方式显示，如果想要恢复浮动窗口显示，可直接将鼠标移至选项卡的标题上即方框的位置，按住左键不放将选项卡拖出来。图2-15 恢复浮动窗口2.Photoshop CS6操作界面介绍操作界面介绍如果打开的图片比较多，每次都要拖动会浪费时间，这时可利用【窗口】菜单“排列”“使所有内容在窗口中浮动”功能。图2-16 使所有内容在窗口中浮动2.Photoshop CS6操作界面介绍操作界面介绍(7)图像处理的基本概念图像

8、处理的基本概念关于位图和像素图2-17 位图和像素位图：位图：是以点阵方式保存图像中各点的色彩信息优点：画面细腻逼真，主要用于保存各种照片性质的图像缺点：文件占用空间大，且清晰度和分辨率有关，将图像放大到一定程度会模糊。像素像素(Pixel)：是用来计算数码影像的一种单位，图像的像素大小是指位图图像在高和宽两个方向上的像素总数。相机所说的像素，其实是最大像素的意思，像素是分辨率的单位，这个像素值仅仅是相机所支持的有效最大分辨率。当图片尺寸以像素为单位时，每一厘米等于28像素，比如15*15厘米长度的图片，等于420*420像素的长度。2.Photoshop CS6操作界面介绍操作界面介绍(8)

9、常见位图图像的文件格式常见位图图像的文件格式*.PSD此格式是Photoshop专用的文件格式，也是默认的存储类型。此格式可以将文件的图层、参考线及Alpha通道等属性信息一起存储。该格式的优点是保存的信息全面，便于后期修改，缺点是文件尺寸较大。*.JPEG（*.JPG）是一种压缩效率很高的存储格式，由于采用的是具有破坏性的压缩格式，因此，该格式仅适用保存不含文字或文字尺寸较大的图像，否则将导致图像中的字迹模糊。图2-18 保存为PSD格式图2-19 保存为JPEG格式2.Photoshop CS6操作界面介绍操作界面介绍(8)常见位图图像的文件格式常见位图图像的文件格式*.PNG PNG格式

10、图片因其高保真性、透明性及文件体积较小等特性，被广泛应用于网页设计、平面设计中。*.GIF此格式为256色的RGB图像格式，其特点是文件尺寸较小，支持透明背景，特别适用于网页图像。此外，还可利用相关软件制件GIF格式的动画。图2-20 保存为PNG格式图2-21 保存为GIF格式2.Photoshop CS6操作界面介绍操作界面介绍(9)矢量图形矢量图形矢量图形：矢量图形：是利用各种图像处理软件绘制而成优点：清晰度高与分辨率无关，可以将图形进行任意的放大和缩小，不会影响其清晰度和光滑性缺点：不易被制作成色彩层次丰富的图形，兼容性不强。在Photoshop中使用“钢笔工具”及“形状工具”绘制的路

11、径属于矢量图形的范畴。总的来说，矢量图形更适合于表现大色块的对象，例如公司徽标、装饰图形等，而位图图像则适合于表现具有丰富细节的对象，例如人物肖像等。图2-22 矢量图形2.Photoshop CS6操作界面介绍操作界面介绍（10）图像分辨率）图像分辨率“图像分辨率”是指单位长度内包含的像素点的数量，它的单位通常为像素/英寸（dpi）。以分辨率为1024768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。分辨率决定了位图图像细节的精细程度。（11）图像分辨率与打印分辨率）图像分辨率与打印分辨率图像分辨率不会影响屏幕显示的质量，但会影

12、响打印出来的图像品质。例：有一幅图像的分辨率为100dpi，大小为18001000像素，这表示打印时每英寸图像要用100个点来表现，所以打印出来的图像尺寸大约是18”10”。如果通过图像处理软件把它的分辨率提高到200dpi，但物理尺寸不变，这时打印图像每英寸图像用200个点来表现，所以打印出来的图像物理尺寸只有9”5”，但由于打印时单位面积的墨点数目提高了，打印出来的图像也更加细腻。通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。同时，它也会增加文件占用的存储空间。2.1.1 图层属性图层属性1.图层样式图层样式:是Photoshop中制作图片效果的重要手

13、段之一，层样式可以运用于一幅图片中除背景层以外的任意一个层。2.打开方式打开方式(1)图层面板/f小按钮(2)直接双击需要产生样式的图层(3)图层菜单/图层样式3.混合选项混合选项:可以设置各项参数。面板如图2-23所示。1)不透明度：图层和图层样式同时发生变化。(2)填充：只对图层发生变化，而不影响图层样式。(3)挖空：浅和深(4)不在序列：深和浅将会一直穿透到背景层，没有区别。(5)序列：但是如果当前层是某个序列的成员，区别设置为“浅”，效果能看到序列下面相邻的一个图层，如果设置为“深”，效果将一直深入到背景层。图2-23【混合选项】面板2.1.1 图层属性图层属性(6)混合颜色带：根据图

14、像的亮度值设置透明度。(7)按住【Alt】键拖动滑块可以让亮度平稳过渡4.投影投影:产生一个类似墙面的影子。面板如图2-24所示。(1)混合模式：由于阴影的颜色一般都是偏暗的，因此这个值通常被设置为“正片叠底”，不必修改。(2)颜色设置：单击混合模式的右侧这个颜色框可以对阴影的颜色进行设置。(3)不透明度：默认值是75%，通常这个值不需要调整。如果你要阴影的颜色显得深一些，应当增大这个值，反之减少这个值。(4)角度：设置阴影的方向，指针为光源的方向，相反的方向就是阴影出现的地方。(5)距离：设置阴影的距离。(6)扩展：设置阴影边缘柔和程序，其值越大，阴影的边缘越清晰，如同探照灯照射一样。注意，

15、扩展的单位是百分比，具体的效果会和“大小”相关，“扩展”的设置值的影响范围仅仅在“大小”所限定的像素范围内，2-24【投影】面板2.1.1 图层属性图层属性如果“大小”的值设置比较小，扩展的效果会不是很明显。(7)大小：设置阴影的范围大小。(8)等高线：等高线用来对阴影部分进行进一步的设置，等高线的高处对应阴影上的暗圆环，低处对应阴影上的亮圆环。(9)杂色：对阴影部分添加随机的透明点。5.内阴影内阴影：在图层上方好像多出了一个透明的黑色的图层。内侧阴影的很多选项和投影是一样的。投影效果可以看为一个光源照射平面对象的效果，而”内侧阴影”则可以理解为光源照射球体的效果。面板如图2-25所示。图2-

16、25【内阴影】面板2.1.1 图层属性图层属性6.外发光、内发光外发光、内发光：类似玻璃物体发光的效果。面板如图2-26、图2-27所示。图2-27【内发光】面板图2-26【外发光】面板2.1.1 图层属性图层属性(1)不透明度：光芒一般不会是不透明的，因此这个选项要设置小于100%的值。光线越强（越刺眼），应当将其不透明度设置得越大。(2)渐变和颜色：通过单选框选择”单色“或者”渐变色“。即便选择”单色“，光芒的效果也是渐变的，不过是渐变至透明而已。如果选择”渐变色“，你可以对渐变进行随意设置。(3)方法：”柔和“与”精确“，一般用”柔和“就足够了，”精确“可以用于一些发光较强的对象，或者棱

17、角分明反光效果比较明显的对象。(4)扩展：“扩展”用于设置光芒中有颜色的区域和完全透明的区域之间的渐变速度。它的设置效果和颜色中的渐变设置以及下面的大小”设置“都有直接的关系，三个选项是相辅相成的。(5)大小：设置光芒的延伸范围。7.斜面和浮雕斜面和浮雕样式（Style）包括：外斜面、内斜面、浮雕、枕形浮雕和描边浮雕。内斜面：同时多出一个高光层（在其上方）和一个投影层（在其下方）。投影层的混合模式为“正片叠底”（Multiply），高光层的混合模式为“屏幕”（Screen），两者的透明度都是75%。这两个“虚拟“的层配合起来构成“内斜角“效果，类似于来自左上方的光源照射一个截面形为梯形的高台形

18、成的效果。外斜面：被赋予了外斜面样式的层也会多出两个“虚拟”的层，一个在上，一个在下，分别是高光层和阴影层 。2.1.1 图层属性图层属性浮雕效果：添加的两个“虚拟”层则都在层的上方，图层首先被赋予一个内斜面样式，形成一个突起的高台效果，然后又被赋予一个外斜面样式，整个高台又陷入一个“坑”当中，。描边浮雕：层描边后所产生的浮雕效果。(1)方式：包括平滑、雕刻柔和、雕刻清晰。其中“平滑”是默认值，选中这个值可以对斜角的边缘进行模糊，从而制作出边缘光滑的高台效果。“雕刻柔和”是一个折中的值。(2)深度：“深度”必须和“大小”配合使用，“大小”一定的情况下，用“深度”可以调整高台的截面梯形斜边的光滑

19、程度。比如在“大小”值一定的情况下，不同的“深度”值产生的效果。(3)方向：方向的设置值只有“上”和“下”两种，其效果和设置“角度”是一样的。在制作按钮的时候，“上”和“下”可以分别对应按钮的正常状态和按下状态，比较使用角度进行设置更方便也更准确。(4)大小：大小用来设置高台的高度，必须和“深度”配合使用。(5)柔化：柔化一般用来对整个效果进行进一步的模糊，使对象的表面更加柔和，减少棱角感。(6)角度：圆当中不是一个指针，而是一个小小的十字，斜角和浮雕的角度调节不仅能够反映光源方位的变化，而且可以反映光源和对象所在平面所成的角度，具体来说就是那个小小的十字和圆心所成的角度以及光源和层所成的角度

20、（后者就是高度）。2.1.1 图层属性图层属性8.等高线等高线：是用来为对象（图层）本身赋予条纹状效果。图2-28【等高线】面板2.1.1 图层属性图层属性9.纹理纹理：纹理用来为层添加材质，其设置比较简单。首先在下拉框中选择纹理，然后对纹理的应用方式进行设置。常用的选项包括：(1)缩放：对纹理贴图进行缩放。(2)深度：修改纹理贴图的对比度。深度越大（对比度越大），层表面的凹凸感越强，反之凹凸感越弱。(3)反向：将层表面的凹凸部分对调。(4)与图层连接：选中这个选项可以保证层移动或者进行缩放操作时纹理随之移动和缩放图2-29【纹理】面板2.1.1 图层属性图层属性10.光泽：光泽：用来在层的上

21、方添加一个波浪形（或者绸缎）效果，如图2-30所示。相同的参数，对于不同形状的图形会产生不同的效果，常用的选项包括：不透明度：设置值越大，光泽越明显，反之，光泽越暗淡。(1)颜色：修改光泽的颜色。对于“正片叠底”，修改颜色产生的效果一般不会很明显。将混合模式改为”普通“后，颜色的效果就很明显了。(2)距离：设置两组光环之间的距离（光泽样式中的光环显示出来的部分都是不完整的，比如矩形的光环只有一个角）图2-30【光泽】面板2.1.1 图层属性图层属性11.描边：描边：对图形进行描边，如图2-31所示。【编辑】里【描边】命令与【图层样式】中的【描边】命令。相同之处：相同之处：(1)都不能给背景图层

22、描边；(2)都可以给用单色给整幅图像进行描边；不同之处：不同之处：(1)针对选区，只有编辑描边可以进行相应的操作。【图层样式】不能给选区描边。(2)【图层样式】描边还可以使用渐变、图案进行描边。图2-31【描边】面板2.1.1 图层属性图层属性2.1.2 选区和通道使用方法选区和通道使用方法 不同颜色的通道记录了某种颜色的分布状况。把这些通道的信息拆开，并且在图层中进行合并，一方面深入理解通道的含义，另一方面也重温载入通道选区和图层混合模式的操作。1.准备图像准备图像(1)打开文件，实际上，任何一张彩色图像都是可以做这个练习的。(2)打开图层面板，单击下面的【创建】新图层图标4次，生成4个新的

23、图层，图层1、图层2、图层3与图层4，如图2-32所示图2-32 新建图层2.1.1 图层属性图层属性2.载入通道选区载入通道选区（1）打开通道面板。在红色通道上单击，选中红色通道为当前通道。（2）在通道面板的最下面，单击载入通道选区图标，在图像中看到蚂蚁线了。这样就载入了红色通道的选区，如图2-33所示。单击RGB复合通道，所有通道都被激活，这时又看到正常的彩色图像了，如图2-34所示。图2-33 载入红色通道2.1.1 图层属性图层属性单击RGB复合通道，所有通道都被激活，这时又看到正常的彩色图像了，如图2-34所示。图2-34 激活RGB复合通道2.1.1 图层属性图层属性3激活通道激活

24、通道单击RGB通道前边的眼睛图标，这样只是让3个通道可见，但并没有打开3个通道，这样做是不对的。必须打开3个通道，在通道面板上看到3个通道都处于激活状态，如图2-35所示。4.填充颜色填充颜色（1）回到图层面板，指定最上面的“图层4”为当前层。（2）在工具箱中单击前景色图标，打开拾色器面板，设定RGB颜色为R255、G0、B0，这是RGB的纯红色，单击【确定】按钮退出，如图2-36所示。图2-35激活RGB复合通道图2-36 选取颜色2.1.1 图层属性图层属性(3)按【Alt+Delete】组合键，在图层 4中【填充】前景色为红色。红色图层有了，这就是原图像中所有的红色。如果暂时关闭背景层，

25、可以清楚地看到图像中所有红色的效果，如图2-37所示。5.再来做绿色图层再来做绿色图层。(1)首先必须关闭“图层4”，确认背景层是打开的，图像恢复正常色彩效果。按【Ctrl+D】组合键取消现有选区，如图2-38所示。图2-37 填充颜色图2-38 关闭图层42.1.1 图层属性图层属性(2)再次打开通道面板，在通道面板中单击选中绿色通道。换一种方法来载入绿色通道选区。按住【Ctrl】键单击绿色通道，这样绿色通道的选区一样被载入，在图像中看到蚂蚁线了，如图2-39所示。(3)单击RGB复合通道，所有通道都被激活，再次看到蚂蚁线了。回到图层面板，指定“图层3”为当前层。图2-39 载入绿色通道2.

26、1.1 图层属性图层属性(4)工具箱中单击前景色图标，打开拾色器面板，设定RGB颜色为R0、G255、B0，这是RGB的纯绿色，单击【确定】按钮退出，如图2-40所示。(5)按【Alt+Delete】组合键，在“图层3”中【填充】前景色。绿色图层有了，这是图像中所有的绿色，如图2-41所示。图2-40 选取颜色图2-41 填充颜色2.1.1 图层属性图层属性6.再来做蓝色图层再来做蓝色图层(1)关闭图层3，看到正常颜色图像了。(2)打开通道面板。在通道面板中按住【Ctrl】键直接单击蓝色通道，这样蓝色通道的选区同样被载入，在图像中看到蚂蚁线了，如图2-42所示。(3)因为这次没有单击蓝色通道进

27、入，因此也不用单击RGB通道返回。这样操作更简便，但必须心里很清楚单击载入的是哪个通道的选区。图2-42 载入蓝色通道2.1.1 图层属性图层属性(4)到图层面板，指定“图层2”为当前层。在工具箱中单击前景色图标，打开拾色器面板，设定RGB颜色为R0、G0、B255，这是RGB的纯蓝色，单击确定按退出，如图2-43所示。(5)按【Alt+Delete】组合键，在“图层2”中【填充】前景色。蓝色图层也有了。按【Ctrl+D】组合键取消选区，如图2-44所示。图2-43 选取颜色图2-44 填充颜色2.1.1 图层属性图层属性7.设置混合模式设置混合模式(1)3个颜色层有了，再来设置【图层混合模式

28、】。(2)在图层面板上打开上面的图层4、图层3。关闭背景层。现在只能看到3个填色层的效果，如图2-45所示。(3)定最上面的图层4红色层为当前层，打开图层混合模式下拉框，选定滤色命令，将当前层的混合模式设定为滤色模式，如图2-46所示。图2-45 关闭背景图层图2-46 选择滤色模式2.1.1 图层属性图层属性(4)按照刚才的操作方法，分别为图层3绿色层和图层2蓝色层都设定图层混合模式为滤色模式。8.复原图像复原图像(1)关闭背景层。(2)指定图层 1为当前层。(3)在工具箱中单击默认前景色和背景色图标，或者在键盘上按【D】键，设置前景色为黑色。(4)按【Alt+Delete】组合键，将前景色

29、填入图层1中。可以看到，原来的图像又奇迹般地复原了，如图2-47所示。图2-47 复原图像2.1.1 图层属性图层属性9.最终效果最终效果通过这个练习可以看到，通道就是某一种颜色的分布状况。RGB模式的图像就是由红绿蓝3种颜色的图像，按照加色法的特定混合模式合成而来的，如图2-48所示。做好这个练习，对于认识通道，打消对通道的畏惧感有很大的帮助，并且对于以后利用通道调整图像色彩很有好处。因为这个实例已经说明，图像是几个通道的合成，那么，改变某个通道的影调关系，当然就会改变整个图像的色调关系了。图2-48 各通道2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用1.设置文字工具选项设置文字

30、工具选项 在Photoshop CS6和ImageReady中生成文字很简单：选择文字工具，单击文档。文字工具提供了许多有关输入文字和文字外形的选项，在添加文本时应当先熟悉它们的作用。选择工具栏中“文字工具”项，文字工具的各个选项显示在屏幕上，如图2-49所示：图2-49文字工具选项栏2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用另外，在工具箱上面，文字工具有四字，即横排、直排、横排文字蒙版和直排文字蒙版，他们的快捷为【T】，可按住【shift+T】组合键将这文字工作进行转换。如图2-50的示：2.建立新文字层建立新文字层 点击“建立一个文字图标”项，在屏幕上单击，Photoshop

31、 CS6自动生成一个新层，并且把文字光标定位在这一层中。输入文字后，可以把他们作为矢量图形输出。也可以对其进行喷涂或应用滤镜，或对文字进行栅格化。输入文字后，屏幕上出现的文本颜色是当前的前景色或选项条上出现的颜色，可以很容易地通过空格键、鼠标拖拉等方式对文字进行编辑。同时也可以在屏幕上通过鼠标拖拉改变其位置，当然也可以在文字之间进行插入等操作。在文字层中可以有很多生成文字的方式，一旦生成就可以用许多方式对其进行操作:(1)选择“图层”-“图层样式”，可以设定图层的风格。(2)选择“编辑”-“变换”，改变文字角度。(3)使用移动工具对文字进行移动或变形。图2-50 文字工具列表2.1.3 文字工

32、具和画笔工具使用文字工具和画笔工具使用(4)选择“图层”-“文字”-“转换为形状”，可以使文字从背景层分离出来。转换之后，使用形状工具条上的各选项可以与其建立重叠或交叉的形状。(5)选择“图层”-“文字”-“建立工作路径”，使文字转换为能被路径编辑工具编辑的路径。(6)选择“图层”-“文字”-“栅格化”，要对文字进行填涂或使用滤镜，必须首先对文字进行栅格化。基于矢量的文字与栅格化文字，Photoshop CS2在一个层中生成的文字是基于矢量的，矢量文字是不依赖于分辨率的。也就是说，文字的效果与图像的分辨率无关，而主要取决于输出的设备，特别是输出设备每英寸的点数(dpi)。Dpi越高，文字效果越

33、好。如果在Photoshop CS2和ImageReady中生成的图像是用于Web的，必须将它们存储为Web图形格式:GIF.JPEG或PNG,它们都是栅格化的文件格式，并不支持矢量文字，由于在Web上下载图形文字要比文本慢得多，因此Web设计者们并不用Photoshop CS2生成文本图像，使用Photoshop CS2和ImageReady生成的文字主要用于按钮、简短的单词或短语。3.使用蒙版选项使用蒙版选项选定文字工具中的蒙版选项，在屏幕文件上单击，Photoshop CS2将产生一个红色的重叠的蒙版区域。在这个区域中可以通过点击或拖动的方式来移动文字。要确认使用蒙版，点击“确定”按钮。

34、当蒙版显示在屏幕上时，可以对其进行填充，也可以利用移动工具进行缩放或变形。填充文字时，文本选项功能像一个外罩笼罩在选定的文本区域，以便对其进行操作。用蒙版生成文字之后，可以把它们拷贝、粘贴到另一文件中或拷贝到另一层中。一旦撤消对文字的选定，它就被锁定到当前工作层的背景中，很难进行移动。2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用4.编辑文字编辑文字 如果希望输入大段的文字并且使用Photoshop CS2的段落格式选项，必须以段落模式输入文本。通过在屏幕上点击和拖拉鼠标可以形成一个文本区域用来进行段落模式的输入。输入时，光标到每行右侧最后一个位置时自动换行。输入文字的步骤如下:（1

35、）选择文字工具。（2）在文字工具选项条中选择“建立一个文字图层”。其他选项可以根据文本需要来设定。（3）在屏幕上点击并拖拉鼠标形成一个文本区域。（4）要退出文本编辑模式，点击选项条中的“确定”按钮或敲回车键或用Ctrl和回车键；若要取消或删除文本，点击选项条中的“取消”按钮或敲ESC键。5.使用字符调板使用字符调板可以使用字符和段落调板对文本格式进行控制。在调板中改变设置时不必选定文本或文本工具。字符调板及其弹出式菜单提供的选项都与单个字符的格式相关。要打开字符调板，请点击文字工具选项条中的“调板”或选择“窗口”-“显示字符”，如图2-51所示：图2-51 打开字符调板2.1.3 文字工具和画

36、笔工具使用文字工具和画笔工具使用6.设置字符调板选项设置字符调板选项字符调板的弹出式菜单为文本设定了更多的风格。例如在输入文本前或选定已输入的文本后可以选择All Caps、，上标或下划线等选项。下面就对这些命令更深一步的来进行了解：（1）“仿粗体”和“仿斜体”能够使不具有这种风格的文本加粗或变成斜体。（2）“分数宽度”可以对字符间的距离进行调整以产生最好的印刷排版效果。如果用于Web或多媒体，文字尺寸大小就要取消此选项，因为小文字之间的距离会更小，不易于阅读。（3）“无间断”可以使一行最后的单词不断开。例如希望New York不被断成两行。为了避免一个单词或一组单词断行，可以选定文字然后选择

37、“不断行”。（4）复位字符”把字符调板的所有选项重新设为缺省值。7.使用段落调板使用段落调板 Photoshop CS2的段落调板可以对整段文字进行操作，可以通过点击文字工具选项条上的“调板”或选择“窗口”-“显示段落”来打开段落调板，如图2-52所示：图2-52 打开段落调板2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用段落调板的大多数选项只适用于在段落模式下输入的文字。多数的命令与Adobe InDesign、Adobe Page Maker或Quark Press中的命令类似。段落调板上的图标用来控制段落的对齐方式。前三个图标(从左向右)分别是左对齐、居中(一行行居中)和右对齐

38、，如图2-53所示，后四个用来调整文字的位置。可以通过点击恰当的图标来设置最后一行为左对齐、右对齐形式，也可以对所有的行(包括最后一行)进行调整。如果在文字工具选项条中选择竖排文字，在段落调板中的图标将会成为图2-54所示的样式。图2-53 横排文字段落调板图2-54 竖排文字段落调板2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用段落调板对段落的缩进和边距进行如下的调整:(1)缩进左边距可以使文本左缩进。(2)缩进右边距可以使文本右缩进。(3)首先缩进只缩进每段文本的第一行，它与缩进左边距选项是相关的。(4)段前加空格可以在每段文本前添加附加的空格。(5)段后加空格可以在选定的段落后

39、添加附加的空格。今天所看到的是文字工具的一些最基本的操作，在文字工具2中，将会学到栅格化文字、文字效果和变形文字。8.画笔的详细设置画笔的详细设置（1）下面看看怎样编辑画笔。点击画笔调板左侧的“画笔笔尖形状”，如图2-55所示。图2-54 竖排文字段落调板2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用现在看一下硬度下方的间距选项，现在的数值是25%，这是什么意思呢？实际上前面所使用笔刷，可以看作是由许多圆点排列而成的。如果把间距设为100%，就可以看到头尾相接依次排列的各个圆点那个间距实际就是每两个圆点的圆心距离，间距越大圆点之间的距离也越大，如图2-56所示。那为什么在前面画直线的

40、时候没有感觉出是由圆点组成的呢？那是因为间距的取值是百分比，而百分比的参照物就是笔刷的直径。当直径本身很小的时候，这个百分比计算出来的圆点间距也小，因此不明显。而当直径很大的时候，这个百分比计算出来的间距也大，圆点的效果就明显了。图2-56 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用那为什么在前面画直线的时候没有感觉出是由圆点组成的呢？那是因为间距的取值是百分比，而百分比的参照物就是笔刷的直径。当直径本身很小的时候，这个百分比计算出来的圆点间距也小，因此不明显。而当直径很大的时候，这个百分比计算出来的间距也大，圆点的效果就明显了。可以作一个对比试验，保持25%的间距，分别将直

41、径设为9像素和90像素，然后在图像中各画一条直线，再比较一下它们的边缘。如下左图。可以看到第一条直线边缘平滑，而第二条直线边缘很明显地出现了弧线，这些弧线就是许多的圆点外缘组成的，如图2-57所示。图2-57 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用需要注意的是，如果关闭间距选项，那么圆点分布的距离就以鼠标拖动的快慢为准，慢的地方圆点较密集，快的地方则较稀疏。（2）之前使用的笔刷都是一个正圆形，现在多了一个圆度的控制，就可以把笔刷形状设为椭圆了。圆度也是一个百分比，代表椭圆长短直径的比例。100%时是正圆，0%时椭圆外形最扁平。角度就是椭圆的倾斜角，当圆度为100%时角度就

42、没意义了，因为正圆无论怎么倾斜样子都一样。除了可以输入数值改变以外，也可以在示意图中拉动两个控制点(红色箭头处)来改变圆度，在示意图中任意点击并拖动即可改变角度，如图2-58所示。用翻转X与翻转Y后，虽然设定中角度和圆度未变，但在实际绘制中会改变笔刷的形状，横方向是翻转X的效果，竖方向是翻转Y的效果。图2-58 改变圆度2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用（3）笔刷设定中的形状动态是怎么回事？先在笔尖形状设定中把间距设为钢笔压力，最小直径、角度和圆度都选择0%，如图2-59所示，得到效果如图2-60所示。会看到效果。所谓抖动就是随机，所谓随机就是无规律的意思。比如说一个随机

43、个位数，那么这个数字可能是1可能是8可能是3，是完全没有规律的。随机数是不可预测的。大小抖动(随机)的数值越大，抖动(随机)的效果就越明显。图2-59 设定笔刷的形状动态图2-60 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用注意在大小抖动下方还有一个最小直径的选项，它是用来控制在大小抖动中最小的圆点直径的。如果大小抖动100%，最小直径30%的话，绘制效果等同于单纯大小抖动70%。如果两者都为100%就等同于没有大小抖动首先明白什么叫渐隐。渐隐的意思是“逐渐地消隐”，指的是从大到小，或从多到少的变化过程，是一种状态的过渡，效果如图2-61所示。来绘制三条直线：第一条直线：把笔

44、刷直径设为10像素，间距150%、圆度100%、大小抖动0%。控制关。看到设定实际上使整个“形状动态”选项形如虚设，因为没有任何有效的控制设定，效果如图2-62所示。图2-62 笔刷图2-61 渐隐2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用第二条直线：在第一条设定的基础上，启用大小抖动下面的“控制”选项，选择“渐隐”，后面的数字填20，最小直径0%。而打开了渐隐控制，意味着从10像素的大小开始“逐渐地消隐”，消隐到多少？到0像素为止。所以看到笔刷圆点逐渐缩小直至完全失，效果如图2-63所示。那么这个渐隐的长度如何控制？就是后面填的数值20，这个20代表步长，意味着经过20个笔刷圆

45、点。大家可以去仔细数一下。第三条直线：在第二条设定的基础上，打开了最小直径的控制直径设为20%。，10像素的20%就是2像素，此时渐隐选项不能完全消隐笔刷了，消隐的最小值是2像素。步长仍然为20步，那么从10像素过渡到2像素的过程是20个笔刷圆点，20个笔刷圆点之后保持2像素的大小，这2像素永不消隐，效果如图2-64所示。图2-64 笔刷图2-63 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用至于“形状动态”中其他的两个控制选项“角度抖动”和“圆度抖动”，顾名思义就是对形状或扁椭圆形笔刷角度和圆度的控制。定义过程和相应关系与前面所说的大小抖动是一样的，这里就不再介绍详细的定义过

46、程，（4）如果想让画笔色彩丰富起来。使用“动态颜色”选项来达到这个目的。如下图，将“前景/背景抖动”设为100%。这个选项的作用是将颜色在 前景色和背景色之间变换，参数设置如图2-65、图2-66所示，画出效果如图2-67所示。图2-66设置颜色动态图2-65 设置颜色动态图2-67 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用（5）接下来学习散布，先设定一个笔刷：5像素，圆度100%，间距150%。关闭形状动态、动态颜色及其他所有选项后，进入散布选项，将散布设为500%，参数设置如图2-68所示。这时候绘制就可以得到如下图的效果，可以看到笔刷的圆点不再局限于鼠标的轨迹上，而是

47、随机出现在轨迹周围一定的范围内，这就是所谓的散布，如图2-69所示。图2-69 笔刷图2-68 设置散布参数2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用注意有一个“两轴”的选项，这是做什么用的呢？为了让效果更明显，把笔刷直径改为15像素，间距100%，散布100%，然后在关闭 和打开这个选项下分别画一条直线，如图2-70所示。可以看到如果关闭两轴选项，那么散布只局限于竖方向上的效果，看起来有高有低，但彼此在横方向上的间距还是固定的，如果打开了两轴选项，散布就在横竖方向上都有效果了。所以第二条线上的圆点不仅有高有低，彼此的间距也不一样。在散布选项下方，有一个数量的选项，它的作用是成倍

48、地增加笔刷圆点的数量，取值就是倍数。（6）现在来看一下笔刷设定中的杂色选项，它的作用是在笔刷的边缘产生杂边，也就是毛刺的效果。它和笔刷的硬度有关，硬度越小杂边效果越明显。对于硬度大的笔刷没什么效果，如图2-71所示。图2-71 笔刷图2-70 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用湿边选项是将笔刷的边缘颜色加深，看起来就如同水彩笔效果一样，如图2-72所示。喷枪的作用和之前学到的喷枪方式是完全一样的。但这里的喷枪方式可以随着笔刷一起保存。这样下次再使用这个储存的预设时候，喷枪方式就会自动打开。平滑选项主要是为了让鼠标在快速移动中也能够绘制较为平滑的线段。(7)看看怎样设置

49、双重画笔，点开画笔调板里的笔尖形状，选择一个硬角画笔画笔，把画笔调板上的其他选项的钩去掉，把间距拉开一定的距离，如图2-73所示。图2-73 选择笔尖形状图2-72 笔刷2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用点开双重画笔选项，尝试拖动直径和间距的滑快好象没有多大的改变，这是应为模式为“颜色加深”的缘故，如图2-74所示。改变模式为“正片叠底”然后向左拖动直径滑快，减小笔刷的大小，虚线出来了，但好象不平滑，如图2-75所示。图2-75 改变双重画笔模式和参数图2-74 修改双重画笔模式2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用如果把“翻转”的钩去掉，曲线就平滑了，

50、如图2-76所示。那双重画笔的原理是什么呢？首先在笔尖形状里设置一个主画笔。这个画笔可以设定为一个范围，在双重画笔里设置一个次画笔。主画笔可以切割次画笔，也就是说次画笔怎么放大也跑不出主画笔的范围内。例如：在笔尖形状里选择一个硬角的主画笔，把直径拉到20像素。间距设为1%，如图2-77所示。图2-77 选择画笔笔尖形状图2-76 取消“翻转”2.1.3 文字工具和画笔工具使用文字工具和画笔工具使用在点开双重画笔选项。选择一个五星形做次画笔，直径设为40像素。间距设为100%。模式“正片叠底”。翻转不打钩。能看到缩略图中的效果，星形次画笔超出主画笔的范围部分被裁切掉了。所以可以画出圆滑的曲线来，