近些年來,攝影圖片作為背景填充整個屏幕的設計越來越廣泛,曾經只有時尚潮流網站或者攝影類站點才會特別依賴富有沖擊力的圖像,但是現在幾乎任何類型的網站都有可能采用這種大圖片作為背景,特別是企業品牌宣傳、產品介紹等等。

在設計網頁過程中,需要用到大量的圖片,而且找到的圖片大多風格迥異、無品牌感,那么如何找到合適而又能正確地應用圖片呢?
如何正確選擇處理攝影圖
整理了一些經驗總結供大家參考:
1 .提煉關鍵詞尋找圖片
首先需要提煉產品特性關鍵詞,通過關鍵詞的形式尋找合適的圖片。

上 圖是google云盤官網banner背景為一張在飛機向外看的圖片,不難發現用這種比擬手法來表現云盤的口號“隨時隨地使用”,在任何時候、任何地點都 可以使用文件。換位思考,假如我們來設計google云盤官網,首先提煉出關鍵詞:隨時隨地、自動同步、超大空間等等,用最能突出特點和有代表性的關鍵詞 來尋找合適的圖片。

上圖是IBM旗下的MobileFirst產品,其主要為用戶移動應用從創建到維護推出的一體化解決方案為廣大用戶提供更便利服務,那么根據項目提煉出關鍵詞:手機、用戶,該網站用了一張人拿著手機進行使用的圖片,目的是為了突出項目的業務特點。

上圖分別為蘋果官網、研究無線電技術企業——高通的網站中運用的圖片同樣也是通過產品特點提煉的關鍵詞來完成圖片的選用。
2. 圖片品牌化
什么是圖片品牌化?通過關鍵詞尋找到的圖片進行深度加工處理,使之在項目中運用到的圖片都是一整套的、風格統一的,比如可以在圖片的色調、色彩飽和度與特色風格上做調整等等,下面舉幾個案例。

Google Drive官網摘取出來的圖片,這些圖片不難發現無論在色調、色彩飽和度上是一致的,特點是低飽和度、顏色深沉和圖片噪點,顏色上新穎有特色、風格上具有明顯的品牌統一性。

上圖為SAP公司官網的系列圖片,作為全球最大的B2B企業為各行各業、不同規模的其他企業提供解決方案,正如它運用不同行業場景的圖片一樣:色彩豐富、但色調又不過于鮮艷,它們所有用到的圖片都有這些特點。

美國高通網站的品牌宣傳圖片讓人印象深刻,品牌特點獨樹一熾,顏色上運用冷暖搭配,加以漸變效果巧妙地疊加于圖片上,雖然顏色種類不多,但能在風格、品牌上具有強烈的統一性,讓人對品牌辨識度有更加深刻的記憶性。
3. 背景搭配前景內容
有 的設計師聰明地將攝影圖同時作為背景和前景元素,對巨幅背景圖做的這種變通深得我心。在這些設計中,照片以裝飾性的形式填滿整個背景。同時突顯了照片中的 某些元素。這通常是通過縱深來實現的,產品或前景元素被置于焦點區域。這種視覺區域的混合,使照片具備一種格調,同時內容也意圖鮮明。這種頗具挑戰的方 式,需要對照片有所規劃和協調,以下是我最喜歡的一些案例。

4. 運用單色傳遞情感
設計師將照片轉為單色,尤其是非黑白的方式。盡 管多數時候,這或許是風格上的決策,但我認為不止于此。顏色可以確定基調,傳達出微妙的信息。通過在照片中運用單色調,設計師能反映出單一的情感。藍色使 人感到安全、穩固和協同。紅色使人感覺興奮、鮮活、充滿能量,諸如此類。通過將照片轉為單色風格,它呈現出一種新的傳達方式。


[url=https://thoughtbot.com/][/url]
5. 秩序條理的整理術
整理術是將物體平行或者90度排列,來創造一種條理。這種方式非常小眾和獨特,設計師們很少使用這種風格。同樣 的,這種風格通常和潮流風設計有關,但不止于此。這些照片反映出內容之外、照片本身的含義(這當然是有意義的)。它們暗示著照片背后的品質,透露出一絲秩 序、方法和條理。這些是好的品質,尤其是用來指代設計師和機構。


總結
攝影圖片作為背景的設計風格,這種設計方式雖然非常強有力地抓住用戶的注意力,能準確應用圖片而達到更大的體驗效果是非常重要的,如果去掌握,了解項目背景,不能盲目運用。
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節把握2010-09-01
總結交互組件創新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
5個網站設計實例解析網頁設計趨勢
相關文章4452018-11-29
實例分析9款驚艷的網頁設計作品
相關文章5142018-10-10
10種網頁設計中字體的運用方式
相關文章3472018-05-10
優秀的網頁設計和開發資源干貨集合
相關文章5102018-05-10
精選5月最流行的網頁設計趨勢
相關文章4832018-05-10
詳細解析10個2018年網頁設計趨勢
相關文章5182017-12-17
設計師須知的已過時的網頁設計趨勢
相關文章3012017-12-11
神秘的黑色主題網頁設計配色技巧
相關文章4112017-11-17
