Photoshop制作简洁大气的手机天气展示界面教程

妃子笑笑哈哈

妃子笑笑哈哈

2016-03-17 20:28

下面请跟着图老师小编一起来了解下Photoshop制作简洁大气的手机天气展示界面教程,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!
来源:优设网 作者:一人前端
效果图制作并不难,都是一些常用的图形及效果制作。不过需要很深的界面设计功底,要能根据用户习惯,把一些最常用的功能用简洁的实用的方式表现出来。
最终效果

1、打开Photoshop并新建一个600*800 px 的新文件。

2、选择“矩形工具”,创建一个大矩形,填充颜色# 920049。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)3、创建一个新的图层,并填充颜色# ffffff,减少填充到0%。添加模式,单击图层样式图案叠加。点这里下载图案。

4、添加标题文字「Tuesday」,颜色填充#ffffff。然后点击图层样式阴影,给文本添加一个细薄的影子。

5、添加「温度」,重复相同的过程,给温度文本添加阴影。

6、设置前景色为# ffffff并利用钢笔工具来创建云形状。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)7、现在,点击图层样式添加描边、颜色叠加和投影。



8、选择「多边形工具」调整顶部设置创建太阳,颜色为# fff691。并给下面这一层云添加描边,填充颜色#ffba00。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)9、现在让我们开始细节面板。选择一个新层,并将其置于图案层后,选择“矩形选框工具”创建一个小纸条,填充颜色#00bff3。

10、点击图层样式渐变叠加 ,添加图层样式。

11、创建另一个纸条,并填充颜色#1f2f4e。

12、现在让我们添加文本和细节,第一条,所以选择“橡皮擦工具”,调整画笔的大小和形状的刷板。参考底部的模式,选择一个漂亮的样式。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)13、选择“钢笔工具”创建三角形,颜色#00bff3。并使用一个柔软的圆形笔刷在底部描绘一个小的影子。

14、添加文字「More details」,填充颜色#ffffff。现在在右边添加「更多」图标,然后给文字和图标添加一些阴影,设置如下。

15、继续我们的导航创建。首先,我们将创建一些分隔线。选择「直线工具」,画1 px宽,前景颜色#00000的一直线。然后点击图层样式投影,样式如下。

16、用“矩形工具”创建导航按钮,在中间创建一个矩形,颜色#88022e,然后添加投影。如下图。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)17、添加导航文本,然后给文本添加一些投影。

18、将其余图标(用以上相同的方式创建了云、太阳等)添加,并设置同样的投影样式,设置如下。

最终效果:
tulaoShi.com

展开更多 50%)
分享

猜你喜欢

Photoshop制作简洁大气的手机天气展示界面教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作简洁大气的手机天气展示界面教程

Photoshop制作简洁大气的手机天气展示界面

电脑网络
Photoshop制作简洁大气的手机天气展示界面

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作简洁大气的圆形开关图标教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作简洁大气的圆形开关图标教程

Photoshop制作简洁大气的高档红酒海报教程

PS PS教程
Photoshop制作简洁大气的高档红酒海报教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop制作简洁大气的透明光束教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作简洁大气的透明光束教程

Photoshop制作简洁大气的写作图标教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作简洁大气的写作图标教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop制作蓝色质感的ICON图标教程

Photoshop制作蓝色质感的ICON图标教程

Photoshop设计欧美古典风格的钟表教程

Photoshop设计欧美古典风格的钟表教程
下拉加载更多内容 ↓