恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【UI设计必备】设计有立体感的手机APP UI展示模板
0.0°
2018-04-27 好文转载 教程 原作者: 未知 举报 4793 21 15 1

【UI设计必备】设计有立体感的手机APP UI展示模板


本文是教你制作有厚度感和立体感觉的UI展示模板,虽然一般这种效果用3D软件做比较好,但是并不是所有设计爱好者都会用,而且有些展示效果要求可能不需要那么高,所以我们今天就简单用PS来打造这种效果。


之前搜索时发现网上居然没有这个教程,所以今天就简单分享一下自己的制作过程。

供新手们参考,请大神自觉飘过就好!!!


更多请关注【ui179179】领取学习资料,软件,素材等!欢迎您的关注


首先我们来看一下最终效果,忽略像素,只讲步骤(图片因为缩小了所以不清楚)

Image title


首先,我们打开PS,因为我们站酷的宽是900px,所以我新建一个宽度900,高度700的画布,然后随便设置一个背景颜色就好,这里设置为#e0e0e0

Image title


然后我们在画布上根据自己想要的效果先画几个框框,这是方便我们待会排版我们设计好的页面,注意近大远小,用钢笔工具画形状即可,方便后续调节,我画好的框框如下:

(这里我们当然也可以选择从网上下载素材或者直接po一张人家做好的效果图来打底,因为我们只需要这个形状而已)

Image title


下面就可以导入一张你做好的界面效果图,并且ctrl+t将它缩小并旋转一个角度使它与我们画的形状一边对齐

Image title

Image title


下面我们ctrl+t然后右键选择斜切,拖动锚点将另一边重合

Image title

Image title


然后将另一点也拖动使上面的边重合,然后我们继续调整这两点将自己的图片与画好的形状完全重合

(斜切时一定要向同一个方向切,不要乱拉鼠标,既难操作又容易变形严重)

Image title

Image title


切好后回车得到我们的图片,然后将该层复制一层,并将复制好的层下移一个像素即可

Image title


按照同样的步骤,都是复制新的图层,然后将新的图层下移一个像素,我们这里复制了四层,这样图片就看起来有了厚度感

Image title


下面我们要为它增加阴影来制造空间立体感

选择第一个图层,也就是最上面的界面图层,双击打开图层样式,为它添加一个距离和大小为20的投影,不透明度选择50%

Image title


效果如下,是不是已经有了一丢丢立体感啦

Image title


然后我们右键该图层拷贝图层样式,将它粘贴给最下面的界面图层

  Image title

Image title


下面就是我们得到的效果啦,神奇有木有

Image title


然后我们就可以按照上面的方法一次将图片导入并制作,做好后隐藏形状图层并调整界面位置,

得到最终效果

Image title


您每一次的肯定都是对我的鼓励!


更多请关注【ui179179】领取学习资料,软件,素材等!欢迎您的关注


本教程完!

更新:2018-04-27

收藏

21人已收藏

当幸福来敲门001

学习UI设计,欢迎加群交流学习,上课【667576606】

  • 22

    作品

  • 42

    粉丝

  • 0

    关注

  • 超全的iOS12极简原生壁纸,简直美哭了!【分享】
  • 交互原型设计的六大原则,助你打造完美的用户体验
  • 包装设计都有哪些常用版式?
  • PS教程:酷炫3D效果制作

    猜你喜欢

      2018-04-27 好文转载 教程 原作者: 未知 举报 4793 21 15 1

      【UI设计必备】设计有立体感的手机APP UI展示模板

      0.0°

      你确定要举报【UI设计必备】设计有立体感的手机APP UI展示模板

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      21
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录