UI设计,设计有立体感的手机APP UI展示模板.docx

仁人教育
本文是教你制作有厚度感和立体感觉的UI展示模板，虽然一般这种效果用3D软件做比较好，但是并不是所有设计爱好者都会用，而且有些展示效果要求可能不需要那么高，所以我们今天就简单用PS来打造这种效果。
之前搜索时发现网上居然没有仁人教育
本文是教你制作有厚度感和立体感觉的UI展示模板，虽然一般这种效果用3D软件做比较好，但是并不是所有设计爱好者都会用，而且有些展示效果要求可能不需要那么高，所以我们今天就简单用PS来打造这种效果。
之前搜索时发现网上居然没有这个教程，所以今天就简单分享一下自己的制作过程。
供新手们参考，请大神自觉飘过就好！！！
首先我们来看一下最终效果，忽略像素，只讲步骤（图片因为缩小了所以不清楚）
仁人教育
首先，我们打开PS,因为我们站酷的宽是900px，所以我新建一个宽度900，高度700的画布，然后随便设置一个背景颜色就
好，这里设置为#e0e0e0
仁人教育
容称卫）：未标题1
文档抠星；主疋
匿筈玄小:
1-SDM
然后我们在画布上根据自己想要的效果先画几个框框，这是方便我们待会排版我们设计好的页面，注意近大远小，用钢笔工具画形状即可，方便后续调节，我画好的框框如下：
（这里我们当然也可以选择从网上下载素材或者直接po一张人家做好的效果图来打底，因为我们只需要这个形状而已）
下面就可以导入一张你做好的界面效果图，并且ctrl+t将它缩小
并旋转一个角度使它与我们画的形状一边对齐
仁人教育
仁人教育
F面我们ctrl+t然后右键选择斜切，拖动锚点将另一边重合
仁人教育
仁人教育
然后将另一点也拖动使上面的边重合，然后我们继续调整这两点将自己的图片与画好的形状完全重合
（斜切时一定要向同一个方向切，不要乱拉鼠标，既难操作又容
易变形严重）
仁人教育
的层下移一个像素即可
仁人教育
仁人教育
按照同样的步骤，都是复制新的图层，然后将新的图层下移一个
像素，我们这里复制了四层，这样图片就看起来有了厚度感
E19険s
仁人教育
下面我们要为它增加阴影来制造空间立体感
选择第一个图层，也就是最上面的界面图层，双击打开图层样式,
为它添加一个距离和大小为20的投影，不透明度选择50%
效果如下，是不是已经有了一丢丢立体感啦
仁人教育
盘
rr
i
■■■
虐K=JK-些°
宇科尊倉冬性口氏“『帀史迟
里阵J5中手
*自sJHiXfi-匪:宓茨换控年H」■血旦皐團县吉兰wr5■■恥融・惡■■-■)哙
左*界Sin.
克*畀国佔
F宝界51WJ
043国
然后我们右键该图层拷贝图层样式，将它粘贴给最下面的界面图
层
仁人教育
拼合国像
耒弓闫层的TO...
从F領禺层释放
清除昌許式
删訛囹层
册訛圉层样式
台并禺层台并可见團蜃
快速导匕为PMG
导出为“
曩制罔层…删除冒层从圉层崖立组“,
停用固层麺
启用矢量蓋版
创律剪鳩版
珈鱼
红色
绿色
明信片
从所选昌翦權30樓型新建2D廖
转换为智能对蠡
通过拷打耦薩智能对衾绽辑内客
重新也到文件“重新會到库国形…替换内容“.
导出内薛.
转换为衢匹氯”
仁人教育
F面就是我们得到的效果啦，神奇有木有
仁人教育
然后我们就可以按照上面的方法一次将图片导入并制作，做好后
隐藏形状图层并调整界面位置，
得到最终效果
仁人教育
喜欢就点个赞吧！
您每一次的肯定都是对我的鼓励!
仁人教育