攝影是你作為設(shè)計(jì)師有力的可調(diào)配的資源之一。今天，我們將看看如何通過一些巧妙而獨(dú)特的方法來創(chuàng)建使用以多個(gè)圖像為中心的多圖集平面設(shè)計(jì)。

1.使用多張照片 

作為一名設(shè)計(jì)師，你一定知道，在任何的設(shè)計(jì)上（尤其是網(wǎng)站建設(shè)項(xiàng)目中）通過將你的內(nèi)容保持在較低限度，以保持干凈，易于瀏覽的頁面總是符合視覺審美并且能夠較大限度發(fā)揮設(shè)計(jì)本身的作用的。將一個(gè)主要圖像與一些附帶的文本搭配起來一起使用這是設(shè)計(jì)中基礎(chǔ)的排版樣式了，盡管簡(jiǎn)單，但它可以用于很多目的，當(dāng)你正式開始針對(duì)客戶的需求做設(shè)計(jì)時(shí)，你通常會(huì)有一個(gè)完整的文件夾，其中包含你希望使用的各種資源。 

作為設(shè)計(jì)師，很難找出一種有吸引力的方式將各種圖像混合成一個(gè)連貫的布局，特別是如果你從事的是類似于平面打印而不是無限制的交互式空間時(shí)。你可以通過快速閱讀以下提供的案例，以便節(jié)省你的時(shí)間。 隨意竊取這些想法，并將其用作你自己的！

2.將他們擺放在一起 

全屏照片可以成為一個(gè)非常有吸引力和醒目的頁面元素。通常情況下，設(shè)計(jì)師會(huì)放棄只通過使用一張完整照片的想法和一般的布局，轉(zhuǎn)而使用包含兩個(gè)圖像或更多圖像的拼合式照片。 

幸運(yùn)的是，創(chuàng)建一個(gè)包含兩個(gè)圖像的較大化布局非常容易。對(duì)于初學(xué)者來說，你可以嘗試通過分割頁面為相同的兩個(gè)或多個(gè)版塊，給每個(gè)版塊平等的空間。 

正如你所看到的，以上案例中，文本本來很難直接放在照片上的，僅僅只是通過一條黑色的條紋背景，你就可以在強(qiáng)調(diào)標(biāo)題的的同時(shí)，使文本和圖片更容易識(shí)別。為了防止強(qiáng)硬的顯示效果，你可以試著在文本區(qū)域下將兩個(gè)圖像模糊拼貼在一起。 

這種效果不僅對(duì)于顯示相關(guān)圖像，而且對(duì)于顯示具有二元性概念的主題都是非常好的：柔軟和堅(jiān)硬的紋理，白天和黑夜的界限等。 

· 不要非得是規(guī)矩的形狀 

你可以把這種概念牢記在心，而對(duì)于網(wǎng)頁設(shè)計(jì)的視覺表現(xiàn)上，你可以根據(jù)需要自由發(fā)揮，你可以實(shí)現(xiàn)很多不同的效果。例如，在下面的設(shè)計(jì)中，通過創(chuàng)建內(nèi)容相當(dāng)?shù)牡湫退骄€條的對(duì)角條紋，將兩個(gè)圖像以及一個(gè)文本內(nèi)容分割開。  

這里你需要稍微注意的是，在這個(gè)案例中，它已將所有內(nèi)容保持正常輪播。文本和圖像都不對(duì)角，只有它們的形狀具有這種特征。這樣可以讓一切看起來都剛剛好，易于閱讀/解讀，同時(shí)也可以讓你的網(wǎng)站設(shè)計(jì)更具獨(dú)特的布局。

3.照片網(wǎng)格

一個(gè)非常受流行和非常實(shí)用的方式，是將圖像整理成一個(gè)單一的頁面通過將它們排列在一個(gè)網(wǎng)格中（這種形式一般我們經(jīng)常在網(wǎng)站設(shè)計(jì)里會(huì)使用到）。

在下面的例子中，通過一開始在Photoshop中創(chuàng)建符合大致內(nèi)容區(qū)域的正方形網(wǎng)格（這是確保你獲得正確比例的重要一步，并從長(zhǎng)遠(yuǎn)來看節(jié)省了大量麻煩）為接下來的圖片混合設(shè)定了基礎(chǔ)范圍。從這里你只需放入幾個(gè)圖像，并將它們?cè)O(shè)置成在整個(gè)網(wǎng)格框架內(nèi)的不同形狀。 

正如你所看到的，我將未擺放圖像的空間填滿了鮮艷的顏色，而這些顏色并不是隨意選取的，而是從周圍的圖像中吸取的色系，這就形成了整個(gè)版塊的相關(guān)性。相信你跟我一樣，總是想確保你在設(shè)計(jì)中使用的任何填充顏色與攝影相適應(yīng)，并且方式之一是從圖片中獲取顏色。 

· 創(chuàng)建網(wǎng)格線 

像上面看到的基本網(wǎng)格布局有很多種不同的變體。嘗試弄亂單個(gè)單元格的大小，顏色填充與圖像的比例等。 

一種非常常見的技術(shù)是通過創(chuàng)建清晰的分離來強(qiáng)調(diào)個(gè)別照片?；旧?，只要在每張照片的邊緣周圍做一個(gè)濃厚的白線，你會(huì)得到一個(gè)不同但同樣有吸引力的效果。

4.編輯感 

如果你希望在你的網(wǎng)頁設(shè)計(jì)中加入更多的編輯外觀，請(qǐng)嘗試下面的這種布局。在這里，我們主要以一幅圖像為主要的視覺點(diǎn)，然后通過文本內(nèi)容提取出相關(guān)的另一個(gè)圖像。這與上面簡(jiǎn)單的網(wǎng)格版本很相似，只是使用較少的照片而已。 

關(guān)于在單一設(shè)計(jì)中使用多張照片的一個(gè)簡(jiǎn)單技巧：始終確保顏色順利進(jìn)行。當(dāng)創(chuàng)建諸如上面的布局時(shí)，主圖像和文本區(qū)域采取黑色和白色的視覺分割，而次要圖像是彩色的，并具有非?？岬陌灼胶?。藍(lán)色的光線會(huì)對(duì)我的配色方案造成嚴(yán)重破壞，所以我通過調(diào)整圖像的飽和度，突然兩張照片看起來就像是單拍的。

5.圖片文本 

將圖像融入到文本中在我的我的網(wǎng)站設(shè)計(jì)中經(jīng)常被用到，并在近期的幾篇文章中我都有簡(jiǎn)述到這一點(diǎn)。在這里，我們可以更直觀的看到它是一種以微妙的方式在另一張相關(guān)照片中工作的方式。 

由于圖像的主要形象是木橋，所以我抓住了一個(gè)木質(zhì)的紋理。結(jié)果真的將文本與下面的照片很好地聯(lián)系在一起，甚至比一個(gè)簡(jiǎn)單的顏色填充更能符合視覺和感覺的需求。

6.豎狀排版 

我們的建議是使用垂直的塊狀布局，當(dāng)你嘗試創(chuàng)建一個(gè)整體環(huán)境或心情時(shí)，并不一定需要顯示完圖像。 

不過，如果你沒有完全理解，并使用的不到位的話，這個(gè)效果可能對(duì)你的網(wǎng)頁設(shè)計(jì)會(huì)造成一定的負(fù)面影響的。此外，將文本放置在許多不同的圖像之上是很難的。由于這些原因，更好的是分離出一個(gè)圖像，并將其與其他圖像相比，以便更突出。 

在上面的案例圖片上，你需要注意的是，圖片在比例上非常刻意的。首先，它將頁面分成兩半，然后將右側(cè)再拆分成相同大小的三個(gè)版塊。

7.教訓(xùn) 

通過上面的描述，我們很快的過了一下一些常見的圖片樣式。但是比例子更重要的是，你是否從每個(gè)例子中獲得了靈感或者說教訓(xùn)。首先，你偶爾可以在整個(gè)網(wǎng)站設(shè)計(jì)的同一版塊中使用兩張不同的照片，通過盡心的編排和混合使其看上去就像是一張照片一樣。請(qǐng)記住，你不必總是以完美的水平或垂直線來設(shè)計(jì)。 

接下來，當(dāng)使用圖像網(wǎng)格時(shí)，請(qǐng)確保你花時(shí)間先設(shè)定了基礎(chǔ)的框架，以使相對(duì)比例正確（除非你要進(jìn)行有機(jī)布局）。通過從周圍的照片中提取突出的顏色，將其他的空隙填充簡(jiǎn)單的顏色以獲得視覺上的關(guān)聯(lián)。實(shí)驗(yàn)較大化網(wǎng)格線的外觀或完全隱藏它們。 

之后，當(dāng)你使用多張照片時(shí)，仍然需要有一個(gè)突出的特色圖像在相比其他圖片時(shí)能夠脫穎而出。你可以在上面大部分的例子中看到這個(gè)。始終建立一個(gè)視覺層次結(jié)構(gòu)，并盡量避免讓頁面上的所有內(nèi)容都具有相同的視覺重量和重要性。

總結(jié) 

我希望這篇文章中的例子和經(jīng)驗(yàn)教訓(xùn)可以讓你獲得一些靈感并思考將多張照片并入你設(shè)計(jì)中的新方式。創(chuàng)建一個(gè)繁忙的，超載的頁面很容易被遺忘，所以請(qǐng)注意使用一些約束，并為了更清楚地展示內(nèi)容而爭(zhēng)取減低這種混亂感。當(dāng)你繼續(xù)在頁面中添加可視元素時(shí)，請(qǐng)記住，在實(shí)際降低設(shè)計(jì)影響的情況下，有一個(gè)遞減的回報(bào)。