小编： 今天的教程除了一枚线性图标的操作演示，更重要的是帮同学们领会师必备的化繁为简，抽丝剥茧的能力。初学图标绘制的同学，绝对需要里边提到的这个方法~
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
你可能喜欢的：Ai怎么绘制简单的编辑图标? ai绘制ui图标的方法
互联网 & 发布时间： 11:58:19 & 作者：佚名 &
Ai怎么绘制简单的编辑图标？手机中经常能看到很简单的编辑图标，该怎么办呢？编辑图标很简单，就是一个没有封闭的正方形加一条斜杠，下面我们来看看ai绘制ui图标的方法，需要的朋友可以参考下
Ai简单绘制编辑图标
1、在Ai软件中，新建一个800*800的文档，选择矩形工具，按住shift画一个正方形的图形，如图所示
2、然后选择正方形的描边改为4pt，如图所示
3、选择添加锚点工具在正方形添加两个锚点，如图所示
4、接着选择直接选择工具点击正方形的锚点，再按delete删除键，如图所示
5、接下来选择钢笔工具，勾出一条路径，如图所示
6、最后把路径的描边改为4pt，如图所示
相关推荐：
大家感兴趣的内容
12345678910
最近更新的内容&相信很多和我一样的设计爱好者和初学者都是通过Photoshop这样的图形软件而熟悉设计的。虽然软件只是工具，创意还是完全来自我们的大脑，但是软件使用技法很大程度上决定了我们作品的细节处理。今天想和大家交流的就是我在UI设计中的主要绘图方法：路径＋图层样式。希望能带给一些设计初学者一点启发。
路径＋图层样式的特点：
作为设计师，改无止境经常是挂在我们嘴边的。面对很多形状上需要做出的改变，用钢笔描出来的路径显然比象素化的图层更容易修改，所以对于一些复杂的外形，我在日常工作当中尽量保持原来的路径，不到必须的时候都不会象素化。而图层样式更是如此，PS内置的图层效果功能已经比较强大，通过他来定义的风格可以随意地用参数来确定效果，并且随意地修改。
便于大量套用
PS当中的路径一般都通过图层样式来定义视觉风格，这样带来的好处是只要做出一个图层样式，我们就能方便地复制、粘贴样式来把风格应用到很多其他元素上。当我们在界面中把使用同一样式的元素都链接之后更是能方便的粘贴图层就可全部刷新效果。
可部分地进行矢量操作
矢量是个非常优越的特性，虽然这是AI的拿手绝活，但是Photoshop中的路径也已经基本够用，并且面对着大量旋转、缩放等操作时如果不使用路径，那操作都将变得不可逆。
PS对象素的操作只能精确到1x1的单象素，而对于路径的描点，我们却可以把精确度提高到远小于1象素。对于UI这类非常讲求精确的设计来说是很有利的。
容易陷入思维定势
以上几点其实归结起来只是给我们的设计带来方便，或者说特别适合懒人。所以当路径＋样式成为主要制图方法的时候必须时常提醒自己不要局限于图层样式里的那些效果，毕竟好设计还是在于创意。
下面我想以一个实际的例子来和大家交流一下我的图标制作过程。
这是一枚风格比较简单的图标，造型上也并不复杂，又碰上需要处理多种分辨率的情况，所以非常适合使用路径＋图层样式的制作方法。
确定透视之后，把整体的形状用钢笔勾勒出来或者取PS形状工具中基本造型进行变形和组合。比如光盘的造型是从圆形变形而来，而驱动器两侧的面是用两个形状相减而来。
驱动器的前面板是个胶囊形，图层样式中使用了向上的1象素白色投影来作为驱动器上表面和前面板接缝处的高光；用1象素的外发光来作为描边；上深下浅的渐变给面板增加凹进去的感觉；用光泽来给面板两端加深颜色增加图标的细节；而渐变方式的内描边则来表现前面板的边缘高光。完成之后把前面板复制一下，合并到新的图层（也就是在新复制出的面板下面新建一个新的图层，然后将面板合并到此图层，这样就能保留图层效果，得到一个象素化的面板）。对此新建的面板进行垂直镜像，高斯模糊并且使用蒙板使其显得若有若无，成为图标中的倒影，而盘体两侧的倒影因为反射的是驱动器底部，所以无从复制，我们只能手工使用画笔来描绘。
驱动器的上表面用了3层来表现，底下的一层主要表现大致的光影和外部描边，上面一层区分开驱动器上表面的两个颜色。最后通过渐变叠加表现一下驱动器的两个侧面。
因为是要做的是一个光盘驱动器，所以增加了一张半藏的光盘。光盘也是用路径做了3个同心圆，一个用来作为中间不全反射的白色部分，另两层则使用径向的渐变效果来模拟光盘的样子，一层的叠加控制灰度，另外一层控制颜色。为了和整个图标的风格相符合，渐变用得还是比较柔和的颜色。最后在驱动器的正面加上光盘插孔，因为细节不多，只需要用灰色画个很窄的椭圆即可。
图标大体完工。结束时在驱动器边缘的地方新建图层加入一些渐变效果来增强高光，并且加入了DVD的标志来表现这是个DVD光盘驱动器。
这样图标在48x48分辨率下就完工了，然后我们可以直接对源文件进行缩放来制作32x32的版本：
一般不建议同时缩放图层效果，因为对于描边等一般都精确到象素的效果来说在各个分辨率下保持一致有助于控制统一性，所以我们需要手工调整一下效果，比如缩小光泽和内发光等的尺寸。调整之后得到的图象有些图层会产生错位，稍微调整一下位置即可得到比较理想的效果。
接下来就是一般最令人头痛的16x16图标。很多时候在这样的分辨率下即使只是1px的边缘模糊成2个象素也足以使图标的整体效果变样。所以我觉得这样的小图标主要是修改其边缘。用路径和图层样式的好处在这里十分明显。先把32x32大小的文件调整成16x16：
我首先去掉了dvd标志的图层，因为在这种尺寸下，肯定怎么都看不清了。由于路径描点精确到亚象素（暂时这么叫吧，呵呵），所以经过缩放之后常常看到路径的边缘不在整数的象素坐标上，这样的结果就让本来大小为1象素的效果如描边等被需化了。经过简单的调整把描点重新移动到画面中象素的边缘即可保证图标的清晰。将所有移位的描点都处理过之后16象素的图标也完成了，当然，虽然16象素与32等图标大小只差一倍，但因为包含象素少，所以很多部位必须进行取舍以在保证图标元素不丢失的同时仍然突出细节。比如在这里，因为驱动器前面板只剩3象素高，所以光盘插入孔也没必要继续存在，只需在光盘和面板接触的面板之间淡淡的加上一个深色的图层略微做一下区分。另外，16象素下的路径往往在经过我们的调整后变化较大，常会改变原来的透视，所以需要我们不断调试取得比较好的效果保证不失真。
以上只是个人在以往积累的一丁点经验，所谓闭门造车，难免有很多不足，只希望能抛砖引玉，大家一起交流心得，共同提高:D&
提示本站所有资源仅供学习与参考，请勿用于商业用途。转载请注明来自：
您可能也喜欢
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 8 分钟
璩凯，2001年从沈阳理工大学工业设计系毕业，进入金山软件担任界面设计师。在金山期间参与金山多个软件项目的界面和交互设计，2年后调到网游部管理网游官方网站。现任法国电信北京研究院界面交互设计研究员，从事手持设备的界面设计和人机交互研究，参与设计一些法国电信的欧洲预研项目。
地点：视觉同盟办公室 采访人：廖翔 樊鹏
法国电信UI设计师璩凯
视觉同盟：请自我介绍一下，如何进入UI行业？
璩凯：其实我是学工业设计的，初中的时候就开始有学工业设计的想法，软件交互界面其实是工业设计一个分支吧，金山公司也是国内软件行业很有名气的公司，毕业后就应聘到金山公司珠海研发中心了。 在金山工作2年后之后调到北京网游部管理网游官方网站工作，后来因为我也喜欢平面设计就到上海一家设计公司担任设计总监，之后到北京有一些私人事情就有这么一个机会到法国电信了。
视觉同盟：在法国电信具体从事什么工作？
璩凯：主要负责UI设计和界面研究的公司，大家知道Orange（欧洲一家电信公司），Orange是法国电信的下属公司，有一些研究性项目，北京这块是法国的一个研究院。这边UI部门有2个人。主要是一些设计项目和研究项目。
视觉同盟：在金山那边都参与了哪些项目？
璩凯：金山当时UI在珠海和北京都有，珠海主要是WPS、毒霸、词霸。我参与最多的就是毒霸。从.net到5都参与了
视觉同盟：在金山主要是电脑的软件，到了法电主要是一些手机的UI设计，你对比一下两者有什么区别呢？
璩凯：区别其实蛮大的，从操作上电脑是鼠标，手机是通过按键触摸屏。手机屏幕小设计要更精细，相对于大屏幕那么可以随意发挥。
视觉同盟：在法电工作的感受？
璩凯：在法国电信更多感受就是科学的管理，相比国内的企业在做设计的时候更多是设计师自己个人的想法。他们的管理体系是一种开发模式，比如说在一个项目开发之前要做大量的市场研究，投入很大，他们有单独的社会学部门和市场学部门，他们主要做很多地方的报告，比如说他们要进入中国市场，他们就会做很多的调查，这些报告非常细致，感觉中国人都没有研究自己到这种地步，包括人的习惯、喜好。法电会根据这些报告做一些研究。
视觉同盟：你对GUI个人的理解是什么，是不是像很多人说的就是画画ICON？
璩凯：我觉得UI在国内发展还是很快的，其实也是手机的发展带动了UI的发展。其实很多人把UI理解为画ICON，我很多合作过的朋友，像一些写软件的朋友，找你来做一些界面，或者说画一个好看的界面，或者说美化一下界面，对UI上理解太初级的一些，UI更多是交互设计，是行为上的研究。GUI是形式的表达而已，可能很多人只是看到界面而已没有看到更深刻的东西吧。我很多做UI的朋友也是在抠图标，国外很多设计公司，对交互设计的理解是很到位的，他们做的东西你也许看上去不是很绚，但是用起来就感觉非常顺手。这可能也是国内发展的一个新阶段，等将来竞争达到一个新的层次，也许厂商会看到这个问题。真正交互方面需要更广泛的知识，不仅仅是图形构图，更多的是心理学社会学方面的知识。其实我做UI也是经过了这么一个过程，我当时在金山工作的时候就是有一个信念，就是做出来的图不吓人一跳就不满足，呵呵，可能经过的时间长了，UI包括更多了东西。像国内很多公司做事情把UI放到最后一步，程序都开发完了然后找到UI设计师说美化一下，其实这顺序到了，楼盖好了再去分析盖的好不好，即使修改也是皮毛的东西了。
视觉同盟：你现在做UI还是GUI多一些呢？ 璩凯：现在基本都做，但是有一个流程，一般是项目经理确定一个项目， 会有一个讨论，有UI设计师，有项目组领导，程序员，从市场人员，会确定一个流程图，然后又设计师做一个大致的原型，然后提交经理，申报下来后进行相应的编码和图形设计。而且刚开始讨论很重要，像程序员做事情时是把自己当成用户，因为人都有惰性，大家往往是怎么容易实现怎么做，而不是客户怎么使用方便。所以开始的集体讨论，交互设计师会交互的意见，市场人员提出市场的意见，项目经理作综合评估是不是值得花这么时间去做以保证项目的实施，程序员也会有自己的意见，比如说提出太多东西实现很复杂的话，对项目也是不好的，所以这个流程很重要。
视觉同盟：请介绍一下中国UI行业的发展现状。
璩凯：很多做界面的设计师都是从平面转过来的，都没有接触过交互设计。界面设计还处于一个初级阶段。其实界面设计不能只谈界面设计，要放到工业设计范围去谈，国内整个工业设计还处于一个模仿的阶段，还看不到我们自己的东西，中国这种设计学也是拷贝欧美的。
视觉同盟：你对这个行业将来的发展前景怎么看呢？
璩凯：对于UI设计我会一直从事下去，对于这个行业我也很看好的，像手机的发展是对UI设计一个非常大的拉动，中国的工业设计也一定会起来，界面设计也会很好的发展。需求量更大的是移动设备这一块，为什么呢？对于界面图形设计，PC和MAC的操作系统的GUI已经做足功夫了，他们这种平台越先进越漂亮对于软件设计不一定是好事。可能不像以前win95时，现在已经不需要GUI过多的参与。
视觉同盟：对于即将毕业的设计专业学生，如果想进入UI行业，需要哪些准备？
璩凯：这个更多的是学习更多的知识，像刚才说到的心理学社会学，这些会潜在影响你的设计，当然技法也很重要，如果没有好技法，想法可能实现不了。如果你对手机UI感兴趣就多收集一些资料比如各大手机厂商软件系统的特色，比如新发布软件，你要看看新增加了什么东西，还要尝试做一些东西。
视觉同盟：你喜欢哪些设计师？
璩凯：国内像Rocky、酚麻等都是很强的了，国外的skinfactory等，像skinfactory是一种模式了，比如一个新电影，他们就做成新作品，是一种酷的作品秀，通过这个模式带动创作。
视觉同盟：对于UITIMES网站你有什么寄托吗？
璩凯：对于UITIMES这个网站，我是很久前就想做了，国内有几个设计网站，但是都深入的不够，基本上都是一些软件的截图，个人作品展示。对于她寄托的希望是一个真正的全球的交流的平台，特别是像欧美对界面设计深层次的界面设计交流。国内像韩国日本的资料很多的，但是像欧洲的就很好，现在法电也认识一些设计师，希望可以带给大家一些欧洲的界面设计精髓。
视觉同盟：对视觉同盟的以读者说几句吧。
璩凯：我知道你们网站也很长时间了，希望一直和大家交流，希望大家一直做下去做大。
（左）法国电信UI设计师璩凯，（右）视觉同盟主编廖翔。
原文地址：
================关于优设网================
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。
特色推荐：
设计讲座：定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音（YY频道：）分享实战经验。
设计微博：我们拥有粉丝量25万的人气微博，欢迎大家关注及时获取设计资源。
设计导航：史上最赞最全面的设计师网址导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您还可以扫描下方二维码快速添加：
《致我们终将逝去的青春》海报设计《致我们终将逝去的青春》海报设计集萃
片子不错，推荐大家假期有空去看看：）
那些青春，那个我最爱的赵薇。那样的歌曲，我最爱的王菲。
评论还可以输入字
验证码加载中....
评论就这些咯，让大家也知道你的独特见解
以上留言仅代表用户个人观点，不代表优设立场
阅读 6557工具提示是UI设计中的相当实用的一个组成部分，它帮助用户快速了解未知的和不熟悉的UI控件与对象。从某种意义上来说，工具提示是一种相当实用的UI简化方式：它在...阅读 12854编者按：现在做UI设计不仅要关注界面视觉，还得懂点交互和用研，今天@十萬個為什麽 这篇译文，囊括了移动APP操作过程中该有的9种基础状态（加载中、空状态、错...阅读 14915悬浮操作按钮（Floating Action Button，FAB），或者说悬浮按钮，是 Android 应用中最常见的一个控件。悬浮按钮通常是圆形，底部的...阅读 11709想快速建设一个兼容手机版的响应式网站，建议使用流行的Bootstrap框架，今天分享的Bootstrap 3素材几乎包含Bootstrap的所有设计元素，比...阅读 5657编者按：用移动端收邮件的人越来越多，如何令邮件变得清晰易读也成了一个设计难点。今天分享5个实战经验中总结的设计准则，帮你搞定小屏幕上的邮件设计 &&g...阅读 16579编者按：淘宝和亚马逊的首页差别为什么那么大？简约至上的法则为什么在国内不吃香？今天谷歌的UX设计师@Hiyori 从一个特别的角度来分析背后的深层次原因，一...阅读 21597@C7210 ：因为最近一段时间的更新都集中在了VR方面，所以逐渐也有些朋友在这边或是微博留言问起究竟应该怎样去学习VR设计。我很想尽自己所能的给到一个什么...阅读 5540@可乐橙_ColaChan ：小圆点有助于分割大段文字，使得复杂的文章和博客更容易消化，突出关键信息。如何运用好无序列表？这篇文章提出了7个注意点。 有时候...阅读 5973小文一篇，话题仍与上周衔接，小结了五种在iOS中向用户申请权限的实践模式，可参考。下面进入译文。 对于iOS app，当功能涉及到推送通知、访问照片或调用相...
我们的团队
大家在关注
一扫"掌"握！
上周热门文章
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里上一篇： 下一篇：
老司机教你如何绘制线型图标/软件Adobe Illustrator-相关文章}