图片说明网页设计是一个经常被忽视的元素。他们常想的更多的功能比形式。只要包含照片的信贷或识别信息的图像对象,而不是给他们更多的思考。
但是,图片说明是一个伟大的地方到您的网站中添加了更多的风格,或给一些独到的见解,进入正题的图像。的标题是否是照片上的新闻网站或投资组合中的设计样本,他们提供了一个机会,为加强本网站的整体外观。如果处理得当,他们甚至可以添加更多的视觉趣味,成为一个特定的品牌或网站的一个显着的商标。
有两个基本类型的图片说明。是简单,简约,脚踏实地,商务风格。这些通常有一个简单的sans-serif字体在白色,黑色或灰色阴影。它们通常定位的侧面或下面的图像,虽然他们有时重叠或它上面。这种类型的新闻网站常见的,但也可见于组合及其他网站。
其他主要的风格是更多的图形。这通常包括效果,如只出现一个鼠标或“详细信息”按钮,导致完整的标题显示的标题。虽然字体是sans-serif字体,颜色更被使用,往往是叠加在实际的图像和字幕。这些类型的图片说明被普遍认为对投资组合的设计师和广告公司的网站。当然,也有一些网站使用交叉型图片标题,显示这两种风格的元素。
图片说明:热门造型技巧
设计师使用多种不同风格的图片说明。在大多数情况下,设计实验用不同的颜色,使用较亮的颜色较暗的背景。经常使用斜体,而图像字幕的字体大小通常小于体内复制。让我们来看看在我们已经确定了我们的研究过程中各种技术的概述。
-
标题文字的底部,以斜体

-
标题文字的底部,明亮的背景颜色

-
标题文字底部半透明的背景

-
标题文字的底部在一个黑暗的背景

-
标题文字排版重点

-
标题文字作为一个覆盖

-
背景图像环绕

-
在使用中的图标

-
在使用中的图像枚举

-
标题是右对齐

-
标题右对齐顶部

-
标题居中

1。朴素无华的图片说明
简单的标题设计是最常见的图像标题设计。他们可以让一个网站显得更加优雅,但如果不小心地将网站的整体设计风格的整合,他们可以结束了平淡乏味。下面是一些不:
Viget.com

一个名单,除了

“纽约客”

AIGA.org

37signals的

DesignLessBetter.com

贾森圣玛丽亚

Wired.com

Inspirationbit.com

Astheria.com

AIGA

加勒特戴蒙


设计观察

Designsensory
设计组合。图片和标题的设置,浅灰色的背景,标题文字本身就是在暗灰色。

无网站设计和开发
设计投资组合。这是最低限度的,因为它在白色背景上的灰色sans-serif字体类型。

{E}内部工作室的
广告代理组合。这些标题提供了更多的信息比大多数的图像,但他们坚持以最小的灰,白色的配色方案。他们使用触摸衬线字体,将它们分开。

假的草坪
图形设计组合。另一个网站,其中包括大量的图像信息,但采用了浅灰色和白色,暗灰色的配色方案。

Pixelight创意
网页设计组合。本网站的照片说明光在黑暗和侧面的图像。

莱斯艺术家的
艺术画廊网站。另一个最小的标题样式,但这次更有趣的鼠标经过效果。

班布里奇工作室
设计组合。简单的白色和浅灰色的黑色的字幕设置为每个图像的一侧。该网站包括了serif字体的标题。

Studio7Designs
网页设计组合。另外一个非常简单的暗灰色光灰色风格的图像和字幕组对浅灰色的方块。

CNN.com
新闻网站。一个简单而醒目的标题上一个黑色,半透明覆盖白字的。

纽约时报
新闻网站。这可能是一个最简单的标题风格在那里,灰色的小文字和形象的描述稍微大一点的同色型的照片信贷。

政治
新闻网站。灰色的背景和黑色字体。它没有得到比这更最小的。

MK的多媒体Communicatie
设计组合。这是一个最优雅的照片在这里列出的标题风格,色调的灰色,白色背景上的图像旁衬线和无衬线类型的混合。

尼泊尔迷航之旅
旅游图片库。在这样一种方式,使图像的类似宝丽来照片:非常恰当的一个旅游网站,并显示标题可以图形方式的影响,而其余的微妙和简单的文字,这些文字。

托马斯程
摄影组合。另一组的字幕,使良好的排版和一个灰色的白色的调色板。

Designsensory.com

2。大胆和图形图像字幕
图形图像字幕使用明亮的色彩和大胆的形状,使图片说明中脱颖而出。他们结合图片说明完全在整体设计上的网站。热的粉红色,灰绿色和电蓝色似乎是最流行 的颜色使用。
充满活力的字幕
JeffCroft.com

Typesites

Segd.nl

Designslices
设计组合。柠檬绿与热粉红色的可以是一个艰难的组合拉断,但它在这里做了精美的。黑色覆盖,透明和不透明,新增的图形上诉。

图形图像标题中使用
SuperflousBanter.org

ILoveTypography

深
广告公司的投资组合。热粉红色的头和下拉详细信息框的网站很受欢迎的感觉,同时提供所有的相关细节。

IDEO
广告代理组合。半透明,颜色协调的覆盖(颜色的变化取决于广告的配色方案)工作得很好,而且很简单,全部大写字体出色的作品。

电源的海报
海报设计展示。这些字幕透明的色彩效果设置它们分开,衬线和无衬线字体的组合,添加了兴趣。

设计的休闲
网页设计展示。圆角和单色的调色板提供一个合适的Web 2.0外观到这个网页设计库。

Freshivore
网页设计组合。过大的热粉红色的标题,图形,纸状背景和浅灰色的元信息结合起来,创造一个非常吸引人的视觉风格。

市长+ Beusch
架构组合。在石灰绿色,粉红色和电蓝色的鼠标悬停标题是非常大胆的。

3。混合图片说明
这些图片标题设计元素结合起来,既简单又图形设计。他们有点大胆的简约的设计,往往使用不同的颜色或多个图形的形状,但更柔和大胆,图形图像字幕以上。
混合中使用的图片说明
弗雷德里卡Cau的
设计组合。这些图片的标题上提供了大量的信息,和电蓝色头配合边境的图像的。

Klinkov
艺术组合。这些图像的字幕设置的侧面和包括漂亮的蓝绿色和灰色的颜色。

PixelFuze
设计组合。另一个网站的图片说明中使用的灰绿色,电蓝色和浅灰色的组合。

BestWebGallery
网页设计展示。灰绿色小图标设置除了这些标题。

周杰伦Hafling
网页设计组合。超大的类型和覆盖的黑色标题的空间给这些图形上诉的,而实际上是相当简单的。

SOObox
设计廊“,我认为(我不看任何一种语言,这是在)。是平面的,而仍然是简约的半透明的黑色与白色的文字覆盖。圆角覆盖在左上角加了一点更多的视觉吸引力。

信艺术画廊
艺术画廊网站。最简单的,全部大写,电蓝色的标题是简单,同时还提供一些“流行”。

腾设计
的设计组合。稍微柔和的蓝电头提供一些额外的视觉流行,而其余的浅灰色文本的标题保持设计是压倒性的。

ten24搜索引擎优化
SEO的网站。另一种相对简单的浅灰色暗灰色的标题设计,而是采用了一些不错的薄荷绿色环保型。

罗四维
设计组合。简单的衬线字体在一个明亮的背景,但有一个淡蓝色的标题颜色。

MSNBC
新闻网站。很简单,用暗灰色和蓝色的类型,掀起了一边。

人民
新闻网站。一个标题,一个明亮的蓝色背景,白色和浅灰色的衬线字体。

CLD Web画廊
网页设计展示。非常简单的字幕显示标题的网站,其评级的灰色和淡蓝色的黑暗,钢灰色的背景。

Junghoon公园
设计组合。热粉红色和黑色的sans-serif型纯白色的背景。

艾迪科特Web
暗灰色和淡蓝色的浅灰色的背景上,sans-serif字体类型广泛间隔的标题和下面的图像。
