粉丝5248获赞2.6万

欢迎来到极致设计五分钟案例教程本期主题,金融类 app 页面深色模式 我参考了一些大厂设计规范,整理了一个朴实性比较强的深色模式色彩搭配方案,让你快速上手。深色页面设计背景色是在一个黑色的基础上覆盖不同透明度的白色,得到四个级别的颜色。 文本色是在 hsb 色彩模式下,以白色为基础,通过亮度的递减得到四级颜色。这次的案例是进入了页面,所以用到了绿色和红色来表示金融产品的价值升降。另外,我还准备了一组浅色模式的配色作为对照,因为同一个页面在切换深色和浅色模式时必须 要保持页面层级一致。看看我们今天要做的案例页面,先分析结构,最上方状态栏三个图标,分别是侧边栏、搜索消息班的卡片列表底部的导航栏和 home 指示器。 快捷键 f 新建三百七十五乘以八百一十二的画板,填充一级背景色,把颜色视力放在画布上,直接用吸管工具吸就行, 视频里出现的所有素材都会给到大家。具体获取方式我已经发到评论区了,状态栏和后幕指示器的获取方式在第二期案例教程已经讲过了,在这里简单回顾一下。第一步,去及时设计的资源广场搜 ls 十五, 找到官方设计资源,深色版点击引用。第二步,编辑界面左上角点击资源,在 内容库里找到我们刚刚添加的 ios 十五设计规范资源。把需要的组件拖到画板上,快捷键哦绘制四十乘四十的圆形,填充二级背景色, 设置左边距 x 二十五,顶边距 y 五十。复制两个,分别设置左边距二百五十五和三百一,这里顺便拉两条辅助线距离,左右边距各二十五。 打开 icon font 插件,设置图标的大小为二十,颜色为白色。搜索更多 搜索消息这三个关键词。尽量找三 个风格一致的图标涂到圆形里,居中放置图标尺寸和描边粗细可以微调一下。 最后在消息图标的右上角放置一个七乘七的未读消息小圆点。因为我们这题主题不是绘制图标,就直接找了现成的,想了解图标绘制方法的同学可以回顾一下第三期绘制三百二十五乘以二百的画板,居中放置填充二级背景色 圆角十六点。编剧一百零二快捷键 t 创建文本,具体参数看画面左上角的标注我的余额二级文本色 金额数字百分 数人民币字母缩写,用一级文本色 选中加百分之二点五七的文本,右键添加自动布局,居中对齐左右边距六,上下边距四。填充绿色 圆角十三。这个圆角是根据画板高度来的,现在画板高度是二十六,只要圆角值大于等于高度的一半就能形成,两边是圆头的形状,位置上 x 和 y 分别是十六、八十。 在 iconfund 插件里找一个下拉图标十四,像素白色,同时选中人民币缩写和下拉图标,添加自动布局,横向排列,居中对齐固定间距十,左右边距十二,上下边距八。填充二级背景色, 添加一像素描边内部颜色圆九十五,位置 x 二百四 y 四十。下面绘制这个数据曲线。快捷键 p, 用钢笔工具先绘制一条折线, 双击折线,选中锚点,选择完全对称,分别调节每一个锚点的弧度,这里需要大家呢耐心调整细节,才能让线条变得好看。形状确定后,添加描边居中。二像素圆头端点 颜色为线性渐变,中间添加两个节点,四个节点都是白色,两端透明度百分之零,中间两个透明度分别为百分之一百和百分之六十。 快捷键 r, 绘制一个矩形,覆盖在曲线上,矩形宽度比曲线宽一点,高度也明显高于曲线,给曲线添加线性渐变,中间也添加两个节点,四个节点都是浅绿色,透明度跟曲线一样,百分之零, 百分之一百,百分之六十, 百分之零。同时选中曲线和矩形,注意曲线在下,矩形在上。点击顶部工具栏中的创建为透明度蒙版, 复制一条曲线向下移动三像素,添加高斯模糊数值。七,填充的不透明度百分之八十当做阴影,这样我们的数据曲线就画好了 它的班字中的位置。 x 十六 y 一百二,右下角比较简单了,绘制两个五十乘五十的圆形,分别填充绿色和白色。在插件里找个箭头图标放在圆形里, 我们自己再加条线,让图标细节更丰富一点。 最后添加文本,调整位置, 到这里呢班的区就完成了创建我的资产文本 绘制二百乘一百三十八的曲线画板, 填充二级背景色 圆角十六 x 二十五, y 三百五十五,在 iconfine 的插件中搜一个比特币图标, 图标填充三级为颜色快捷键 k 等笔放大,置于画板中创建文本 参数,看左上角 增长的百分比,直接从前面复制一个就行。这里有一条小的曲线,还是刚才的方法,用钢笔工具画一条折线, 选出锚点,完全对称,分别调整锚点,让曲线的弧度缩小到理想状态, 秒变一点。五像素圆头端点颜色为线性渐变, 两端透明度百分之零,中间添加两个节点,中间两个透明度分别为百分之一百和百分之六十。 复制一个卡片距离第一个卡片十六像素,修改文本和背景 logo。 第二个卡片里面是狗狗 b 的图标, account 插件里也有,我们拿过来稍微改造一下就行。 曲线通过调整锚点改为下降的形态,曲线改为红色的渐变, 复制一个标题文本,改为市场趋势创建文本二十四 h。 在插件里找一个翻页图标, 白色是六 六像素,跟二十四 h 一起添加自动布局,横向排列,居中对齐,固定间距。二、我们在与市场趋势一起居中对齐,绘制二十八乘二十八的圆形。 在 iconfound 插件里分别搜 b, t, c, b, n, b, e, t, h, 找到这三个图标,调整大小和颜色,放到圆形里 创建文本。有些素材可以直接用前面的,然后用自动布局快速拍板, 创建画板三百七十五乘八十三。填充二级背景色, 添加描边白色不透明度百分之八,内部一像素。打开描边的高级设置,选择单边上边,这样只会让上边有一个很浅的分界线。图标文本首页虽然 hit 中等十 钱包社区我的 图标,我们选择面积性图标,自己画或者在插件里找都行,我这里就直接找好了,直接把后面三个图标透明度改为百分之四十作为默认状态,选中状态是一级文本色,未选中状态是三级文本色。 到这里,一个深色模式的金融类 app 页面就完成了,我们再带入浅色模式的配色方案,轻松就能做出页面曾经一致的浅色页面。关于深色模式,这次呢,先开个头,以后有机会做更多案例,大家一定要持续关注我们,下个视频再见!

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

这个插件我能玩一天,这些这些都是插件生成的,真的是绝了!今天我在资源广场寻找灵感的时候,突然发现了这个东西, 嗯,人工智能设计工具,你只需要描述想要的场景,给出一个参考图像, ai 会自动帮你进行艺术创作。看上去还不错, 那岂不是可以生成我想要的图片了?这样我在右安设计中填充图片,再也不需要去各种搜图了,直接生成就行了。于是我马上点击安装,这就来试一下。 首先打开 ai 入口,选择一个模板,点击生成就可以生成图片。想要自己创作的话,也可以向 ai 描述,比如很高的雪山照片,然后可以选择一个参考,不选也 ok。 下面可以设置 ai 对作 影响度,这里我就选择轻微,然后点击开始创作,那一个雪山照片就创作完成了。这感觉兄弟们能玩出花。当然遇到人工智障的时刻也可以反馈给我, 大家也可以去试试及时 ai 的海报制作活动,想了解的可以看下评论区。

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

及时设计插件安装即使用在官网首页点击下载像,找到即时设计插件,点击前往安装,跳转至及时设计 cotephan 插件安装印, 点击安装,弹出安装成功弹框,点击右上角的前往工作台按钮,进入个人空间页,打开所需上传的设计稿,在左侧菜单栏中点击插件按钮,选中 codefine 插件,打开,弹出 codefine 插件面板, 选中需要上传的设计稿页面,在 cotton 插件面板点击上传。上传成功后即可点击查看项目,跳转至 cotton 官网,点击会员中心页面,进入详情页, 点击下载代码,再下载代码弹框,可以选择所需的代码平台、 css 平台和像素单位,同时还可以进行图片资源路径配置。最后点击确认,即可将 ui 设计搞转换的前端原代码下载至本地。 如果你在安装过程中遇到任何问题,或需解锁、组建化、切除等更多神秘功能,可以点击右下角的问号或咨询微信客服。

分享一个 c u 的小技巧,每日分享。我们的 c u 的话, 模型建模有时候经常会图标莫名其妙的消失,那我们怎么把它调节出来呢?像这样,其实我这里有很多的一个插件,插件的图标他已经消失了,然后我们点击空白处的工具栏, 让他点击一个一个让他调节出来。那有第二种方法,调节出来的话就是点击视图 去给它调节出来,点击视图视图的工具栏选项让它调节出来, 像这样点击视图,点击工具栏,然后把我们的插件勾选上就可以了。 然后怎么保证他下一次,下次打开不消失呢?这边我教大家一个方法,保存为另存模板,把它保存为我们的一个模板。 好,你输入名字,它会自动创建文件名。右上角,右上角点击文件另存为模板。哦。 好,点击保存,覆盖现在的文件。好,然后我们关掉,关闭掉 su, 然后我们再重新打开。 这种方法的话有可能会失败,但待会我教大家第二种方法。 嗯,现在我们看到他的插件还是消失掉了,然后我们用第二种方法的话, 就会比较稳定一点,但是他有他麻烦的地方,就是每次都要另存一个新的文件。 好,我们同样的把我们所有的插件调出来之后呢,我们 点击左上角文件,给他选择为另存为。另存为,嗯,发到桌面上,然后我们直接 覆盖掉我们这个模板,刚是刚才我创建那个模板,然后给它覆盖掉这个模板了,之后 我们关掉 s u, 我们从这个模板这里打开。 第二种法的话,就是这样,另存为一个文件,用文件去打开它。好,可以看到我们的插件图标的话是不会消失的。好,如果大家觉得有用的 话,请给我一键三连点赞、评论、收藏,然后再关注我,持续更新而有用的设计知识小技巧。

同样是做设计,怎么别人做的就是比我快?今天就来跟大家分享一些我私藏的设计师必备插件,用来提高效率,效果杠杠的。这里输入关键词相关的插件都能找到第一个,像这种场景就可以用到。旋转复制的插件,可以通过调节数量、角度,快速来获得想要的图案。像是这种设计效果 就可以借助斜切插件来实现这个效果,放在项目包装还是放在作品集中都嘎嘎好使。说到作品集,那就不得不分享一下这个插件了,这里可以一键生成封面,改改文字就可以直接使用。像是这种设计,排版中需 要用到一些圆弧文字的效果,我们就可以拿出来这个插件只需要在这里调整数值即可实现自己想要的效果,无论是海报还是搬哪都很常用的。那如果说你想要这种三 d 效果来做封面,这个插件里面的三 d 图标库内容就可以直接拿来用了, 并且有多种颜色,多种角度可以选择。如果你觉得刚刚的背景太普通,没有亮点,那就可以拿出这个明三效果的插件,这样框框一排板,桌面就做好了。这就是今天跟大家 分享的六个插件,想要使用下载的朋友可以前往计时设计,打开计时设计,在我们的上方设计社区就可以找到我们的插件广场。除了我分享的六款插件,里面还有很多我没有介绍到的,感兴趣的朋友可以自己下载试试,网址在这里,快试起来吧!

big 吗?实施预览神器标记诗插件上线了!今天我们推荐一款刚上线的免费实施预览神器标记诗,安装插件后,打开插件并保持窗口开启。 插件一共有三个功能按钮,到处本地和实施预览功能都是免费的。我们点击底部的实施预览按钮,开关会弹出标记式客户端,客户端要提前下载好并打开哦。我们先点击在浏览器中预览, 就可以在浏览器中看到设计稿了。 同意, wifi 洗浴网的其他人也是可以预览的,只要将地址分享给其他人,就可以一起预览了。接下来我们来试 下移动端的预览,不管是 los 还是安卓设备都是可以同时预览的哦。拿出设备,扫描标记式客户端上的二维码,再双击手机屏幕,全拼就可以了。 不论你有多少设备,都是可以同时预览的哦。这么好用的功能是免费的哦,快用起来吧!

这节课讲的是引用组建的作用,首先我们先建立一个举行,简单的给举行做一些描边,让他看起来可以更明显。做完后我们在这个举行上点击创建引用组建,然后复制多几份这些复制出来的举行都可以用做引用的电话。 调整好之后,你看我们只需要将主体改变一下,他的运动下方的图片也跟着变化,是不是非常有趣呢?跟着我带你由小白变成老手的教程。

ig 史诗级插件,一款非常有意思的实用 ip 地址插件,这款插件适用于在工具栏区域中显示页面的服务器标志 只是当前爱服务器的物理位置。了解当前网站的服务器位置会为您的浏览增加一层额外的安全保护意识,并有助于指明可能适用的本地语言和法律管辖区。下面跟着我一起来看一下效果吧!老规矩,打开浏览器扩展程序页面,在搜索栏输入看题, 选择画面中的第一款插件,点击获取进行安装,稍等片刻便会安装完成。自动弹出插件介绍页面,然后 点击右上角三个点,打开扩展,将该插件设置为在工具栏显示。此时我们就可以看到插件会自动检测当前网站服务器所属国家, 并且显示将国旗显示在图标上,鼠标悬停上去,会进一步显示 ip 地址信息,打开百度就会看到图标变成了中国国旗。再打开大家熟悉的油喉脚本网站,发现该网站的服务器是在德国, 怪不得有这么多厉害的脚本,你学会了吗?快去看看你常用的网站都在哪个国家吧,我是仰望关注我,更多使用插件推荐给你, nice!

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