让图片加字变得有格调?这三个方法可以轻松搞定! - 优设网 - UISDC

让图片加字变得有格调?这三个方法可以轻松搞定!

2016/07/25 41078评论区

3-way-make-text-wrap-elegant-1

想让你的图片一秒变得有逼格?试试在上面加点文字吧!今天@笔戈科技 的兽兽同学分享了几个简单实用的加字方法:隐形线,隐形框和超级放大法,分分钟从《乡村爱情》到荒诞电影海报。为了您和他人的用眼安全,请仔细阅读以下这份加字指南。

真的不知道是哪位仙人板板说的这句话,于是以下就是我国常见的加字水平:

sober20160725 (1)

△ 厕所情感类刊物畅销书:

sober20160725 (2)

△ 窩の眼真嘚恏卵痛

sober20160725 (3)

△ 路边摊小卡片

我从来没试过这么希望自己是盲僧。

sober20160725 (4)

为了您和他人的用眼安全,请仔细阅读以下加字指引。

nn2016072511

先来一些优秀作品洗洗眼睛:

nn2016072512

配图文字设计第一招:一齐遮百丑

nn2016072513

nn2016072514

没看懂没关系,先以大家(父母)喜爱的《乡村爱情》剧照为例:

nn2016072516

先降低饱和度,把逼格 UP 一下↑

nn2016072517

重点来啦注意了(拍黑板),我们沿着刘能的视线方向拉出一条对齐线,在根据这个水平线做出垂直的对齐线。

nn2016072519

在这对齐线的基础上,靠右对齐文字。

nn2016072520

TIPS:如果你没把握设计出恰到好处的汉字,那么就用英文代替吧。

摇身一变,这是哪部荒诞派喜剧电影的海报?

nn2016072520

这种让文字排版工整、同时牵动图片情绪的辅助线,我们称之为:

nn2016072522

排版文字的时候不仅是普通的左右上下对齐,更要注意与隐性线条对齐。

配图文字设计第二招:一框遮百乱

nn2016072523

nn2016072524

秩序产生美,如果你的图片本身是杂乱无章,乱七八糟的,要么你换一张,要么就用框,框住「狂野的它」。

这一张叶片排布杂乱无规律的照片,我们要做的就是把这样的场景桎梏在一个视觉单元之内,使之看起来更干净整洁

nn2016072526

比如将其放进某种规则图形内:

nn2016072527

考虑到随后文案的排版,可以稍稍做出位移改变:

nn2016072528

在图形的对角处加上文字,同样遵循了「隐形的线」原则:

nn2016072529

为了使图片更生动,形成规则与跳脱的视觉冲击,这时候我们

「允许一小部分的红杏先出墙来」

@邓小平

nn2016072530

看最终效果,是不是比在一片绿上直接写字好多了?

nn2016072531

所以除了「隐形的线」,我们还有一个「隐形的框」

nn2016072532

配图文字设计第三招:一大遮百淡

nn2016072533

nn2016072534

如果你的图片比较性冷淡,比较安静典雅,不「一颗赛艇」。

nn2016072535

很简单

要大!

要大!

要大!

(设计师反手就是一个甲方上身)

通过剪裁,舍弃不必要的部分,放大之后,立马就刺激了!

nn2016072536

在留白处加上深色字体,与黑色茶杯相呼应,与白色背景相反衬,对比之美出来了

nn2016072537

这支笔的电光绿真好看,那就裁掉吧! :)

nn2016072538

尽管色彩不再丰富,但对比感明显比剪裁前提高了一个档次:

nn2016072539

同样,在浅色留白处加上与钢笔色相近的深色字体,完成!

nn2016072540

文字和图片,一种更纯粹有力♂的视觉呈现:

nn2016072541

对,没错,这就是:

nn2016072542

总结

用「隐形的线」确定文字的基础排版样式,年轻人别老想搞大新闻,先对齐再说。

用「隐形的框」集成视觉单元,安放你无处安放的「狂野」。

用「超级放大法」强调文字与图片的刺激观感。

不要问我为什么不是隐性翅膀,不刺激。

笔戈科技是魅族旗下的一个网站,里面的设计文章都是魅族设计师自己写的,质量奇高,而且普遍幽默风趣(魅族传统么)不信看看这几篇:

  1. 《超赞!一份简单易上手的青春弥散阴影修炼手册》
  2. 《无忧改稿!四个不为人知的PHOTOSHOP高效操作秘籍》
  3. 《关起门来涨姿势!如何从AV封面中学习平面设计?(二)》

欢迎关注笔戈科技微信公众号:

hh20160725

「人气过万的好文合集」

敏捷用研指南:
《腾讯专业干货!一份系统全面的敏捷设计用研指南》

QQ表情怎么改版的?
《腾讯设计师揭秘!QQ默认表情优化背后的设计故事》

HTML 5动效设计方法大全!
《腾讯干货!由浅入深科普最常用的八种HTML 5动效制作手法》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/3-way-make-text-wrap-elegant

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 海报设计 用户体验设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里