Ai怎么绘制左右滑动的js滑动开关按钮钮图标

来源：蜘蛛抓取(WebSpider) 时间：2017-01-03 22:28 标签： 左右滑动按钮
最近搜索或发布您的需求，坐等设计师上门服务快5分钟内设计师响应专业强十年专注设计领域价格低费用最多可节约50% >
> 开关键等小图标AI矢量文件原创素材为商业授权，可随意使用，无版权纠纷。编号：238409格式：AI容量：16MB尺寸：收藏成功，您可在“”中查看你可能正需要这些素材已收藏过该素材！8红币已收藏过该素材！30红币已收藏过该素材！15红币已收藏过该素材！18红币已收藏过该素材！32红币已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！15RMB已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！免费已收藏过该素材！30红币已收藏过该素材！30红币已收藏过该素材！25红币已收藏过该素材！25红币已收藏过该素材！20红币已收藏过该素材！25红币已收藏过该素材！免费已收藏过该素材！40红币已收藏过该素材！70红币已收藏过该素材！100红币已收藏过该素材！22红币已收藏过该素材！免费已收藏过该素材！40共享分已收藏过该素材！36红币已收藏过该素材！138红币永久免费设计素材共享平台*您浏览器版本过低，若QQ和微信登录不能使用，请使用微博登录。AI教程！手把手教你绘制一组清新简约的微图标
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
AI教程！手把手教你绘制一组清新简约的微图标
编者按：今天这组风格统一的图标难度不高，作者特意挑了两个操作技巧偏多的图标，并且附上两款经典的神器案例（已打包），新手练习绝对能大涨一波知识，直接开工咯。
教程中的案例归原设计师所有。
作者微信公众号：六层楼那么高，欢迎关注唷。
教程中用到的所有工具：路径查找器面板，选择工具（V），直接选择工具（A），添加删除锚点（+，-），对象&路劲&偏移路劲，变换操作，外观面板，（xtream path），。
我是个快捷键控，能快捷键找到的，鼠标绝对不会移动两下。但也不是现在立马就要记住全部，用到哪些记那些，多用几次就很自然了。所以在写步骤的同时也会放快捷操作，觉得有用的就试试吧。
初始设置，简化工作
新建文档（Ctrl+N），大小随意，这里是700*700px，RGB，分辨率72，新建对象与像素网格对齐不勾选。
下面设置网格线，网格线在AI中是个对于初级和老手都很有用的东西，对于需要注意大小和比例等这些地方方便很多，还省去添加辅助线的麻烦。
编辑&首选项&参考线和网格，设置如下。网格大小根据具体设计要求设置。
视图&显示网格，对齐到网格。这些都设置好会大大简化工作。
设计之前先定好一个大致规范，这方面是个初学者，不会，自己琢磨的，有经验的可以留言教教哈。
这是一个大概的预设图。圆半径为80整个圆正好占用五个32px网格。图形总元素基本尺寸（单位：px），矩形椭圆宽：20，40，70. 长：60，80. 描边大小：2，4，6 圆角：2，4，6
所有图形尺寸都是基于以下图形的框架。
2. 该设置的设置好了，下面就开始第一个图标吧。
呐，第一个小图标一开始都是由矩形和线条组成的。具体摆放还有比例问题自己调节。简单说下做这个图标用到的关键步骤。
首先用到的工具快捷键的切换：选择工具（V），直接选择工具（A），矩形工具（M），椭圆工具（L），Xtream path圆角矩形工具，RoundAnyCorner（之前的微盘有下载）
A：矩形，圆形对齐
关于对齐的问题：在对齐面板的右上角可以选择显示选项，就会出现如图所示的选项，对齐所选对象，对齐关键对象，对齐画板。若要使几个对象的间隔指定数值，可使用分格间距功能。
tips：当要将两个物体对齐，希望以其中一个对象为基准对齐择两个对象一起选中，再次左击选择基准对象，对齐，就可以了。
B：制作圆角
Xtream path这个插件中最常用的也就直边转半圆角和圆角工具。使用很简单，就不介绍了。
而对于图中所示的锚点，一边直角一边曲线的就有点难搞。用AI自身的圆角功能和Xtreampath都不是很好实现，起码我没有发现什么完美的方法。这里有另外一个工具RoundAnyCorner（屌丝的外表，功能强大~），可以对任意角度曲线化~真棒~
选择其他脚本弹出窗，找到RoundAnyCorner的位置打开即可 （Ctrl+F12）
简单的输入数值就可以了。
对于直线转圆角，直接在外观面板&描边，点击描边选项，弹出框点选择圆角端点就OK。
直线转曲线，直接选择工具（A），选中要转换的锚点点击上图中的曲线按钮。如果只想调整锚点曲线手柄一边的曲率按住Alt，调整手柄。
问题：但是，当我们把做的icon缩小时，就会出现以上左边icon的样子，描边设置的大小没有随着缩放而自动缩放。
扩展直线段对象或者
在编辑&首选项&常规，缩放描边和效果选项勾选。
3. 第二和第三个icon注意事项个方法不再重复，都是上面介绍过的用法。下面讲第四个图标。
上图为weak图标初始组成对比。下面分解讲。有用到相同方法的地方就不罗嗦了。
顶部直线变半圆，下部矩形框底部的两个锚点各向中心点移动八像素。
选中对象在路径查找器面板选择联合
选中底部需要变圆角的四个直角点，使用RoundAnyCorner工具制作2像素的圆角。
下面用瓶子的轮廓制作瓶子的液体。选中对象，对象&路径&偏移路径（此功能是复制一份原对象再偏移路径，也就是说会有新的路劲出来）设置-4px的偏移
偏移路径之后原来的圆角会变成直角，需要重新选择变成圆角。
删除半圆顶部的锚点变成直线变。下移10像素。
制作液体的波浪。使用一个10像素的椭圆如图所示放置，并且路径查找器下合并路径。
再画一个10像素的椭圆，选择路径查找器面板减去前面。
微调路径。
下面说画水滴的方法。
将椭圆顶点的锚点换成直角
选中顶部锚点，上移把像素如图所示。
调整顶部锚点手柄变圆滑。再尝试挑中中部左右锚点手柄的上部是过度自然。
其余部分都是之前用到的技巧不用再啰嗦了。
【优设七月高人气教程合集】
《我是歌手》总决赛超赞海报教程！
个性另类的波普风格人像教程！
夏天专属西瓜字效！
作者：六层楼那么高
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量97万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注素材格式：
素材尺寸：
素材版权：
文件大小：
更新时间：
需要爱币：
Powered copyright &
all rights reserved 沪ICP备号
苏州市公安局网备案编号：开关按钮，设计一个滑动的控件开关图标
来源：UI中国
作者：yao66298
设计一个滑动开关按钮，主要利用AI和PS制作，AI负责设计外形，PS负责按钮的质感，有兴趣的可以一起跟着教程练习一下。
先看看效果图
在AI建1200px*800px画板
绘制一个400px*70px矩形
边角设置35px ,好像只有cc版本可以直接设置圆角
偏移一个矩形出来，在向里偏移3px的矩形(向里设置负数)
最后绘制出这样的图形
然后释放图层导出psd格式(不释放会都在一个图层)
教程未完，请看下一页！
【原创教程 投稿邮箱： 】
==================== 学习提示 ====================
打开ps，跟着教程做一遍，做完的图要到这里交作业：
教程有看不懂的地方，可以到论坛发帖提问：
加官方微信，随时随地，想学就能学！
官方微信：ps_bbs，或扫右侧二维码！
关注我们微博：
想学更多的同学，可以订阅我们邮件，每天都有新教程发给你：
看完教程望大家
旧一篇： 新一篇：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
免责声明：除本站原创外，本站文章均收集整理自网络，其版权归该教程原作者或原出处所有！本站转载文章均保留了原出处及作者，如出现资料错误或侵权，请联系修正或删除：脚本简介纯CSS3左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮，点击按钮可以左右滑动，就像开关打开闭合一样的效果。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.

我要回帖

更多关于 左右滑动按钮 的文章

 

随机推荐