本文從找圖、圖片比例到降噪方法、后期處理技巧、運用須知等全方位總結了關于圖片設計的基礎知識,
今天給大家分享的是關于圖片設計的那些事兒,希望今天的分享可以讓你知道圖片的重要性以及圖片在設計中的一些基本處理技巧。
圖片在設計中的定位就如同一個人的衣著品味,不同的穿衣風格會使別人對你作出不同的判斷,為你打上不同社會屬性的標簽。隨著用戶對各類體驗的不斷升級,商家也在各種細節上面不斷優化,對于圖片的要求也不斷加以重視。今天給大家分享的就是關于圖片的那些事兒,希望可以帶給你更多幫助。
本文將從圖片在設計中的重要性開始解析,加強大家對圖片的認知;再從圖片比例、后期處理技巧、設計中的運用須知等方面分享關于圖片在設計中的處理經驗;最后也會分享一下我們在尋找合適的圖片過程中的方法與后期圖庫的管理經驗。
相信圖片在設計中的重要程度對于設計師來說已經了然于胸,雖然大家都會選擇更好的圖片資源來進行設計,但是依然還有很多需要設計師注意和把控的地方,下面我們一起來看看。
越來越多的產品對圖片質量開始加以重視,比如網易嚴選對產品圖片的拍攝與處理都有嚴格的規范,目的就是為了提升產品氣質和在用戶心中的印象。我們在設計的時候更要以最佳的圖片來烘托我們的設計稿,圖片的質量影響著整個設計的格調。
在產品設計中,很多伙伴會覺得圖片都是后期運營上傳的,我設計稿做得再精美最終也是沒用的。對于這個問題我的觀點是這樣的:
雖然前面提到圖片質量的重要性,但是我們不能為了視覺效果選擇一些與主題無關的配圖,這樣也會給決策者一種誤導。我們可以提高配圖的質量,但是需要保證圖片的真實還原,這樣才能讓你的設計作品更加真實合理。
在一些本土的產品設計中,對于國外圖片素材的運用,需要謹慎對待。如案例中的模特形象,文案信息的傳達更加偏向于國內的場景,如果運用一張國外的模特素材也許格調更高,可是卻無法真實的還原產品場景,會給決策者傳達一種錯誤的認知。
關于版權這個問題往往還有很多設計師不以為意,要么是壓根就沒注意這個問題的重要性,要么就是抱著僥幸心理。我們作為專業的設計師,不僅需要保護和維護自身權益和公司利益,對于作者的尊重也是基本的職業素養。
在項目中面對圖片版權問題我們要主動告知需求方,這樣我們盡到了職業義務,也讓需求方能夠做出正確的判斷。
在對產品界面進行布局的時候,圖片的比例往往被大家所忽略,憑著自我感覺任意選擇一個整數數值進行設計,在多個地方出現相同內容圖片的時候也會尺寸混亂,這樣無形中增加了前后臺的規范性和存儲壓力。
下面從項目中常用的圖片比例和需要注意的地方給大家進行分析,也給大家分享一下圖片比例的選擇方式,在整套產品設計中需要保持一致性等問題。
不同比例的圖片所傳達的信息主體不盡相同,根據產品屬性我們會選擇與之相符的圖片比例進行整體的界面布局。
通過體驗一些主流的產品,我們會發現比較常用的圖片比例,如 1:1、2:1、3:1、3:2、4:3、16:9、16:10 等等。也會發現一些打破常規比例的設計,我們需要分析它們的性格,結合自身產品的特點,才能在自己的產品設計中合理地運用。
下面選擇幾個常用比例進行分析,希望拋磚引玉,帶給大家更多的思路。
1:1 強調主體的存在感
1:1的圖片比例是比較常見的一種設計比例,利用此長寬比更容易將構圖歸整得簡單,突出主體的存在感。常用于產品展示、頭像、特寫展示等場景,在電商類產品中尤為常見,如:淘寶、網易嚴選、網易考拉等。
在產品設計中通常以兩欄或以上為主,通欄展示的情況一般用于商品詳情頁頭圖部分展示居多,其余界面布局較少利用通欄展示。
4:3 圖像緊湊、更易構圖
4:3的圖片比例可以使圖像更緊湊,更易構圖,方便設計師進行發揮。由于手機屏幕容量較小,作為全屏展示時,該比例在產品設計布局上面占用空間較大,通常我們作為分欄來進行界面布局。
對于設計師來說,這個比例經常接觸,站酷、Dribbble 等的作品封面,在攜程、廚房故事等產品中也均采用這個比例。
16:9 電影場景般的效果
16:9的圖片比例可以呈現電影場景般的效果,多用于橫向構圖,是應用非常廣泛的尺寸比例之一,能給用戶一種視野開闊的體驗。在很多影視娛樂類產品設計中運用廣泛,如騰訊視頻、網易云音樂等。
16:10 擁抱黃金比例
黃金比例就像金字塔上的明珠,越接近她越有魅力,16:10的圖片比例最為接近。設計沒有絕對的標準,我們可以遵循一些優秀的規則,但是也要敢于突破規則,嘗試更多的可能性。
X:≤Y 瀑布流設計
X:≤Y代表寬度固定,高度在最大值之間自定義的瀑布流設計,在一些用戶沒有很明確的目的,只是喜歡獲取盡量多的信息的情況下采用這種設計方式。X:≤Y的圖片比例要注意高度的控制,最大值不要超出屏幕可顯示區域的范圍。
以上列舉的僅為部分常用比例的分析與說明,還有更多的比例這里就不一一演示,分享的目的是讓大家養成分析的習慣,結合自身產品特點選擇適合的圖片比例。
圖片比例選擇方式:
當我們結合產品特點確定合適的圖片展示比例以后,需要針對整體的布局與圖片分布情況,規范出那些布局可以采用相同的圖片展示比例。在保障視覺效果與交互形式的情況下,相同的主體,在不同的頁面中最好采用相同的比例呈現,這樣的好處不僅可以保持視覺表達的一致性,也能給后期運營維護帶來便利。
如果說公司有專業的攝影團隊,那么對于圖片的需求相對會容易滿足。對于大部分的團隊來說設計師找圖與處理圖片都是比較日常的工作,在產品設計里面,雖然不一定能夠達到專業修圖師的精修標準,但是比較常見的處理技巧還是需要掌握的。
在項目中,我們會通過一些圖庫網站去尋找合適的配圖,但是想要剛好滿足還是比較難的,對素材進行裁切來突出我們想要的部分是比較簡單的圖片處理技巧。
實際生活中拍攝的照片總會出現很多干擾主體的內容,裁切掉多余的內容突出主體信息。裁切后的圖片構圖更緊湊、凝聚,主體更具吸引力。這也是我們說的對圖片進行降噪,排除多余的干擾。
當系列圖片進行排版時,需要保持圖片比例尺寸的統一性,當我們在多個圖片素材之間進行裁切處理時,需要以最小裁切空間的圖片為示例去裁切其它圖片,這樣才能保證最終的展示效果。
如果是人物圖片,需要注意人物眼睛的視平線,讓眼睛的位置盡量保持在水平線左右。
當我們在選擇人物圖片的時候,一張特寫鏡頭能傳達一種眼神與眼神交流的感覺,在進行裁切的時候要以視平線為準進行縮放裁切,可以保留眼神的交流感。圖片放得越大,眼神的交流感就會越強。
我們在選擇圖片的時候,如果是如同城市建筑等類型的垂直主體時,我們需要注意主體物與地平線的垂直關系。如果構圖特意需要傾斜的效果另當別論,否則我們將會優先考慮這個因素,選擇主體垂直的圖片或者后期微調讓主體垂直地平線,這樣整個畫面更加協調穩定。
在選擇圖片時如果有明顯地平線的照片,需要注意地平線是否平行。地平線的平行將會有助于畫面感的協調,如果遇到想要體現特殊效果,如體現速度感、突破畫面張力、營造不穩定性、強化某種視覺效果等,也會特意打破地平線的平行。在調整地平線平行時,可以通過軟件的變形工具等對圖片進行后期處理。
有時候一張普通的圖片并不能引起我們的注意,但是我們通過局部放大突出單一的主體特征時,往往可以獲得更好的視覺效果。放大后的主體構圖更加飽滿,視覺效果更強烈。
局部特征放大到一定程度的時候主體信息會被淡化,為極端的處理方式。這樣處理出來的圖片主體將會無法識別,極端的裁切方式常用于背景的使用。我們也可以通過 Photoshop 軟件的高斯模糊等工具進行處理,形成一些特殊色彩融合的背景圖片。
在進行圖片裁切的時候,不一定總是將視覺主體放置在畫面中心點,將視覺主體放置在三分處也許可以增加更多樂趣。如果當畫面中主體是人物時,可以考慮將人物主體或者視平線放置在三分處。
面對一些人物圖片,我們在進行裁切的時候需要注意人物的發際線。在裁切人物發際線時就會聯想到禿頭,因此不要太靠近人物發際線,留下足夠的頭發,不要過度裁切,以免影響人物形象。
以上列舉了一些常用的處理形式,更多的形式希望大家多多的總結,在設計中考慮到每一個細微的元素差別。
噪音會對我們的生活造成干擾,我們喜歡安靜的環境。對于圖片的處理也有降噪的說法,可以讓畫面感更加簡潔,主體更能突顯。
下面給大家分享一下找圖前的降噪思考和后期處理進行降噪的經驗。
在選擇圖片的時候,要盡量選擇主體表現突出,沒有過多信息進行干擾的圖片。我們要明確主題,尋找的圖片要能單一的表現這個主題,如果一張圖片中表現多個信息源的時候,會給人一種信息干擾。
我們在拍攝商品展示圖的時候就是考慮這個因素,盡量用最簡單的背景來襯托,其它的物體元素僅僅作為裝飾出現,不會搶占主體物的呈現效果。
有時候沒辦法通過自行拍攝獲取圖片,我們在通過圖庫網站尋找圖片的時候也不一定要剛好達到心中的標準,可以用設計軟件進行后期處理,通常運用 Photoshop 軟件居多。
對于一些背景比較雜亂的圖片,我們為了更加統一視覺效果,讓主體更加突出,會通過去底來進行降噪,特別是在展示商品圖片的時候。
去掉底色后一般會有幾種處理方式來襯托主體:
通過以上的一些分享我們可以掌握圖片的基本處理方式,在進行運用的過程中會有很多需要注意的地方,比如關于結合卡片式布局的時候內外圓角的關系以及對圖片設置投影的注意事項等。
現在很多產品布局都運用了卡片式,如果對卡片進行圓角設置以后,對于卡片內部的圖片通常也會設置一點小圓角。設置的數值由卡片外圓角數值減去它們之間的間隙數值,如果算出來的數值為負數,原理上圖片不做圓角設計也是可以的,只是為了整體風格的統一,我們通常會設置一個小圓角。
如果我們設計需要不斷更新的圖片,通常不建議設置投影,因為圖片配色風格、色彩比重、明暗程度等不同,都會影響投影的效果。
在相同投影參數設置的前提下,淺色風格的圖片會顯得投影重,深色風格的圖片會顯得淡。這樣的反差會影響我們對圖片的選擇。如果圖片都是用戶隨機上傳的,我們是很難進行控制的。
但在一些特殊固定的場景,圖片都是設計師可以把控的前提下,我們可以根據圖片的情況不同來區別對待投影的參數。
掌握了各種圖片處理的技巧,但是能夠找到更加合適的圖片資源,將會大大降低我們的處理工作量,也能帶來更好的效果。找圖相對比較耗費時間,大家在平時要利用空余時間多進行體驗,看到質量好的圖片先進行分類收藏,需要的時候可以根據分類去尋找。
我們不僅要善于利用圖庫網站和關鍵詞發散來進行找圖,也要養成良好的習慣,可以關注更多的優質畫板,也可以創建屬于自己的圖庫資源。
現在圖庫的網站也很多,我們在選擇圖片的時候也要注意版權說明,可以下載使用并不代表作者進行了原創授權,在進行商用的時候還是需要了解詳情,找一些具備正版授權的正規平臺。
當我們在一些平臺發現優質的圖片資源時,可以進行采集和分類,如果圖片有編號,可以在存儲的時候把編號備注在名稱上,方便以后需要高清大圖時可以通過編號進行搜索。
我們在利用圖庫網站搜索圖片的時候可以利用圖片信息篩選更大尺寸;利用相似圖片功能可以搜索更多類似資源;點擊圖片可以進到原始出處,可以找到更多系列主題下的資源。在百度識圖、站酷海洛等平臺里面,設計師可以利用以圖搜圖功能在圖庫里面找尋高清正版圖片。
推薦一些常用的圖片網站給大家:站酷海洛、500px、1x、Pinterest、unsplash、foodiesfeed等等。網站很多,根據自己需求選擇使用即可。
現在找圖片的網站很多,但是我們要善于進行一些關鍵詞發散,有些資源直接搜索不一定能夠找到合適的。
舉一個簡單的例子來說一下關鍵詞發散的作用,比如圓形和香蕉是沒有本質聯系的,但是通過關鍵詞發散就會產生關聯,圓形→西瓜→水果→香蕉。對圖片資源來說原理相似,比如我們要找一張美女圖片,搜索的關鍵詞不一定是「美女」,這個關鍵詞進行發散可以衍生出時尚雜志、街拍、模特、氣質、時尚大片、穿搭等等,這樣通過發散出來的關鍵詞也許能找到更加符合的圖片資源。
每個人的審美和設計感覺都不一樣,也會影響最終作品的效果。方法技巧都可以短時間來提升,但是設計感覺是需要長時間進行熏陶的。我們可以關注一些優秀的設計師,關注他們創建的畫板和分享的資源,讓他們的審美能力成為你的一層過濾網,幫你篩選掉一些劣質的資源。
我們也可以通過老司機們關注的設計師或者畫板來尋找出更多的優質資源,通過關系鏈可以讓你認識和發現更多優秀的設計師。
很多設計師會忽略日常資源采集的重要性,總是在需要的時候才去尋找想要的資源,但總是徒勞。也有很多通過一些途徑一次性獲得上百G資源,內心滿是喜悅,以為從此設計無憂,卻不知后面似乎也沒什么用……你肯定還有更多類似的情況。
俗話說有備無患,養成良好的設計習慣很重要。日常的采集習慣將會給設計師帶來大量靈感和提升執行效率,設計做不好其中部分因素就是靈感素材沒有找對。
建立靈感圖庫相當于形成一本字典,當你需要的時候可以進行查詢;閑暇的時候可以進行回顧,去挖掘一些優秀作品背后的軌跡,以便能夠運用到后期的項目中,提升工作執行效率。
隨著用戶對體驗的要求不斷提升,我們需要從各個方面加強設計細節,圖片資源的好壞不僅傳遞的是商品的品質,也能夠體現產品的格調。希望今天的分享可以帶給大家對圖片的認知,在后期產品設計的過程中可以考慮得更全面,如有補充歡迎留言互動。