恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
4步教会你制作UI质感效果的卡片
2.7°
2023-09-15 原创文章 教程 举报 933 6 4 0

卡片 (Card),是我们在每个网站和应用程序中都会经常看到的一种组件,它能够简单直观地将想要表达的内容传达给用户,是目前UI设计流行的方式之一,那一套质感效果的卡片应该如何实现呢?

今天我们以第一个卡片为例来进行操作,这里使用的设计工具是「行空设计」,这是一款专为产研团队研发的设计协作平台,操作顺畅,页面简洁,兼容Sketch,复制链接:https://xk.design?c=huicn 至PC端即可使用,边看边操作效果更佳哦,文章底部附有源文件链接,大家需要的自取哈~


—————————————————————————


01 制作背景


使用矩形工具(快捷键R)绘制底部背景,随后填充渐变色,使背景看起来丰富有层次

尺寸:320*170px、圆角半径:8、线性渐变填充:#FF4747-#FFB380


02 增添光影


利用钢笔工具(快捷键P)绘制出2个光影区域并设置透明渐变,选中底部背景图层并添加蒙版,使得两个光影区域只在背景内显示。

线性渐变填充:#E0E0E0-#FAFAFA、不透明度30%


03 绘制图标


云朵图标由正圆和圆角矩形组成,同时选中两图形,执行布尔运算的联集;箭头图标由三角形和钢笔工具绘制的直线组成,绘制完成后打组,给云朵和箭头填充白色并添加阴影,最后云朵及箭头编组,整体旋转10度。


云朵:圆形48*48px;圆角矩形98*44px、圆角半径31.5;

布尔运算形状结合,设置边框,颜色#FFFFFF;宽度12;添加外阴影#FACBCA、大小【9、0、1、0】

箭头:直线14.55、边框宽度6;三角形15.31*10.8px、圆角半径1;

选中直线及三角形图层进行编组,设置颜色#FFFFFF;添加外阴影#FACBCA、大小【2、-2、1、0】


04 添加文字


文字工具(快捷键T)输入文字,设置字体和颜色,并调整位置就完成啦


根据上面的教程,你也来通过改变底部背景的渐变色和图形,来试试其他3个卡片的绘制吧,期待你的作品哦~复制链接:https://xk.design?c=huicn 至PC端查看源文件,大家有其他疑问可以在评论区讨论哦~


—————————————————————————

 

Powered by Froala Editor

更新:2023-09-15

收藏

6人已收藏

行空设计

一款可在线使用的【专业 UI 设计工具】

  • 31

    作品

  • 17

    粉丝

  • 14

    关注

  • AICG落地✖️劳动节海报设计
  • 看完59个案例,我总结了用户引导设计方法
  • UI作品集避坑15点,HR都会多看几眼
  • 一学就会 | 轻拟物徽章图标(含教程)

    猜你喜欢

      2023-09-15 原创文章 教程 举报 933 6 4 0

      4步教会你制作UI质感效果的卡片

      2.7°

      你确定要举报4步教会你制作UI质感效果的卡片

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年09月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录