虚拟现实技术应用 UI界面设计 操作指南:游戏UI界面设计.docx
文本预览下载声明
接球游戏UI界面设计
一 创建游戏UI界面
1.设计贴图素材
(1)设计草地素材
步骤01 打开Photoshop图形图像软件,单击“文件”“新建”(或按快捷键Ctrl+N),在弹出的“新建”对话框中,输入名称为grass,宽度为150像素,高度为150像素,再单击“确定”。如图1所示。
注:用英文命名的目的是为了将文件导入Unity3d软件可以识别。
图1 创建grass文档
步骤02 在左侧工具盒中单击“设置前景色”工具,在弹出的“拾色器”对话框中,选择浅绿色#54ff00作为前景色,单击“确定”,如图2所示。
图2 设置前景色
步骤03 单击“编辑”“填充”,或按Alt+Delete快捷键填充前景色,将背景图层填充为浅绿色,如图3所示。
图3 填充浅绿色背景
步骤04 单击“滤镜”“杂色”“添加杂色”,在弹出的“添加杂色”对话框中,设置数量为“20”,分布方式为“高斯分布”,单击“确定”,如图4所示。
图4 制作草地效果
步骤05 单击“编辑”“定义图案”,在弹出的“图案名称”对话框中输入名称grass,如图5所示。
图5 定义图案grass
步骤06 单击“文件”“存储为”,在弹出的对话框中选择存储路径,并将文件分别存储为grass.jpg和grass.psd,如图6所示。
图6 将文件分别保存为grass.jpg和grass.psd
(2)设计木纹素材
步骤01 按快捷键Ctrl+N新建一个名称为wood,宽度和高度为150像素的文件,如图7所示。
图7 创建新文件
步骤02 单击工具箱“设置前景色”工具,将其颜色设置为浅黄色#ffcc00,再单击“设置背景色”工具,将颜色设置为深黄色#342301,如图8所示。
图8 设置前景色和背景色
步骤03 按快捷键Ctrl+Delete,将背景图层颜色填充为深黄色,如图9所示。
图9 填充背景色
步骤04 在图层选项卡中单击“新建图层”,或按快捷键Shift+Ctrl+N新建“图层1”,再选择工具箱中的矩形选框工具,在图层1的左侧框选一个矩形选区,按快捷键Alt+Delete填充浅黄色的前景色,如图10所示。
图10 创建浅黄色图层
步骤05 选择“图层1”,在菜单栏选择“滤镜”“风格化”“风”,在弹出的“风”对话框中设置方法为“风”,方向“从右”,单击“确定”,将浅黄色区域制作出风的效果,如图11所示。
图11 制作风的图层效果
步骤06 按几次Ctrl+F快捷键将木纹线条感制作出来,再按Ctrl+T键设置自由变换选区,将浅黄色选区拖拽到图层右边,如图12所示。
图12 将浅黄色图层选区扩大
步骤07 在图层1中使用矩形选框工具框选一个区域,单击“滤镜”“扭曲”“旋转扭曲”,在弹出的“旋转扭曲”对话框中,设置旋转角度为117度,单击“确定”,在选择区域线条发生扭曲变形,制作出木纹的纹理,如图13所示。
图13 制作木纹的旋转扭曲效果
步骤08 选择移动工具将“图层1”向左移动一段距离,将纹理不理想的部分移开,再按Ctrl+T自由变换选区,将图层1区域扩大到整个图层,单击“图像”“调整”“色阶”,在弹出的对话框中,将色阶游标向右移动到中间,将木纹的颜色调整深点,如图14所示。
图14 调整木纹的颜色
步骤09 按Ctrl+T自由变换选区,单击鼠标右键选择“旋转90度(顺时针)”,将图层1木纹图案旋转90度,如图15所示。
图15 旋转木纹图案
步骤10 按Ctrl+E快捷键将图层1与背景图层合并成一个图层,如图16所示。
图16 合并可见图层
步骤 11 单击菜单栏的“编辑”“定义图案”,将木纹定义成图案,如图17所示。
图17 定义木纹图案
步骤12 将文件分别保存为“木纹.jpg”和“木纹.psd”两种格式,如图18所示。
图18 保存木纹图片
2.设计游戏初始界面
步骤01 按快捷键Ctrl+N新建一个名称为start,宽度和高度为150像素的游戏初始界面文件,如图15所示。
图15 创建游戏初始界面
步骤02在图层选项卡中单击“新建图层”,或按快捷键Shift+Ctrl+N新建一个图层命名为“草地”,单击矩形选框工具,框选草地图层的下面1/3区域,按Shift+F5打开“填充”对话框,选择使用内容为“图案”,单击“自定图案”下接按钮选择grass的草地图案,单击“确定”,将草地纹理铺设到图层下端,如图16所示。
图16 创建草地图层
步骤03 单击“视图”“标尺”,或按快捷键Ctrl+R,在视图中创建标尺,分别在水平标尺和垂直标尺拖拽一根参考线,如图17所示。
图17 设置标尺和参考线
步骤04在图层选项卡中单击“新建图层”,或按快捷键Shift+Ctrl+N新建一个图层命名为“小球”,按住矩形选框工具在下拉选项中选择椭圆选框工具,将鼠标移到2根参考线交叉线,按住
显示全部