今天就教大家怎么做出这种厚度的地方还不是白色的,而是根据界面内容交相呼应的图案的APP界面展示图片。

以苹果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%。完工!

用PS制作APP的界面图片的更多相关文章

  1. 使用UIPageControl UIScrollView制作APP引导界面

    1. 新建两个视图控制器类(继承自UIViewController), 在AppDelegate.m中指定根视图控制器 #import "AppDelegate.h" #impor ...

  2. Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面

    Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...

  3. Hybrid App技术批量制作APP应用与跨平台解决方案

    前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...

  4. App 引导界面

    App 引导界面 1.前言 最近在学习实现App的引导界面,本篇文章对设计流程及需要注意的地方做一个浅显的总结. 附上项目链接,供和我水平类似的初学者参考——http://files.cnblogs. ...

  5. Android之拨号界面图片风格,无信息默认显示界面修改

    Android之拨号界面图片风格,无信息默认显示界面修改 点开Dialer app,出现拨号,联系人,收藏三个选项卡,也就是三个Fragment,在三个界面都没有信息的时候会显示一个时钟,联系人,收藏 ...

  6. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  7. Android学习笔记(十二)——实战:制作一个聊天界面

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...

  8. 【转】基于laravel制作APP接口(API)

    这篇文章主要介绍了基于laravel制作APP接口(API)的相关资料,需要的朋友可以参考下 前期准备 前言,为什么做以及要做个啥本人姓小名白,不折不扣编程届小白一名,但是自从大一那会儿接触到编程这件 ...

  9. Android学习系列(23)--App主界面实现

    在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...

随机推荐

  1. jmeter 参数化3种

    一.利用函数助手获取参数值 选项->函数助手对话框 __CSVRead, __Random, 生成的函数字符串:${__Random(,,)}第一个参数为随机数的下限,第二个参数为随机数的上限, ...

  2. webpack中代理配置(proxyTable)

    注:用axios请求 1,下载axios npm i axios --save 2,在config文件下的index.js中配置代理地址 参考:https://vuejs-templates.gith ...

  3. 0 ‘+new Array(017)’ 输出? js+相当于Number()类型转换

    网站搬迁,给你带来的不便敬请谅解! http://www.suanliutudousi.com/2017/10/20/new-array017-%E8%BE%93%E5%87%BA%EF%BC%9F- ...

  4. ps--窗口配置

    移动工具设置 v 选择图层自动选择不勾 图层ctrl + 左键 视图设置智能参考线标尺 Ctrl+r 窗口设置 关闭 库 颜色 打开 信息 字符 图层 历史记录 信息 面板选项 鼠标单位 像素 rgb ...

  5. Raft——可理解的分布式一致性算法

    Raft  Understandable Distributed Consensus http://thesecretlivesofdata.com/raft/ 一个直观的动画,便于理解raft算法. ...

  6. Vue番外篇-路由进阶(一)

    Vue的router默认是 export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld' ...

  7. 框架集 frameset

    框架集和内联框架的作用类似,都用于在一个页面中引入其他的外部的页面 框架集可以同时引入多个页面,而内联框架引入一个, 在h5标准中,推荐使用框架集,而不使用内联框架 使用 frameset 来创建一个 ...

  8. session复制

    环境描述:(三台服务器 系统:7.6)192.168.200.111 nginx192.168.200.112 tomcat192.168.200.113 tomcat环境配置:192.168.200 ...

  9. js单击时页面的弹出

    <!DOCTYPE html><html>      <head>         <script language="JavaScript&quo ...

  10. vuex之module

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...