7.1 游戏界面设计（课件）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

图形图像处理——Photoshop CC 第四版 游戏界面设计 界面设计 游戏界面设计 7.1 用户界面（UI）是人与机器之间传递和交换信息的媒介。随着信息技术与网络技术的迅速发展，人机界面设计与开发已成为国际计算机界和设计界最为活跃的研究方向之一 无论是多媒体设计、课件制作、电子相册、游戏设计、程序开发，还是手机APP开发等，都离不开界面设计。漂亮、人性化的界面设计能够吸引客户、增强产品的易用性、观赏性和审美价值，提升商品的购买力。 本项目通过完成两种常用界面设计过程，让读者在实践中学会界面设计的方法与技巧。 游戏界面设计 7.1 制作如图7-1所示的网络游戏的登录界面的效果。 游戏界面设计 7.1 案例解析 本案例中，需要完成以下操作： 利用图层的“颜色"混合模式制作界面背景 利用“橡皮擦工具"，借助“图层"面板组合素材。 利用选取、形状、文字等工具，借助于图层样式的设置完成“登录"界面的设计。 游戏界面设计 7.1 （1）选择“文件一打开"命令，打开素材图片“背景.jpg"。 （2）在“图层"面板中单击“创建新图层"按钮，创建“图层1 "，将其重命名为“色板"。将前景色设置为#82c6f5，按快捷键Alt+Del为该图层填充前景色。在“图层"面板中设置“色板"图层的混合模式为“颜色"，图层设置及图像效果如图7一2所示。 案例实施 游戏界面设计 7.1 （3）打开素材图片“人物l.jpg" - “人物4.jpg"，利用“移动工具"分别将其移动到当前文件中，依次生成“图层1 "、“图层4 "。按快捷键ctrl+T，分别调整其大小，调整后的“图层"面板及图像效果如图7一3所示。 案例实施 游戏界面设计 7.1 （4）选择“橡皮擦工具" ，设置大小为120像素，硬度为0％，不透明度为100％，分别在 “图层1 "、“图层4 "中将图像中边缘的部分擦除掉，擦除后的效果如图7一4所示。 （5）将“橡皮擦工具"的不透明度调整为50％，继续擦除多余部分的图像，使人物与背景自然融合，效果如图7一5所示 案例实施 游戏界面设计 7.1 （6）在“图层4"的上方创建新图层，命名为“矩形1 "选择“矩形选框工具"，绘制一个矩形选区。将前景色设置为#7{8284，按快捷键Alt+Del在该图层中为矩形填充前景色。在“图层" 面板中，设置该图层的不透明度为58％，效果如图7一6所示。 （7）在“矩形1 "图层的上方创建新图层，命名为“边角线"。将前景色设置为白色，选择“直线工具"，设置工具模式为“像素"，粗细为4像素，在当前图层绘制边角线，效果如图7一7所示 案例实施 游戏界面设计 7.1 案例实施 游戏界面设计 7.1 （8）在“边角线"图层的上方创建新图层，命名为“矩形2"。选择“矩形选框工具"，绘制一个略小的矩形选区。将前景色设置为#f2b575，按快捷健Alt+Del在该图层中为矩形填充前景色；在“图层"面板中，设置该图层的不透明度为55％，然后添加“投影"及“描边"样式（描边颜色为白色、大小为3像素）。“投影"样式设置如 8所示，图像效果如图7一9所示 案例实施 游戏界面设计 7.1 （9）打开素材图片“王者荣耀标志．png "，利用“移动工具"将其移动到当前文件中，按快捷键Ctrl+T调整其大小；在“矩形2 "图层的上方自动生成“图层5 "。 （10）选择“横排文字工具" ，设置字体为华文宋体，颜色为白色，字号为14点，依次输入文字“账号"、“密码"，并将文字加粗 （11）在文字图层的上方新建图层，命名为“文本框''将前景色设置为#b9bb，选择“矩形工具"，设置工具模式为“像素"，在“文本框"图层中依次绘制两个长矩形；为该图层添加“内阴影”图层样式设置。 案例实施 游戏界面设计 7.1 案例实施 游戏界面设计 7.1 （12）在“文本框"图层的上方新建图层，命名为“按钮"。将前景色设置为#fca164，选择“圆角矩形工具" ，设置工具模式为“像素"，在“按钮"图层中绘制两个圆角矩形；为图层添加“投影"和“内发光"样式（发光颜色为黄色），“内发光"样式设置如 12所示，效果如图 7一13所示 案例实施 游戏界面设计 7.1 （13）选择“横排文字工具" ，设置字体为华文宋体，颜色为白色，字号为9点，依次输入文字“账号登录"、“注册账号"，效果如图7一1所示。 （14）单击“图层"面板菜单中的“拼合图像"命令，完成游戏界面设计。 案例实施 /作业布置/ 7.1 （1）游戏界面设计的操作 （2）游戏界面设计的实施步骤 感谢观看 $