用PS制作APP的界面图片
今天就教大家怎么做出这种厚度的地方还不是白色的,而是根据界面内容交相呼应的图案的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的界面图片的更多相关文章
- 使用UIPageControl UIScrollView制作APP引导界面
1. 新建两个视图控制器类(继承自UIViewController), 在AppDelegate.m中指定根视图控制器 #import "AppDelegate.h" #impor ...
- Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面
Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...
- Hybrid App技术批量制作APP应用与跨平台解决方案
前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...
- App 引导界面
App 引导界面 1.前言 最近在学习实现App的引导界面,本篇文章对设计流程及需要注意的地方做一个浅显的总结. 附上项目链接,供和我水平类似的初学者参考——http://files.cnblogs. ...
- Android之拨号界面图片风格,无信息默认显示界面修改
Android之拨号界面图片风格,无信息默认显示界面修改 点开Dialer app,出现拨号,联系人,收藏三个选项卡,也就是三个Fragment,在三个界面都没有信息的时候会显示一个时钟,联系人,收藏 ...
- 安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
- Android学习笔记(十二)——实战:制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
- 【转】基于laravel制作APP接口(API)
这篇文章主要介绍了基于laravel制作APP接口(API)的相关资料,需要的朋友可以参考下 前期准备 前言,为什么做以及要做个啥本人姓小名白,不折不扣编程届小白一名,但是自从大一那会儿接触到编程这件 ...
- Android学习系列(23)--App主界面实现
在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...
随机推荐
- Jmeter断言-所有断言讲解
Jmeter断言-所有断言讲解 jmeter中有个元件叫做断言(Assertion),它的作用和loadrunner中的检查点类似: 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中 ...
- java xmltojson jsontoxml
JSONObject.fromObject需要的有额外的6个包,必不可少,一定要注意: commons-beanutils-1.9.2.jar commons-collections-3.2 ...
- VMware Pro v14.1.1 官方版本及激活密钥
热门虚拟机软件VMware Workstation Pro现已更新至14.1.1,14.0主要更新了诸多客户机操作系统版本,此外全面兼容Wind10创建者更新.12.0之后属于大型更新,专门为Win1 ...
- python中字符串输出格式
print输入格式总结 通过使用ljust(),center(),rjust()函数来实现输入字符串的左右对齐,居中,右对齐等操作; 方法一:(函数不带参数,则默认以空格填充,注意:文字与空格总字符数 ...
- nginx新增简单下载站点
配置nginx server { autoindex on;# 显示目录 autoindex_exact_size on;# 显示文件大小 autoindex_localtime on;# 显示文件时 ...
- wordpress 上传图片时提示“无法建立目录wp-content/uploads/2019/03。有没有上级目录的写权限?”
查一下网站目录下wp-content目录的权限, # ls -l drwxr-xr-x 5 nobody 65534 4096 Feb 3 2016 wp-content 修改wp-conte ...
- CM 安装CDH 错误: 安装失败。 无法接收 Agent 发出的检测信号。
在安装CDH的时候出现错误提示: 安装失败. 无法接收 Agent 发出的检测信号. 日志提示错误: start >> raise socket.error(msg) >>er ...
- 教你如何有效防止DDos攻击?
DDos又称分布式拒绝服务,DDos是利用大量合理的请求造成资源过载,导致服务不可用.就比如一个餐馆总共有100个座位,突然有一天某个商家恶意竞争,雇佣了200个人来到这个餐馆坐着不吃不喝,门口还排着 ...
- 【转】console.dir()和console.log()的区别
原文链接:https://blog.csdn.net/ky1in93/article/details/80828499 console对象详解:https://segmentfault.com/a/1 ...
- Oracle数据库与MySQL的不同点
Oracle笔记 一. Oracle的启动和登录: 1.启动:通过启动Oracle的服务启动. OracleServiceORCL:核心服务,必须启动. OracleOraDb11g_home1 ...