应用的时代到来?毋庸置疑的回答是“应用化”的春天

应用的时代到来?毋庸置疑的回答是“应用化”的春天

按此在新窗口浏览图片

应用时代已经到来? 毫无疑问的答案是“是的!”。 无论是PC、Web还是移动端,都在迎来属于自己的“应用”春天。 当然,随着UC8.0各种浏览器产品的发布,UC浏览器爱好者不难发现,大家心爱的UC出现在了“应用”的路上。 恭喜!

按此在新窗口浏览图片

找到自己的风格! 这是我们在开始图标设计之前需要考虑的事情。 平坦的? 三维? 实际的? 卡通片? etc. 这个过程可能很长,也可能很短。 灵感是一件很难弄清楚的事情。 当我们想到大致的形状时,我们可以先画几个“模拟”图标。 这时候图标的绘制就不需要太复杂了数据报告,只要我们有感觉就可以了。 最后,我们的UC选择了更加立体的图标风格进行设计。

按此在新窗口浏览图片

今天我们来画一个简单的“游戏中心”图标,和大家分享一下图标绘制过程中的一些方法和心得。 那我们开始吧! 首先游戏策划,我们用铅笔或圆珠笔画草图,找到一个我们满意的形状。 哈哈,我们再决定第二张图。 (画的很丑——||大家看看就好!)

按此在新窗口浏览图片

Step1:这是我们今天一起画的“游戏中心”的图标。 第一步是“脱掉”图标。 这个图标可以分解成两个部分,一个“框架”和一个“游戏手柄”。

按此在新窗口浏览图片

Step2:先用圆角矩形工具画出两个重叠的圆角三维矩形ps游戏设计,这就是我们外框的基本形状。 接下来我们用渐变色给它上色。 在圆角处加入高光,让整个三维图形更加自然流畅,同时在强烈的明暗分色中加入1px的高光边缘,让图标更有质感。

按此在新窗口浏览图片

Step3:我们开始绘制深色背景区域的高光。 这里值得注意的是,我们绘制的高亮区域要在深色背景选中区域的基础上缩小1px,这样高亮区域和深色背景之间就有明显的缝隙。 同时,为了让绘制的高亮区域更加丰富多彩,我们需要进行“二次混合模式叠加”,第一次使用“叠加”混合模式,第二次使用“滤色”混合模式. 为了让绘制的高亮区域更有质感,我们在原有高亮区域的基础上增加了1px的高亮边缘,这样图标会更加晶莹剔透。

按此在新窗口浏览图片

Step4:接下来我们开始绘制右下角的蓝色游戏标签。 蓝色边一个简单的45度渐变就可以完成基本的配色,但是为了锦上添花,我们需要在蓝色渐变的基础上加上一个与高光区域同方向的高光边缘。 绘制方法和前面提到的绘制高亮区域的方法一样,同样需要“二次混合模式叠加”。 接下来,添加“GAME”的文本。 效果可以是渐变+投影。 值得注意的是,渐变色间隔不宜太大,淡淡即可,投影为黑色“Multiply”,距离为1px,大小为2px。 能。 同时,在深色背景的上层加入蓝色高光,可以为图标带来不一样的透明质感。

按此在新窗口浏览图片

Step5:画好边框之后,我们开始画游戏手柄。 首先用鼠标画出一个游戏手柄的形状。 添加一个简单的线性渐变。 然后在手柄的边缘涂上阴影,使手柄具有立体感。

按此在新窗口浏览图片

Step6:现在我们开始绘制游戏手柄的左侧操作栏。 为了让它更加“凹凸有致”,我们选择在与手柄主体渐变相反的深色渐变外侧添加渐变描边。 在暗方向操作面板上画上、下、左、右方向键。 注意在使用渐变色时,不要与背景色反差太大,稍有分离即可。

按此在新窗口浏览图片

Step7:至于右边的操作按钮和左边的操作面板的绘制方法,也有相似之处。 先画出四个“凹槽”,然后在里面放上四个纽扣。 在按钮的图层属性配置中,只能使用纯色,并添加“斜面浮雕”效果来简单显示高光。 然后给你的按钮添加不同的颜色,你就完成了。 值得注意的是,可以在每个按钮的外层添加颜色属性的较暗颜色值,从而产生更细致的三维效果。

按此在新窗口浏览图片

Step8:接下来要画的是手柄底部的摇杆。 我们可以简单地将这部分处理想象成一个三维按钮的绘制。 一言以蔽之,就是“二图译”。 就是先画一个圆ps游戏设计,然后复制一个副本,向上平移,很简单~我们也可以对摇杆的高亮部分使用一个简单的“斜面浮雕”效果。 手柄主体基本完成,再添加一些“附属”小物件,游戏手柄就大功告成啦!

按此在新窗口浏览图片

Step9:最后一步是“打包”。 我们将游戏手柄安装到我们之前绘制的框架中。 这里需要注意的是,需要在外框暗区的选择区域,在把手周围投上阴影,拉出把手与外框的距离,让整体更加分层。 之后我们只需要添加一些小光点作为点缀,再画出倒影,就大功告成了!

结语:不知道看完这篇文章对大家的图标设计有没有帮助。 绘制图标是一项细致的工作。 大家要多多练习,多画图标。 什么叫完美~大家一起加油吧!