IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

概念视觉设计

Taobao.com UED Team 2010-01-08 17:04:11 累计浏览 5,827 次
本机暂存

    10月份,工作之外,做了一款控件不全的“播放器”界面,叫它播放器只是个借口,也许更偏重视觉技法的练习。本文就让我们分析下,一个复杂图形是如何从无到有的,希望对视觉设计师们有所帮助,也能盛产一些“古怪”的作品。

    制作之初,脑海里就反复罗列一些极具复杂的图形,闪闪发光,搜集的变形金刚素材:

    原图已失效

    素描这版感觉这不错,特点鲜明,尖尖的犄角,硬硬的质感,皮肤下面泛光,结构虽复杂但交代的却很清楚。就它了:)

    万事开头难,画的时候,发现比想象的要难很多,摆在眼前的首要问题就是该如何下手?从哪里开始?我选择了犄角,肯定有人会问为什么不选择眼睛?这个不固定,随个人习惯或者随机性而变化,我之所以选择犄角有两个理由,一是因为图形简单,便于迅速建立信心,鼓励我继续做下去(信心很重要);二就是机器类的卡通形象无一不对犄角大作文章的,可以说是面部最大的特点之一。下面就看下犄角的制作过程:

    原图已失效

    颜色保守,以免后面难于把控,强化边缘,都有加2到3像素高光线,华丽丽的感觉,效果还算满意,第一步算是完成了。

    眼部位于犄角下面,两者紧挨着,不建议直接套用犄角的表现手法,需要做一些小变化:

    原图已失效原图已失效

    “眉骨”过渡柔和,质感丰富细腻,“眼睛”还没有更好的方法,暂时用灯管的形式展现,“眼袋”则继承犄角的质感。

    大部分的效果是靠图层叠加出来的,用了很多混合样式,阴影,高光的处理也尤为重要。

    眼下面是脸部的处理,适当的穿插眉骨和犄角的表现手法:

    原图已失效

    当完成半张脸的时候,ctrl+shift+alt+e合并可见图层,左右翻转下,裁切下,底稿算是结束了。

    所有控件都在这里了:

    原图已失效

    原图已失效

    

    

    作品缺少肌理就好比眼睛无光,死板僵硬,为了更加丰富细腻,我们还需要给他添加点特殊效果。这样的面孔需要迷彩服的花纹,柔光加30%透明度,可以适当滤镜:杂色1-2,锈迹斑斑的感觉就出来了:

    原图已失效

    最终效果如下:

    

    原图已失效

    整个过程就是这个样子,谢谢捧场:)

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  3. 网易微博平面视觉项目执行 (累计阅读 10,034)
  4. sns视觉设计分享 (累计阅读 9,523)
  5. 图书馆的世界纪录 (累计阅读 9,507)
  6. 网站导航设计的6大分类 (累计阅读 9,298)
  7. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,199)
  8. 2011年手机产品设计趋势(1):精致实用的界面 (累计阅读 5,526)
  9. Android设计中的.9.png (累计阅读 5,040)
  10. 如何创建一个简洁、光滑的web2.0网站页脚 (累计阅读 4,978)