PS设计教程网欢迎你!

Photoshop制作丰富多彩的晶格化界面效果(3)

文章来源于 站酷,感谢作者 micu设计 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2016-11-15
添加昵称文字,将文字大小设置为42px。文字样式选择苹方字体,字体颜色选择主色彩的绿色。 继续添加辅助的地理位置信息、数据描述性的文字,文字大小为24px,颜色#ffffff 透明度50%。大文字和描述性文字间距为20px。

添加昵称文字,将文字大小设置为42px。文字样式选择苹方字体,字体颜色选择主色彩的绿色。

Photoshop制作丰富多彩的晶格化界面效果

继续添加辅助的地理位置信息、数据描述性的文字,文字大小为24px,颜色#ffffff 透明度50%。大文字和描述性文字间距为20px。

Photoshop制作丰富多彩的晶格化界面效果

使用【钢笔工具】绘制出曲线形状,描边大小设置为8px,描边颜色设定为统一的绿色。将形状颜色填充,填充设置为0%。

Photoshop制作丰富多彩的晶格化界面效果

Photoshop制作丰富多彩的晶格化界面效果

双击图层形状打开【图层样式面板】选择渐变叠加,“混合模式”选择正片叠底,“角度”为90°,“样式”为线性。

Photoshop制作丰富多彩的晶格化界面效果

双击渐变条,打开“渐变编辑器”面板,调整渐变条为白色到深色的过度效果。

Photoshop制作丰富多彩的晶格化界面效果

为了让曲线变得更为自然,选择描边的渐变模式,将描边调整到为深绿到绿色再到深绿的过度效果。度数设置为0°。

Photoshop制作丰富多彩的晶格化界面效果

绘制好曲线后,使用椭圆形状工具绘制出数据点。

Photoshop制作丰富多彩的晶格化界面效果

再使用【文字工具】添加上曲线上的数据文本。

Photoshop制作丰富多彩的晶格化界面效果

最后再将界面中的底部导航绘制出来,让界面变得更为整体和工具化。

在设计中要注意选中按钮与未选中按钮的颜色对比,选中的颜色采用了主色彩的绿色,而未选中的图标为浅灰色。

Photoshop制作丰富多彩的晶格化界面效果

最后在来看看设计完成的界面效果,是不是很炫酷~

Photoshop制作丰富多彩的晶格化界面效果

进入论坛交作业:http://www.missyuan.com/thread-795726-1-1.html

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa