UI设计,设计有立体感的手机APPUI展示模板_图文

《UI设计,设计有立体感的手机APPUI展示模板_图文》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、本文是教你制作有厚度感和立体感觉的UI展示模板，虽然一般这种效果用3D软件做比较好，但是并不是所有设计爱好者都会用，而且有些展示效果要求可能不需要那么高，所以我们今天就简单用PS来打造这种效果。之前搜索时发现网上居然没有这个教程，所以今天就简单分享一下自己的制作过程。供新手们参考，请大神自觉飘过就好！！！首先我们来看一下最终效果，忽略像素，只讲步骤（图片因为缩小了所以不清楚）首先，我们打开PS,因为我们站酷的宽是900px,所以我新建一个宽度900,高度700的画布，然后随便设置一个背景颜色就好，这里设置为#e0e0e0名称(N

2、)：未标题・1名称(N)：未标题・1BBIR大小:1.80M□RWweb颜色祈的当前®H:10■Os：

3、o

4、%OB：

5、88I%OR：更.06：[224]OB：

6、2249[eOeOeO■Oa:Ob：M:11y：[TFK:匸然后我们在画布上根据自己想要的效果先画儿个框框，这是方便我们待会排版我们设计好的页面，注意近大远小，用钢笔工具画形状即可，方便后续调节，我画好的框框如下：(这里我们当然也可以选择从网上下载素材或者直接P0一张人家做好的效果图来打底，因为我们只需要这个形状而己)下面就可以导入一张你做好的界面效果图，并且ctrkt将

7、它缩小并旋转一个角度使它与我们画的形状一边对齐fr32f-><-rr!A

8、OfiTjfi■iftk*意天利语T□黑体•簡中等下而我们ctrl+t然后右键选择斜切，拖动锚点将另一边重合SA爲肖扭曲旋转180度顺时针旋转90度逆时针旋转90度水平画转垂亘翻转6

9、>J然后将另一点也拖动使上面的边重合，然后我们继续调整这两点将自己的图片与画好的形状完全重合（斜切时一定要向同一个方向切，不要乱拉鼠标，既难操作又容易变形严重）切好后回车得到我们的图片，然后将该层复制一层，并将复制好的层下移一个像素即可按照同样的步骤，都是复制新的图层，然后将

10、新的图层下移一个像素，我们这里复制了四层，这样图片就看起来有了厚度感PS文件（D嚴（D彦像①ESO）文字CO曲5（S滤傥（D3DQ）视田M奇口理I帘助凹「显您横控件0"卫I吕呈吕SA!+0*Mcl53Olfct：0◎彫*・QoOOOOOOSft-38中等X18%T«X字符三一De/icel弋TTTrT4TxTT虜示教程©101%（安卓界直1拷贝4RGB/8#）•*意大利语rr100%臂6像素1T32®$・逡猱他期印ySB良EEQ旺SBHO3S径凰层

11、••jq牌Vu©rr正谢―二不疥聽安卓畀而1安卓弄面I拷贝安卓霁面1拷贝2安卓畀

12、面1垮贝3；形状bj下面我们要为它增加阴影来制造空间立体感选择第…个图层，也就是最上面的界面图层，双击打开图层样式,为它添加一个距离和人小为20的投影，不透明度选择50%效果如下，是不是已经有了一丢丢立休感啦显示賈換控件戸"匹吕冉占IS5：bMMHclc3。虺：0◎卷％■<色板豳P”&101%（安至界面1,RGB/8#）•X字袴段落屋性*"丨历史亡舆体•简中尊・■o安卓畀面1拷见安卓畀面［淸贝O安卓界面1拷贝O安。界面1垮贝O»■形状0数果O投彩冃整样弍孩色勸0调整HI血E1EQIQK2BIX)a安卓界面1然后我们右键该图层拷贝

13、图层样式，将它粘贴给最下面的界面图层拼合图像混合选项…复制图层…删陰图层从图层転组…快速导岀为PNG导出为・・・转换为智能茫鮫通过拷贝新建智能对象编辑內容重趣姦坟件…重新链接到库图形・・替換内容…导出内容…转誤为也g・・无取色红色绿色Sfe灰色明信片从所选爵新建3D模型新建3D魁栅辑化图层栅枠图亘且停用閒层蒙版启用矢星蒙版创建隽貼蒙版齒囹层磐齒閒层糊占昌层且清陰图层样式从隔离禺层释放台并囹层合并可见图言复制图层…删陰图层从图层転组…快速导岀为PNG导出为・・・转换为智能茫鮫通过拷贝新建智能对象编辑內容重趣姦坟件…重新链接到库图形

14、・・替換内容…导出内容…转誤为也g・・无取色红色绿色Sfe灰色明信片从所选爵新建3D模型新建3D魁栅辑化图层栅格化閒层且停用閒层蒙版启用矢星蒙版创建隽貼蒙版粘贴图层样式从隔离禺层释放台并囹层合并可见图言下面就是我们得到的效果啦，神奇有木有fi尸盘7花T151%前:利语卡细爭冏：©BS安卓界面1楮贝oB3安卓畀面1拷贝渤q调整oES安卓畀面1o效果。投影_。蚩影然后我们就可以按照上面的方法一次将图片导入并制作，做好后隐藏形状图层并调整界面位置，得到最终效果喜欢就点个赞吧!您每一次的肯定都是对我的鼓励!