想不想高大上地展示你的APP作品呢?想不想将图片变成APP效果图呢?那就一起来看看下面这个PS教程吧!教程不难,就随小编我一起来学习下怎么用PS将图片变成APP效果展示图吧!
这次我们要做的是一个5S的尺寸的APP效果展现图。
步骤:
1、新建一个画布尺寸为:640*1136,然后保存,命名如:5S效果图模板。
2、再新建一个画布,命名如:效果图展现。
2、再新建一个画布,命名如:效果图展现。
尺寸随意,可以大点,自己看情况吧。
3、将刚才保存的那个5S效果图模板.psd拖到这个画布中。
Ctrl+T变换到合适的尺寸,倾斜到合适的透视效果。
4、然后双击”5S效果图模板”这个图层。
跳到这个画面后。
拖入你想要做的界面。
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%。完工!
好的,关于怎么用PS将图片变成APP效果图的方法就介绍到这里,大家学会了吗?
如何做界面UI设计的展示图UI设计中制作界面图标的流程:
1、图标创意阶段;
2、草图绘制阶段;
3、草图渲染阶段。
补充:
1、在PS中新建一个所需尺寸的画布并保存,将其命名为UI设计效果图模板。
2、再新建一个画布,命名为界面UI设计效果图展现。尺寸随意。
3、将刚才保存的界面UI设计效果图模板.psd拖到画布中。Ctrl加T变换到合适的尺寸,倾斜到合适的透视效果。
4、然后双击界面UI设计效果图模板这个图层即可。
补充:UI即用户界面的简称。泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
App开屏页如何设计？来看这五个常用的方法第一印象很重要!很多用户会根据App/网站的初始形象来判断是否能信任这家公司或产品。
那么如何解决快速感知的问题呢?首先将关注点放在App带给我们的第一印象上。合理的启动页能激发用户的潜意识,有助于吸引和留存合适的用户。
在深入研究设计策略之前,先来了解一下启动画面的基本知识。
启动画面指一系列连续的使用体验——从用户点击应用图标开始到内容加载完成为止。通常包括以下五种形式:
1、应用图标(参与启动体验的第一个环节)
2、启动画面(开屏页)
3、开屏页跳转到内容页
4、骨架屏的启动形式(待加载状态)
5、动画式开屏(加载更多内容)
开屏页是产品体验的门户,通过模拟更快的加载时间、创建无缝的启动体验来提升用户体验。
设计不只关注外观,更关注解决特定用户问题的方法。启动页能解决哪些问题呢?
-在潜意识中与用户交流,并设定对未来的预期;
-通过隐藏加载过程来减少可感知的等待时间;
-向用户介绍App的用途和品牌;
-为用户提供愉快的体验。
通过对问题的梳理,这里总结了开屏页设计的5种方法,有效吸引用户的注意力。
从iOS10开始,开发者可以将预定义的图标进行个性化设置。例Bear允许用户根据主题色调整图标的颜色。
MLB允许用户选择自己喜欢的团队作为启动图标。
启动页像是一种持续的营销活动,因为用户每打开一次App就会加深对品牌的印象。
通过在启动页中添加标志性的slogan或者图像,既能强调App的用途也为用户设定了一定的期望。
例如上图的3个应用将品牌logo放在开屏页中,这样的设计对用户的感官有直接的刺激。
上图的History、DocuSign和Ted三个App,通过在开屏中添加标语来强化价值主张。
从点击图标到内容加载,中间有一段可感知的加载时间,如果在这段时间内融入合适的动画,用户能对产品状态有提前的了解。
上图的三个App都利用动画在开屏页和内容页之间建立了无缝的桥梁。
Google,TinyFax和Cinamatic这些App利用动画将图标巧妙地转换成内容。
同样上面的三个App虽然使用的动画不算很细腻,也能完成从初始页到内容的过渡。
有些应用的动效则保持简单,如上图只将标志作为突出展示。
Chick-fil-A在开屏页上添加提示动画,成功将用户引导到内容页。
对于大多数应用来说,使用开屏页+骨架屏的形式更有意义,因为轻量级的应用通常加载速度非常快,骨架屏能获得更流畅的体验。
这些应用在启动页面预加载主页的内容,Breathe(中间)使用与主页内容相似的彩色骨架。Transit(右边)使用地图的骨架作为启动页,加载完成后方便用户直接点击。
上图的应用通过预加载和动画来把握时间,给人一种“即将到来”的印象。
和前面的应用相比,Snow、Dribbble和LaunchPro使用的骨架状态很少。
有些App启动时需要加载大量数据,例如视频、音频,所以需要大量加载时间。
对于这类应用,稍微长一点的动画更有意义。随着数据的缓存和加载时间的缩短,动画可以变得越来越短。
上图的App使用动画来加载数据,给用户带来反馈的时间。
Clashem,Tumbleweed和Chefsfeed使用有趣的动画在加载数据的同时又加强了品牌体验。
看了这么多案例,启动画面到底要显示多长时间呢?这应该考虑应用的配置和加载数据需要的时间。
自定义启动体验以适应不同的使用时间和用户:
·各个阶段的用户要有不一样的启动体验;
·先考虑应用的大小再选择合理的启动页;
·用图像传达信息,动画作为引导;
·尽可能使用独特的图标来进行品牌推广。
希望文章能够让你有所收获～
精彩推荐:
1、聊聊卡片式设计的运用
2、案例分析:栅格系统的布局设计
3、如何设计深色模式?这3点因素需要考虑
4、深度解析:服务蓝图的应用逻辑设计