文档详情

虚拟现实技术应用 UI界面设计 操作指南:游戏UI界面设计.docx

发布:2021-01-25约3.62千字共12页下载文档
文本预览下载声明
接球游戏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根参考线交叉线,按住
显示全部
相似文档