PS教程!手把手教你打造时下最受欢迎的APP效果展示图 - 优设网 - UISDC

PS教程!手把手教你打造时下最受欢迎的APP效果展示图

2015/11/08 41948评论区

app-exhibition-effect-mockup-1

编者按:让甲方过稿,一半在口才,一半在包装。想学会高大上地展示你的APP作品?来看今天这篇教程!教程不难,@ETESY 提供的方法中,操作步骤更为详细,@正越升 同学的细节处理更为丰富,各有长处,新手可以都练一遍,来收!

@ETESY :假设,你要做一个5S的尺寸的效果展现图。

步骤:

1、新建一个画布尺寸为:640*1136,然后保存,命名如:5S效果图模板

2、再新建一个画布,命名如:效果图展现

2、再新建一个画布,命名如:效果图展现

尺寸随意,可以大点,自己看情况吧。

3、将刚才保存的那个5S效果图模板.psd拖到这个画布中。

Ctrl+T变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击”5S效果图模板”这个图层。

这就是智能对象的好处。

跳到这个画面后

拖入你想要做的界面:

图片来自Dribbble:Dribbble – GIF for the Timeline App by Sergey Valiukh

然后保存:Command(Ctrl)+ S,关闭:Command(Ctrl)+ W

5、回到这个展示页面

注:这儿忽略了一步,把刚才保存的图层拖过来。同学们应该都懂吧 – –

复制一个图层:

按住Option(Alt)+ 鼠标左键拖动图层往下拽,或者Command(Ctrl)+J,选下面的一个图层,双击图层进入图层样式,选择斜面和浮雕,设置一下参数:

参数自行调整,其中,阴影角度45°可随大环境光线可根据情况自行调整,阴影模式透明度随意,自己看情况调整。

6、然后,从第二个图层开始连续复制多个该图层,每复制的一个图层都在上一个图层的下方,每复制一个图层都往下移一个像素,按住option(Alt)+鼠标左键拖动图层往下拽,可使用键盘上的下方向键来控制。

然后,在最后一个图层上设置一个投影

然后,在最后一个图层上设置一个投影,参数自行解决。

最后调整下整体环境。

完工!

以上的好处便是使用了智能对象,它可以让你想展示的界面可以随意替换。

如需展示多个界面的效果,只要多拖进几次那个PSD,然后平面排好后,统一调整透视效果。

当然表现的手法很多,以上只是一种。

比如,也可以再建好的大画布上,画一个矩形的尺寸为640×1136,然后转成智能对象,再双击智能对象,进入调整。

附上@正越升 同学的方法,原理相同,细节上处理更加丰富。

一个效果有千万种实现的办法,在这里只提供一个最简单的思路,用PS纯做。

一、扭曲&旋转

导入界面图,然后编辑-扭曲,再旋转,做到如下效果:

二、制作厚度

这一步最关键,选中界面图层,[Ctrl+Alt+T],然后按一下方向键[↑],再按回车。这样就复制了一个图层,并且新的图层在原来基础上往上移动一个像素。

来了,狂按[Ctrl+Alt+Shift+T],这是重复之前的变换操作,这样就会复制出很多个图层,每一个都在之前基础上往上移动一个像素。从而做出厚度效果。

三、改变亮度

保留最上面那个图层,将其他所有界面的图层,合并成一个图层,命名为[厚度]。

然后选中[厚度]图层,使用矩形选框工具+[图像-调整-亮度对比度],对厚度的左边面和右边面分别进行降低亮度20和50处理。


四、阴影

复制[app]图层,改变图层顺序到[厚度]下面,然后使用[高斯模糊]+颜色叠加为黑色+改变不透明度为30%。完工!

【本周你可能会错过的那些好文】

教科书级别的苹果官方人机指南!
《腾讯力作!超实用的IOS 9人机界面指南(1):UI设计基础》

如何自学成为腾讯高级交互设计师?
《优设访谈!腾讯高级交互设计师C7210的十年设计路》

纹理素材两大杀器!
《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:zhihu(已授权)

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/app-exhibition-effect-mockup

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里