1. 兔课网
  2. 资讯
  3. UI设计教程
  4. 简洁的炫彩APP界面设计制作教程

简洁的炫彩APP界面设计制作教程

4846人阅读 2020-10-20 收藏
简洁的炫彩APP界面设计制作教程,在我们制作界面的时候经常会看到网上有很多的绚丽的界面他们的图形都非常炫酷。如何才能快速的制作出这样效果呢?

那么今天兔课菌教大家如何使用2步方法制作炫酷的APP界面。

效果图:

简洁的炫彩APP界面设计制作教程

第1步:绘制图形

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

第2步:添加颜色,加强细节

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

简洁的炫彩APP界面设计制作教程

使用工具栏中的【画笔工具】绘制颜色。在绘制的前可以调整画笔的大小和颜色,双击工具栏中的颜色进行设定前景色和背景色。

通过使用【画笔工具】将颜色绘制成从蓝色到桃红色的渐变效果。

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

为了让颜色嵌套到所有的图层上,选中形状的两个编组【Ctrl+G】把图层下面的两个编组合成为一个编组。

然后在颜色层与编制之间按住【Alt】将图层嵌套到合成的编组上,这时候背景的主要形状就绘制好了。

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

简洁的炫彩APP界面设计制作教程

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

将字体大小为42px,文字字间距为60。

简洁的炫彩APP界面设计制作教程

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

简洁的炫彩APP界面设计制作教程

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

简洁的炫彩APP界面设计制作教程

相关文章推荐

没有基础可以学习UI设计吗?,学UI设计要什么基础,主要学什么软件?
零基础想转UI设计好学吗,天津有教的好的培训班吗?
UI设计师工作中常见的几个问题,UI设计师具体工作是什么?
UI设计新手入门要知道哪些图标分类
大家是通过什么方式学习UI设计的,成功入职了吗?,学设计需要画画基础吗?
北京ui设计培训学费哪个好,北京UI设计培训,如何在北京筛选适合自己的的培训班呢?
UI设计师需要掌握什么技能?
没有经验,如何成为 UI / 交互设计师?,UI交互设计学习需要掌握哪些技能?
大学生做UI设计有绝对的优势吗?
ui设计培训哪家好,ui设计稿是iphone的如何切iphone6plus的图

特别推荐

上一篇>> ICON图标定义和意义是什么

下一篇>> MBE风格ICON图标制作详解教程

新人大礼包

1
咨询客服

交流Q群

微信公众号
返回顶部