QQ登录 会员登录 注册或点击登录代表您同意《素材之家用户协议》
欢迎来到素材之家
当前位置:首页 > 软件教程 > photoshop教程 >

PS日期排版技巧(10套排版案例)

版式设计在我们的设计中是非常重要的技能,无论是UI设计还是平面设计,都会运用到版式设计相关的知识,在版式设计中最常见的就是图文排版、文文排版。一张图片一段文案在不同的需求情况下我们都可以排版出很多种样式,每一种样式展现出来给人的感觉也是不一样的,美的排版总是会使人眼前一亮,也会使整体的设计更耐看。

排版也是会根据重要程度划分层级,我们都知道主题文案都需要醒目,让人一眼就能看到,这样才能达到宣传的作用,当然仅仅只是展示主题文案也是远远不够的,达到主题排版,主图排版,小到副标题排版,我们都需要精心的排版,还可以更精细到小到辅助文案以及图形的排版,而今天我们就来看一下日期这样的文案我们可以怎么排版呢?

日期在一些重要的活动中也是比较重要的信息,比如展会时间,我们需要突出时间,不能用极小的文字排版在角落,用户不注意的地方,这样会给人一种焦虑的情绪,既然是展会活动,那么用户关心的是展会的主题是什么?活动时间是什么时候?活动地址在什么地方?所以这些重要的信息就需要重要突出。而在一些做纪念性的日期我们就可以小化(例如我自己记录自己的学习打卡练习)

案例分享

我们常见的日期有年、月、日、时、分、秒,接下来我们就通过对日期的展现做一些不同的排版方式,通过与日期的普通排版方式做对比,我们就可以看出微小的日期排版对整体的设计展现也是有很大影响的。

日期排版01

例如下面对于日期的排版,TIME这个文案有时候我们也可以去掉,因为用户看到时间就会明白这是什么,在一定的情况下也是可以去掉的,当然有时候为了整体页面的展示效果,我们也可以加上,便于排版,左边只是将年、月、日并排,时间节点作为一个点排列,下面的文案我们可以根据实际情况选择一些特殊的提示文案做装饰

PS日期排版技巧(10套排版案例)

而通过对左边简单的日期排版进行改版后,我们会发现右边的日期排版会显得更美观,排版更精妙,也有更多的细节之处,例如2020后紧接着年(YEAR)的提示,08后面标识是周六(SAT.),年月日和时间节点也同时做了层次区分,这样更有利于阅读。

日期排版02

PS日期排版技巧(10套排版案例)

对于上面同样的日期文案,我们还可以排出右边不同的样式,整体采用横排的方式,将年、月、日同排,时间段缩小处理,使时间之间也能有层次感

日期排版03

下面的日期是年、日期段、时间段的组合,左边的排版显然是比较常规的分层排版,却主要突出了2020,而一般时间我们在这一年将要发生的事,我们更关心的是哪一天那个时间点,而右边的排版主要突出时间段/点,更能让用户看到自己关心的事件。

PS日期排版技巧(10套排版案例)

日期排版04

下面这一组日期是有不同年份的,所以我们在排版的时候可以突出显示年份,这样在排版的时候就可以注意层级关系,排除层次感

PS日期排版技巧(10套排版案例)

日期排版05

这一组日期是比较简单的,只有一个时间点,没有时间段,如果直接按照左边这样的日期排版方式,显然整体看着就很单薄,把这样的日期排版方式融入到版式整体画面中,也一定会显得毫无设计感,而我们只需要将简单的日期经过简单的排版,从年、月、日、时,从上至下依次排列,这样就可以显得信息有层次感,并且阅读也不会有困惑,加上精致的icon做装饰,这样的日期排版就显得更耐看。

PS日期排版技巧(10套排版案例)

日期排版06

这一组日期也很简单,只有月、日、时,都是属于时间段的信息,通过分析这个时间,月都是10月,是相同的,所以我们可以将月份单独拿出来,作为共用信息,这样就可以精简画面重复的信息,依然采用月、日、时这样从上至下的顺序排列,时间小化,但是利用色块突出,也不会柔化时间点的阅读,再通过一条线的连接,将斜线和时间icon相连,形成一个有趣味性的时间装饰,这样的排版更容易吸引用户的眼球

PS日期排版技巧(10套排版案例)

日期排版07

下面的日期也是年、日期段、时间段的组合,和第三个日期排版的案例类似,所以存在同样的问题,左边的排版显然是比较常规的分层排版,却主要突出了2020,右边改版后,我们同样弱化年份(2020),提取相同的月份(8月),突出显示日期

PS日期排版技巧(10套排版案例)

日期排版08

这一个和第五个也是一样的,左边都是年、月、日、时的时间点,没有时间段,第五个我们是采用竖排的方式,而这里我们改版后采用的是横排的方式,突出显示月、日,让整体的层次更加清晰

PS日期排版技巧(10套排版案例)

日期排版09

下面这一组时间改版,我们主要采用错位竖排的方式,像这样的排版方式,我们可以多用于一些比较有设计感或者比较唯美的画面中,显得每一个小的点,都有用心设计,并且也符合这样的气质

PS日期排版技巧(10套排版案例)

日期排版10

这一组日期只有年、月、日。左右两边的排版看起来很相似,但是通过对细节的调整,例如2020的弱化,间距的把控,星期几的友好提示,这样就会使整个日期排版看起来更精细、耐看。

PS日期排版技巧(10套排版案例)

案例实操

我们通过对上面日期的排版分析和总结,会发现小小的日期排版也是很关键也很追重要的,所以下面我们将通过一张海报案例,来真正体现日期排版对整体画面的重要性。

海报主题是选择的立秋,分享日期排版对整体画面的影响作用

这里就简单的说一下海报设计的思路,海报主题是立秋,所以我现在一片黄色的枫叶作为画面的主视觉,画面整体体现秋天的感觉,一片黄灿灿的画面,给人感觉就像是秋天到了,画面元素简约,只选择了一片枫叶加上它的投影,体现空间感,主题文案排版在枫叶上,与枫叶融为一体,这样用户得分第一视觉就会被主图吸引,同时看到主题相关文案,下面的其它文案通过从|秋|字垂落的竖线,分别右对齐以及左对齐,显得画面规整

PS日期排版技巧(10套排版案例)

第一张海报的日期排版就是采用普通常规的排版方式,我们会发现这样的日期排版方式,在整个画面中会显得有点僵硬,并且左右两边不对称的关系,会显得右边偏轻,使画面的平衡感缺失,也正是日期的排版太粗糙的原因,导致整张海报的精细度大减。

PS日期排版技巧(10套排版案例)

样机效果

PS日期排版技巧(10套排版案例)

我们保持其它元素以及排版都一致,只改变日期的排版方式,我们就会发现右边的海报整体给人的感觉更精美,平衡感更强烈,所以我们在做设计的时候不要忽略每一个点。将每一个点都细心的设计,这样的作品才会更耐看。

总结

版式设计是我们设计中最基本的知识,我们在做设计的时候,通常会注意主题主图的排版,而经常会忽略哪些不是很重要的信息,但是我们在分析文案信息的时候,也需要考虑整体设计的目的,有时候日期信息也是非常重要的信息,所以我们在做排版的时候,也需要认真考虑日期与整体需求的关系,并且日期排版风格也会影响整体的气质。

  • 日期: 2021-03-18 16:13:08
  • 来源: 脚本之家
  • 版权 图像、字体及音频仅供参考i
    版权声明

    素材之家模板内容(包含但不限于版式、图片、音乐、字体等素材),来源于第三方分享者,其版权归原创作者拥有。若作为商业用途,请获取模板原作者授权或替换相应素材,相关字体以及人物肖像需版权方额外授权,请谨慎使用,素材之家不承担由此引发的一切版权纠纷。

    素材之家提供模板展示平台和网络服务,同时提供客服、内容整理、使用指导、储存等服务;仅供广大用户交流学习使用;对于用户在使用素材之家平台服务过程中自行上传的素材和作品,素材之家不具备审查其内容是否存在侵权等情节的能力。

    用户自行上传和使用素材等内容应遵守相关法律、法规,不得侵犯本网站及权利人的合法权利,情节严重者将依法追究其法律责任,素材之家不承担出现权利纠纷时的任何责任。

    素材之家对作品中含有的国旗、国徽等政治图案不享有权利,仅作为作品整体效果的示例展示,禁止商用。另外您必须遵循相关法律法规规定的使用范围和使用方式,禁止以任何形式歪曲、篡改。

    素材之家尊重知识产权,如知识产权权利人认为平台内容(包括但不限于用户自行上传分享的内容)涉嫌侵权,可通过邮件:tousu@isucai.com.cn提出书面通知,我们将及时处理。

您可能会喜欢的其他教程
ai怎么做彩色蜡笔字体? ai蜡笔文字设计技巧

ai怎么做彩色蜡笔字体? ai蜡笔文字设计技巧

ai怎么做彩色蜡笔字体?孩子喜欢使用蜡笔画画,想要设计一款蜡笔字体,感觉会很好看,该怎么设计这款字体嗯?下面我们就来看看ai蜡笔文字设计技巧...

ai 蜡笔字体 字体设计

AI怎么做漂亮的led描边文字? ai文字描边效果的设计过程

AI怎么做漂亮的led描边文字? ai文字描边效果的设计过程

AI怎么做漂亮的led描边文字?ai中想要设计一款漂亮的文字,该怎么设计呢?下面我们就来看看ai文字描边效果的设计过程,详细请看下文介绍...

AI 文字描边 描边效果 文字设计

ps怎么快速画虚线图形? ps彩色虚线图的画法

ps怎么快速画虚线图形? ps彩色虚线图的画法

ps怎么快速画虚线图形?ps中想要快速绘制虚线图形,比如虚线效果的心形,条形,圆形等等,该怎么绘制呢?下面我们就就来看看ps彩色虚线图的画法...

ps 虚线 虚线图形

AI怎么添加炭精笔效果?

AI怎么添加炭精笔效果?

AI是一款创建并编辑矢量图,插画处理ai的软件,那么怎么添加炭精笔效果呢?下面和小编一起看看吧...

AI 炭精笔

ps线条怎么断开和连接? ps断线效果的制作方法

ps线条怎么断开和连接? ps断线效果的制作方法

ps线条怎么断开和连接?ps中绘制的线条图形是连续的,想要断开,做成一段一段的,该怎么实现呢?断开的又该怎么连接呢?下面我们就来看看ps断线效果的制作方法...

ps 线条断开 断线效果

PS画布不能拖动移动怎么解决? PS画布移动的方法

PS画布不能拖动移动怎么解决? PS画布移动的方法

PS画布不能拖动移动怎么解决?ps的画布是可以随意拖动的,但是在发布的时候,发现不能拖动,放大才能拖动,该怎么办呢?下面我们就来看看PS画布移动的方法,详细请看下文介绍...

PS 画布

AI如何将人物照片转成人物插画?AI将人物照片转成动漫插画教程

AI如何将人物照片转成人物插画?AI将人物照片转成动漫插画教程

当我们学会了这篇教程就可以将自己爱豆的照片绘制成插画的形式保存起来了,不只是爱豆哦,想学习的小伙伴们打开AI一起动手吧...

AI AI教程 照片转插画

cdr怎么设计有棱角的文字? cdr斜角立体字效果的实现方法

cdr怎么设计有棱角的文字? cdr斜角立体字效果的实现方法

cdr怎么设计有棱角的文字?经常使用cdr设计需要的字体,想要设计一款类似建筑棱角的文字模型,该怎么设计这种立体文字模型呢?下面我们就来看看cdr斜角立体字效果的实现方法...

cdr 立体字 字体设计

ps透视参考线在哪? PS快速画出一点透视参考线的技巧

ps透视参考线在哪? PS快速画出一点透视参考线的技巧

ps透视参考线在哪?ps中想要创建透视参考线,帮助绘图,该怎么创建呢?下面我们就来看看PS快速画出一点透视参考线的技巧,详细请看下文介绍...

ps 透视参考线 参考线

AI绘制3个人像矢量插画教程

AI绘制3个人像矢量插画教程

使用AI绘制人物的时候用到的图形会更多,如果想要给人物进行装饰一下细节必须把握好,今天咱们用AI来绘制3个不同的女人,一起来学习吧...

AI AI教程 人物矢量插画

感谢您留下宝贵的建议
问题类型:
提交
此文件需要VIP才能下载!
获取VIP全站模板任意下载
立即开通
注:下载文件较大,请耐心等待!

在线时间:9:00-21:00
点击咨询 常见问题 >
官方交流群:451642347
点击加入