两步打造2.5D风格 Landing...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
14386 76 620 2017-11-28

浏览dribbble的时候看到两个比较好看的2.5D风格的Landing Page设计，两个都设计的很好看，加之之前一直有设计师对这种2.5D风格很感兴趣，今天我就来说说自己对这种风格的心得以及一些操作方法，也不算教程吧（本人还没厉害到要出教程的地步），只起一个抛砖引玉的作用，我相信大家都还是很聪明的，肯定一看都会！


Image title

作者：rwds


Image title

Image title

Image title

作者：kihoo


等距侧轴图（2.5D插图），也有人称之为伪3D风格插图，因为这种图你只能看到三个面，即顶面，左面和右面，且左右对称是这种图的一大显著特征，我们见到很多工程制图里面就有等距侧轴图。


Image title


这张图里面我们可以看到如下这种网格


Image title

大家是不是看的一脸懵逼，其实这是一个立体知觉和深度视觉的问题，我们在观察三维物体时候，有着和二维的平面完全不同的感觉，因为我们的视网膜是二维的，所以我们获得立体感都是我们的视觉系统通过某种方式建立了三维立体形象。也就是说所谓的立体，只是一种被感知的立体，这是由于人们视觉心理的立体知觉决定的。



Image title

1、2两个图形作为立方体的深度知觉存在一定的困难，3由于角度的暗示、可以看出是一个立方体。4虽然跟1一样，但是由于汽车作为介入物体，便立刻获得了深度的知觉


这种网格帮助我们规范的绘制2.5D插图，对于了解其原理很有帮助，例如一些设计师会用到他们绘制草图：


Image title

Image title


还有一些海报里面的文字处理


Image title



特意录了一个小视频，尝试着做了一下，文章结束提供了源文件下载仅供学习交流用，严禁抄袭套用！



视频中提到的两个动作和PSD源文件


网盘下载已经失效，请点击下面下载附件 通过UI中国附件下载，谢谢！


Image title


全部评论：76条

  • 卷羊呀1

    2019-09-11 14:49

    你好，请问这种本子叫什么本呀？有卖这种本子的地方吗？

  • 西红柿不如童年甜

    2019-03-26 11:27

    为啥我的不好使

  • cf1016179565

    2018-09-01 14:20

    谢谢大神，用这个超级方便

  • 勺小二

    2018-08-17 22:59

    为什么我下载的2.5d的动作不能用啊？？求解～～播放动作的时候只变化了高度，而且单个动作都是一样的效果

  • 马ToTo

    2018-08-15 12:29

    这音乐真的够了

  • 乔呈Sky

    2018-07-26 16:37

    背景音乐完全 影响全程观看，建议小一点

  • _Seven_

    2018-07-19 14:43

    小哥哥，想请问下小人的教程什么时候会有更新呢，期待

  • 九块九的小幸福

    2018-06-06 10:42

    很受用 等着大神更多教程，背景音乐有点大了

  • 此处有掌声hiahia

    2018-05-11 17:54

    很受用 等着你更新人物的教程

  • tere

    2018-04-25 11:04

    @不吃草的马尔: 应该不会有这个问题吧

  • 不吃草的马尔

    2018-04-12 14:05

    大神我的插件用着会始图形变小

  • 林门一脚

    2018-04-02 00:02

    请问那个人要怎么画呢？

  • ☆きょうこうくん

    2018-03-02 16:14

    谢谢大神

  • tere

    2018-02-14 17:07

    @一零二七: ui中国附件下载，网盘失效了

  • tere

    2018-02-14 17:06

    @EmilyWang: 年后吧

  • 一零二七

    2018-02-11 16:55

    链接不在了啊？？

  • EmilyWang

    2018-02-09 15:16

    大神，你太厉害了，这个动作很便捷，大大节约了我们的设计时间，提高了工作效率，对我们大家都很有帮助，非常感谢您出的这么好的教程。想请问下小人的教程什么时候会有更新呢，期待续集！

  • 属于meDe伱

    2017-12-19 21:30

    大神，请问动作如何自己调整角度呢，源文件放入PS角度差别很大，求指点

  • T一串儿

    2017-12-18 15:45

    背景音乐的声音太大了。。。。听不清你讲课了。。。。

  • j.i.e.m.o

    2017-12-15 16:04

  • yunky

    2017-12-12 16:21

    北京音乐太吵了 都没耐心看了

  • Sssssss_Star

    2017-12-11 16:33

    @ShawnXX: 应该可以自己研究动作

  • 小瘪三_

    2017-12-09 16:27

    视频在哪啊

  • 阿驴大大

    2017-12-09 10:30

    @ShawnXX: 对呀 看半天 没弄明白 最关键的地方 不讲

  • 小草花心子

    2017-12-08 16:44

    等待大神写个 小卡通人物人物的 课程哦

  • HaoCong

    2017-12-08 15:37

    @66风中的蒲公英: 那要怎么设置啊？小白不是很懂，自己调了一下动作里的角度，好像还是有点不对

  • ShawnXX

    2017-12-07 13:07

    关键不是应该说一下动作的原理吗。。

  • meouhadesu

    2017-12-06 18:43

    如果背景音乐的声音能再**一点点就好了

  • 黄痛痛

    2017-12-06 14:57

    为什么我没有看到视频？？？

  • Habile

    2017-12-06 10:35

    雷锋大大

  • 更多

更多作品

电脑版 反馈

Powered by © 2008- 2025 UI.CN

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票，快给你心仪的作品鼓励的一票。

投票