tianshiluoye 发表于 2014-6-18 03:49:35

教你设计精美的螺旋圆点ICON图标

      这是模仿 Nest 烟雾警报器 做的 icon，打洞实在被难倒了没办法完全一样，只能做个差不多相似的样子出来。打洞排列怎么做可以参考这篇：《AI教程：利用ILLUSTRATOR创建漂亮的螺旋圆点花纹》，不怎么好做就是了。
图层数比起之前的Icon Design：My Wallet，这个 Nest Pastiche icon 只有 9 个图层，最难搞的就是那堆洞的排列，其他都还好处理。提示：教程详细步骤在二楼，不用回复也能看到！想下载该教程的可以回复获取下载网址:**** Hidden Message *****教程编号:133675 作者：Akane_Lee 出处：优设网

tianshiluoye 发表于 2014-6-18 03:49:37

教你设计精美的螺旋圆点ICON图标


1. 边缘高光阴影2. 文字3. 中间的环和彩色光4. 中间的凹槽5. 满满的打洞6. 方型底7. 阴影a8. 阴影b9. 白底
http://pic.16xx8.com/allimg/140617/04561a425-0.png

tianshiluoye 发表于 2014-6-18 03:49:38

教你设计精美的螺旋圆点ICON图标


阴影
为了模拟真实影子，我会做2层的阴影，略微修改尺寸、位置、透明度、高斯模糊的数值。如果只用单层，影子渐层感会比较呆板。

http://pic.16xx8.com/allimg/140617/04561953H-1.png

tianshiluoye 发表于 2014-6-18 03:49:39

教你设计精美的螺旋圆点ICON图标


靠近主体、尺寸较小，用于加深主体的影子、增强对比度。

http://pic.16xx8.com/allimg/140617/0456191S0-2.png

偏离主体、高斯模糊的数值更大、尺寸也比较大，透明度低，做影子外围渐层的效果。

tianshiluoye 发表于 2014-6-18 03:49:40

教你设计精美的螺旋圆点ICON图标

      
边缘导角这种弯进去的作法挺常见的，稍微试了下，发现只要一个图层、设定 2 种图层样式就能表现出还不错的视觉效果。光线由上往下打，所以上方有高光、阴暗面在下方。想象一下实物、方体边缘是导了 R 角，所以高光不会是锐利一条线，而是渐层。

http://pic.16xx8.com/allimg/140617/0456193308-3.png

tianshiluoye 发表于 2014-6-18 03:49:41

教你设计精美的螺旋圆点ICON图标


制作阴影面，离光缘越远的部份一定比较暗。

http://pic.16xx8.com/allimg/140617/04561910I-4.png

制作 R 角缓和的反光。因为内阴影和内光运会重迭在一起，注意数值设定，内光晕要比内阴影的尺寸更大。

tianshiluoye 发表于 2014-6-18 03:49:42

教你设计精美的螺旋圆点ICON图标


成品
http://pic.16xx8.com/allimg/140617/0456195M9-5.png

中间的文字仿真 3C 产品上常见的金属文字贴纸。因文字较细，仅设定笔画、渐层、阴影。原版产品的光圈是蓝色、我试着改成粉红色。
Nest 除了白色机型之外、也有黑色款，有兴趣的人可以试着把黑色款做出来。

夏树 发表于 2015-10-30 22:56:56

好奇原点的渐变的方向怎么弄出来的`

snakeee 发表于 2015-12-10 10:18:50

回复看看先
页: [1]
查看完整版本: 教你设计精美的螺旋圆点ICON图标