PS制作高端大气上档次的移动天气界面

2016-01-29 16:28 8 1 收藏

PS制作高端大气上档次的移动天气界面,效果图制作并不难,都是一些常用的图形及效果制作。不过需要很深的界面设计功底,要能根据用户习惯,把一些最常用的功能用简洁的实用的方式表现出来。

【 tulaoshi.com - PS 】

效果图制作并不难,都是一些常用的图形及效果制作。不过需要很深的界面设计功底,要能根据用户习惯,把一些最常用的功能用简洁的实用的方式表现出来。
最终效果



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


(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

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


123456PS制作高端大气上档次的移动天气界面2

3、创建一个新的图层,并填充颜色# ffffff,减少填充到0%。添加模式,单击图层样式图案叠加。点这里下载图案。



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



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



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


  123456PS制作高端大气上档次的移动天气界面3

7、现在,点击图层样式添加描边、颜色叠加和投影。



(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)


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


  123456PS制作高端大气上档次的移动天气界面4

9、现在让我们开始细节面板。选择一个新层,并将其置于图案层后,选择“矩形选框工具”创建一个小纸条,填充颜色#00bff3。



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



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



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


  123456PS制作高端大气上档次的移动天气界面5

13、选择“钢笔工具”创建三角形,颜色#00bff3。并使用一个柔软的圆形笔刷在底部描绘一个小的影子。



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



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



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


  123456PS制作高端大气上档次的移动天气界面6

17、添加导航文本,然后给文本添加一些投影。



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



最终效果:


  123456

来源:http://www.tulaoshi.com/n/20160129/1498673.html

延伸阅读
Radian公司是一家连接放款人,购房者,投资人和贷款服务的公司,利用一系列私人抵押保险和相关的风险管理产品,在一个新开的25000平方英尺的自动指导中心内,将其集团,科技和操作团队在一个设施中结合到一起。新空间利用了一个开放式底板,可以适应这些商业单元不断改变的需求,提供不断改善的工作空间,增强了合作交流。NELSON创造出一个...
春节高端大气美食怎么拍?   元旦跨年、春节就要接踵而至了,大家肯定要去各种各样的地方聚会,当然聚餐美食更是必不可少的。那么如何发一张让N多人给你点赞的食物,或是让他们知道即使吃的是大排档,拍出来的也是豪华游轮的高大上食物;想要整出羡煞群人的华丽晚餐,或是小清新的午后小点,请看下文。 先说在前头,本回答针对进...
标签: 镜头
今天分享的教程,是最近很火的Apple Aperture 图标。绘制一个精致的镜头图标相当不容易,光作者就花了5、6个小时,所以这篇教程主打绘制的思路,当然也很详细了,不过需要一定的PS基础呦。童鞋们可以试一下,能否按着作者的思路完成教程,如果全程木问题,那为自己点个赞吧。 画镜头不难,无非就是 「大圈套小圈,渐变叠渐变」 。「拟合」一个...
墨迹天气上传实景图片教程   现在有很多的天气预报应用,现在的天气预报可比以前准多了。其中墨迹天气就是一款不错的应用,但使用中也出现不少问题,很多朋友在问墨迹天气怎么发照片实景,墨迹天气怎么上传照片实景,今天我们就来一起了解一下。 步骤: 1、进入墨迹天气后下方会有一个照相机按钮,点击。 2、然后看...
标签: PS PS基础
先看看效果图 1、新建一个1000 * 600像素,分辨率为72的文件。选择渐变工具,颜色设置如图1,由下至上拉出图2所示的红色至暗红色线性渐变作为背景。 2、点击下面所示的文字图片,把弹出的文字大图保存。用PS打开保存的图片,直接把文字拖进来(文字是PNG透明格式不需要再抠图),解锁后调整好位置,如图4。 3、锁定文字像素区...

经验教程

351

收藏

33
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部