两步打造2.5D风格 Landing Page

 原创佳作分享推荐12-04      版权:保留作者信息禁止商业使用

欢迎关注作者公众号:dribbbledesign


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


两步打造2.5D风格 Landing Page

作者:rwds


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

作者:kihoo


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


两步打造2.5D风格 Landing Page


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


两步打造2.5D风格 Landing Page


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



两步打造2.5D风格 Landing Page


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


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


两步打造2.5D风格 Landing Page


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


两步打造2.5D风格 Landing Page


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


视频教程,点击观看

3

标签:2.5D

  • 你的设计有依据吗?详解用户体验设计中的规律与逻辑。
    孔雅轩LineVision
    1508
  • UI设计师遇到的那些弹~弹~弹~弹~框
    货嘀UED
    1302
  • LOST第2期设计师&最具备的能力-定位
    shiatleon
    468
  • “去边界化”设计 以不变应万变—从 iPhone X 适配说起
    CDX创意设计中心
    1297
  • 作者

    tere

    全部软件设计师必备软件神器

  • Sketch一键生成自适应按钮及布局Compo
    Sketch一键生成自适应按钮及布局Compo
  • Sketch快速选择保留并移除重复元件Merge Duplicate Symbols
    Sketch快速选择保留并移除重复元件Merge Duplicate Symbols
  • CorelDRAW 2017破解版下载
    CorelDRAW 2017破解版下载
  • 交互动画工具Principle for mac V3.4
    交互动画工具Principle for mac V3.4
  • 百度网盘下载器PanDownload v1.4.7
    百度网盘下载器PanDownload v1.4.7
  • 万兴数据恢复 Wondershare Data Recovery v6.6.0.21 汉化破解版
    万兴数据恢复 Wondershare Data Recovery v6.6.0.21 汉化破解版
  • 微信扫码抢海量福利