UC8.0诞生记 应用中心图标设计教程


  应用的时代到来?毋庸置疑的回答是“Yes!”。无论是PC、Web还是移动终端,都迎来自己“应用化”的春天。当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,“应用化”的道路上出现了大家挚爱的UC嘞,可喜可贺呀!


  找好自己的风格!这是我们开始图标设计之前需要想好的。平面的?立体的?写实的?卡通的?等等。这个过程也许很长,也许会很短。灵感这东西很难琢磨。当我们想好大体的形状,我们就可以先动手画几个“模拟”图标,这时候的图标画的不必太过复杂,能有个感觉就好。最后咱们UC选择了较为立体的图标风格来进行设计嘞。


  今天咱们一起绘制一个简单的“游戏中心”的图标,跟大家分享一下图标绘制过程的一些方法和心得吧。那我们开始!首先我们先用铅笔啦圆珠笔啥的画个草图,找个自己满意的形,哈哈,就定第二个图的了。(画的很丑——||大家将就瞅瞅!)


  Stept1:这就是我们今天要一起绘制的“游戏中心”的图标啦。第一步咱们先把图标“宽衣解带”一下。这个图标主要可以分解为两个部分,一个“外框”和一个“游戏手柄”。


  Stept2:先用圆角矩形工具画出两个交叠的圆角立体矩形,这个就是我们外框的基本形了。接下来我们对其进行渐变着色。在圆角处添加高光,使得整个立体图形更加自然圆滑,同时在明暗区分较强颜色区隔处增加1px的高光边线,使得图标更显质感。


  Stept3:我们开始绘制暗底区域的高光,这边值得注意的是,我们绘制的高光区域要在暗底选中区域的基础上内收缩1px,使得高光区与暗底间存在明显的间隔,同时为了使绘制的高光区更有色感,我们要进行“二次混合模式叠加”,第一次使用“叠加”的混合模式,第二次则使用“滤色”的混合模式。为了使绘制的高光区更富有质感,我们在原有的高光区基础上,添加1px的高光亮边,这么一来,图标就更晶莹剔透咯。


  Stept4:接下来我们开始绘制右下角的蓝色游戏标签。简单的蓝色侧45度渐变便可完成基本型配色,但是为了锦上添花,我们需要在蓝色渐变的基础上加上与高光区同向的高光亮边,绘制方法与之前提到的绘制高光区域的方法一致,同样需要“二次混合模式叠加”。接下来添加“GAME”的文字,效果使用渐变+投影即可,值得注意的是,渐变色区隔不要太大,淡淡的即可,投影选择黑色“正片叠底”,距离1px,大小2px即可。同时在暗底上层加上蓝色的高光,便可给图标带来不一样的剔透质感。


  Stept5:绘制完外框,我们开始绘制游戏手柄嘞。先用鼠标绘制一个游戏手柄的外形。添加一个简单的线性渐变。然后在手柄的边界处打上阴影,让手柄立体起来。


  Stept6:现在我们开始游戏手柄的左侧操作栏的绘制。为了让其更有“凹凸”感,我们选择在暗色渐变的外侧添加与手柄主体渐变色相反的渐变描边。在暗色方向操作盘上绘制上下左右的方向键,注意,渐变色使用时,与背景色不能过于反差,淡淡的区隔即可。


  Stept7:至于右侧的操作按钮与左侧操作盘的绘制方法也有异曲同工之处。先绘制四个“凹槽”,然后在里边放置四个按钮,在按钮的图层属性配置上,可以只用纯色加上”斜面浮雕”效果,简单显示高光即可。然后为你的按钮配上不同的色彩即可完工。值得注意的是,每个按钮的外层可以添加一个颜色属性更深的色值,使得产生更为细致的区隔立体效果。


  Stept8:接下来绘制的是手柄的底部操作杆了。这部分的处理我们可以简单想像成一个立体按钮的绘制。概括起来就是“两个图形平移”。即先绘制一个圆形,然后复制一个副本,并将其向上平移,简单吧~操作杆的高光部分,我们同样使用简单的“斜面浮雕”效果即可。手柄的主体基本完成,然后我们添加上一些“附属”小物件,游戏手柄搞定嘞!


  Stept9:最后一步就是“打包”啦。我们将游戏手柄装进我们之前绘制好的外框中。这里需要注意的是,需要在外框暗色区域的选区内,在手柄四周打上阴影,拉出手柄与外框的距离,使得整体更有层次感。之后我们只需要再增加一些小光点作为点缀,接着拉个倒影,便大功告成了!

  结束语:不知道看了这篇文章是否会对大家的图标设计有所帮助嘞,绘制图标是个细致活,大家平时也多多练习,多多绘制图标,孰能生巧嘛~大家都Fighting!

  文章来源:red.uc.cn/?p=568

时间: 2024-07-31 06:53:30

UC8.0诞生记 应用中心图标设计教程的相关文章

UC8.0浏览器产品游戏中心图标设计经验分享

文章描述:UC8.0诞生记–应用中心图标设计小教程. 应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我

应用中心图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,

优秀的Photoshop图标设计教程

现在大部分网站都融入了图标,图标逐渐成为网站里重要的一部分.适当地使用图标能帮助实现一个在客户看来非常专业的网站.尽管从网上可以下载到免费 的图标或者也可以购买通用的图标,但是学会了图标设计的技术无疑能够带来很多益处.这里就有国外20个优秀的Photoshop图标设计教程,希望对你有 所帮助. How To Design a Realistic Takeout Coffee Icon Tutorial Link For How To Design a Realistic Takeout Coff

PhotoShop制作立体游戏应用图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,

photoshop皮包主题UI图标设计教程

给各位photoshop软件的使用者们来详细的说一下皮包主题UI图标的设计教程. 教程分享: 最终效果:   下面,教程开始! 在正式做图标之前,需要先自定义一个图案. 首先新建一个1000×1000px 的画布,填充颜色#c5ab90,然后[滤镜]-[杂色]-[添加杂色],给图层添加7%的杂色.完成之后,[编辑]-[自定义图案]添加一个图案,命名为[磨砂纹理]   准备工作做好了,开始画皮包. 新建一个1000×1000的画布,填充一个从#d9d5cf到#9c8c7e的径向渐变.   建一个5

移动图标设计教程:快速打造iOS7风格图标

文章描述:我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标. 随着近年来iOS7的发布,很多网站和APP都忙于改头换面,来适配这套全新的扁平纤细的iOS设计风格.设计好图标是件棘手的事情,尤其当你要设计一整套时,而设计线条式图标本身又是另一项挑战. 下面,我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标. 目标是什么? 凡事分轻重缓急,你设计的图标或图标集是用于你的APP吗(这里的APP也指网站)?对于这部指南来说,都无所谓.因为无论如何你都应当遵循下面这些步

PS制作经典质感拉丝钟表UI图标设计教程

UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味, 还要让软件的操作变得舒适.简单.自由,充分体现软件的定位和特点. UI设计原则 1.简易性 界面的简洁是要让用户便于使用.便于了解.并能减少用户发生错误选择的可能性. 2.用户语言 界面中要使用能反应用户本身的语言,而不是游戏设计者的语言. 3.记忆负担最小化 人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度.人类的短期记忆极不

UI一碗拉面图标设计教程

  一碗拉面-图标设计UI教程,绘制一碗日系拉面,店家加醋再加个蛋,值得一试,绘绘绘,画画画 分类: PS入门教程 ps图标制作教程

Illustrator图标设计教程分享一览

给各位Illustrator软件的使用者们来详细的解析分享一下图标设计的教程. 技巧分享:                   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的图标设计的教程解析分享的全部内容了,各位看到这里的使用者们,小编相信目前大家现在是很清楚了吧,希望小编上面的教程能给大家带去有用的帮助.