搜索
游戏UI设计PPT模板：素材：背景：图表：下载：教程：资料下载：范文下载：试卷下载：教案下载：论坛：课件：语文课件：数学课件：英语课件：美术课件：科学课件：物理课件：化学课件：生物课件：地理课件：历史课件：软件介绍2.2UI设计流程介绍目录012.1PS软件介绍1.PhotoshopCS6应用领域PhotoshopCS6运用范围较广泛，可以用于平面广告设计，如图2-1所示；可以用于游戏美工，如图2-2所示；可以用于包装与封面设计，如图2-3所示；可以用于数码后期处理，如图2-4所示；可以用于网页效果图设计，如图2-5所示图2-1平面广告设计图2-2游戏美工设计图2-3包装与封面设计图2-4数码照片后期处理1.PhotoshopCS6应用领域图2-4数码照片后期处理1.PhotoshopCS6应用领域2.PhotoshopCS6操作界面介绍PhotoshopCS6操作界面如图2-6所示。图2-6PhotoshopCS6操作界面2.PhotoshopCS6操作界面介绍（1）菜单栏①【文件】菜单：主要用于对图像文档进行基本操作与管理，其中包括新建、打开、保存、导入、导出及打印等命令。②【编辑】菜单：主要用于进行一些基本的编辑操作，如撤销、重做、复制、粘贴填充及自由变换等，它们都是图像编辑过程中常用的命令。③【图像】菜单：主要用于对图像的操作，如调整图像和画布的尺寸、分析和修改图像的色彩、图像模式的转换等。④【图层】菜单：主要用于对图层的创建和删除，以及添加图层样式、蒙版等操作。⑤【选择】菜单：主要用于选取图像区域，且对选择的区域进行编辑。⑥【滤镜】菜单：该菜单包含了众多的滤镜命令，可对图像或图像的某个部分进行模糊、渲染、素描等特殊效果的制作。2.PhotoshopCS6操作界面介绍（1）菜单栏⑦【视图】菜单：主要用于对PhotoshopCS6的编辑屏幕进行设置，如改变文档视图的大小、缩小或放大图像的显示比例、显示或隐藏标尺、参考线和网格等。⑧【窗口】菜单：主要用于设置编辑窗口，如切换文档、隐藏和显示各种面板等。⑨【帮助】菜单：包括丰富的帮助信息，以及产品注册等信息。（2）快捷菜单除了主菜单外，Photoshop还提供了快捷菜单，方便快速地使用软件。选择不同的工具，在不同的图像编辑状态下，系统所打开的快捷菜单是不同的。2.PhotoshopCS6操作界面介绍快捷菜单2.PhotoshopCS6操作界面介绍（3）工具箱Photoshop工具箱中有很多工具可供选择，如图2-8所示使用这些工具可完成绘制、编辑观察等操作。在工具箱中部分工具图标的右下角有个小三角，表示该工具组中还有隐藏的工具未显示。直接在该图标上右键，即可调出该工具组的工具列表。图2-8工具列表2.PhotoshopCS6操作界面介绍(4)使用面板和面板组在Photoshop中，按Tab键可隐藏工具箱和所有显示的面板，再次按Tab键可恢复，如果仅隐藏所有面板，则可按【Shift+Tab】组合键。对于最右侧已展开的面板，单击其顶部的伸缩栏，可将其收缩成为图标状态。再次单击面板全部展开。图2-9折叠和展开面板2.PhotoshopCS6操作界面介绍将鼠标移动到面板左侧边缘位置，即方框中的位置，鼠标指针变成双向箭头形状时，可调整面板栏的宽度。图2-10调整面板栏的宽度2.PhotoshopCS6操作界面介绍当要单独拆分出一个面板时，可以选中对应的图标或标签并按住鼠标左键，然后将其拖动到工作区的空白位置。图2-11拆分面板2.PhotoshopCS6操作界面介绍要组合面板，可以拖动外部的面板至想要的位置，直到该位置出现蓝色反光时松开鼠标，即可完成面板的拼命操作。图2-12组合面板2.PhotoshopCS6操作界面介绍(5)选择工作区如果在使用一段时间后工作变得很零乱，可以使用【窗口】中的【工作区】命令，将工作区恢复至自定义后的状态。执行【窗口】中的【工作区】命令，然后从子菜单中选择一种系统预定义的工作区布局，如“摄影”。图2-13执行命令2.PhotoshopCS6操作界面介绍用户也可以根据自己喜欢布置工作区，然后执行“窗口”—“工作区”—“新建工作区”命令，输入自定义名称，将当前工作区进行“存储”。图2-14储存工作区2.PhotoshopCS6操作界面介绍(6)图像选项卡的调整PhotoshopCS6所有打开的图片默认是以选项卡的方式显示，如果想要恢复浮动窗口显示，可直接将鼠标移至选项卡的标题上即方框的位置，按住左键不放将选项卡拖出来。图2-15恢复浮动窗口2.PhotoshopCS6操作界面介绍如果打开的图片比较多，每次都要拖动会浪费时间，这时可利用【窗口】菜单——“排列”——“使所有内容在窗口中浮动”功能。图2-16使所有内容在窗口中浮动2.PhotoshopCS6操作界面介绍(7)图像处理的基本概念关于位图和像素图2-17位图和像素位图：是以点阵方式保存图像中各点的色彩信息优点：画面细腻逼真，主要用于保存各种照片性质的图像缺点：文件占用空间大，且清晰度和分辨率有关，将图像放大到一定程度会模糊。像素(Pixel)：是用来计算数码影像的一种单位，图像的像素大小是指位图图像在高和宽两个方向上的像素总数。相机所说的像素，其实是最大像素的意思，像素是分辨率的单位，这个像素值仅仅是相机所支持的有效最大分辨率。当图片尺寸以像素为单位时，每一厘米等于28像素，比如15*15厘米长度的图片，等于420*420像素的长度。2.PhotoshopCS6操作界面介绍(8)常见位图图像的文件格式①*.PSD此格式是Photoshop专用的文件格式，也是默认的存储类型。此格式可以将文件的图层、参考线及Alpha通道等属性信息一起存储。该格式的优点是保存的信息全面，便于后期修改，缺点是文件尺寸较大。②*.JPEG（*.JPG）是一种压缩效率很高的存储格式，由于采用的是具有破坏性的压缩格式，因此，该格式仅适用保存不含文字或文字尺寸较大的图像，否则将导致图像中的字迹模糊。图2-18保存为PSD格式图2-19保存为JPEG格式2.PhotoshopCS6操作界面介绍(8)常见位图图像的文件格式③*.PNGPNG格式图片因其高保真性、透明性及文件体积较小等特性，被广泛应用于网页设计、平面设计中。④*.GIF此格式为256色的RGB图像格式，其特点是文件尺寸较小，支持透明背景，特别适用于网页图像。此外，还可利用相关软件制件GIF格式的动画。图2-20保存为PNG格式图2-21保存为GIF格式2.PhotoshopCS6操作界面介绍(9)矢量图形矢量图形：是利用各种图像处理软件绘制而成优点：清晰度高与分辨率无关，可以将图形进行任意的放大和缩小，不会影响其清晰度和光滑性缺点：不易被制作成色彩层次丰富的图形，兼容性不强。在Photoshop中使用“钢笔工具”及“形状工具”绘制的路径属于矢量图形的范畴。总的来说，矢量图形更适合于表现大色块的对象，例如公司徽标、装饰图形等，而位图图像则适合于表现具有丰富细节的对象，例如人物肖像等。图2-22矢量图形2.PhotoshopCS6操作界面介绍（10）图像分辨率“图像分辨率”是指单位长度内包含的像素点的数量，它的单位通常为像素/英寸（dpi）。以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。分辨率决定了位图图像细节的精细程度。（11）图像分辨率与打印分辨率图像分辨率不会影响屏幕显示的质量，但会影响打印出来的图像品质。例：有一幅图像的分辨率为100dpi，大小为1800×1000像素，这表示打印时每英寸图像要用100个点来表现，所以打印出来的图像尺寸大约是18”×10”。如果通过图像处理软件把它的分辨率提高到200dpi，但物理尺寸不变，这时打印图像每英寸图像用200个点来表现，所以打印出来的图像物理尺寸只有9”×5”，但由于打印时单位面积的墨点数目提高了，打印出来的图像也更加细腻。通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。同时，它也会增加文件占用的存储空间。2.1.1图层属性1.图层样式:是Photoshop中制作图片效果的重要手段之一，层样式可以运用于一幅图片中除背景层以外的任意一个层。2.打开方式(1)图层面板/f小按钮(2)直接双击需要产生样式的图层(3)图层菜单/图层样式3.混合选项:可以设置各项参数。面板如图2-23所示。1)不透明度：图层和图层样式同时发生变化。(2)填充：只对图层发生变化，而不影响图层样式。(3)挖空：浅和深(4)不在序列：深和浅将会一直穿透到背景层，没有区别。(5)序列：但是如果当前层是某个序列的成员，区别设置为“浅”，效果能看到序列下面相邻的一个图层，如果设置为“深”，效果将一直深入到背景层。图2-23【混合选项】面板2.1.1图层属性(6)混合颜色带：根据图像的亮度值设置透明度。(7)按住【Alt】键拖动滑块可以让亮度平稳过渡4.投影:产生一个类似墙面的影子。面板如图2-24所示。(1)混合模式：由于阴影的颜色一般都是偏暗的，因此这个值通常被设置为“正片叠底”，不必修改。(2)颜色设置：单击混合模式的右侧这个颜色框可以对阴影的颜色进行设置。(3)不透明度：默认值是75%，通常这个值不需要调整。如果你要阴影的颜色显得深一些，应当增大这个值，反之减少这个值。(4)角度：设置阴影的方向，指针为光源的方向，相反的方向就是阴影出现的地方。(5)距离：设置阴影的距离。(6)扩展：设置阴影边缘柔和程序，其值越大，阴影的边缘越清晰，如同探照灯照射一样。注意，扩展的单位是百分比，具体的效果会和“大小”相关，“扩展”的设置值的影响范围仅仅在“大小”所限定的像素范围内，2-24【投影】面板2.1.1图层属性如果“大小”的值设置比较小，扩展的效果会不是很明显。(7)大小：设置阴影的范围大小。(8)等高线：等高线用来对阴影部分进行进一步的设置，等高线的高处对应阴影上的暗圆环，低处对应阴影上的亮圆环。(9)杂色：对阴影部分添加随机的透明点。5.内阴影：在图层上方好像多出了一个透明的黑色的图层。内侧阴影的很多选项和投影是一样的。投影效果可以看为一个光源照射平面对象的效果，而”内侧阴影”则可以理解为光源照射球体的效果。面板如图2-25所示。图2-25【内阴影】面板2.1.1图层属性6.外发光、内发光：类似玻璃物体发光的效果。面板如图2-26、图2-27所示。图2-27【内发光】面板图2-26【外发光】面板2.1.1图层属性(1)不透明度：光芒一般不会是不透明的，因此这个选项要设置小于100%的值。光线越强（越刺眼），应当将其不透明度设置得越大。(2)渐变和颜色：通过单选框选择”单色“或者”渐变色“