一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home 美感養成

照片選用基本原則

in 美感養成
by Niki
12 月 16,2020
3 min read

網頁設計中排版、色彩、文字以及圖片都是重要的核心,設計師需要適當的運用,才能讓每一個細節都發揮作用,很多時候圖片佔了最大的比例,不過當客戶並無預算購買精美圖庫,又或者自行提供的照片不是那麼恰當,這時候我們該如何在有限的資源下,讓照片為網站加分呢?

適當運用照片

在選擇網站上使用的照片時,首先要做的是釐清目的,先想清楚網站需塑造的氛圍、設想目標族群的觀看視角,最重要的還有置放符合內容的照片,不過此篇就不針對照片與內容相關性做分享了。在照片選擇上可以使用相同拍攝視角、構圖、色調或者同樣具有景深的照片來達到整體性,也可以藉由欣賞其他網站並分析該網站各區置放照片的緣由,久而久知便會更懂得如何運用照片了。

pronets website
來源:PRONETS

例如軟體開發公司,企業情報需要達到專業形象,目標族群觀看視角設定為聚焦,因此此區就會將照片氛圍設定成明亮、冷色調以及中心構圖來達到想塑造的形象。

照片品質決定網站

在有限的資源內盡量做到最好是設計師常需要做的事,那麼在這種情況下我們就可以運用一些高質感免費商用圖庫來為網站達到效益,又或者是運用這些照片來做為範本,讓客戶了解網站適合置放什麼樣的照片以便客戶自行拍攝後提供照片。

這邊推薦幾個優質的免費圖庫

  • freepik
    這個網站除了可以下載向量圖以外也有很多高質感照片可以商用,但要記得標註來源。
  • Unsplash
    知名免費圖庫之一,內有數百萬張的高質量 CC0 照片圖庫,很適合運用在大篇幅網頁區塊,也可以運用插件快速在 figma 中置入照片。
  • Pexels
    同樣也是高質量的 CC0 照片圖庫,它還能夠讓使用者自行設定尺寸,自動裁切照片。
  • EVERYPIXEL
    整合型照片圖庫,聚集了50個素材網站,有分付費及免費,頁面上方有個篩選器功能,能夠依據類型、色彩、直橫式來篩選照片,還有兩個特別的點是 Free areas 可選擇照片留白的位置,以及 Isolation 可篩選出單一物件的照片。
  • Hiclipart
    這是一個設計師共享的去背圖庫網,不過屬於非商業用途,網站本身並沒有負責確認圖片是否侵權的服務,建議還是用於範本就好。
  • pngimg
    收入了兩萬多張去背圖,屬於 CC4.0 圖庫,若需要合成或製作範例非常推薦,網站也很貼心的做好分類,讓你快速找尋。

加工照片小技巧

選完照片後會有需要校正照片的情況,運用調整色調、色相、對比度或者是使用同一種濾鏡,只要明確的知道自己要調整的結果,便能將照片加工為想像中的模樣了,這邊也分享幾個基本加工照片的方式:

▪創造相同氛圍-統一色調
圖片來源:Pexels

假設擬定好網站期望帶給人沉穩的高級感,選擇完照片後卻發現置放在同一頁面不是那麼統一時,可以透過 photoshop 的符合顏色,即可快速將兩張照片達到統一色調的效果,這個方式也適合運用在圖片合成時使用。

▪創造相同氛圍-運用色相及裝飾
來源:三谷産業株式会社

在照片上疊上色塊並使用混和模式,或者使用符合整體網站裝飾性的圖形也能營造相同的氛圍,如上圖網站就是將所用照片統一加入藍色及品牌標誌中的圖形來達到網站的一致性。

▪改變印象-校正及裁切照片
圖片來源:Pexels

當客戶提供照片拍攝角度、光線不同時,我們可利用校正及裁切照片來達到我們想要的效果。例如團隊成員介紹頁面想使其達到展現個人特質的印象,我們就可以將原先以情境取向的照片裁切成聚焦在人的部分,並依據不同照片去微調亮度、對比度、色階、色相,不僅能達到我們期望照片帶來的觀感也能使頁面有一致性。

最後還是要說平時多看多觀摩,甚至是拿起手機拍照練習解析構圖、調整色調,這些除了對網頁設計或其他設計相關領域有所幫助以外,也能漸漸提昇自身美感的。

Tags: UI網頁設計
ShareShareShare
Niki

Niki

視覺設計師,期許每一個人都能帶著快樂的心從事設計。

上一篇文章

為網站內容選擇適合呈現方式

下一篇文章

網路購物,為什麼要填這麼多欄位啊?

相關文章

近期 UI/UX 設計資源精選分享!

一塊特別企劃|近期 UI/UX 設計資源精選分享!

by Debby
5 月 02,2023

你平常有哪些關注的 UI/UX 部落格或 IG 以獲得最新設計靈感? 除了工作上要不斷地輸出設計想法,平日會從哪些地方輸入這些設計 Tips 或設計新知呢?本月...

工作五年後最大的轉變

一塊特別企劃|設計師/工程師工作五年後最大的轉變

by Judy Shyu
3 月 31,2023

這個企劃是透過每月一問六答,讓團隊成員能夠回應一些與設計職涯、設計工作內容相關的問題,加強彼此之間的交流和分享,也希望能藉此讓大家有更多闡述自己想法的機會! 那...

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答 Part2

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) AI (1) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (27) UX (19) web design (1) Wordpress (2) 一塊特別企劃 (8) 字體 (7) 專案管理 (1) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (31) 網頁設計 (21) 設計問答 Part 2 (10) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (6)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書