当前位置:首页>ps实例教程>ps制作实例>背景壁纸>教程内容

界面设计,快速设计炫酷界面(5)

来源:站酷 作者:micu设计 学习:24953人次

这种界面背景制作其实方法很简单,画好一个椭圆形,然后调整角度和不透明度颜色等即可,大家一起学习一下吧。

第1步

绘制图形

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

透明图设置为5%。

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

选择复制出来的图层,【Ctrl+T】将旋转的角度调整为45°。使用同样的方式Ctrl+J进行复制图层,

再Ctrl+T进行旋转,重复3次同样的操作后绘制以下的形状效果。

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

第2步

添加颜色,加强细节

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

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com

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

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

界面设计,快速设计炫酷界面_www.16xx8.com
<点图片看大图>

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

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
丨繁花灬落叶2018-06-06 03:43
界面我的作业:
莫忘初心2018-03-08 05:32
我的作业我的作业:
莫忘初心2018-03-08 05:31
我的作业:
莫忘初心2018-03-08 05:29
交作业了
夏天2017-08-01 11:24
图层与编组之间创建不了剪切蒙版,按住【Alt】键没反应。怎么办?鎰挎棤宀佹湀鍙洖澶
ciel_phantonhive2017-07-07 10:36
我的作业:
ciel_phantonhive2017-07-07 10:36
第一次临摹界面
愿无岁月可回头2016-12-24 10:14
图层与编组之间创建不了剪切蒙版,按住【Alt】键没反应。怎么办?
愿无岁月可回头2016-12-24 10:12
图层与编组之间创建不了剪切蒙版,按住【Alt】键没反应。怎么办?
字幕大大2016-12-21 03:47
https://pan.baidu.com/s/1sl2bcBz
字幕大大2016-12-21 03:47
不行,提交不了图片
字幕大大2016-12-21 03:12
https://pan.baidu.com/s/1sl2bcBz
字幕大大2016-12-21 03:12
不行,提交不了图片
-ShawnPan-2016-12-14 01:59
菜鸟交作业
-ShawnPan-2016-12-14 01:12
菜鸟交作业

关注大神微博加入>>

网友求助,请回答!