第3章移动UI图像制作的常用环境



视频讲解




本章学习目标
 认识并熟练掌握Photoshop CC的操作界面和常用环境； 
 熟练掌握参考线、标尺、网格的使用。
本章先向读者介绍移动UI设计需要使用的软件环境以及操作界面，包括常用的菜单栏、工具箱、工具属性栏，然后介绍如何使用参考线、标尺以及网格来制作手机空间App的框架。

3.1移动UI制作常用环境的认识
3.1.1认识菜单栏
1. 菜单栏的含义

菜单栏位于整个窗口的顶端，集中了大部分可执行的命令，这些命令被分类放置，以便调用。例如，图像菜单就包含了图像模式、图像调整等命令，用于改变图像的色彩和大小。菜单栏由“文件”“编辑”“图像”“图层”“文字”“选择”“滤镜”“3D”“视图”“窗口”和“帮助”11个菜单命令组成，如图31所示。


图31菜单栏


2. 菜单栏命令
下面分别介绍在移动UI设计中常用的菜单命令。
（1） 文件： 打开“文件”菜单，在弹出的菜单中可以执行新建、打开、存储、关闭、置入以及打印等一系列针对图像文件的命令。
（2） 编辑： “编辑”菜单包括还原、剪切、复制、粘贴、填充、变换以及定义图案等命令。
（3） 图像： “图像”菜单中的命令主要用于对图像模式、颜色、大小等进行调节以及设置。
（4） 图层： 该菜单中的命令主要用于对图像的图层进行相应的操作，这些命令便于对图层进行运用和管理，如新建图层、复制图层、蒙版图层、文字图层等。
（5） 文字： “文字”菜单中的命令主要用于对图像中的文字对象进行创建和设置，包括创建工作路径，转换为形状，变形文字以及字体预览大小等。
（6） 选择： “选择”菜单中的命令主要用于对图像中的选区进行操作，可以对选区进行反向、修改、变换、扩大、载入选区等操作。
（7） 滤镜： 该菜单中的命令可以为图像设置各种不同的特效。
（8） 3D： 3D菜单用于对App UI 3D图像执行操作，用于打开3D文件、将2D图像创建为3D图形、进行3D渲染等。
（9） 视图： 该菜单中的命令可以对图像的视图进行调整和设置，包括缩放视图、改变屏幕模式、显示标尺、设置参考线等。
（10） 窗口： “窗口”菜单主要用于在设计App UI图像时，可以随意地控制工作界面中的工具箱和各个面板的显示和隐藏。
（11） 帮助： 主要用于提供使用Photoshop CC的各种帮助信息。在使用Photoshop CC的过程中，若遇到问题，可以查看该菜单，及时了解各种命令、工具和功能。
3. 新手提升
菜单命令的功能往往可以用快捷键或右键菜单等实现，以提高工作效率，所以在后面的学习中要记住常用的快捷键，菜单栏命令的常用快捷键汇总如表31所示。


表31菜单栏命令的常用快捷键汇总



菜单栏命令快 捷 方 式菜单栏命令快 捷 方 式

新建文件Ctrl+N后退一步Alt+Ctrl+Z
打开文件Ctrl+O剪切Ctrl+X
储存文件Ctrl+S复制Ctrl+C
还原Ctrl+Z粘贴Ctrl+V

3.1.2认识工具箱
1. 工具箱的含义

工具箱位于工作界面的左侧，如图32所示。它集合了创建选区、修复、编辑图像等众多工具，在图像处理和UI设计中使用最频繁，如矩形选框工具、钢笔工具、画笔工具等。
2. 工具箱的基本操作
选择“窗口”→“工具”选项可隐藏和打开工具箱，如果单击工具箱上方的按钮，会将工具箱展开为双行显示，再次单击按钮，则会将其收缩为单行显示。
如果工具按钮的右下角有一个小三角形，那么表示该工具按钮还有其他工具，在该工具按钮上右击，可弹出所有隐藏的工具选项，如图33所示。



图32工具箱




图33弹出隐藏的选项



3. 新手提升
在Photoshop CC中编辑和设计移动UI图像时，用户除了可以通过工具栏里的放大、缩小工具外，还可以通过组合键进行缩放操作。按Ctrl+-组合键，可以缩小图片； 按Ctrl++组合键，可以放大图片。
3.1.3认识工具属性栏
1. 工具属性栏的含义

工具属性一般位于菜单的下方，用于对工具进行设置，根据选择不同的工具，工具属性栏会相应地发生变化。例如，选择“椭圆选框工具”“画笔工具”，它们的工具属性栏如图34和图35所示。


图34“椭圆选框工具”属性栏





图35“画笔工具”属性栏

2. 工具属性栏的基本操作
（1） 菜单箭头： 单击该按钮，可以弹出列表框，菜单栏中包括多种混合模式。
（2） 小滑块按钮： 单击该按钮，会出现一个小滑块用于数值调整。
3.1.4认识图像编辑窗口
图像编辑窗口也称为工作区，是工作界面中打开的图像文件窗口，用于对图像进行各种编辑操作。
图像编辑窗口如图36所示。图像窗口的上方是标题栏，标题栏中可以显示当前文件的名称、格式、显示比例、色彩模式、所属通道和图层状态。若该文件未被保存过，则标题栏以“未命题”并加上连续的数字作为文件名称。


图36图像编辑窗口

3.1.5认识调板
调板又称为浮动控制面板，位于工作界面的右侧，主要用于对当前图像的图层、颜色、样式以及相关的操作进行设置。单击菜单栏中的“窗口”菜单，在弹出的菜单列表中执行相应的命令，即可显示相应的浮动面板。“路径”浮动面板如图37所示，“图层”浮动面板如图38所示。



图37“路径”浮动控制面板




图38“图层”浮动面板



小贴士
（1） 如果调板位置乱了，则执行“窗口”→“工作区”→“默认工作区”命令即可恢复到默认设置。
（2） Photoshop CC在界面上保留之前版本的优点，即工具箱和调板都是可伸缩的，能最大限度扩宽工作区域，单击调板上方的按钮，会将所有调板收缩起来，再次单击按钮，则又会将其展开，如图39所示。



图39伸缩

3.2移动UI图像文件制作辅助工具的使用
3.2.1图像文件的查看
1. 抓手工具

当图像编辑窗口过小而图像过大时，只能看到图像的局部，这时就要用到“抓手工具”，以便移动图像在窗口中的显示，它并未真正移动图像在文件窗口中的位置，这是与“移动工具”的不同之处。
1） 创建方式
当图像编辑窗口不能完全显示图像时，将鼠标移到图像窗口中按住左键并拖曳，可实现图像在窗口中移动，如图310所示。通过拖曳图像编辑窗口右侧和下方的位置调节滑块也可达到相同的效果。


图310图像在窗口中的移动



2） 参数设置
参数设置选项栏如图311所示。


图311选项栏


滚动所有窗口： 如果打开了多个窗口，并且这些窗口都不能完全显示图像，那么复选此项后，在移动其中一个窗口的图像时，其余窗口中图像的显示位置也会联动。
打开如图312所示的三张图片； 选中“滚动所有窗口”复选框，然后拖动鼠标，可以看到三张图片同时移动，如图313所示； 取消选中“滚动所有窗口”复选框，则只有所选窗口发生移动，如图314所示。注意，观察其他文件窗口右侧和下方的位置调节滑块与当前窗口的滑块是否处于相同的位置。


图312校园图片




图313选中“滚动所有窗口”复选框





图314取消选中“滚动所有窗口”复选框




3） 新手提升
（1） 实际像素： 单击此按钮，会使当前窗口变为100%的大小显示。双击缩放工具也可达到此效果。
（2） 适合屏幕： 单击此按钮，会使当前窗口在不影响其他的对话框（如工具箱、调板等）的情况下得以最大显示。双击“抓手工具”也可达到此效果。
（3） 打印尺寸： 单击此按钮，会使当前窗口以打印分辨率的大小显示，这种显示受限于屏幕的大小和分辨率，所以并不准确。
2. 放大与缩小工具
在Photoshop CC中编辑和设计UI作品的过程中，用户可以根据需要对图像进行放大、缩小操作，以便更好地观察和处理图像。
放大与缩小显示图像的具体操作方法如下所述。
（1） 使用菜单栏命令。
执行“文件”→“打开”命令，或按Ctrl+O组合键打开一幅素材图像，如图315所示。
执行“视图”→“放大”命令，如图316所示。



图315打开




图316放大




执行上述操作后，即可放大图像显示。
在菜单栏上两次执行“视图”→“缩小”命令，即可使图像的显示比例缩小到原来的1/4。
（2） 使用工具栏工具。
在工作界面左侧的工具栏里执行“放大镜工具”命令，便可以调节图像大小，也可以通过工具属性栏选择放大或缩小。
（3） 使用导航器。
执行“文件”→“打开”命令，或按Ctrl+O组合键打开素材“空间”。
执行“窗口”→“导航器”，打开“导航器”浮动面板，如图317所示。



图317空间


执行上述操作后，可通过调节小滑块改变图像的大小。
（4） 使用组合键。
按Ctrl+-组合键，可以缩小图片； 按Ctrl++组合键，可以放大图片。
3.2.2辅助工具的使用
用户在编辑和绘制UI图像时，需要灵活应用“网格”“参考线”“标尺工具”“注释工具”等辅助工具，这些工具有助于精确地定位、对齐、测量，以便更加有效地处理图像。
例如，在对UI图像排版或完成一些规范操作时，就需要运用“参考线工具”。参考线相当于辅助线，起辅助作用，是浮动在整个图像上却不被打印的直线，可以随意移动、删除或锁定。
下面依次介绍常用的辅助工具的具体操作方法。


图318标尺工具

1. 标尺工具
1） 标尺的含义
标尺主要用于测量图像中任意两点的距离或某个位置的角度，测量信息可通过选项栏、信息调板或执行“窗口”→“记录测量”命令来观察。
2） 创建方式
单击工具箱的“吸管工具”下面的小三角，在弹出的列表中执行“标尺工具”命令，如图318所示。
将光标移到文件窗口中起始点的位置按住鼠标左键并拖曳至结束点的位置后松开左键，这样便在这两点之间创建了一条测量线，此时观察选项栏，可知道两点之间的距离、角度等信息，如图319和图320所示。在创建测量线时，如果同时按住Shift键，则创建的是直线段。


图319创建测量线




图320记录测量


在“记录测量”中，可以看到整个图片的长度和线段的角度，当然也可以执行“编辑”→“首选项”→“参考线、网格和切片”命令，修改标尺的属性，如比例单位。
2. 网格
1） 网格的含义
参考线和网格都可帮助设计师精确地定位图像或元素。网格对于对称排列图像很有帮助，网格在默认情况下显示为不打印出来的线条，但也可以显示为点。
2） 网格的基本操作
（1） 显示和隐藏网格的操作步骤。
打开一张图片，执行“视图”→“显示”→“网格”命令，或按Ctrl+'组合键即可显示网格，如图321所示。


图321显示和隐藏网格


执行“视图”→“显示额外内容”命令，即可显示或隐藏网格。
（2） 设置参考线和网格的首选项操作。
执行“编辑”→“首选项”→“参考线、网格和切片”命令，弹出对话框，如图322所示。


图322设置首选项


可在其中修改参考线、智能参考线、网格和切片的颜色、样式等属性。
3） 新手提升
参考线和网格的相似特性。
当拖曳选区、选区边框和工具时，如果拖曳距离小于8个屏幕(不是图像)像素，则它们将与参考线或网格对齐。
注意： 参考线间距、是否能够看到参考线和网格以及对齐方式均因图像而异。网格间距、参考线和网格的颜色及样式对于所有的图像都是相同的。
3. 参考线
1） 参考线的含义
参考线显示为浮动在图像上方的一些不会打印出来的线条。设计者可以移动、移去或锁定参考线。


图323新建参考线

2） 显示参考线的操作步骤
执行“文件”→“打开”命令，或按Ctrl+O组合键打开素材“中秋节”。
执行“视图”→“新建参考线”命令，弹出“新建参考线”对话框，选择“水平”单选按钮，在“位置”右侧输入“10毫米”，如图323所示。
单击“确定”按钮，即可创建一条参考线，如图324所示。


图324创建参考线


可以看到，新建的参考线距离图像最上方边缘10毫米，刚好为设置的长度，也就是说，在“新建参考线”对话框中设置的“位置”是从图像最上方开始算起的。同理，可将“水平”改为“垂直”。
3） 智能参考线
参考线中有一个智能参考线，可以帮助对齐形状、切片和选区。当设计者绘制形状或创建选区或切片时，智能参考线会自动出现，也可以隐藏智能参考线。
智能参考线可用于以下多种情景。
（1） Option(Mac)/Alt(Windows)+拖曳图层。
在按住Option键(Mac)或Alt键(Windows)的同时拖曳图层，Photoshop会显示引用测量参考线，它表示原始图层和复制图层之间的距离。此功能可以与“移动”和“路径选择”工具结合使用，如图325所示。
（2） 路径测量。
在处理路径时，Photoshop会显示测量参考线。选择“路径选择”工具，然后在同一图层内拖曳路径，也会显示测量参考线，如图326所示。



图325显示原始图层和复制图层之间的距离




图326路径测量



（3） 匹配的间距。
当复制或移动对象时，Photoshop会显示测量参考线，以便直观地呈现与所选对象和直接相邻对象之间的间距相匹配的其他对象之间的间距。
Cmd (Mac) / Ctrl (Windows) +将光标悬停在图层上方： 在处理图层时，可以查看测量参考线。在选定某个图层后，再按住Cmd键或Ctrl键的同时将光标悬停在另一图层上方。可以将此功能与箭头键结合使用，用于移动所选的图层，如图327所示。


图327匹配间距


（4） 与画布之间的距离。
在按住Cmd键或Ctrl键的同时将光标悬停在形状以外，Photoshop会显示与画布之间的距离，如图328所示。


图328形状与画布的距离


4） 新手提升
（1） 移动参考线有关的快捷键和技巧。
按住Ctrl键的同时拖曳鼠标，即可移动参考线。
按住Shift键的同时拖曳鼠标，可使参考线与标尺上的刻度对齐。
（2） 快速新建参考线的操作方法。
按住Ctrl键的同时按下R键，便会在界面上出现标尺。
从标尺处按住鼠标拖曳便会新建一条参考线。
注意： 这里的参考线可以随意放置。
基础案例展示
搭建手机空间App框架。基本步骤如下所述。
(1) 新建一个文件，设置“名称”为“手机空间App”界面宽度设置为720px，高度设置为1280px，分辨率设置为72ppi，颜色模式设置为RGB，如图329所示。


图329新建空白图像


(2) 执行“视图”→“新建参考线”命令，方向设置为水平，位置设置为0毫米，如图330所示。


图330新建参考线


(3) 根据步骤（1）和步骤（2）新建三个参考线，如图331所示。


图331新建三个参考线


(4) 选择在工具栏中的“标尺工具”选项，从图像的左上角开始按住左键不动，垂直向下拖曳，直到长度为135.5毫米松开左键，从标尺处拖出一条参考线到该位置，如图332所示。


图332新建标尺


(5) 选择工具箱中的“矩形选框工具”选项，根据所绘制的参考线绘制矩形并填充颜色，如图333所示。
(6) 根据上述操作将剩余部分划分好，如图334所示。
上面只是一个简单的框架，读者可用自己的图片将其内容丰富，制作一个属于自己的空间界面。



图333绘制矩形





图334布局


创新任务设计
根据图335结合本章内容，运用辅助线和其他工具设计个人空间界面。


图335个人空间