服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

7个方法,让你的设计拥有空间感!

日期: 来源:研习设收集编辑:研森 KENMORI








这话要从平面中的空间纵深是一种错觉来说起,我们所观测到的三维世界,无一例外的都遵从着近大远小的原则,所以我们可以通过任何能够想到的方式(例如:点、线、面)来营造出平面中的空间感!



我们都知道近大远小的原则,那么为什么会出现近大远小的现象呢?平面中的空间感又有哪些原理呢?










在了解几何透视法之前,我们先来认识一下什么是视平线。在日常生活中,你一定听过这个名词,那视平线在透视法中起到了什么作用,又能辅助我们营造出什么样的空间感呢?



视平线就是与眼睛平行的水平线。无论你是仰视远处的高楼,还是俯视地面的树丛,视平线始终平行于眼睛。



所有的透视都是以视平线为参照标准的。下面我们一起看看什么是几何透视法吧。






一点透视又称为单点透视,由于在透视的结构中,只有一个透视消失点,而没有延伸的线条相互平行。




一点透视可将物象多个面表现出立体感。我们可以利用一点透视的不同视角来呈现出不一样的空间感。





如果一个画面中有两个消失点,而且这两个点都在视平线上,那么这样形成的透视被称为两点透视,也叫成角透视。




两点透视的效果比较自由、活泼,给人造成的空间感也接近于人对真实空间的感觉,但透视角度不好选择,容易产生变形。





如果画面中有三个消失点,其中有两个点在水平线上,那么这样形成的透视图被称为三点透视。




三点透视一般用于绘制大面积场景的俯瞰图或仰视图。




三点透视是在极度仰视或俯视的情况下才会产生三个消失点。越接近视平线,第三个消失点越不明显。













留白就是以“空白”为载体进而渲染出美的意境的艺术手法。在版式中,为主体增添一些适当的空白,是合理有效增加版式空间感的手段。




在中国的绘画作品中,也能够捕捉到“空间感”的使用,例如国画的留白处理,以空白为载体渲染出美的意境,进而体现出空间感。



版面里主体元素占据的面积很大,具有较强的视觉冲击力,但缺少空间感。那么缩小主体的面积让其周围的留白面积更大,空间感增强。










除此之外,利用色彩前进和后退感的反差也是可以制造出空间感的,就好比暗调给人较远的感觉,明调反之;暖色膨胀,前进感强,冷调收缩,后退感强。







从色调明暗的角度来看,暗调给人较远的感觉,明调给人很近的感觉。







从色相冷暖的角度来看,暖色有膨胀感,前进感更强;冷色有收缩感,所以给人感觉更远,后退感强。







从色相纯度的角度来看,低纯度的颜色,后退感更强;高纯度的颜色,因为视觉突出,所以前进感强。




虽然上面的三个案例都是拆解单独分析的,但是在很多时候,明暗调也好、色彩的冷暖也好、纯度也好,都可以结合起来使用,都是制造版式空间感非常好的手段。




了解了以上的内容,我们再一起来学习一下7种提升画面空间感的方法!







在大多数作品中,文字作为信息的载体,可以起到解释的作用。但如何让平平无奇的文字产生空间感呢?我们不妨试试将文字置入到透视空间中,产生远近的视觉差,从而增强画面的空间感。





模拟案例信息




1/ 根据文案内容陈述,我们找到一个符合一点透视的赛车素材作为海报的主体形象。






2/ 将赛车看做是一个立方体,它的透视线连线延伸,它们消失于一点,这个点就是中心点,从中心点引出视平线,这个赛车就符合一点透视的特征。




3/ 把赛车置入版面中心,填充灰色背景色,画出一个7×5的网格。




4/ 以赛车的透视为基准,根据网格,建立一点透视的空间,利用近大远小的原理,从近至远置入标题文字组。




5/ 依照赛车的透视将文字变形,增加画面的空间感,具体操作如下:在PS中,首先选择文字图层,右键转换为智能对象,Ctrl+T右键选择透视,按住Shift键调整文字透视角度,Ctrl+T将文字调回适当高度,让它与地面平行。




6/ 将剩余信息居中编排到版面内。




7/ 最后处理文字跟赛车素材之间的阴影关系,让画面呈现的形式更有空间感,这样一张海报就完成啦。






叠压,即文字与图片或者图片与图片呈现前后的位置叠压,能够产生一种自然的空间感。





模拟案例信息




1/ 根据文案我们选择有食欲的甜甜圈作为画面主体,错落叠压,为它们添加阴影,增加主体间层次感。




2/ 建立版面,填充背景色,画出7×5的网格,将主体置入版面中央。根据网格,我们将版面分为上——留白——下,三个部分。







3/ 将文字排列进版面划分好的上、下两个部分当中。




4/ 放大英文,画面呈现两端对齐的形式。




5/ 下半部分,调整文字大小,并将文字进行段落区分。拉开距离,增强阅读体验,加入下划线进行点缀。




6/ 将甜甜圈主体,压到标题文字上方,这样图文的叠压,增加画面的层次感和空间感。




7/ 最后加入一些装饰性文字,使版面更加丰富,活泼。




8/ 这样一张产品海报就做好了。






图文穿插比普通的叠压更多了一丝灵动性,文字能够与图片产生前后的双重位置叠压,交互性也更强。





模拟案例信息




1/ 根据文案,我们选择一个动感很强的橄榄球运动员作为主体,将标题文字置入,与主体居中对齐排列。




2/ 图文穿插,要选择不同的部位进行穿插,这样才能产生空间感,需要注意的是,不要影响文字的识别性,所以我们选择三个点进行穿插,形成局部的前后层次。




3/ 选择文字图层,添加蒙版,按住Ctrl键选择主体图层,创建主体选区,点击画笔工具,将前景色改为黑色,擦掉可遮挡的笔画,Ctrl+D取消选区。




4/ 填充与主体匹配的背景色,画一个12×6的网格,在四个角落,添加信息元素。




5/ 这样一张利用图文叠差产生空间感的海报就完成了。






给物体添加投影,是增加空间感的一个重要手段,投影的形式有很多种,比如普通投影、弧形投影、接触投影、弥散投影等。





模拟案例信息




1/ 建立一个版面,画出7×5的网格,根据文案内容,选择一张清晰的富士X100S相机的图片,置入版面适当的位置,填充与复古新潮主题搭配的背景颜色。




2/ 分析相机的光源,我们首先找到受光面和背光面的位置,然后确定光源在相机的右上方,那它的投影自然就应该在左下方。




3/ 给相机添加投影,在PS中给相机添加图层样式——投影,调整参数如图,这样空间感就产生了。




4/ 编排标题文字和其他文字信息,依照网格,置入到版面当中。




5/ 这样一张利用投影表现空间感的海报就完成了。






网格就好比基础参照物,先打造出视觉空间,再根据视觉空间中近大远小的理论添加元素,就能够很好的呈现透视效果。





模拟案例信息




1/ 首先,我们画出一个图形作为主体,利用AI中的比例缩放工具,缩放至80%,点击复制,复制出一个后,Ctrl+D连续复制出9层,形成近大远小的透视感。



2/ 为了使透视感更加明显,我们画出一条视平线,定一个中心点,连接中心点跟图形的边缘,就形成了一个隧道式的空间。




3/ 现在即使有了空间感,我们依然会感觉版面有一些平,接着将主体延伸出一部分,打破固有的节奏感,使透视感延伸至更远。填充颜色。




4/ 将一些重要的信息,利用近大远小的透视原理分别进行排列。




5/ 创建版面,画出12×6的网格,将主体置入到版面中心,将重要文字信息按照主体的透视线放置。




6/ 将英文大标题置入到版面的中心,版面上下部分加入小的说明文字进行呼应,平衡版面。




7/ 最后,加入一些装饰性文字和符号,使整个版面元素更加丰富。




8/ 这样一张利用网格透视建立空间感的海报就做好了。






文字的不同排版,也是建立空间感的一种方法,但是都脱离不了视觉编排的基础原则。将文字按照空间的视觉理论来排列,就能够得到想要的效果。





模拟案例信息




步骤演示

1/ 阅读完文字信息,我们选择数字“9”作为排列的主体。选用几个字库字体的“9”,将数字“9”转曲,让字体转变为描边形式,去掉多余的锚点,每个“9”都进行一样的处理步骤,这样就得到了几个不同形态的线条“9”。




2/ 将画好的“9”区别大小,错落摆放在画面当中。为了让大家更好的理解,下面步骤我只选择一个数字“9”的形态进行演示。




3/ 将数字“9”复制出一个,缩小放置在“大9”后斜方。







4/ 根据色调明暗看进退的原理,我们将后面的“小9”变成黑色,前面的“大9”变成蓝色,形成明暗对比。接着点击AI中的混合工具,先点击内部“小9”,再点击外部“大9”,双击混合工具,调整合适的步数。就出现了空间感的效果。




5/ 为了使效果更明显,我们将背景色变为黑色,看一下神奇的效果。这样一个具有空间感的数字9就做好了。




6/ 将其它数字“9”按照同样的方法做出一样的空间感效果,再按照我们最开始摆放的位置放好在版面当中,这样一个空间透视感极强的文字主体就做好了。




7/ 在版面中画出15×13的网格,根据主体位置,我们选择半包围的构图方式进行文字的排版。




8/ 依照构图的形式和黄金比例,我们将画面分为左右两个部分。将文字组大致先扔到版面里。




9/ 为了使画面更加和谐,有透气感,我们将标题文字缩小,放置于版面的左下角,将副标题文字向上移动,与说明文字空出一个网格的距离。




10/ 右下角的说明文字略显死板,将它们依次错落开来,形成变化性,将最下方的说明文字缩小,丰富画面的层级。




11/ 将左上角的文字进行功能区分,划分出层级。将文字之间拉开距离,增强阅读识别性。最后加入一点装饰元素丰富版面。




12/ 通过以上步骤,一张利用纯文字排版具有空间感的海报,就完成了。






借助照片进行排版也是我们设计中一种常见的设计手段,不管是什么方法,其实都离不开最基本的透视原理,下面我们来介绍最后一种方法。





模拟案例信息




1/ 这是一张具有空间感的照片。



2/ 分析照片构成,连接建筑结构的线条进行延伸汇聚于一点,说明这张照片属于一点透视。




3/ 根据建筑的结构,我们可以将其拆分为一个网格透视的隧道空间,将照片透明度改为50%,先沿着建筑的结构画出轮廓,再利用AI中的比例缩放工具,缩放至90%,点击复制,复制出一个后,Ctrl+D,依照照片结构连续复制出10个。




4/ 利用钢笔工具,将建筑轮廓最外圈的顶点与最内圈的顶点相连接,这样我们就得到了一个“隧道式空间”的框架啦。




5/ 现在我们抛开照片的形式,只看它的骨架,根据骨架的透视结构,利用近大远小的原理,画出文字的大致位置。





6/ 创建版面,将照片铺满版面,接着将照片骨架和文字框置入版面,找准位置后将照片骨架删掉。




7/ 画出12×7的网格,根据网格进一步规范文字框的位置,我们将文字编排成组,按照文字框的位置置入,需要注意的是,根据色块的颜色,区分文字的大小才能产生空间感,近处的文字较大,远处的文字则较小。




8/ 将装饰性的文字置入到版面,丰富画面的层次感,最后我们将色块颜色统一为黑色。




9/ 因为想要画面空间感更强,所以我们可以选择将中间一些色块去掉,让整体更透气。




10/ 完成了以上步骤,一张反向思维推导的海报就完成了。






让文字置入到空间透视中



图片的叠压和图文的叠压



将文字穿插在主体周围



同构修改投影调整元素空间位置



利用网格的透视建立空间感



利用文字的排版建立空间感



选有空间感的照片然后排版




写在最后:


看过以上7种方法,你是不是也对空间感产生了兴趣?透视的理论在生活中随处可见,只要稍加观察,再结合我们今天分享的实用技巧,相信你也可以设计出极具视觉效果的创意作品!






往期文章推荐











由于微信公众号更改了推送机制,推文不再按照时间线推送,为了以后能及时观看到我们的教程和文章,看完文章后记得给我们点个“在看”哦。如果你喜欢我们的文章,这将是对我们最大的鼓励和支持。

相关阅读

  • 蒋勋:原来我们与古人如此靠近

  • 唐冯承素摹本《兰亭集序》提起最早的汉字,不少人会想到甲骨文。目前,甲骨文被普遍认为是中国最古老的成熟汉字。但不少学者认为一种文字从出现到成熟,需要经过逐步的发展和演变
  • 100个Excel小技巧,还不如精通数据透视表?!

  • hello~我是运营菌Excel的最主要作用就是数据分析,其中超过90%的数据分析工作,只需要数据透视表就能轻松解决,而省去各种各样的技巧或者Excel函数。今天,我们一起盘点Excel有哪些
  • 从2分半到57秒,用AI速度解决难题

  • 文字识别(OCR)是典型的人工智能技术应用落地的场景之一,通过对图像文件的字符进行检测识别,将图像之中的文字转化为可以编辑的文本格式,可以帮助用户自动采集关键的数据,打造更加
  • 历史的记录和记录的历史:《书于竹帛》

  • 中华文明得以五千年来一脉相承,有两个关键因素非常重要,一个是汉字的传承发展,一个是传统学术的传承发展。汉字是记载内容、传递传承的载体,传统学术则是中华文明的精神内涵。两
  • 能多领一笔钱?这些新规3月实行!

  • 新修订的《国家以工代赈管理办法》正式实行,新办法强调向参与工程建设的群众发放劳务报酬 。同时,医疗、食品、环保等领域也有一批新规值得关注,将影响大家的生活。以工代赈新
  • 电脑版微信有人发图,摁它!

  • 见面聊天,最怕尴尬到抠出三室一厅。微信聊天,最怕发图片:电话多少,截图发你;快递单号,截图发你;见面地址,截图发你;“好看的”网址,截图发你...微信直接发带有文字的图片,还是那种恨。
  • 微信长按会发生什么?

  • 这是一项与屏幕沟通所必备的“指法”。触发这个机制,不要求快速,不要求精准,只需要一点点小小的等待,惊喜就来的很快。这就是“长按”,一个大家常用的微信技巧。掏钱要快,加好友也

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 设计师如何不花钱学习?

  • (#)设计这一行有点像说相声,郭德纲曾经说过,相声的门槛很低,会说话,你就有可能会说相声了。设计也是这样,会使用一些绘图软件,你就可以称为设计师了。入门很简单,想要更进一步并不
  • 如何把设计做好?先跟杜甫学“种草” !

  • (#)我们日常做的设计,大部分都是从 1 到 10,100,1000……的工作。那从 0 到 1 呢? 视觉形象的创建,对于品牌而言就是从 0 到 1,无中生有的过程。它决定了品牌的调性, 也奠定了消费
  • 4个案例告诉你,如何站在大师的肩膀上做设计!

  • 研习设订阅号设计干货 杜绝注水我们做设计也需要站在巨人的肩膀上,所以经常会学习和借鉴以前的设计大师们的作品,但很多同学心里可能会产生疑惑:好看是挺好看的,但是怎么总觉得
  • 7个方法,让你的设计拥有空间感!

  • 这话要从平面中的空间纵深是一种错觉来说起,我们所观测到的三维世界,无一例外的都遵从着近大远小的原则,所以我们可以通过任何能够想到的方式(例如:点、线、面)来营造出平面中的空
  • 学会这一招,让你的甲方言听计从!!

  • (#)对于文化这个词,定义是可以涵盖非常广泛的。我们从事这个行业,本身的属性就决定了我们要和各种各样的客户和产品打交道,可以说设计师是一个知识密集型的职业。往往比拼到最