教程·Photoshop | 游戏UI设计之卷轴

图标是游戏UI中的重要组成部分，如果游戏中没有UI信息的处理和图标设计，那么整个游戏用户体验就会变得很差。卷轴图标在游戏中充当的作用通常是传送信息或鉴定装备等，在绘制此类物品图标时同样要注意突出物品的主体部分，让玩家一眼看上去就很喜欢，才有意向选择获取或购买。本篇将为大家介绍利用Photoshop软件设计卷轴图标的过程。

前期准备

更多精彩图片 请登录

案例综述

卷轴图标在游戏中充当的作用通常是传送信息或鉴定装备等，在绘制此类物品图标时同样要注意突出物品的主体部分，让玩家一眼看上去就很喜欢，才有意向选择获取或购买，如上图。

设计要求

1.绘制一个物品图标，要求为一个卷轴。

2.可以自行设计一些装饰，让卷轴看上去显得精美。

3.最终游戏项目运用的图标实际尺寸大小为100像素×100像素。绘制时需按原始图标尺寸的2~3倍大小进行绘制。

配色方案

Step 01启动Photoshop，按Ctrl+N快捷键，新建一个文档，设置【宽度和高度】为450像素×450像素，设置【分辨率】为72像素/英寸，设置【背景色】为白色，设置【颜色模式】为RGB颜色、8位，单击【确定】按钮，创建完毕，如下图所示。

更多精彩图片 请登录

Step 02按Alt+Delete快捷键，将【背景图层】填充为黑色；新建图层，将图层命名为【草图】，如下图。

更多精彩图片 请登录

Step 03在脑海中构思一个卷轴的草图，把卷轴想象成一个圆柱体；使用【钢笔工具】，快速将卷轴形状在画布中绘制出来，如下图所示。

更多精彩图片 请登录

Step 04为卷轴添加一些细节效果，添加时注意卷轴的透视结构与关系，如下图所示。

更多精彩图片 请登录

Step 05给卷轴增加一些丝带缠绕效果和残缺边缘效果，并对卷轴整体做一些修改和调整，如下图所示。

更多精彩图片 请登录

Step 06新建图层，将卷轴整体色调设定为黄色，并使用【画笔工具】分层绘制出卷轴的大色块，绘制时注意卷轴整体的色彩，以及光影关系的处理，如下图所示。

更多精彩图片 请登录

Step 07继续对卷轴进行色块细节的刻画，使其颜色过渡更加均匀；然后使用颜色叠加的方式加强卷轴整体的明暗关系，使其颜色显得更加鲜艳和逼真，如下图。

更多精彩图片 请登录

Step 08绘制出卷轴上的绳子和印泥部分，绘制时注意区分出绳子多个层次的光影关系。

更多精彩图片 请登录

做一些高光效果以加强卷轴整体的立体感，如下图。

更多精彩图片 请登录

TIPS

绘制到这一步，当发现图层很多时，可以点选图层，然后单击【创建新组】按钮（快捷键为Ctrl+G）进行建组管理。在平时绘制图标时也要注意养成将图层建组管理的好习惯，方便查找图层。

更多精彩图片 请登录

Step 09深入刻画卷轴上面的印泥细节部分，绘制时注意其层次和体积感的表现，如以下两图所示。

更多精彩图片 请登录

更多精彩图片 请登录

Step 10调整卷轴整体，并给卷轴添加蓝色的反光，让卷轴图标有明显的冷暖色的变化，使之更加立体，如下图所示。

更多精彩图片 请登录

Step 11按上一个案例同样的方法给卷轴加上一个背景，同时给背景四周加上一个黑色遮罩效果，最终效果如下图所示。

更多精彩图片 请登录

非常棒的教程，加油，继续发好的作品