攝影是你作為設(shè)計師有力的可調(diào)配的資源之一。今天,我們將看看如何通過一些巧妙而獨特的方法來創(chuàng)建使用以多個圖像為中心的多圖集平面設(shè)計。
1.使用多張照片
作為一名設(shè)計師,你一定知道,在任何的設(shè)計上(尤其是網(wǎng)站建設(shè)項目中)通過將你的內(nèi)容保持在較低限度,以保持干凈,易于瀏覽的頁面總是符合視覺審美并且能夠較大限度發(fā)揮設(shè)計本身的作用的。將一個主要圖像與一些附帶的文本搭配起來一起使用這是設(shè)計中基礎(chǔ)的排版樣式了,盡管簡單,但它可以用于很多目的,當(dāng)你正式開始針對客戶的需求做設(shè)計時,你通常會有一個完整的文件夾,其中包含你希望使用的各種資源。
作為設(shè)計師,很難找出一種有吸引力的方式將各種圖像混合成一個連貫的布局,特別是如果你從事的是類似于平面打印而不是無限制的交互式空間時。你可以通過快速閱讀以下提供的案例,以便節(jié)省你的時間。 隨意竊取這些想法,并將其用作你自己的!
2.將他們擺放在一起
全屏照片可以成為一個非常有吸引力和醒目的頁面元素。通常情況下,設(shè)計師會放棄只通過使用一張完整照片的想法和一般的布局,轉(zhuǎn)而使用包含兩個圖像或更多圖像的拼合式照片。
幸運的是,創(chuàng)建一個包含兩個圖像的較大化布局非常容易。對于初學(xué)者來說,你可以嘗試通過分割頁面為相同的兩個或多個版塊,給每個版塊平等的空間。
正如你所看到的,以上案例中,文本本來很難直接放在照片上的,僅僅只是通過一條黑色的條紋背景,你就可以在強調(diào)標(biāo)題的的同時,使文本和圖片更容易識別。為了防止強硬的顯示效果,你可以試著在文本區(qū)域下將兩個圖像模糊拼貼在一起。
這種效果不僅對于顯示相關(guān)圖像,而且對于顯示具有二元性概念的主題都是非常好的:柔軟和堅硬的紋理,白天和黑夜的界限等。
· 不要非得是規(guī)矩的形狀
你可以把這種概念牢記在心,而對于網(wǎng)頁設(shè)計的視覺表現(xiàn)上,你可以根據(jù)需要自由發(fā)揮,你可以實現(xiàn)很多不同的效果。例如,在下面的設(shè)計中,通過創(chuàng)建內(nèi)容相當(dāng)?shù)牡湫退骄€條的對角條紋,將兩個圖像以及一個文本內(nèi)容分割開。
這里你需要稍微注意的是,在這個案例中,它已將所有內(nèi)容保持正常輪播。文本和圖像都不對角,只有它們的形狀具有這種特征。這樣可以讓一切看起來都剛剛好,易于閱讀/解讀,同時也可以讓你的網(wǎng)站設(shè)計更具獨特的布局。
3.照片網(wǎng)格
一個非常受流行和非常實用的方式,是將圖像整理成一個單一的頁面通過將它們排列在一個網(wǎng)格中(這種形式一般我們經(jīng)常在網(wǎng)站設(shè)計里會使用到)。
在下面的例子中,通過一開始在Photoshop中創(chuàng)建符合大致內(nèi)容區(qū)域的正方形網(wǎng)格(這是確保你獲得正確比例的重要一步,并從長遠來看節(jié)省了大量麻煩)為接下來的圖片混合設(shè)定了基礎(chǔ)范圍。從這里你只需放入幾個圖像,并將它們設(shè)置成在整個網(wǎng)格框架內(nèi)的不同形狀。
正如你所看到的,我將未擺放圖像的空間填滿了鮮艷的顏色,而這些顏色并不是隨意選取的,而是從周圍的圖像中吸取的色系,這就形成了整個版塊的相關(guān)性。相信你跟我一樣,總是想確保你在設(shè)計中使用的任何填充顏色與攝影相適應(yīng),并且方式之一是從圖片中獲取顏色。
· 創(chuàng)建網(wǎng)格線
像上面看到的基本網(wǎng)格布局有很多種不同的變體。嘗試弄亂單個單元格的大小,顏色填充與圖像的比例等。
一種非常常見的技術(shù)是通過創(chuàng)建清晰的分離來強調(diào)個別照片?;旧?,只要在每張照片的邊緣周圍做一個濃厚的白線,你會得到一個不同但同樣有吸引力的效果。
4.編輯感
如果你希望在你的網(wǎng)頁設(shè)計中加入更多的編輯外觀,請嘗試下面的這種布局。在這里,我們主要以一幅圖像為主要的視覺點,然后通過文本內(nèi)容提取出相關(guān)的另一個圖像。這與上面簡單的網(wǎng)格版本很相似,只是使用較少的照片而已。
關(guān)于在單一設(shè)計中使用多張照片的一個簡單技巧:始終確保顏色順利進行。當(dāng)創(chuàng)建諸如上面的布局時,主圖像和文本區(qū)域采取黑色和白色的視覺分割,而次要圖像是彩色的,并具有非??岬陌灼胶狻K{色的光線會對我的配色方案造成嚴(yán)重破壞,所以我通過調(diào)整圖像的飽和度,突然兩張照片看起來就像是單拍的。
5.圖片文本
將圖像融入到文本中在我的我的網(wǎng)站設(shè)計中經(jīng)常被用到,并在近期的幾篇文章中我都有簡述到這一點。在這里,我們可以更直觀的看到它是一種以微妙的方式在另一張相關(guān)照片中工作的方式。
由于圖像的主要形象是木橋,所以我抓住了一個木質(zhì)的紋理。結(jié)果真的將文本與下面的照片很好地聯(lián)系在一起,甚至比一個簡單的顏色填充更能符合視覺和感覺的需求。
6.豎狀排版
我們的建議是使用垂直的塊狀布局,當(dāng)你嘗試創(chuàng)建一個整體環(huán)境或心情時,并不一定需要顯示完圖像。
不過,如果你沒有完全理解,并使用的不到位的話,這個效果可能對你的網(wǎng)頁設(shè)計會造成一定的負(fù)面影響的。此外,將文本放置在許多不同的圖像之上是很難的。由于這些原因,更好的是分離出一個圖像,并將其與其他圖像相比,以便更突出。
在上面的案例圖片上,你需要注意的是,圖片在比例上非??桃獾摹J紫?,它將頁面分成兩半,然后將右側(cè)再拆分成相同大小的三個版塊。
7.教訓(xùn)
通過上面的描述,我們很快的過了一下一些常見的圖片樣式。但是比例子更重要的是,你是否從每個例子中獲得了靈感或者說教訓(xùn)。首先,你偶爾可以在整個網(wǎng)站設(shè)計的同一版塊中使用兩張不同的照片,通過盡心的編排和混合使其看上去就像是一張照片一樣。請記住,你不必總是以完美的水平或垂直線來設(shè)計。
接下來,當(dāng)使用圖像網(wǎng)格時,請確保你花時間先設(shè)定了基礎(chǔ)的框架,以使相對比例正確(除非你要進行有機布局)。通過從周圍的照片中提取突出的顏色,將其他的空隙填充簡單的顏色以獲得視覺上的關(guān)聯(lián)。實驗較大化網(wǎng)格線的外觀或完全隱藏它們。
之后,當(dāng)你使用多張照片時,仍然需要有一個突出的特色圖像在相比其他圖片時能夠脫穎而出。你可以在上面大部分的例子中看到這個。始終建立一個視覺層次結(jié)構(gòu),并盡量避免讓頁面上的所有內(nèi)容都具有相同的視覺重量和重要性。
總結(jié)
我希望這篇文章中的例子和經(jīng)驗教訓(xùn)可以讓你獲得一些靈感并思考將多張照片并入你設(shè)計中的新方式。創(chuàng)建一個繁忙的,超載的頁面很容易被遺忘,所以請注意使用一些約束,并為了更清楚地展示內(nèi)容而爭取減低這種混亂感。當(dāng)你繼續(xù)在頁面中添加可視元素時,請記住,在實際降低設(shè)計影響的情況下,有一個遞減的回報。
非常感謝您訪問我們的網(wǎng)站
在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:021-67669186?電子郵件:coo@tqchina.cn
提交信息后,專屬顧問將會在1個工作日內(nèi)與您聯(lián)系。
立即咨詢 18917551869