萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 如何為網站搭配圖片

如何為網站搭配圖片

   網頁設計師就像攝影師和畫家一樣,他們為了安排網站的字體、功能花費了大量的心血。我往往因為網站的版式的細節設計而喜歡上它。盡管我是簡潔化用戶體驗的忠實擁護者,網站的小細節卻是我被吸引的原因。

  我將會提供一些如何為網站配圖的小竅門。不是每個頁面都需要圖片,但它們能使平談的文字內容變得整潔生動起來。不幸的是,圖片資源太多了,一個不小心就會使用不恰當從而拉低整個頁面的檔次。如果關注圖片質量,你就可以在最終的布局安排上游刃有余。

如何為網站搭配圖片 三聯

  構圖

  或許網頁配圖中最難掌握的就是構圖。圖片擺放的位置就和它的內容一樣重要。每個獨立的部分需要彼此平衡一致,從而構成有感覺的整體。

  圖片經常用來強調或是闡明某個內容。當訪問者第一次踏進你的網站,他或許就注意到了那張你辦公室或是工作室的照片的背景圖。它會給用戶這個網站更加私人化的感覺。相反地,你也會用縮略圖去強調頁面中的某些內容。

  在我看來,構圖的選擇總是有限的,無論為了 “看起來更好”做出怎麼樣的改變都要基於項目需要。我的建議是參考其他你欣賞的相近的網站。找出一個優秀的網站,盡管它可能與當前的項目沒有密切的關系。

  通過學習其他設計師的作品,你可以妥善完成自己的項目。整合你的想法並重新構建和安排網站內容,你可以誕生好的網站。學習那些給你啟發的網站,從中挑選出對你網站有用的部分,而不要被其他部分分散注意力。

  網頁頭部和大背景

  之前我也過一篇關於網頁大圖的設計思想的文章。這一趨勢已經流行了許多年,只是最近才頻頻出現在大眾面前。現在越來越多的設計師注意到了圖片的重要意義,這也成為了一個研究方向。但我認為一些最出彩的設計是網頁的頁頭和橫幅。

  簡單來說,背景大圖一般是指一張較大尺寸的處於頁頭附近的攝影或插圖。它常常會給予訪問者關於網站的最直觀的印象,體現網站內容的潛在含義。良好的圖片編輯技巧可以使得背景大圖在各種浏覽器和各種尺寸的屏幕上都可以完美呈現。

  你如何才能將大圖和你做的完美結合起來呢?首先我認為要弄清楚從你的設計風格體現出的網站類型。創新型公司或個人常常會使用特別設計的圖片來體現個性化風格。電商網站往往將產品展示在其中以吸引顧客去浏覽他們的商品。

  大圖和標題首先應當能夠做到對現有內容的延伸和拓展。如果網頁的布局有些令人迷惑,你需要利用圖片作出適當的補充。在最終決定之前多花時間考慮一下多種選擇總是不錯的。

  尋找合適的資源

  如果有條件的話,我強烈推薦自己拍攝圖片。它會更加貼切主題,過程也會更加從容。但可惜的是,你需要你一個性能很好的相機,一些 攝影技巧,以及與客戶的商務或位置產生直接聯系。

  學習如何攝影完全依靠練習——就像數字設計。一旦你掌握了一切就會變得無比有趣!但是我知道不是每個人都是這樣的,所以我們還有其他選擇。

  如果你不會攝影也不能找到一個攝影師,最後的方法就是圖片資源庫。但是很多圖庫的圖片只有一些笑得很燦爛的模特站在舞台上的圖片,避免這些質量低下的圖庫吧。記住要選擇那些更加專業的圖庫去挑選和網站內容相關的圖片。

  我首推的免費圖庫就是Pexels。它是一個為用戶提供免費圖片的網站。所有的圖片都有創作共享許可,這意味著你可以在所有項目裡免費使用它們。

  它的搜索功能非常強大,所以你可以搜索到你需要的高質量圖片。我推薦的圖庫網站還有 Gratisography 和Unsplash.它們都有也許難操作,所以我更喜歡Pexels。但是它們也很優秀所以推薦你收藏。

  照片及後期處理

  任何想學習攝影的人就應該立即行動起來。入門使用傻瓜相機並沒有什麼不妥,你可以借此學到很多有關構圖和架構的知識。但是一旦你更有自信了,完全可以入手一台便宜的單反相機。

  學習攝影就是學習一門技術。獲得基礎知識所花的時間並不需要你想的那麼久,但是確實需要花費一些精力。

  練習攝影之外,你的PS技術也會有所長進。Photoshop是最強大的圖片編輯軟件你可以將圖片加工成任何你能想到的樣子。首先要學習的是如何將物體從背景中摳出來。當你需要在你的頁面中加入一個人物或物體,這項技能很有用。

  在設計過程中切忌過於悲觀,跳出既有的思維創作會更有用。試試15張不同的圖片,看看哪一張最搭你的網站。或是學會新的圖片編輯處理技巧。當你不斷地練習,總會學到更多創造出更好的東西。

copyright © 萬盛學電腦網 all rights reserved