如何为我的网站选择优质的封面照片?


22

具有较大的背景图像和相对较少的文字作为背景(包括博客文章开头)的标题和网页介绍已经很流行。我可以举无数个例子,但是我想您完全知道我在说什么。

什么是有效的封面/背景图片?在寻找图片或计划拍摄和编辑网站上的图片时,我应该记住什么?


1
具有大型背景视频现在很流行。
user11153 2015年

1
做得很好,是网站上最好的自我解答问题之一(我想不起其他任何问题,所以可能最好的)。:)
Dom 2015年

Answers:


30

您真的需要顺应潮流吗?

永远不要做某事,因为这是一种趋势。做事情是因为它们有利于用户体验,因为对您的公司和您的设计都是最好的。认真思考将大图像添加到您的网站将产生的影响,并权衡您拥有的其他选择。您不必使用此技术即可拥有“现代”网站

话虽如此,为您的网站选择背景图片时要记住很多事情。由于答案很长,因此这里的清单很短;我会提供更多详细信息,包括下面的示例。

  • 确保图像与内容相关
  • 确保图像说出了您想要的
  • 确保图像相对独特
  • 使用真实事物的图像
  • 确保图像适合您的布局
  • 确保图像遵循良好的摄影和设计规则
  • 确保图像符合您的配色方案
  • 限制图像内的差异
  • 确保图像尺寸足够大
  • 确保您有权使用该图像
  • 确保照片质量高

确保图像与内容相关

无关的照片只会造成伤害。就像您设计中的任何内容一样,如果它不完全符合您网站的目的,那么请摆脱它。确保它与周围的内容直接相关,而不是稍后的内容。该图像需要具有由某些文本或布局带来的其他上下文,以帮助用户理解它是一个网站,而不仅仅是静态图像。

在此处输入图片说明


确保图像说出了您想要的

所有图像都有基于图像内容及其样式设置的含义。确保图像适合您希望传达的感觉以及品牌。该图像应该传达更多的理解,而不仅仅是围绕它提供的文字。还要确保它以您希望的方式帮助建立您的品牌。

在此处输入图片说明

毋庸置疑,图像应具有视觉吸引力。以下是有关使图像具有吸引力的特征的更多详细信息。


确保图像相对独特

如果质量至少相同,则自定义图像比库存图像更好。这意味着您应该避免使用非常知名的库存图像,只要该替代图像质量高且适当即可。但是,绝对独特并不比拥有一个良好的,适当的形象重要。

在此处输入图片说明


使用真实事物的图像

关于真实图像(甚至是高度编辑的版本)的某些事物,对我们作为人类的影响很大。我们喜欢看真实的事物。只要有可能,请在计算机生成的东西上选择真实图像,除非它完全不适合您想要的内容或样式。

在此处输入图片说明

向人们展示会产生更大的影响,无论好坏。如果做得正确,它可以使用户感到这种体验更加真实和个性化。如果做得不好,就可以使它显得IM的个人和便宜。在这里更多

特别是面孔会引起注意,因此请确保它们是适当的面孔,并将其放置在真正重要的地方。有时将它们放在其他环境中,例如书本,iPad,计算机等都可以提供帮助。在其他时候,更适合修剪脸部(例如服装网站或人体模型)。如果做得好,露出品牌/发言人的脸非常有效,如果可以的话,我强烈建议您这样做。

在此处输入图片说明


确保图像适合您的布局

用户流和站点布局比您选择的任何图像都重要。首先创建它们。如果最佳的布局和流程顶部顶部有一些开放空间,请考虑添加图像。

确保图像的重要部分没有被内容覆盖。使用视觉准则来帮助引导用户访问您希望他们看到的内容(在下一部分中对此有更多的了解)。

在此处输入图片说明


确保图像遵循良好的摄影和设计规则

图像应遵循核心摄影规则,包括三分法则,使用视线,很好地聚焦于主要内容,正确构图对象,具有良好的背景以及对称和图案等。有关更多信息,请点击此处或在线搜索更多资源。

这些原则将通过帮助吸引人们注意图像的重要部分及其周围环境来赋予图像更多目的。

良好的形象规则


确保图像符合您的配色方案

所有网站都应具有统一的感觉,包括配色方案。无论是先选择配色方案,然后再选择图像,还是先选择图像再选择配色方案(类似的工具都可以帮助后者),请确保图像颜色适合您的整体配色方案。有时洗掉图像,然后应用彩色滤光片可能效果很好。

描述


限制图像内的差异

不要使视觉外观繁忙。图像中有一堆颜色和对象使得难以在其上放置文本并使之与布局相适应。如前所述,首先创建内容,然后选择图像。

在添加彩色滤光片之前,添加部分透明的覆盖层,使图像变暗或将其洗净为黑白可以帮助减少不必要的噪音。同样,背景颜色也可以应用在文本后面或元素上,以提高可读性。

在此处输入图片说明

上面的图像使原始图像变暗,并在边缘上使用一些阴影以减少噪声。下图似乎使用了部分透明的深色覆盖物来完成相同的操作。

在此处输入图片说明


确保图像尺寸足够大

不用说,所使用的图像应足够大以覆盖每个屏幕而不会拉伸。这意味着对于全尺寸的屏幕,我们需要具有最低分辨率为1024 x 768像素的图像,但是最好的目标是至少具有1200像素的宽度。我们还可以根据分辨率提供不同尺寸的图像,从而节省了为较小的屏幕加载大图像的费用,更多内容请参见此处。尝试优化图像加载时间,但是要尽可能地降低图像质量。


确保您有权使用该图像

如果您不允许使用它,请不要使用它如果您不知道图片的版权,请查找它,但是直到您知道它之后才使用它!您要做的最后一件事是起诉侵权。


确保照片质量高

请勿使用颗粒状或模糊的图像。请勿使用内容有问题或无关的照片。保持简单,但(主要是)真实的。认真考虑所考虑的每个图像的优缺点,不要接受平庸的事物。

其他资源:


4
好答案。我可能会过于简洁:“确保它是一张好照片,并且与您的站点的需求和目标相关” :)
DA01 2015年

@ DA01虽然我完全同意该声明,但有些人需要更多帮助:)
Zach Saucier 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.