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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
2步骤搞定炫酷的界面效果
0.0°
2016-11-09 原创文章 教程 举报 6541 502 289 36

关注MICU设计微信公众号,每天一个设计小技巧~



老王说:在我们制作界面的时候,经常会看到网上有很多的绚丽的界面,他们的图形都非常炫酷。如何才能快速的制作出这样效果呢?那么今天MICU教大家如何使用2部方法制作炫酷的APP界面。



第1步

绘制图形

新建图层选择画板(ps cc 2015才有的功能),选这iPhone6的尺寸大小。

Image title

Image title

新建完图层后我们使用工具栏中的椭圆工具绘制一个椭圆形。双击形状图层将形状的颜色改为黑,透明图设置为5%。

Image title

Image title

Image title

选择形状图层,Ctrl+J复制出同样的一个形状。

Image title

选择复制出来的图层,【Ctrl+T】将旋转的角度调整为45°。使用同样的方式Ctrl+J进行复制图层,再Ctrl+T进行旋转,重复3次同样的操作后绘制以下的形状效果。

Image title


Image title


将绘制好的图层全部选中【Ctrl+G】对图层进行编组,方便后面的制作。

Image title

第2步

添加颜色,加强细节


在图层面板中底部找到【新建图层】按钮点击,新建一个空白图层。

Image title

使用工具栏中的【画笔工具】绘制颜色。在绘制的前可以调整画笔的大小和颜色,双击工具栏中的颜色进行设定前景色和背景色。通过使用【画笔工具】将颜色绘制成从蓝色到桃红色的渐变效果。

Image title

Image title

Image title

渐变颜色图层绘制好后,在图层与编组之间按住【Alt】键进行图层与编制之间的嵌套,让渐变的颜色嵌套到下面的编组上。从而完成以下的效果。

Image title

Image title

选择图层编组,Ctrl+J复制新的编组。选择复制的编组Ctrl+T进行变换,缩放的时候后按住shift+Alt键拖动边缘的方块对图形进行进等比缩放。将图形比例调整到合适的大小,让形状显得更有层次和空间。

Image title

Image title

为了让颜色嵌套到所有的图层上,选中形状的两个编组【Ctrl+G】把图层下面的两个编组合成为一个编组。然后在颜色层与编制之间按住【Alt】将图层嵌套到合成的编组上,这时候背景的主要形状就绘制好了。

Image title

Image title

Image title

背景效果制作完后,使用工具栏中的【文字工具】制作字体,文字颜色设置为白色,大小设定280px。

Image title

Image title

Image title

Alt键拖动复制字体图层,改成副标题的文案。在【窗口】中找到【字符】面板调整文字的字间距到合适的间距,将字体大小为42px,文字字间距为60。

Image title

Image title

文字制作好后,再次丰富一下背景的效果。选择路径【椭圆工具】,在绘制的时候按住【Shift】绘制一个正圆。

Image title

Image title

双击绘制好的路径图层打开【图层样式】面板选择【渐变叠加】。

Image title

在【渐变叠加】面板中双击‘“渐变条”调出渐变编辑器调整蓝色到紫色的渐变效果。

Image title

做好一个圆形的渐变效果后,选择图层【Ctrl+J】复制一个新的图层。然后【Ctrl+T】对新的图层进行缩放。

Image title

将圆形调整到合适的大小后,再双击图层调整渐变为方向为反响,从而加强两个圆形之间的层次效果。

Image title

Image title

但炫酷的效果完成后,我们可以对整体的页面进行功能布局。绘制好功能的按钮及子功能的ICON图标等,从而让页面变得更加的丰富和细腻。

Image title

好了,今天的教程就讲到这里。



另外还有一个超鸡重要的事情~

.

.

.

没错!


!第五期UI特训班开始报名了!

报名咨询QQ:2864384028

Image title

好了广告打完了!

我死远点~




更新:2016-11-09

收藏

502人已收藏

  • 63

    作品

  • 6880

    粉丝

  • 0

    关注

  • 提UI设计的8个技巧
  • 这些3D素材生成器,让我果断放弃了C4D!
  • 8点了解栅格系统的应用
  • 大厂都在用的10个防呆设计法则!
相关标签
micu设计教程

    猜你喜欢

      2016-11-09 原创文章 教程 举报 6541 502 289 36

      2步骤搞定炫酷的界面效果

      0.0°

      你确定要举报2步骤搞定炫酷的界面效果

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年11月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      289
      502
      36

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

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

      登录

      手机号

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

      登录
      第三方账号登录