多张照片排版的设计技巧

摄影是你作为设计师有力的可调配的资源之一。今天，我们将看看如何通过一些巧妙而独特的方法来创建使用以多个图像为中心的多图集平面设计。

1.使用多张照片 

作为一名设计师，你一定知道，在任何的设计上（尤其是网站建设项目中）通过将你的内容保持在较低限度，以保持干净，易于浏览的页面总是符合视觉审美并且能够较大限度发挥设计本身的作用的。将一个主要图像与一些附带的文本搭配起来一起使用这是设计中基础的排版样式了，尽管简单，但它可以用于很多目的，当你正式开始针对客户的需求做设计时，你通常会有一个完整的文件夹，其中包含你希望使用的各种资源。 

作为设计师，很难找出一种有吸引力的方式将各种图像混合成一个连贯的布局，特别是如果你从事的是类似于平面打印而不是无限制的交互式空间时。你可以通过快速阅读以下提供的案例，以便节省你的时间。 随意窃取这些想法，并将其用作你自己的！

2.将他们摆放在一起 

全屏照片可以成为一个非常有吸引力和醒目的页面元素。通常情况下，设计师会放弃只通过使用一张完整照片的想法和一般的布局，转而使用包含两个图像或更多图像的拼合式照片。 

幸运的是，创建一个包含两个图像的较大化布局非常容易。对于初学者来说，你可以尝试通过分割页面为相同的两个或多个版块，给每个版块平等的空间。 

正如你所看到的，以上案例中，文本本来很难直接放在照片上的，仅仅只是通过一条黑色的条纹背景，你就可以在强调标题的的同时，使文本和图片更容易识别。为了防止强硬的显示效果，你可以试着在文本区域下将两个图像模糊拼贴在一起。 

这种效果不仅对于显示相关图像，而且对于显示具有二元性概念的主题都是非常好的：柔软和坚硬的纹理，白天和黑夜的界限等。 

· 不要非得是规矩的形状 

你可以把这种概念牢记在心，而对于网页设计的视觉表现上，你可以根据需要自由发挥，你可以实现很多不同的效果。例如，在下面的设计中，通过创建内容相当的典型水平线条的对角条纹，将两个图像以及一个文本内容分割开。  

这里你需要稍微注意的是，在这个案例中，它已将所有内容保持正常轮播。文本和图像都不对角，只有它们的形状具有这种特征。这样可以让一切看起来都刚刚好，易于阅读/解读，同时也可以让你的网站设计更具独特的布局。

3.照片网格

一个非常受流行和非常实用的方式，是将图像整理成一个单一的页面通过将它们排列在一个网格中（这种形式一般我们经常在网站设计里会使用到）。

在下面的例子中，通过一开始在Photoshop中创建符合大致内容区域的正方形网格（这是确保你获得正确比例的重要一步，并从长远来看节省了大量麻烦）为接下来的图片混合设定了基础范围。从这里你只需放入几个图像，并将它们设置成在整个网格框架内的不同形状。 

正如你所看到的，我将未摆放图像的空间填满了鲜艳的颜色，而这些颜色并不是随意选取的，而是从周围的图像中吸取的色系，这就形成了整个版块的相关性。相信你跟我一样，总是想确保你在设计中使用的任何填充颜色与摄影相适应，并且方式之一是从图片中获取颜色。 

· 创建网格线 

像上面看到的基本网格布局有很多种不同的变体。尝试弄乱单个单元格的大小，颜色填充与图像的比例等。 

一种非常常见的技术是通过创建清晰的分离来强调个别照片。基本上，只要在每张照片的边缘周围做一个浓厚的白线，你会得到一个不同但同样有吸引力的效果。

 

4.编辑感 

如果你希望在你的网页设计中加入更多的编辑外观，请尝试下面的这种布局。在这里，我们主要以一幅图像为主要的视觉点，然后通过文本内容提取出相关的另一个图像。这与上面简单的网格版本很相似，只是使用较少的照片而已。 

关于在单一设计中使用多张照片的一个简单技巧：始终确保颜色顺利进行。当创建诸如上面的布局时，主图像和文本区域采取黑色和白色的视觉分割，而次要图像是彩色的，并具有非常酷的白平衡。蓝色的光线会对我的配色方案造成严重破坏，所以我通过调整图像的饱和度，突然两张照片看起来就像是单拍的。

5.图片文本 

将图像融入到文本中在我的我的网站设计中经常被用到，并在近期的几篇文章中我都有简述到这一点。在这里，我们可以更直观的看到它是一种以微妙的方式在另一张相关照片中工作的方式。 

由于图像的主要形象是木桥，所以我抓住了一个木质的纹理。结果真的将文本与下面的照片很好地联系在一起，甚至比一个简单的颜色填充更能符合视觉和感觉的需求。

6.竖状排版 

我们的建议是使用垂直的块状布局，当你尝试创建一个整体环境或心情时，并不一定需要显示完图像。 

不过，如果你没有完全理解，并使用的不到位的话，这个效果可能对你的网页设计会造成一定的负面影响的。此外，将文本放置在许多不同的图像之上是很难的。由于这些原因，更好的是分离出一个图像，并将其与其他图像相比，以便更突出。 

在上面的案例图片上，你需要注意的是，图片在比例上非常刻意的。首先，它将页面分成两半，然后将右侧再拆分成相同大小的三个版块。

7.教训 

通过上面的描述，我们很快的过了一下一些常见的图片样式。但是比例子更重要的是，你是否从每个例子中获得了灵感或者说教训。首先，你偶尔可以在整个网站设计的同一版块中使用两张不同的照片，通过尽心的编排和混合使其看上去就像是一张照片一样。请记住，你不必总是以完美的水平或垂直线来设计。 

接下来，当使用图像网格时，请确保你花时间先设定了基础的框架，以使相对比例正确（除非你要进行有机布局）。通过从周围的照片中提取突出的颜色，将其他的空隙填充简单的颜色以获得视觉上的关联。实验较大化网格线的外观或完全隐藏它们。 

之后，当你使用多张照片时，仍然需要有一个突出的特色图像在相比其他图片时能够脱颖而出。你可以在上面大部分的例子中看到这个。始终建立一个视觉层次结构，并尽量避免让页面上的所有内容都具有相同的视觉重量和重要性。

总结 

我希望这篇文章中的例子和经验教训可以让你获得一些灵感并思考将多张照片并入你设计中的新方式。创建一个繁忙的，超载的页面很容易被遗忘，所以请注意使用一些约束，并为了更清楚地展示内容而争取减低这种混乱感。当你继续在页面中添加可视元素时，请记住，在实际降低设计影响的情况下，有一个递减的回报。