網頁設計中排版、色彩、文字以及圖片都是重要的核心,設計師需要適當的運用,才能讓每一個細節都發揮作用,很多時候圖片佔了最大的比例,不過當客戶並無預算購買精美圖庫,又或者自行提供的照片不是那麼恰當,這時候我們該如何在有限的資源下,讓照片為網站加分呢?
適當運用照片
在選擇網站上使用的照片時,首先要做的是釐清目的,先想清楚網站需塑造的氛圍、設想目標族群的觀看視角,最重要的還有置放符合內容的照片,不過此篇就不針對照片與內容相關性做分享了。在照片選擇上可以使用相同拍攝視角、構圖、色調或者同樣具有景深的照片來達到整體性,也可以藉由欣賞其他網站並分析該網站各區置放照片的緣由,久而久知便會更懂得如何運用照片了。
例如軟體開發公司,企業情報需要達到專業形象,目標族群觀看視角設定為聚焦,因此此區就會將照片氛圍設定成明亮、冷色調以及中心構圖來達到想塑造的形象。
照片品質決定網站
在有限的資源內盡量做到最好是設計師常需要做的事,那麼在這種情況下我們就可以運用一些高質感免費商用圖庫來為網站達到效益,又或者是運用這些照片來做為範本,讓客戶了解網站適合置放什麼樣的照片以便客戶自行拍攝後提供照片。
這邊推薦幾個優質的免費圖庫
- freepik
這個網站除了可以下載向量圖以外也有很多高質感照片可以商用,但要記得標註來源。
- Unsplash
知名免費圖庫之一,內有數百萬張的高質量 CC0 照片圖庫,很適合運用在大篇幅網頁區塊,也可以運用插件快速在 figma 中置入照片。
- Pexels
同樣也是高質量的 CC0 照片圖庫,它還能夠讓使用者自行設定尺寸,自動裁切照片。
- EVERYPIXEL
整合型照片圖庫,聚集了50個素材網站,有分付費及免費,頁面上方有個篩選器功能,能夠依據類型、色彩、直橫式來篩選照片,還有兩個特別的點是 Free areas 可選擇照片留白的位置,以及 Isolation 可篩選出單一物件的照片。
- Hiclipart
這是一個設計師共享的去背圖庫網,不過屬於非商業用途,網站本身並沒有負責確認圖片是否侵權的服務,建議還是用於範本就好。
加工照片小技巧
選完照片後會有需要校正照片的情況,運用調整色調、色相、對比度或者是使用同一種濾鏡,只要明確的知道自己要調整的結果,便能將照片加工為想像中的模樣了,這邊也分享幾個基本加工照片的方式:
▪創造相同氛圍-統一色調
假設擬定好網站期望帶給人沉穩的高級感,選擇完照片後卻發現置放在同一頁面不是那麼統一時,可以透過 photoshop 的符合顏色,即可快速將兩張照片達到統一色調的效果,這個方式也適合運用在圖片合成時使用。
▪創造相同氛圍-運用色相及裝飾
在照片上疊上色塊並使用混和模式,或者使用符合整體網站裝飾性的圖形也能營造相同的氛圍,如上圖網站就是將所用照片統一加入藍色及品牌標誌中的圖形來達到網站的一致性。
▪改變印象-校正及裁切照片
當客戶提供照片拍攝角度、光線不同時,我們可利用校正及裁切照片來達到我們想要的效果。例如團隊成員介紹頁面想使其達到展現個人特質的印象,我們就可以將原先以情境取向的照片裁切成聚焦在人的部分,並依據不同照片去微調亮度、對比度、色階、色相,不僅能達到我們期望照片帶來的觀感也能使頁面有一致性。
最後還是要說平時多看多觀摩,甚至是拿起手機拍照練習解析構圖、調整色調,這些除了對網頁設計或其他設計相關領域有所幫助以外,也能漸漸提昇自身美感的。