10个在图片上加字的建议

前言

原作者:Carrie Cousins
原文地址:https://designmodo.com/design-type-photo/
翻译:章鱼小年糕
仅供学习参考,严禁转载;非专业,若有错误,欢迎提出

正文

一个在你可以使用的工具范围中很不错的技巧就是在图片周围加一些文字。但是这个技巧也是最难把握让你达成目的的一个概念。
首先,你必须要有一张正确的照片,对排版有良好的眼感,然后清楚你想通过文字的修饰而达到何种目的。如果你感觉你已经准备好接受这个挑战,那么这里有10个建议来帮你完成它:

1. 添加对比

Pack

添加对比

文字必须要是可读的才算是成功。确认文字的颜色与图片结合后能够被区分开来。如果你有一张深色的图片,就选择白色(或者浅色)的文字。如果你的照片是白色的背景,就选深色的文字。
对比还可以指文字尺寸和图片结合产生的效果的关系。字母应该要帮助(而不是打压)图片。在上面展现的Pack这个网站中,举个例子,这张图片很大也很醒目,然而文字是细长的。这些元素组合虽然包含了对比,但都还是帮助了对方的展示。

2. 让文字成为图片的一部分

MMD

TOAST

有时候文字会成为图片的一部分,这种情况只能在一些有限的例子里能达到。你需要一张简单的图片和一小搓文字来协调合作,比如上面展示的McLaren,文字像嵌入了图片一样。

3. 跟随视觉流

hogan

schmid

当谈及文字和图片的协作,符合视觉流是这之中最重要的一个建议。你需要符合一张图片逻辑部分的文字,并且要注意,不要把文字放在图片的重要部分,比如图片中主要的动作区,脸部或者你想要展示的产品。
根据视觉流,为文字寻找一些能从图片主题开始能看到的空间。以上两个例子都可以引导你从图片中身体语言或者用人的眼睛到文字。每一个流都使用的恰到好处。

4. 虚化图片

wallmob

niche

一个你可以使用的最简单的技巧就是虚化图片的一部分。用一些软件,比如Photoshop来虚化图片的一小部分,这样可以凸显你的文字。虚化同样可以把注意力集中在你整个主题上,比如上面这个wallmob网站。对于网站浏览者来说,虚化让产品的展示更加真实,文字也更加锐利。

5. 把文字放进一个容器

fall

tradestone

当图片包含了各种颜色或者有明暗部分的差别,就可以把文字放在另一个框框中让它显得更加突出。
选择一个形状,你也可以看到上面的例子有矩形和圆形,它们和你选择的文字和图片互相协作。然后给这个容器选择一种和你的文字有足够对比的颜色来展示。
考虑给这个框框添加一些透明度能够增加一种温和感并且还能展示一些被挡住的部分图片。

6.给背景加上文字

square
Caitlin Wicke

一个很好的技巧不是在前景上加字,而是给背景加上文字。一般背景的空间都不会很拥挤,所以更加容易放置文字。背景也常常是一个单调的颜色,在这里放文字可能更加被发现也更加容易阅读。
最终的结果是非常自然的放置,不需要大量的技巧或者对主图片做一些替换。使用微妙的阴影效果,比如上面Caitlin Wicker的网站展示的,放置文字的时候,还顺便给图片添加了一些可以表现深度的文字。

7. 放大

plain

coffee

当你不确定什么可以帮助你,那就考虑一下放大。这个可以运用在上面的两张图片上,或者放大文字本身。元素的大小将会抓住用户的注意力,使用一个很大的元素能更容易打造文字和图片的比例。
使用大图,比如上面的coffee这个网站,可以帮助添加阴影和对比差距。使用足够大的文字以及加粗,放在图片可读的地方进行一个对比。

8. 添加色彩

knuckles

moving

添加一个提示的颜色可以添加图片的视觉趣味。在上面展示的两个网站都使用了两种不同的方法:一个是用了图片中没有看到的对比颜色来高亮某个单词,另一个是使用了一个可以映射这张图片的色调。这两个技巧都非常的有效果。

9. 使用颜色遮罩

winshape

brandv

在图片上使用一种颜色遮罩正在成为一种越来越受欢迎的效果。它不仅可以达成一种微妙的效果,也能让它成为一种出色的设计。
Opt for a color that his high visual interest. The balance is in making the overlay color transparent enough for the image to show through, but not so transparent that the text is difficult to read. You may have to experiment with several color and photo options before mastering this trick. Not sure what color to use? Start with an overlay related to your brand colors.
选择一种能引起别人高度兴趣的视觉颜色。要把握好覆盖颜色的透明度的平衡度,这样才能很好地透出图片。但是不透明的话文字就可能很难阅读。你在尝试这个技巧的时候,可能需要尝试几种颜色和图片的选择。是不是不确定选择使用什么颜色?那么就从一种你的品牌颜色开始来覆盖吧。

10. 简单化

sa

cohen

运用在文字和图片上的一个经过时间验证的建议就是“保持简单”。如果你真的是很希望人们能观察到图片和文字,使用太多的技巧反而可能会造成反效果。
当和图片进行协调的时候,使用简单的排版和直观的图像就是最好的结果。记住图片重要的部分,要无障碍的进行展示。并且坚持设计到文字清晰易读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容