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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI设计-2.5D收音机教程(1)
0.0°
2017-11-05 原创文章 教程 举报 2209 15 7 0

知识点:AI中3D工具的技巧;简单的立体插画绘制技巧;I中渐变工具的使用。


这是我的微信公众号:Yimi1788,每天会有UI设计知识分享!

关注后回复“软件”即可获得全网最新版本UI设计全套软件(PSCC2018、AICC2018、AECC2018等)

Image title


一.基础底座

步骤1:

新建一个800px ×600px大小的画布,然后用矩形工具画一个800px 600px大小的矩形,填充颜色为渐变,参数如下图,与画布水平垂直居中对齐。Image title

步骤2:

使用矩形工具绘制大小440px*364px大小的矩形,圆角为20px,填充暂定为#3B2FDD,其他颜色也可以,作为底板。执行进入【效果>3D>凸出与斜角】命令,在参数面板中我们可自定义,也可以直接利用软件预设来应用3D场景中的角度旋转情况。一般来说,为了方便快捷,我们直接选择预设。这里我们在这个选项下拉框里选择“等角-上方”,就不再需要调整旋转的角度。凸出厚度修改为16pt。通过勾选“预览”,对最终效果进一步确认,从而再对参数作进一步调整。Image title

步骤3:

这时,已经转为3D造型的矩形变为了立方体,如果你觉得大小或者效果不合适,仍然可以点击变换工具和图层面板进行参数调整。而这个略薄的立方体将作为收音机的底座。为了对它进一步调色,这时需要选中它以后进入【对象>扩展外观】,使它成为路径。然后利用组合快捷键【Ctrl+Shift+G】(取消编组),连续按三次,将这个立方体分解为不同的块面。Image title

步骤4:

给三个不同部分上色-渐变填充,线性渐变,角度180度,1和2图形部分色值如下,3图形的渐变是图形2的反向渐变,上色完成后,使用快捷键“CTRL+G〞将底座打包编组。Image title

二.绘制机身

步骤1:

新建一个310px ×194px大小的矩形,填充颜色随意,同样执行【效果>3D>凸出与斜角】效果,位置选择“等角-左方”,凸出厚度90px。Image title

步骤2:

将该图形放置在底座上方的中间位置,扩展对象后,使用快捷键“CTRL+SHIFT+G〞3次取消编组,成为独立的2个面,分别对每一个面进行上色。Image title

步骤3:

新建一个74px*118px椭圆大小的椭圆,填充颜色随意,使用旋转工具旋转30度,得到一个斜椭圆,填充渐变见图一;复制1个副本,将其分别向上和向右移动2px,置于第一个斜椭圆的后面,渐变填充色值见图二;新建一个66px*110px的椭圆,渐变填充见图三,旋转30度,与第一个斜椭圆水平垂直居中对其,得到收音机上的立体圆形旋转按钮。Image title

步骤4:

新建一个82px ×140px大小的矩形,填充颜色随意,同样执行【效果>3D>凸出与斜角】效果,位置选择“等角-左方”,凸出厚度6pt。将该图形放置在机身上,扩展对象后,使用快捷键“CTRL+SHIFT+G〞3次取消编组,成为独立的3个面,分别对每一个面进行上色,渐变色相同:#FF00CC-#333399,只是角度不同,这边便不一一列出。Image title

步骤5:

接下来绘制调频滑动按钮,首选绘制8px*76px的矩形,渐变填充为:#fb036b-#6e0879,线性渐变,角度为-90度;再绘制一个3px*76px大小的矩形,与上一个矩形左对齐。渐变填充为:#ba0471-#49097d,线性渐变,角度为-90度。将两个矩形编组,并复制两份,得到3个矩形,将一个副本向右移动10px,另一个副本像左移动10px。将三个矩形编组,使用变换工具先倾斜-30度,再旋转-30度,得到与机身平行的凹槽形状。Image title

未完待续~~

更新:2017-11-05

收藏

15人已收藏

是黄将诶

人生就像剧场,不断排练才能有好剧~

  • 10

    作品

  • 31

    粉丝

  • 1

    关注

  • UI设计-小兔子插画教程
  • UI设计-绘制MBE风格图标(2)
  • UI设计-绘制MBE风格图标(1)
  • UI设计-2.5D收音机教程(2)

    猜你喜欢

      2017-11-05 原创文章 教程 举报 2209 15 7 0

      UI设计-2.5D收音机教程(1)

      0.0°

      你确定要举报UI设计-2.5D收音机教程(1)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年11月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      15
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录