简单的PS为界面添加炫酷图形效果教程

  • A+
所属分类:设计技法

本文来源: 公众号-MICU设计, 共 1177 字

我们经常可以在App中看到一些配色很炫酷,图形又很复杂的界面,这类界面中的图形其实大部分都有规律可循。只要掌握了规律,制作起来就比较简单了。今天就来教大家,如何两步打造炫酷界面!

简单的PS为界面添加炫酷图形效果教程

1,绘制基础图形

启动PhotoshopCC 2017,按【Ctrl+N】组合键新建一个文件,将【文档类型】设置为【画板】,将【画板大小】设置为【iPhone6(750,1334)】。

简单的PS为界面添加炫酷图形效果教程

在【工具箱】中选择【椭圆工具】,然后在画板中绘制一个椭圆图形,将填充色设置为黑色,同时关闭描边,接着设置图层的【不透明度】为6%。

简单的PS为界面添加炫酷图形效果教程

按【Ctrl+J】组合键复制一个椭圆形状,然后按【Ctrl+T】组合键进入自由变换模式,按住【Shift】键将图形顺时针旋转45°;继续复制一个椭圆形状,然后将其顺时针旋转90°;再次复制一个椭圆形状,然后将其顺时针旋转135°。

简单的PS为界面添加炫酷图形效果教程

同时选择所有的椭圆形状图层,按【Ctrl+G】组合键对其进行编组,以方便后面的制作。

简单的PS为界面添加炫酷图形效果教程

选择【组1】图层组,按【Ctrl+J】组合键复制一个图层组,然后按【Ctrl+T】组合键进入自由变换模式,按住【Shift+Alt】组合键将图形等比例缩小。

简单的PS为界面添加炫酷图形效果教程

接着同时选择两个图层组,按【Ctrl+G】组合键对其进行编组。

简单的PS为界面添加炫酷图形效果教程

2,添加颜色与细节

下面为图形添加颜色。按【Shift+Ctrl+N】组合键在【组2】图层组的上一层新建一个【图层1】,将前景色设置为桃红色【R:255,G:8,B:182】,背景色设置为蓝色【R:0,G:138,B:255】,然后使用【画笔工具】在画板中单击鼠标左键,绘制一块桃红色,接着按【X】键切换前景色和背景色,最后继续单击鼠标左键,绘制一块蓝色。

简单的PS为界面添加炫酷图形效果教程

这里提供一张隐藏了【组2】图层组的效果供大家参考。

简单的PS为界面添加炫酷图形效果教程

参考图选择【图层1】,然后【Ctrl+Alt+G】组合键将其设置为【组2】图层组的剪贴蒙版,使其只作用于【组2】图层组。

简单的PS为界面添加炫酷图形效果教程

下面添加界面的细节

使用【横排文字工具】在图形的中间位置输入数字28,然后将字体设置为Politica、大小设置为280点、颜色设置为白色。

简单的PS为界面添加炫酷图形效果教程

在【工具箱】中选择【移动工具】,然后按住【Shift+Alt】组合键向下移动复制一个文字,将文字修改为micudesign,接着将字体大小设置为42点、字距设置为60。

简单的PS为界面添加炫酷图形效果教程

下面丰富一下背景。按住【Shift】键使用【椭圆工具】在图形中间绘制一个圆形,将图层调整到【图层2】的上一层,然后将图层的【不透明度】调整为20%。

简单的PS为界面添加炫酷图形效果教程

为圆形添加一个【渐变叠加】样式,然后设置一个蓝色到紫色渐变色,并将【角度】调整为-29°。

简单的PS为界面添加炫酷图形效果教程简单的PS为界面添加炫酷图形效果教程

复制一个圆形,然后将其等比例缩放到合适的大小,接着在【图层样式】对话框中勾选【渐变叠加】样式的【反向】选项,这样可以加强两个圆形之间的层次效果。

简单的PS为界面添加炫酷图形效果教程

最后是对整体界面进行功能布局,将按钮和图标排列在界面的下部,并制作好文字信息,从而让界面效果变得更加丰富和细腻。

简单的PS为界面添加炫酷图形效果教程

最终效果



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: