app展示图怎么做-App开屏页如何设计？来看这五个常用的方法

想不想高大上地展示你的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设计中制作界面图标的流程:

1、图标创意阶段;

2、草图绘制阶段;

3、草图渲染阶段。

补充:

1、在PS中新建一个所需尺寸的画布并保存,将其命名为UI设计效果图模板。

2、再新建一个画布,命名为界面UI设计效果图展现。尺寸随意。

3、将刚才保存的界面UI设计效果图模板.psd拖到画布中。Ctrl加T变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击界面UI设计效果图模板这个图层即可。

补充:UI即用户界面的简称。泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

第一印象很重要!很多用户会根据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和Launch Pro使用的骨架状态很少。

有些App启动时需要加载大量数据,例如视频、音频,所以需要大量加载时间。

对于这类应用,稍微长一点的动画更有意义。 随着数据的缓存和加载时间的缩短,动画可以变得越来越短。

上图的App使用动画来加载数据,给用户带来反馈的时间。

Clashem,Tumbleweed和Chefsfeed使用有趣的动画在加载数据的同时又加强了品牌体验。

看了这么多案例,启动画面到底要显示多长时间呢? 这应该考虑应用的配置和加载数据需要的时间。

自定义启动体验以适应不同的使用时间和用户:

・ 各个阶段的用户要有不一样的启动体验;

・ 先考虑应用的大小再选择合理的启动页;

・ 用图像传达信息,动画作为引导;

・ 尽可能使用独特的图标来进行品牌推广。

希望文章能够让你有所收获～

精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑 设计