即时设计使用教程

首先我们先来了解一下什么是集市设计，那集市设计呢？它是一款专业级的 ui 设计工具，是设计师的效率神器， 他有非常多便利的功能，能够高效的帮设计师啊，提升工作效率，优化团队协作流程。在任意平台只需要打开网页浏览器就可以直接使用，通过及时设计官网就可以直接使用在线版本的工作台。那新的小伙伴呢，可以直接点击这个免费使用的按钮进行注册登录 进入到工作台呢。我们来看一看工作台的界面，左侧呢是我们的档案分区，他有分个人的、团队的文件的展示的选择，右侧呢就是我们文件展示的一个区域，只要是你新建的文件呢，或者是文件夹导入过的 一些主流格式的文件呢，都会在这里给大家全部展示出来的。只需要点击一下创建新文件，就可以马上创建一个空白的设计文档，进入到我们的编辑页面， 编辑界面分为以下五个部分，一个是我们的顶栏，然后是左侧的面板，中间的画布区域，右边的属性面板，还有右下角的主题模式和帮助。接着我们先来看一下顶栏，那顶栏的功能呢，它包括了一个主菜单， 然后是文件名以及文件菜单，接着呢是成员评论，然后是画布的缩放比例，右边呢是我们的插件菜单， 然后一个分享协作的按钮，预览按钮，然后是显示设置 文件的保存状态等。那利用顶栏的功能可以对文件内容进行一个操作。 左上角的功能主菜单是设计工具的功能锁引，它包含了设计工具中啊所有的功能，所以当你忘记某个功能的入口的时候呢，可以直接在这个锁引中翻找，而菜单中的全局搜索也是可以帮助你快速的找到你想要的功能的。 点击画布缩放的加减按钮，可以直接缩放中间部分画布区域的内容，也可以通过选择下拉菜单中的百分之五十，百分之一百，百分之两百呢去进行快速的按比例缩放。 那当画布区域啊有元素的时候呢，顶部就会出现一个顶部工具栏，工具栏里边包含了文件，图层等编辑时呢常用的功能，针对不同的选中，像他会显示啊对应的 功能，以避免无关操作选项带来干扰。通过分享协作功能，你可以快速的将你的文件分享给其他小伙伴，又或是将其他小伙伴添加为你的文件协作者，那么你的小伙伴呢，就可以看到你的文件了。 通过点击预览按钮，你可以进入到预览的界面，查看你所有设计图的效果。 那在工作的过程中呢，你可以通过点击右上角的显示设置，然后去修改不同的编辑界面的布局，以满足呢多种场景下的不同的使用需求。 你可以通过右上角实时查看当前文件的保存状况，包含以下三种情况，一个是已经保存，一个是正在保存，还有呢就是离线保存。我们再来看看左侧面板， 左侧面板内容包括这一条工具栏，然后有页面的目录，独创的目录，然后是设计库，还有一个自愿库。 至于中间的画布区域，我想不用多说，这就是你设计创作的一个区域，右边的呢，是我们的属性面板，那在属性面板当中，你可以编辑图层或者是画布的属性，而属性面板呢，会根据你当前的选择显示相应的属性内容。 那为了方便大家快速解决在使用过程中遇到的问题呢？即是设计平台在右下角还设置了一个帮助按钮，他提供了全局的搜索和快捷键指南， 大家还可以通过按钮找到及时设计用户交流群的入口，或者是直接填写意见反馈表来给及时设计团队提意见。那至于左边的这个小按钮呢，他其实是及时设计软件的一个主题目 模式的选项，可以让及时设计啊，根据系统又或者是自定义使用深色或者是浅色的模式，那同时呢，还可以更改主题的颜色。

今天我教大家如何制作 ui 登录界面。首先我们创建一个手机大小的画板，然后在画板顶部画出一条直线，接着添加手机界面的时间， 完成后我们使用软件自带的图标插件添加自己所需的图标，这里的图标全部都是免费使用的。搞定后我们继续添加其他的元素，之后我们会制出一个矩形， 改变其颜色，然后添加阴影，再复制出一个，然后使用文字工具输入自己所需的文字，调整好大小，改变颜色作为登录界面的按钮。最后我们在界面的下方添加第三 三方登录的图标，同样我们也可以使用图标插件来快速的完成我们的 ui 设计。好了，一个简约的设计，登录 ui 就完了。关注我，从小白到大师的设计之路，从今天开始。

大家好，欢迎来到及时设计五分钟案例教程。今天的主角呢是线型面线图标，我挑选了一些日常使用率较高的图标案例，帮大家快速掌握绘制图标的规范和方法。在记录绘制之前呢，要先做点准备。一、关于图标尺寸选择 这些都是常用尺寸，没有硬性要求，可以根据图标使用时需要的尺寸大小和图标的复杂程度，选择比较简洁的选小尺寸，反之选大尺寸。 二、关于像素网格像素网格可以辅助我们对图标进行细节调整，点击画布缩放百分比的数字，把像素网格和对齐至像素网格都勾选上，注意放大才能看到网格线， 秒到一定比例就看不到了。三、关于山格模板山格模板能让不同形状的图标在视觉大小上尽量保持一致。绘制山格模板的原理其实很简单，以二十八乘二十八的画板为例， 画一个二十二乘二十二的圆形，去掉填充，添加描边，红色内部零点一同样的描边属性，再画一个二十乘二十的正方形，一个十六乘二十四竖着的矩形，一个二十四乘十六横着的矩形，四个图形叠加呢就构成了山格模板。 还有的模板会把矩形画成圆角，再加上内部的小圆和米字线，看起来复杂，其实原理上都一样，大家习惯用哪种都行。我们画的图标呢，通常是以这几个形状为主，注意，对齐山格线就可以让不同形状的图标在 视觉尺寸上保持一致。就先以这四个线性图标为例，看看绘制图标时如何对齐上格线。为了防止上格模板干扰操作，我们把几个图形编组 调整透明度为百分之五十，然后锁定图层。快捷键 o， 绘制一个二十乘二十的圆形，去掉填充，添加描边居中二像素，在画板里居中放置， 这是圆形的边缘，刚好跟山格线对齐。大家注意，这里有一种快速对齐方式，如果我们同时选中画盘里的两个元素时，右上角这排对齐图标就是我们常见的样子， 点击之后，两个元素是以对方位参考进行对齐。但是呢，当我们只选中画板里一个元素的时候，这排对齐图标周围就是带框的，意思是选中的元素跟画板进行对齐，与画板对齐。这个功能呢，在绘制图标时还是挺常用的， 后来我们还会反复用到蓝色居中二像素这个描边样式，在描边这里点击四个点的样式，图标，选择立即创建命名添加后面再用到。直接点击样式图标选择，不用再反复设置，想修改就点分离样式。 接着绘制八乘十五的三角形，设置描边属性，选中三角形，点击界面顶部的编辑图标，或者双击进入编辑模式。快捷键 p， 钢笔工具，在三角形底边居中位置添加一个锚点， 选中锚点，用键盘上的方向键上移二像素，退出编辑模式，给三角形添加零点三的圆角，跟画板居中对齐，这样一个导航图标就完成了，下一个是保存图标。快捷键 r， 绘制十八乘十八的正方形，设置圆角为一， 绘制九乘九的小正方形，居中放置圆角。零点五。快捷键 l， 绘制二像素的直线 描边二，把两端调整为圆头，在小正方形内偏右设置 订阅图标。绘制十六乘二十的矩形，双击进入编辑模式。在底边居中位置添加锚点。上一次像素框选上方的两个锚点，添加圆角一框，选下方的三个锚点，添加圆角零点一，用直线工具画出加号，单条线长为六。 最后一个消息图标外部是二十乘十五的矩形，内部是三个线长为一的直线。手机矩形， 进入编辑模式，在底边的居中位置添加锚点，在两边各三像素的位置再添加锚点， 选择中间的锚点，再下移动二像素，可以矩形添加零点五的圆角。 领取上个模板和网络可以看出，这四个图标虽然形状不同呢，视觉大小基本是一致的，如果画一条辅助线，会看出他们的高度其实并不相同，这就涉及到几何图形的视觉差。尺寸等待的几何图形在视觉上大小并不一致， 高度一致的情况下呢，与正方形相比，圆形和三角形要进行放大修正。还有这些图标，它的形状会影响视觉重心，为了看起来平衡，要进行位置修正。下面呢，我们再画三个线型图标。总结一下线型图标绘制用到的工 句和技巧。绘制六乘十二的矩形圆角三，十六乘十八的矩形圆角八，两者居中顶对齐。双击大矩形，进入编辑模式。在左右两条边中间位置添加两个锚点，用剪刀把上半部分剪掉， 把墩点改为圆头，下半部分上移一亿像素，下方中间位置绘制长度为二的线。修改描边属性，一个语音图标就完成了。创建二十乘二十的矩形，双击进入编辑模式框，选上方两个锚点，添加圆角十， 用剪刀把底边剪去，绘制六乘十八字矩形，左边和底边与大矩形对齐，进入边界模式，调整右边两个端点，圆角为二，复制一个小矩形，水平翻转， 放置在右边一个二七图标就做好了。戳进五乘九和十八乘二十四，两个矩形，圆角都是二居中放置。 进入大举行的编辑模式，选中左上方锚点，向下移动八像素，选中左下方锚点，向上移动八像素，创建十二乘十二的圆形，在中间偏右三像素的位置添加两个锚点，减去左侧线段，调整端点为圆形。 整体编组跟画板居中对齐，音量图标就完成了。总结一下，线性图标的绘制过程中，除了圆形、矩形、直线等图形工具，主要就是编辑模式里的钢笔、剪刀，还有描边和圆角属性。 将编辑模式调整圆角，我们绘制面型图标时也会用到这些功能。比如创建一个十八乘十八的矩形， 选中任意三个锚点，添加圆角九，旋转角度，让尖端朝下，再绘制一个八乘八的圆，居中放置一个位置图标就完成了。 或者绘制十八乘十二的矩形，进入编辑模式，选中右侧两个锚点，添加圆角为六，复制一个矩形，逆时针旋转九十度，两个矩形左对齐，底对齐，选中两个矩形， ctrl 加 j 边组，逆时针旋转四十五度。 在心形右上角绘制一个六乘六的圆形，去掉填充白色描边，居中一点五， 减去四分之三的线段调整端点为源头，一个新型图标就完成了。当然有的图标靠这几种工具并不能很方便的做出来，这时候就要用到布尔 运算了。个人运算处理的是图形之间的叠加关系，主要分为四种。第一种，并集，可以理解为把两个图形合并为一个图形。举个例子，创建一个十六乘十六的圆形， 再创建一个三乘十二的矩形，两者水平居中对齐，复制三个矩形，分别旋转负四十五度，四十五度、九十度。框选所有图形，选择界面上方 pro 运算中的并系一个圆形和四个矩形就合并成了一个形状。添加描边， 点击三个点图标，打开高级设置，选择圆角顶点，绘制一个八乘八的圆形，填充白色居中放置一个设置图标，就完成了。第二种，叉级，从下层图标中减去他与上层图形重合的部分，所以我们也把叉级叫做减去顶层。创建二十乘二十的圆形， 复制一个，把上层的圆向上向右分别移动六像素，选中两个圆形，直行剪去顶层，给剩下的圆形添加描边， 点开高级设置，选择圆角点点。用钢笔工具呢在右上角写一个 z， 添加蓝色描边， 眼角停点，圆头端点，这样一个睡眠图标就完成了。第三种，交集，只保留两个图层的重叠部分，其他都减去，出现二十二乘二十二的圆形，复制一个上次的圆，向下移动六像素，选中两个圆形，执行交集， 剩下的图形添加描边，在窗前八乘八的圆形填充白色居中放置一个眼睛图标就完成了。 第四种，排除重叠，只减去两个图层重叠的部分，其他都保留。跟第三种刚好相反，出现一个二十二乘二十的三角形，一个十四乘十四的圆形，两者居中对齐，三角形的顶点与圆心重合，给三角形添加一元角，选中两者直行排除重叠。 这样我们就得到了一个代表雪山的图标。这也是本期视频最后一个案例，简单总结一下，今天我们讲了如何使用山科模板，也通过十三个操作案例展示了绘制线性和面型图标需要用到的各种工具， 希望大家能多多实操练习。感谢你能看到这里，我们下期再见！

大家好，欢迎来到及时设计五分钟案例教程，掌握交互动效呢，对 ui 设计师来说是非常加分的一项技能，这期教程就带大家做几种常见的动效，学完就能让你的作品动起来。 为了让大家能方便的进行操作练习，本期视频中遇到的素材原文件已经上传到资源广场了，在资源广场中搜索案例教程，再把右上角的综合排序改为最新发布，就可以看到素材了。 进入详情页，点击右上角使用即可进入编辑页面，大家放心操作就行，这个文件会自动保存到你的工作台上。在编辑界面左上角一共有五个案例页面，这就是今天要讲的五个动效的素材。第一个动效， 通过点击导航蓝图标，实现四个一级页面的切换。点击界面右上角的圆形切换到圆形画板，选中首页画板里的分类按钮，点击右上角的加号添加交互。 或者有个更简单的方法，选中图标后会出现一个白点，鼠标放上去会变成加号，按住鼠标可以突出一条线，直接连接到想要跳转的画板，然后再到右边设置具体的属性，时间类型选择，点击行为跳转画板，跳到分类过度动画，选择推入方向向左 线性二百毫秒，勾选上智能匹配相同名称。图层设置完成后，我们点击右上角的预览按钮，会打开一个单独的预览页面，在这里可以进行操作，验证刚刚添加的效果。左侧能选择目前所在的画板，现在是首页，点击图标就跳到了分类， 想再操作一次呢，就通过左侧返回首页，再回到编辑页面，在画布战役空白处单击一下鼠标，会看到所有设置好的交互线，除了我们刚刚添加的一条，这两条是从哪来的呢？选中首页的分类图标，然后我们看左侧的图层画板，这个蓝色图标代表的是引用组件， 而其他三个页面的导航蓝图标都是实力组件，我们的引用组件的操作会附用到实力组件上， 利用引用组件的这种特性，可以帮我们减少很多重复工作。唯一要注意的是页面的推入方向，以当前页面为基准，跳到右边的页面，推入方向是向左。跳到左边的页面，推入方向是向右。 同样的方法，把购物车和我的设置好， 但是后三个页面上的首页都是实力组建，只能一个一个往首页上连了。 最后在预览模式看一下四个页面的切换，就完成了。有关引用组件的功能用法，我们在案例教程的第四集已经完整的讲过了，有需要的同学可以去回顾一下。第二个动向通过点击时间首页上轮播图的切换 选择案例二，轮播图，选中首页一画板中的 bander。 一，添加交互 事件，点击行为跳转画板至首页二，拨动动画，选择智能动画线性回弹时间三百毫秒。 选择首页二中的斑点二，添加交互，实现点击行为跳转画板至首页一，智能动画线性回弹三百毫秒。进入预览页面，点击画板内的斑点，就能看到轮播图的切换效果。我们在预览模式里还可以选择一个手机边框，这样的效果更真实。 如果你对动画不是很熟悉，可能不理解缓入、缓出、回弹这些名字分别代表什么运动效果，包括自定义底的缓动曲线应该怎么设置，所以这里给大家分享一个网站， 在这上面能查看各种缓动曲线代表的运动效果。鼠标放到每一个坐标系上，会出现一个运动的小球，横轴代表时间，纵轴代表移动的距离。每三个一组分别是环入、环出、环入、环出，同样是环入， 都是前期动的慢，具体慢到什么程度，不同的曲线就代表了不同的运动效果，细节大家都看看，自己体会一下。设置自定义曲线的时候，可以参考第三个动效。通过点击分类页面的店铺卡片，打开店铺页面的过程。 在分类画板中选中第一个店铺卡片，添加交互事件，点击行为跳转画板至卡片，加载过度动画，弹入，弹出时间二百五十毫秒。活动曲线，选择自定义，给大家一个数字参考，一零一一 填充卡片，加载滑板，添加交互事件定时时长一毫秒。行为跳转画板至店铺，步入动画，选择智能动画，时间三百五十毫秒。选择自定义，设置数字参考零零零 一金玉冷模式看看效果。 第四个动向鼠标指针移动到分类页的卡片上，会出现卡片状态的变化。选中分类画板里的第一个卡片，添加交互 事件指针，一入，时长一百毫秒，行为交换弹层，只分类男装过多动画，弹入，弹出线性一百毫秒，选中分类。第二个卡片，添加交互事件指针，一入，时长一百毫秒，行为交换弹层，只分类女装 过度动画弹入弹出线性一百毫秒。这两步操作让我们从分类页可以跳转到男装和女装，但是我们的目标是 实现三个页面互相跳转，所以还需要从男装的两个卡片到分类和女装各拉一条线。从女装的两个卡片到男装和分类各拉一条线，然后给每一条线设置参数，设置过程我就跳过了，这也把数值给到大家 预览效果，鼠标移入两个卡片会产生状态改变。 第五个动向，在购物车页面选中某一件商品时，底部会出现 t 时支付的弹层，选中购物车中的第一个商品，添加交互事件，点击行为跳转画板至选择商品。 google 动画智能动画 线性五十毫秒，选中选择商品画板添加交互事件，定时时长三百毫秒。行为，打开弹层至购物车弹层，弹层设置底部居中过度动画，选择弹入向上线性回弹四百毫秒， 进娱乐模式查看效果。 到这里，五种常用的动向就讲完了，都是比较接触的，先让大家熟悉操作和动画原理，之后还会有进阶版的动向教程，希望大家持续关注，那我们下期再见！

那设计界面当中我们想要干嘛呢？下一步要做具体的设计，要做哪些事情？第一件事情你得在设计面板当中去添加一个对应的画板，那我们要如何来完成一个画板的创建呢？ 首先最重要的就是关注左上角这一边有一个画板的图标，那我可以怎么操作？一方面是直接通过鼠标点击另一副部分是通过点击快捷键 a 或者 f， 然后切入到一个画板的状态，在切入完了之后，我们可以在右侧看到一个对应的尺寸的列表，在这样的一个尺寸列表里面，我们可以选择我想要去创建的对应的规格，那这个规格选中完了之后，它自动就会把对应的参数数字 压到中间来，于是我们就在画布的中心创建了对应的画板。那除此之外，这是一个官方默认添加给我们的这些数字，我还可以干嘛呢？可以自己使用 画板工具手动进行拖拽，也就是我可以手动拖出任意我想要的这个尺寸。那这样的一个拖拽过程当中怎么实现呢？ 我们可以你看点击一下 a 或者 f， 那么在这个点击过程当中，我的鼠标是不是变了一个形式，变了一个实质的这一个图标，那我就可以在这图标过程当中去拖拽实现一个我想要的任何的任意的一个大小。 那这样的作用是什么？因为有些时候我们去在页面当中设计一些内容，比如说设计一些特定图标，设计一些不相关的元素的时候，人你是多大无所谓，这件事情上就是我们怎么顺手怎么画，就不一定说我一定要在右侧里面找到一个合理的尺寸才行，所以这两者之间的一个区别。 而除此之外，在我完成了第一步拖拽之后，我想要进一步去修改它，怎么修改呢？我就可以在右上角画板这个地方来修改它的长 和他的关。 哎，回过头来来操作一遍。比如在这里你看我这边是什么？是它长，比如我想要一个八百乘一千二的，然后我就可以这样输入来得到一个我想要的一个最终的结果。 同时如果我想要去批量创建相同规格的画板，对不对？比如像刚才我创建了一个画板，这某个尺寸，那我要去批量怎么办呢？有两种好几种做法。第一种是我可以复制对它进行粘贴，对吧？比如说在苹果系统里面，我是 common c 加 common 的 v， 那这样的操作里面我们可以 试一试。比如说你看我画了第一个画板出来，我现在想要还有一个这样的画板，我可以选中这画板，记得怎么选中它？鼠标点击它的这一个标题，然后 command c， 按 command v， 它自动帮我们在这后面 生成一个新的，你可以一直粘贴下去，他就不停创建出新的相同规格、相同尺寸的画板。那如果除此以外，还有什么方法呢？第二种方法也是我自己用的最多的，我们按住 alt 选键，或者按住 alt 键，然后对鼠标进行拖拽。 如果图案你看，我们就可以说点击一下这个东西选中，第一件事一定要选中，然后我们可以按住 alt 键，看到没有鼠标在这个环境里面又发生了一个图标的变化，那我再拖动，看到没有拖动，然后我再放手，我就生成出一个新的 那 alt 键这个东西大家一定要记住，是我是持续在我放手之前我一直按着的，如果说我 alt 按的过程当中，中间把 alt 键放手，那就变成了普通的移动，看到了吗？所以 alt 键你按住的情况下，他才能保证我拖出来的东西是一个复制。那我们作为一个 正常的项目来说，总是会创建大量的画板，对吧？所以每次我们要从一个前的前面这个画板的过程当中创建，你是按 alt， 就是一个特别频繁的一个操作，所以一定要记得这个 alt 键一定要按住。 那么接下来我们要来讲解的就是在刚才我们可以创建大量的画板对不对？但画板创建的够多的时候，你就会发现我中间这个仕途区域的位置肯定是不够放，那不够放的情况下会发生什么呢？我肯定会有大量的东西被隐藏到这一些界面当中不可见的地方， 所以我觉得想方设法来去看到他们就意味着我得去移动画布的显示区域，那移动显示区域的主要做法就是按住 space 加上拖拽，这是一个非常非常重要的操作， 也是大部分设计软件当中会使用的一个操作。简单的演示，你看假设我的画面比较大，然后很多元素超出了现在可设区那种 怎么办？我得按住空格键，然后对它进行一个拖拽，让我来查看到这一些隐藏的区域内容，所以这个大家一定要去多做超市操作，然后来习惯这一个步骤。那么接下来 我们既然已经要去进行移动了，那么自然我们要去关注的一个东西就是它的显示工具，这在界面当中的左上角可以看到，你通过点击可以查看到什么呢？它上面主要的这个区域是来设置这个画布对应的一些显示的操作包含了什么？主要的几个操作，放大、缩小、百分百、显示全部，而聚焦选中 那么一个个解释。首先放大和缩小就不用多说了，对吧？对画布的这一个尺寸进行放大和缩小， 所以你在这放大缩小过程中还有个做法是你可以按住 ctrl 键，然后对它进行一个放大，就是啊 按住滚轮，然后可以进行一个缩放，然后这个缩放的过程当中就是那相对来讲不是那么平整之一百分之一，百分之一的这一个递增递减，你也可以手动去输入，比如说我想要一个一百二十的，我想要一个十十八的，那除此以外就是它快捷键在这边就会显示，这是 ctrl 加或者 ctrl 加减， 对吧？这是一个特别常用的一个快捷键类型，那么接下来它会有个东西，就是百分百 command 零，我们按一下 command 零，它就显示成百分百。这个东西主要的作用是在我们很多时候设计一些弊端的，或者电脑当中要去显示的一些内容，我希望看到一个正经的显示效果，呃，一比一的显示效果，那我觉得实惠、实用 百分百。那么接下来我们说的 command 一和 command 二是干嘛用的呢？ command 一我们按一下，你会发现，哎，话不通，突然间进行一个缩放，那这个缩放好像没什么 规律，我们来再做个调整，比如我把这些元素移的比较远，目的是为了干嘛？很多时候我们在设计一个原文件，会把文件放的非常零散，但这时候就是你靠鼠标慢慢去拖，你永远拖不完，那怎么办？我就按一下科目的一，我就能知道我这个项目当中总共放了哪些文件出来。你看我假设把他们全部散开， 按下 command 一，也就我这画布里面所有放过的这些画板，我会一次性给你显示在中间这个可视的区域，这就是 command 一带来的作用，这其实非常常用。那第二个东西什么呢？ command 二 这是干嘛的？聚焦一个我选中的内容，一定要记得先选中一个图层或者一个画板，然后我按住 ctrl 二，你看他就变成百分百，就按着 ctrl 一，然后再按 ctrl， ctrl 一， 慢慢的进行快速的这一些聚焦内容的切换，这就是我们使用快捷键进行视图工具应用的一个主要的对象跟场景。

欢迎来到五分钟案例教程，本期主题是个人形象插画，只要掌握一些基础的方法和思路，不需要绘画基础，也能画出精致好看的人物插画，不管是给自己画个专属头像，还是应用在工作场景中，都是很不错的。而且其实设计现在有 aa 绘画工具了，我们把画好的插画作为图声图的素材，就能获得同一形象不同风格的图片。 方法也非常简单，在视频后半部分会做详细的演示，着急的同学也可以根据进度条的标记跳到后面观看。在开始教程之前，还要讲一个很重要的事情，对及时设计比较了解的用户应该发现了我们五分钟教程视频里讲的这些案例， 来自于集市设计的两个学习活动，每周临摹和打卡星球两个活动的形式。简单来说就是每周给大家提供高质量的图文教程。现在我们想把这个事情对所有人开放，只要你有原创案例，界面、图标、动向插画等等都可以不限选题，能根据我们的标准格式完成一份图文教程， 就可以报名成为学习活动的发起人。回归主线，开始第一个发带女孩的位置，进入其设计的工作台，新建一个文件快进 f， 创建六百乘六百的画板，填充白色。快进 o， 绘制一个二三四乘二三四像素的圆形，填充皮肤的颜色，添加描边居中五像素黑色 图层面面为脸，右键设置为蒙版，在蒙版内绘制两个五十九乘五十九的圆形，填充浅粉色，不透明度百分之四十，高速模糊时作为腮红， 再用钢笔工具绘制一些红色小线段作为装饰， 嘴巴也是一个线段。注意描边两侧都是圆头断点。 快线 o 绘制两个十八乘七的椭圆形，填充黑色，旋转一定角度。作为眉毛，两个二十四乘二十七的椭圆填充黑色是眼睛，用钢笔工具勾出睫毛。描，编剧中无像素黑色 画鼻子，先画一个直角，进入编辑模式。鼻子描边是三像素，选中鼻尖的锚点，添加圆角，再添加一个三角形的阴影， 填充线性界面，然后 两端都是红色，从左到右不透明度百分之一百到百分之零。我们把所有的眼睛、鼻子等图层一起编组，命名为五官，方便管理。下面我们画耳朵，画一个七十二乘七十二的圆形，填充皮肤的颜色，复制一个放在上层， 取消填充，添加描边居中无像素黑色。双击进入编辑模式。删除左侧部分线段，描边的端点改为源头，旋转到合适的角度，用钢笔工具勾出代表耳廓的线段。描边居中四像素黑色 跟下层的圆形一起创建分组，命名为耳朵。复制一个耳朵水平翻转后放到脸的另一端， 绘制五个八十二乘八十二的圆形，调整大小 和位置，全选并集。添加黑色描边居中无像素，填充蓝黑色作为刘海， 复制脸图层，取消填充，只留下描边放在刘海的上层，右耳朵的下层作为脸的轮廓，下面是头发和发带，绘制两个圆形，填充蓝黑色。添加黑色描边，放到两个耳朵的后边， 绘制一个大圆形，填充绿色。黑色描边放到脸的下层，命名为发带，整个头部就完成了，可以做一个整体编组，绘制一个矩形，画一个大椭圆，用编辑功能减去下半部分。 图层命名为脖子、身体，把脖子和身体图层各复制一个直线 面积，取消填充，添加描边，填充比皮肤稍微深一点的颜色，填充绿色， 命名为身体轮廓。脖子和身体轮廓可以先隐藏，把身体图层移到最上层，右键身体图层串至为蒙版。绘制三个三九零乘二十四的矩形，放到蒙版里，填充浅绿色作为衣服的条纹， 用钢笔工具勾勒出两个胳膊的线条，都放到身体蒙版里。把身体蒙版单独编组，脖子和身体轮廓移到上层，显示出来。绘制一个一二六乘三十八的矩形，填充绿色 作为衣领。最后我们可以给绘制好的女孩添加一个背景，这样作为头像会好看一些。 有了第一个基础，剩下的就好换 多了。我们把第一个女孩的五官和身体造型复制出来，绘制不同发型、眼镜、衣服，就能得到另外的角色形象。我们就以墨镜男孩为例子演示一下，但是不细讲了。男孩的头像做法跟女孩的刘海一样，几个圆形做并基，再去微调每个圆形的形状。男孩的衣领分为前后两部分，两个椭圆执行，剪去顶层，就获得了前引领的形状。 再画一个椭圆放到脖子图层后面，就形成了后衣领的形状。这个墨镜其实也不难，先矩形把基础形状拼出来，然后进入编辑模式，调整各个锚点，就能获得想要的形状。 其他案例也是这些操作，这里就不演示了，回头把素材都给到大家。下一部分我们看看如何操作。 ai 绘画图生图我们把人物选项放在白色的方向画板中，选中画板，在界面右下角导出图片到本地。通过及时设计官方首页的导航栏来到及时灵感 ai 绘画。 先进入模型广场，在基础模型里选择插画手绘风，背景强化这个模型，点击安装，然后一键使用。跳到选择模型界面，之 后点击右上角自由风格组合，这样就能看到我们刚刚安装的这个模型了。点击使用模型组合，这个时候会跳到 ai 创作界面，点击圆形图标，选择图像控制，上传控制参考图，选择刚刚保存到本地的图片，点击加号，选择控制条件，边缘，细节， 强度。六、输入咒语描述画面我这里输入的是一个女孩，圆圆的脸，黑色的大眼睛，大耳朵，黑色的头发，绿色的发带，白色背景 选择生成尺寸头像，头像是方图，跟我们参考图的比例是一致的，当然生成的效果会好一些。点击开始生成，从四个生成结果里选择最喜欢的那个，进一步进会最终结果，如果满意可以保存到本地，如果不满意可以重新生成 其他几个角色。操作方法也是这样，唯一的区别是填写不同的咒语去描述画面内容，当然我们也可以更换不同的模型，生成不同风格的图片。那以上就是本期教程的全部内容，感谢你能看到这里，我们下期再见。

快速了解如何填充以及编辑图片， 选中你要填充图片的图层，在右侧属性栏找到填充，点击颜色色块切换到图片填充，点击替换图片，选择你喜欢的图片进行填充。 即时设计内置了丰富的免费可商用图库资源，你可以在左侧资源库面板选择图库，点击任意图片进行填充， 通过拖拽直接将桌面图片拖拽至画布编辑区进行填充。 在外部复制图片后，使 用快捷键 command 或 control 加 b 粘贴至画板内完成填充。 点击工具栏上的插件图标，搜索智能填充插件，并打开插件， 按住 shift， 选中多个画板，选择一个图片类型，可以随机填充多张图片，帮你大大提效。 下面再来了解下如何编辑图片。选中图片后，在顶部工具栏点击裁剪，可以进入图片剪裁模式。 在属性面板可以选择填充、适应、裁剪、平铺四种填充方式，也可以修改具体参数来进行图片调整。 即时设计可以使用插件快 速完成抠图。点击工具栏插件图标，打开智能抠图或硬造抠图插件，选中图片后，点击一键抠图，即可将图片背景去除。

在计时设计当中，我们要创建设计文件的方式有三种，第一种直接创建第二种文件进行导入，第三种链接进行导入。那么在这三种方法当中，第一种我们就不用多说了，第二种文件导入是什么意思呢？也就是计时设计，他支持我们从外部导入 gsd 文件，也就是计时设计自己的一个文件。 换句话来讲，比如说我给大家去提供一些设计文件，然后这些设计文件里面包含了比如我们课程要用的一些素材，课程上面做的一些演示，那这个演示我要用怎么用呢？那绝对不是双击直接进行打开，我们做个简单的演示，比如说正常你要点击上面的一个导入文件，然后从右侧干嘛呢？拖这个 gsd 文件到这里面来， 然后再点击完成，你的文件就可以上传到你自己的文件目录里面来。那很多同学干嘛呢？你会去双击这个我们导出的文件，那个双击是不会产生任何效果的，大家一定要记住这一点， 所以并不是说我不能跟软件关联，而它本身就不带这样的功能，你必须得是手动把它拖拽进来。 那么第二件事情，我们的导入也不仅仅只是导入我自己计时设计的 j、 s、 d 而已，它还可以干嘛呢？还可以导入各种其他的原文件类型，比如说你导出的 big 码格式的文件，插 d 格式的文件， sketch 格式的文件，或者 r p 格式。 r p 格式指的是 extra， 也就是我们产品经理在 进行圆形设计的时候使用的这款软件，用的这一个原文件，我都可以把它导入到进行设计当中来，所以导入的方法跟刚才是一样的， 还是一样，我们点击下导入文件，然后干嘛呢？你把其他的这些设计文件拖拽，然后放手就可以导入进来，包括 psd 其实也是可以的，你可以看到上面支持的这一个软件图标列表，然后你再打开 就可以打开已经我们在其他软件里面完成的这一个界面的图层和效果。那么最后一种就是飞格码的导入里面有一种特殊的方法，他允许我们干嘛呢？直接使用链接进行导入，也就这个链接，我不用把飞格码的文件直接下到本地，我通过这个链接直接把这链接访问完的这些数据写入到 自己设计的这个原文件里面来。那这个链接的方式就是你们要先打开 famer 这软件，然后在他的分享里面，一定要记得分享下面有个东西，什么 copy link， 下面这 copy link 点完了之后，然后我们再进入到这些设计里面，点击导入文件，它有个链接导入，链接导入里面我们通过点击授权，然后在授权之后的这一个 就是输入框当中把这一个链接地址贴入进去，我们就可以去创建出对应的这一个设计文件出来，也就是把那边的设计文件复制进来。

接下来我们要来分享如何把文件保存到本地的方法，前面我们看过把 j s d 文件从本地导入到线上，是把文件拖拽进来，那就意味着我肯定也有一个把文件导出到本地的一个过程，而这个过程就是在左上角这汉堡包里面 点击这个菜单，在菜单的文件当中选择导出里面的导出本地文件，所以这个东西藏得比较深，大家一定要去找到它。那么在你们工作环境当中，如果一定有这种说原文件需要备份，需要发送给客户之类的操作，你就可以通过这样的方式来完成。 最后面就是通过什么呢？存储到本地这样的一个操作过程，其实我就不用多解释，但是大家要注意一点，什么我保存到本地这个过程，因为我是要把文件从线上下载下来，所以很多时候你直接点击保存下来，不一定这文件是可用的，你要等一等，然后等他这一个下载的步骤完成，他中间如果出现了一些卡 卡顿或者未响应，那实际上就是他在下载的过程。那么接下来我如果不想要导出整个文件出来，我只想要把其中一部分导出到我本地，怎么办呢？我就可以去选择单个图层，然后在右下角的这个导出当中进行对应的设置，来完成相关选中内容的一个导出。 咱们做个简单的操作，你看选中当前这个画布画板，然后点击右下角导出，在这个导出过程当中，我就可以点击这个导出的选项，然后他就会有一个对应的 弹出一个对应的存储位置，所以这个我就不多说了，但是我们重点可以看到我导出当中里面有不同的选项，有这个一倍、两倍、三倍，大家可以简单理解成这个东西，就是我要把当前的画布放大几倍，放大一点，五倍、两倍、三倍正常，建议大家可以选择两倍，然后右边选择一个导出的格式，如果这一张图形只是为了 预览，我一般建议大家导出成一个 jpg 格式就可以。如果这张图是一个比较正式的一个场景去用的，你可以导出编剧在这看自己个人的要求，最后点击这个导出，下面是我们的预览效果，然后也就这张图本身导出会长成什么样，右边会有预览，像后面这些网格指的就是他空白的区域。 那么最后我点击导出，导出完了我在本地就可以去查看对应格式的这张图片的这一个文件。

像这种轻质感图标如何去画？首先我们先要在这个网站去制作一个超椭圆，然后打开即时放入超椭圆，尺寸调整为六十四像素乘六十四像素，并且修改颜色。接下来添加一个投影，投影的数值可以使用零八四十，零， 颜色可以直接吸取底色透明度调整为二十四，再为背景添加一个渐变，渐变的颜色可以自行添加。接着放入我们绘制好的图标，为他添加一个纯白色，并且拉一个渐变 顶部的渐变修改为白色，并添加一个八十的透明度，然后为图标添加一个投影，默认投影即可，颜色可以比背景色稍微深一点。这样第一种通常用于金刚区的轻质感图标就制作完成了，那么第二种图标通常是用于活动页面， 我们还是先粘贴进来超椭圆，然后背景色修改为浅灰色，可以稍微带一点点色相，比如偏蓝或者偏紫色，然后贴入我们绘制好的图标。这种青春感图标主要是体现厚度，我们先为两个区域分别加入一个渐变色， 然后我们需要添加三个投影来体现厚度。第一个投影是高光区域，我们颜色选择上尽量选用同色系的浅色。 第二个投影需要在外轴加一个负数，然后选择一个临近色。第三个投影则是底部投影，选择图标的颜色，并且修改透明度即可。怎么样，兄弟们学会了吧，还不会的可以查看，及时打卡，有教程！

使用蒙版功能可以将图层按照一个指定形状进行显示。 在图片上方绘制一个圆形，将圆形图层移动到图片图层下方框。选两个图层，单击顶部工具栏设置为蒙版，或者使用快捷键 command 加 shift 加 m。 图层列表中会创建一个蒙版对象分组。蒙版和蒙版内容可以相互独立的调整位置和大小，及时设计中所有类型的图层都可以设置为蒙版或者被蒙版，并且一个蒙版内可以包含多个图层。 下面使用文本作为蒙版来制作一个简单的海报。首先创建一个画板，并填充颜 颜色， 添加一些适量形状进行高斯模糊。创建一段文字， 我们需要将文字作为蒙版，所以将它移入底层框。选所有图层，点击顶部工具栏，设置为蒙版文本。蒙版仍然可以像文字图层一样随意更改内容。 将带有透明度的人物放在森林图片下层，选中两个图层，点击工具栏创建为透明度蒙版人物半透明部分将半透明显 显示森林图片。 选中蒙版图层，点击工具栏中的蒙版按钮即可取消蒙版。 也可以选中蒙版图层后右键选择菜单中的取消蒙版。

给大家介绍一个宝藏设计神器，就是这个及时设计，不用下载，随时随地，直接打开浏览器就能使用。支持 figma、 sketch 叉的文件导入，支持 windows、 mac 等等全中文，而且个人用户永久免费使用哦！ 为了方便设计师使用，还开发了很多功能，像这个资源广场就有很多设计素材、设计规范、插画图标等等，百分之九十九以上都是无版权可上用的。还有 ui 设计需要的组建也有，作品及模板都能编辑使用， 点开就能保存到我们的工作台，就可以在线做设计使用啦，可以多人在线实时协作，这工作效率大大提升呀！设计完直接分享链接就可以，方便快捷，真是个超级适合各个阶段设计师的国产工具，你也快去试试吧！

ui 设计中的心理态卡片，一眼看上去很美很舒服，那么心理态是怎么做出来的呢？教你们之前，先让大家理解什么是心理态。其实心理态无非就是在平面的卡片上面加入三 d 的效果，使卡片更具有空间感。换成测试图给大家理解一下， 也就是这四种。那么怎么制作呢？首先打开即时设计，绘制一张卡片，为他加入内外投影即可。四种状态的投影参数如图，如果小伙伴还没选费，可以在资源广场查看我做好的案例。

组建是指可以在你的设计项目中重复使用的元素，它可以是按钮、图标、卡片。当你创建一个组建时，可以将其添加到多个页面中，对其进行更改，所有使用该组建的实力都会随之更改。 组件有两种类型，引用组件和实力组件。引用组件可以理解为在文件中统一管理的图层模板，它可以在文件中多处使用。 引用组件的副本称为实力组件。如果你对引用组件进行修改，实力组件也会同步修改。实力组件也可以单独修改，但不会影响到其他实力或原组件。简单来说，引用组件具有全局更新的能力。实力组件只对当前组件有效。 选中我们要创建的内容后，在顶部工具栏点击创建为引用组件，或者右击图层选择创建为引用组件。还可以使用快捷键 command 加 option 加 k 创建组件。 创建完成的组建可以在左侧组建面板下统一查看和管理。 将组件库里的引用组件拖到画布上，即可创建出一个实力组件，或者选中引用组件，按住 option 拖动鼠标来创建实力组件。还可以使用快捷键 command 加 d 或者 command 加 c、 command 加 v 复制粘贴。创建两种组件可以通过图标来区分。引用组件图标为一个圆心菱形图标，实力组建为一个线性菱形 图标。 修改引用组件中的属性样式，其他三个实力组件也同时发生了变化。修改单个实力组件，其他实力和原组件不受影响。 实力组建中修改后的属性样式将不再关联。原组建， 选中实力组件，在属性栏点击编辑引用组件，可以快速定位到原组件。 实力组建支持修改文本填充、描边、阴影、模糊、组建尺寸等样式属性，但不支持组建内容的图层顺序、位置、旋转约束等设置。 选中修改后的实力组件，在顶部工具栏点击重置属性，即可还原为引用组件的样式。如果只想重置部分图层，属性选中需要重置的图层，在属性栏选择单个属性进行重置。 选中已修改的实力组件，在顶部工具栏点击推送属性，即可将属性推送到引用组件，该引用组件之下的所有实力组件都会同步修改。 选中实力组件，鼠标右键从引用组件分离，或者在属性面板选择从引用组件分离，还可以使用快捷键 command 加 option 加 b 进行 分离。分离后的实力组件将与引用组件断开关联变为独立的画板存在， 在画布中按 delete 删除引用组件，不会对相关实力组件产生影响。选中实力组件，在属性栏点击恢复引用组件可以恢复被删除的引用组件， 在组建库中删除引用组建会彻底删除该引用组建与其关联的实力组建将成为独立画板。 勾选同时删除关联图层，所有关联的实力组件会被一并删除。

这是一抹蓝色，将其进行简单的排版，你会发现画面效果十分单调。但如果我们将颜色进行深浅延伸，再融合色彩之间的界限，那画面则会变得舒适又深邃，而这也正是颜色界面的作用。 所以如果你的配色不好，那你不妨和我一样使用即时设计里的渐变色插件，因为在这款插件里内置了一百八十种渐变颜色的使用方案，使用起来既能轻松提升画面质感，又能增强画面视觉吸引力， 大家也可以去评论区自行查看。就比如说，如果你随意的画了一个形状，那你只需要简单的使用一个界面方案，然后再搭上些许版式，一个轻盈的海报效果就能出来。再比如说，如果你画的形状是这样， 那你只需要再使用一个渐变方案，然后就能得到一个具有扎实质感的海报效果。当然了，除了单色系的渐变方案，多颜色的渐变这款插件也能给到你 像这样具有强烈视觉冲击力的海报效果，既轻松又简单的就能搞定。而且这些可以云端修改的海报原文件我也发到评论区了，所以如果你想要更好的画面效果，那就快去评论区看看吧！

矢量图是使用直线和曲线来描述的图形，通过数学公式计算获得，具有编辑后不失真的特点。相比之下，位图由像素点构成，放大后会变得模糊。 史料网格绘制体系支持多条路径同时在一个图层上编辑。传统设计工具的单个锚点只能连接两条路径。史料网格绘制体系支持在一个锚点上创建无数条路径，还支持连续创建多个开口或闭合路径。 学习使用钢笔工具自由创作各种形状。在工具栏中找到钢笔工具，快捷键为 p。 单击画布创建 路径点。移动鼠标再次单击创建第二个路径点，此时会自动在这两个点之间创建一条直线。移动时按住 shift 可创建四十五度角的直线。在两个路径点之间单击并拖动将创建一条曲线。通过拖拽手柄调整曲线方向， 按住 option， 拖动手柄可以调整曲线一侧的方向。将锚点与锚点链接，创建闭合路径。点击顶部工具栏按钮即可退出编辑为形状，填充颜色即可将其应用于实际界面中。 按住 option 后直接点击锚点，可取消该锚点。选中锚点后，按快捷键 delete， 可以删除锚点及与其相连的路径。 使用钢笔工具创建路径后，使用快捷键 esc 即可取消锚点选中态，并继续添加独立路径，进一步提升绘制便捷性。 选中路径后，点击顶部工具栏的编辑图标，或使用快捷键 enter 进入适量编辑模式。进入模式后，你将看到路径上的所有锚点。选中锚点后，在右侧面板中，你可以更改四种锚点类型 直角，使锚点转折出成直角，并可设置圆角。 完全对称。调整手柄方向时保持相同长度。 角度对称。手柄方向调整时，可使用不同长度 不对称独立调整两个手柄的方向。 按住 command 键并点击锚点。可在直角锚点和不对称锚点之间切换。按住 option 键可以单独修改带有手柄的任意一边长度和方向。 当你将鼠标悬停在路径上时，路径的中心锚点会显示出来。点击中心锚点即可添加新的锚点。 悬停在路径上并按住 command 键拖动，可以将路径调整为曲线。要删除锚点，选中锚点 后按快捷键 delete。 要删除路径，使用顶部工具栏的剪刀工具选中路径后点击即可。要退出使量编辑模式，按快捷键 esc 或点击顶部工具栏的退出编辑按钮。 结合钢笔工具和使量编辑功能，你可以轻松创建各种图形，并将其应用于设计中。

不会吧，都二零二二年了，还有人在做 ui 设计师，还在网络上一张一张的筛选图片吗？好不容易找到合适的图片，保存下来一看模糊不清，不仅时间耽误了，甲方爸爸的耐心 也让你消磨殆尽了。及时设计里的智能填充插件，可以帮助你快速的寻找你想要添加的图片。操作非常的简单，只需要选中你要添加的图层，打开智能填充插件，然后选择图片类型，一键搞定所有图片。除了填充图片外，像这种的联系人列表也可以一键生成头像， 更厉害了，就是一键生成文案信息，大大的缩短了 ui 设计师的设计。像网页这种大小的图片也可以使用，并且图片高清，免费可商用，想要学设计的不妨尝试一下这款软件。

火遍全网的弥散风设计你知道吗？比如像这些设计作品全部都采用了弥散风设计，最开始这里设计通常出现在 ui 设计中，只需要简单的线条以及大面积的柔光或者光晕，都可以让界面变得高级起来。 弥散风最大的特点就是色彩的渐变，颜色和颜色之间比较自然的渐渐变化，比如说一个纯色的圆形，我们只需要将外圈进行模糊化，就可以简单的实现弥散风。 那么如何快速的实现迷散风的效果呢？我们首先打开软件，然后随意的画出几个圆形，并且填充高亮的颜色， 然后选择高斯模糊调节数字，数值越大，模糊的区域就越模糊。调整完之后再添加一层毛玻璃效果，不会的小伙伴就可以看一看。上一个视频，毛玻璃效果如何制作，这里就不再讲解了。好了，一个迷散风的卡片介绍就完成了，大家在作图时可以在适当位置添加 这些线性元素，突出文字主体的同时也能丰富画面。切记在排版时应有索取舍，不能一股脑的全部添加上去，效果往往会显得杂乱。

当你觉得一个基础款图标不好看的时候，加上渐变好像发现也没有啥用，这个时候啊，你就可以试试增加质感了，而这呢就是磨砂质感图标，这也跟上期我们讲到的图标是一样的，他们都属于给图标上加上了物理质感，从而提升了视觉效果。 哈喽，这里是一百节 ui 实操课的第七节，今天我们就来讲讲如何快速搞定这样的磨砂质感图标。实际通过拆解你会发现啊，磨砂图标呢，实际上是三层的，图标的底层，玻璃层和内容层。好，那这样咱们就一步一步来。 首先底座呢是超椭圆，有谁能想到这个形状跟二百万的 logo 是同款，那么怎么制作呢？很简单，千万别觉得是矩形加圆角，我们可以画一个正圆，然后双击开锚点，利用 shift 加位移，可以一次性一 动十点，然后我们把四周啊全部操作一下就可以了，当然如果你觉得不够方呢，你可以多移动一些数值，保持四周相同就行了。当然我们也可以利用插件来制作这样的一个效果，打开我们的插件面板，选择超椭圆插件，然后设置一下数值就可以搞定了，非常的轻松，推荐大家使用哦。 然后呢，我们来绘制图标，首先我们可以画一个圆，然后双击去开锚点，去增加几个锚点，拖拽一下，是不是会发现这个图标画起来非常的轻松，当然因为是两层啊，所以说我们需要画完之后呢，复制一下，选择水平翻转就可以了。 最后我们把这样的图标整理一下，大小和位置，要注意内容和底板之间是否居中，同时我们也来说一下颜色这个问题啊，可以直接打开 e 插件面板，选择渐变，这个插件里面呢有非常多的渐变，我选择就是这个蓝色的渐变，嗯，角度 不合适的话，你可以在右边的属性文板再调整一下就可以了。至于上面玻璃层的颜色呢，我们就可以用内容层的颜色加白色就好了，变得清清淡淡就可以了。然后呢，记得加一些细节，基本上图标本身就差不多了。 那现在啊，就到了最核心的部分，磨砂质感到底是怎么做的呢？实际在及时设计当中，我们一步就可以搞定。首先我们选中上面的玻璃层，然后在右边的属性满满里面选择背景模糊啊，不是模糊，设置一下数值。 那么这个时候你会发现为什么没有效果呢？一定要注意磨砂效果需要配合形状的颜色的半透明， 所以说我们在填充色里记得要打开半透明，你看磨砂效果一下就出来了，放在哪哪就磨砂。然后呢，我们需要利用渐变的描边，用两个相同的颜色，但是其中一边透明度为零，就 可以做出一个渐影的高光线了。同时我们记得把渐变的范围改小一点，这样的话会很好看，而且这也是一个很重要的技巧哦。最后我们再给底座增加一些投影，就大功告成了。怎么样，学会了吗？是不是感觉很简单？当然啊，万一你想要现成的也没有问题。可以去资源社区，里面都是免版权的素材， 直接呢去找图标，都是做好的成套图标，比如这套金融风格的，还有这个通用的，包括这套弊端的都不错， 想用的话右上角直接点击使用就可以了，你就可以打开编辑了，包括也可以换颜色，调整位置，都是没有问题的。 这几套好看的磨砂图标呢，我就放在评论区了，记得去看哦。那么在下一期中，我们会来讲一讲图标的高难度版本，就是这种拟物化的风格图标，记得要预约一下哦。好了，这里就是教你一百节 ui 实操课的托尼老师，我们下次再见了。

当你做好界面，不知道上哪找配图时，不妨试试 ai 绘画。目前市面上已经有多款产品可以体验，但大多都是国外的英文上手慢，而且需要翻译才能更准确的生成。今天我发现国内的即时 ai 也能达到同样的效果。比如我们输入一个戴着透明头盔的女孩， 稍等片刻， later 就绘制完成了，效果还不错。当然，想要得到更细致精美的图片，就需要输入更详细的描述词， 描述词越多，生成的画面也会更丰富。如果你不会写描述词，也可以在 ai 画廊里面参考自己喜欢的作品描述词。 而且如果深层的图片和你想要的有偏差，还可以进行二次修改，比如自定义区域进行调整，一步步优化，就会得到你心中的那幅画。最后，我们把深层的图片填充到页面里，效果不就有了，而且目前都是免费的哦，赶快来体验吧！