今天給大家分享的是關(guān)于圖片設(shè)計的那些事兒，希望今天的分享可以讓你知道圖片的重要性以及圖片在設(shè)計中的一些基本的處理技巧。

 

 

 

 

圖片在設(shè)計中的定位就如同一個人的衣著品味，不同的穿衣風(fēng)格會使別人對你作出不同的判斷，為你打上不同社會屬性的標(biāo)簽。隨著用戶對各類體驗的不斷升級，商家也在各種細(xì)節(jié)上面不斷優(yōu)化，對于圖片的要求也不斷加以重視。今天給大家分享的就是關(guān)于圖片的那些事兒，希望可以帶給你更多幫助。

 

 

 

 

本文將從圖片在設(shè)計中的重要性開始解析，加強(qiáng)大家對圖片的認(rèn)知；再從圖片比例、后期處理技巧、設(shè)計中的運用須知等方面分享關(guān)于圖片在設(shè)計中的處理經(jīng)驗；最后也會分享一下我們在尋找合適的圖片過程中的方法與后期圖庫的管理經(jīng)驗。

 

 

 

 

相信圖片在設(shè)計中的重要程度對于設(shè)計師來說已經(jīng)了然于胸，雖然大家都會選擇更好的圖片資源來進(jìn)行設(shè)計，但是依然還有很多需要設(shè)計師注意和把控的地方，下面我們一起來看看。

 

 

1.1、提高圖片的質(zhì)量

越來越多的產(chǎn)品對圖片質(zhì)量開始加以重視，比如網(wǎng)易嚴(yán)選對產(chǎn)品圖片的拍攝與處理都有嚴(yán)格的規(guī)范，目的就是為了提升產(chǎn)品氣質(zhì)和在用戶心中的印象。我們在設(shè)計的時候更要以最佳的圖片來烘托我們的設(shè)計稿，圖片的質(zhì)量影響著整個設(shè)計的格調(diào)。

 

 

在產(chǎn)品設(shè)計中，很多伙伴兒會覺得圖片都是后期運營上傳的，我設(shè)計稿做得再精美最終也是沒用的。對于這個問題我的觀點是這樣的：

a. 最佳的設(shè)計輸出是設(shè)計師專業(yè)的體現(xiàn)；

b. 把最好的效果呈現(xiàn)給決策者，增加他對你設(shè)計能力的印象；

c. 通過制定運營視覺規(guī)范來把控圖片質(zhì)量，是可以嚴(yán)格把控你對圖片的視覺追求；

d. 你的態(tài)度會給你帶來好運。

 

 

1.2、圖片的真實還原

雖然前面提到圖片質(zhì)量的重要性，但是我們不能為了視覺效果選擇一些與主題無關(guān)的配圖，這樣也會給決策者一種誤導(dǎo)。我們可以提高配圖的質(zhì)量，但是需要保證圖片的真實還原，這樣才能讓你的設(shè)計作品更加真實合理。

 

在一些本土的產(chǎn)品設(shè)計中，對于國外圖片素材的運用，需要謹(jǐn)慎對待。如案例中的模特形象，文案信息的傳達(dá)更加偏向于國內(nèi)的場景，如果運用一張國外的模特素材也許逼格更高，可是卻無法真實的還原產(chǎn)品場景，會給決策者傳達(dá)一種錯誤的認(rèn)知。

 

 

 

1.3、圖片版權(quán)須知

關(guān)于版權(quán)這個問題往往還有很多設(shè)計師不以為意，要嘛是壓根就沒注意這個問題的重要性，要嘛就是抱著僥幸心理。我們在工作中作為專業(yè)的設(shè)計師，不僅需要保護(hù)和維護(hù)自身權(quán)益和公司利益，對于作者的尊重也是基本的職業(yè)素養(yǎng)。

 

在項目中面對圖片版權(quán)問題我們要主動告知需求方，這樣我們盡到了職業(yè)義務(wù)，也讓需求方能夠做出正確的判斷。

 

 

 

 

在對產(chǎn)品界面進(jìn)行布局的時候，圖片的比例往往被大家所忽略，憑著自我感覺任意選擇一個整數(shù)數(shù)值進(jìn)行設(shè)計，在多個地方出現(xiàn)相同內(nèi)容圖片的時候也會尺寸混亂，這樣無形中增加了前后臺的規(guī)范性和存儲壓力。

 

下面從項目中常用的圖片比例和需要注意的地方給大家進(jìn)行分析，也給大家分享一下圖片比例的選擇方式，在整套產(chǎn)品設(shè)計中需要保持的一致性等方面。

 

 

2.1、圖片比例有什么講究

不同比例的圖片所傳達(dá)的信息主體不盡相同，根據(jù)產(chǎn)品屬性我們會選擇與之相符的圖片比例進(jìn)行整體的界面布局。

 

通過體驗一些主流的產(chǎn)品，我們會發(fā)現(xiàn)一些比較常用的圖片比例，如 1:1、2:1、3:1、3:2、4:3、16:9、16:10 等等；也會發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計，我們需要分析它們的性格，結(jié)合自身產(chǎn)品的特點，才能在自己的產(chǎn)品設(shè)計中合理的加以運用。

 

 

下面選擇幾個常用比例進(jìn)行分析，希望拋磚引玉，帶給大家更多的思路。

 

 

1:1 強(qiáng)調(diào)主體的存在感

1:1 的圖片比例是比較常見的一種設(shè)計比例，利用此長寬比更容易將構(gòu)圖歸整得簡單，突出主體的存在感。常用于產(chǎn)品展示、頭像、特寫展示等場景，在電商類產(chǎn)品中尤為常見，如：淘寶、網(wǎng)易嚴(yán)選、網(wǎng)易考拉等。

 

在產(chǎn)品設(shè)計中通常以兩欄或以上為主，通欄展示的情況一般用于商品詳情頁頭圖部分展示居多，其余界面布局較少利用通欄展示。

 

 

 

4:3 圖像緊湊、更易構(gòu)圖

4:3 的圖片比例可以使圖像更緊湊，更易構(gòu)圖，方便設(shè)計師進(jìn)行發(fā)揮。由于手機(jī)屏幕容量較小，作為全屏展示時，該比例在產(chǎn)品設(shè)計布局上面占用空間較大，通常我們作為分欄來進(jìn)行界面布局。

 

作為設(shè)計師來說，這個比例經(jīng)常接觸，站酷、Dribbble 等的作品封面，在攜程、廚房故事等產(chǎn)品中也均有采用這個比例。

 

 

 

16:9 電影場景般的效果
 

16:9 的圖片比例可以呈現(xiàn)電影場景般的效果，多用于橫向構(gòu)圖，是應(yīng)用非常廣泛的尺寸比例之一，能給用戶一種視野開闊的體驗。在很多影視娛樂類產(chǎn)品設(shè)計中運用廣泛，如騰訊視頻、網(wǎng)易云音樂等。

 

 

 

16:10 擁抱黃金比例

黃金比例就像金字塔上的明珠，越接近她越有魅力，反之會魅力減弱，16:10 的圖片比例最為接近。設(shè)計沒有絕對的標(biāo)準(zhǔn)，我們可以遵循一些優(yōu)秀的經(jīng)驗規(guī)則，但是也要敢于突破規(guī)則，嘗試更多的可能性。

 

 

 

X:≤Y 瀑布流設(shè)計

X:≤Y 代表寬度固定，高度在最大值之間自定義的瀑布流設(shè)計，在一些用于用戶沒有很明確的目的，只是喜歡獲取盡量多的信息的情況下采用這種設(shè)計方式。X:≤Y 的圖片比例要注意高度的控制，最大值不要超出屏幕可顯示區(qū)域的范圍。

 

 

以上列舉的僅為部分常用比例的分析與說明，還有更多的比例這里就不一一演示，分享的目的是讓大家養(yǎng)成分析的習(xí)慣，結(jié)合自身產(chǎn)品特點選擇適合的圖片比例。

 

 

2.2、圖片比例選擇方式

a. 以商品展示效果為準(zhǔn)，選擇能夠充分表現(xiàn)商品特點的圖片展示比例；

b. 以產(chǎn)品氣質(zhì)為準(zhǔn)，選擇符合產(chǎn)品內(nèi)容氣質(zhì)的圖片展示比例；

c. 結(jié)合產(chǎn)品特點選擇合適的常用比例；

d. 根據(jù)版面布局靈活的自定義特殊的比例值；

e. 分析→打破→創(chuàng)新，創(chuàng)造出符合某種規(guī)律或者美學(xué)概念的比例值。

 

 

2.3、圖片比例的一致性

當(dāng)我們結(jié)合產(chǎn)品特點確定合適的圖片展示比例以后，需要針對整體的布局與圖片分布情況，規(guī)范出那些布局可以采用相同的圖片展示比例。在保障視覺效果與交互形式的情況下，相同的主體，在不同的頁面中最好采用相同的比例呈現(xiàn)，這樣的好處不僅可以保持視覺表達(dá)的一致性，也能給后期運營維護(hù)帶來便利。

 

 

 

 

 

如果說公司有專業(yè)的攝影團(tuán)隊，那么對于圖片的需求相對會很容易滿足。對于大部分的團(tuán)隊來說設(shè)計師找圖與處理圖片都是比較日常的工作，在產(chǎn)品設(shè)計里面，雖然不一定能夠達(dá)到專業(yè)修圖師的精修標(biāo)準(zhǔn)，但是比較常見的處理技巧還是需要掌握的。

 

 

3.1、裁切簡化圖片

在項目中，我們會通過一些圖庫網(wǎng)站去尋找合適的配圖，但是想要剛好滿足還是比較難的，對素材進(jìn)行裁切來突出我們想要的部分是比較簡單的圖片處理技巧。

 

實際生活中拍攝的照片總會出現(xiàn)很多干擾主體的內(nèi)容，裁切掉多余的內(nèi)容突出主體信息，裁切后的圖片構(gòu)圖更緊湊、凝聚，主體更具吸引力。這也是我們說的對圖片進(jìn)行降噪，排除多余的干擾。

 

 

 

3.2、相同尺寸的裁切

當(dāng)系列圖片進(jìn)行排版時，需要保持圖片比例尺寸的統(tǒng)一性，當(dāng)我們在多個圖片素材之間進(jìn)行裁切處理時，需要以最小裁切空間的圖片為示例去裁切其它圖片，這樣才能保證最終的展示效果。

 

如果是人物圖片，需要注意人物眼睛的視平線，讓眼睛的位置盡量保持在水平線左右。

 

 

 

3.3、視平線作為水平線的基準(zhǔn)

當(dāng)我們在選擇人物圖片的時候，一張?zhí)貙戠R頭能傳達(dá)一種眼神與眼神交流的感覺，在進(jìn)行裁切的時候要以視平線為準(zhǔn)進(jìn)行縮放裁切，可以保留眼神的交流感。圖片放得越大，眼神的交流感就會越強(qiáng)。

 

 

 

3.4、調(diào)整圖片的垂直線

我們在選擇圖片的時候，如果是如同城市建筑等類型的垂直主體時，我們需要注意主體物與地平線的垂直關(guān)系。如果構(gòu)圖特意需要傾斜的效果另當(dāng)別論，否則我們將會優(yōu)先考慮這個因素，選擇主體垂直的圖片或者后期微調(diào)讓主體垂直地平線，這樣整個畫面更加協(xié)調(diào)穩(wěn)定。

 

 

3.5、調(diào)整圖片的地平線

在選擇圖片時如果有明顯地平線的照片，需要注意地平線是否平行。地平線的平行將會有助于畫面感的協(xié)調(diào)，如果遇到想要體現(xiàn)特殊效果，如體現(xiàn)速度感、突破畫面張力、營造不穩(wěn)定性、強(qiáng)化某種視覺效果等，也會特意打破地平線的平行。在調(diào)整地平線平行時，可以通過軟件的變形工具等對圖片進(jìn)行后期處理。

 

 

 

3.6、通過局部來強(qiáng)化主體

有時候一張普通的圖片并不能引起我們的注意，但是我們通過局部放大突出單一的主體特征時，往往可以獲得更好的視覺效果。放大后的主體構(gòu)圖更加飽滿，視覺效果更強(qiáng)烈。

 

 

 

3.7、局部特征的極端運用

局部特征放大到一定程度的時候主體信息會被淡化，為極端的處理方式。這樣處理出來的圖片主體將會無法識別，極端的裁切方式常用于背景的使用。我們也可以通過 Photoshop 軟件的高斯模糊等工具進(jìn)行處理，形成一些特殊色彩融合的背景圖片。

 

 

 

3.8、三分法

在進(jìn)行圖片裁切的時候，不一定需要總是將視覺主體放置在畫面中心點，將視覺主體放置在三分處也許可以增加更多樂趣。如果當(dāng)畫面中主體是人物時，可以考慮將人物主體或者視平線放置在三分處。

 

 

3.9、避免接近人物發(fā)際線

面對一些人物圖片時，我們在進(jìn)行裁切的時候需要注意人物的發(fā)際線。在裁切人物發(fā)際線時就會聯(lián)想到禿頭，因此不要太靠近人物發(fā)際線，留下足夠的頭發(fā)，不要過度裁切，以免影響人物形象。

 

 

 

以上作為常用的處理形式列舉，更多的形式希望大家多多的總結(jié)，在設(shè)計中考慮到每一個細(xì)微的元素差別。

 

 

 

 

噪音會對我們的生活造成干擾，降低噪音，我們喜歡安靜的環(huán)境。對于圖片的處理也有降噪的說法，可以讓畫面感更加簡潔，主體更能凸顯。

 

下面給大家分享一下找圖前的降噪思考和后期處理進(jìn)行降噪的經(jīng)驗。

 

 

 

4.1、找圖前的降噪思考

在選擇圖片的時候，要盡量選擇主體表現(xiàn)突出，沒有過多信息進(jìn)行干擾的圖片。我們要明確主題，尋找的圖片要能單一的表現(xiàn)這個主題，如果一張圖片中表現(xiàn)多個信息源的時候，會給人一種信息干擾。

 

我們在拍攝商品展示圖的時候就是考慮這個因素，盡量用最簡單的背景來襯托，其它的物體元素僅僅作為裝飾出現(xiàn)，不會搶占主體物的呈現(xiàn)效果。

 

 

 

4.2、設(shè)計軟件的后期處理

有時候沒辦法通過自行拍攝獲取圖片，我們在通過圖庫網(wǎng)站尋找圖片的時候也不一定剛好達(dá)到心中的標(biāo)準(zhǔn)，通過設(shè)計軟件的后期處理是最為常見的方式，通常運用 Photoshop 軟件居多。

 

 

4.3、利用去底來進(jìn)行降噪

對于一些背景比較雜亂的圖片，我們?yōu)榱烁咏y(tǒng)一視覺效果，讓主體更加突出，會通過去底來進(jìn)行降噪，特別是在展示商品圖片的時候較為常用。

 

 

去掉底色后一般會有幾種處理方式來襯托主體：

a. 以白底的形式顯示，這個比較常見，有時候為了讓圖片的外輪廓出現(xiàn)也會加一個淺色的描邊；

b. 設(shè)置一個固定值的淺灰色，這樣處理也能形成視覺統(tǒng)一，還能讓圖片的外輪廓清晰，也有通過品牌色融入調(diào)出的一個偏向于品牌色的淺色作為背景；

c. 根據(jù)圖片主體的配色反推出淺色背景的配色，通常是以降低色彩明度與飽和度的形式；

d. 圖片去底后利用深色作為背景，這個一般比較少出現(xiàn)，需要運用一般為品牌色、深灰色、黑色等。

 

 

 

 

通過以上的一些分享我們可以掌握對圖片的基本處理方式，在進(jìn)行運用的過程中會有一些需要注意的地方，比如關(guān)于結(jié)合卡片式布局的時候內(nèi)外圓角的關(guān)系以及對圖片設(shè)置投影的注意事項等。

 

 

5.1、內(nèi)圓角與外圓角的處理

現(xiàn)在很多產(chǎn)品在布局上面都在運用卡片式進(jìn)行布局，如果對卡片進(jìn)行圓角設(shè)置以后，對于卡片內(nèi)部的圖片通常也會設(shè)置一點小圓角。設(shè)置的數(shù)值由卡片外圓角數(shù)值減去它們之間的間隙數(shù)值，如果算出來的數(shù)值為負(fù)數(shù)的情況，原理上圖片不做圓角值設(shè)計也是可以的，只是為了整體風(fēng)格的統(tǒng)一，我們通常會設(shè)置一個小圓角數(shù)值。

 

 

 

5.2、圖片的投影設(shè)置

我們進(jìn)行設(shè)計的過程如果是需要不斷更新的圖片，我們通常不建議設(shè)置投影，因為圖片配色風(fēng)格、色彩比重、明暗程度等不同，都會影響投影的效果。

 

在相同投影參數(shù)設(shè)置的前提下，淺色風(fēng)格的圖片會顯得投影重，深色風(fēng)格的圖片會顯得淡。這樣的反差會影響我們對圖片的選擇，但是如果圖片都是用戶隨機(jī)上傳的，我們是很難進(jìn)行控制的。

 

如果是在一些特殊固定的場景，圖片都是設(shè)計師可以把控的前提下，我們可以根據(jù)圖片的情況不同來區(qū)別對待投影的參數(shù)。

 

 

 

 

 

掌握了各種圖片處理的技巧，但是能夠找到更加合適的圖片資源，將會大大降低我們的處理工作量，也能帶來更好的效果。找圖相對比較耗費時間，大家在平時要利用空余時間多進(jìn)行體驗，看到質(zhì)量好的圖片先進(jìn)行分類收藏，需要的時候可以根據(jù)分類去尋找。

 

我們不僅要善于利用圖庫網(wǎng)站和關(guān)鍵詞發(fā)散來進(jìn)行找圖，也要養(yǎng)成良好的習(xí)慣，可以關(guān)注更多的優(yōu)質(zhì)畫板，也可以創(chuàng)建屬于自己的圖庫資源。

 

 

6.1、正確地利用各類網(wǎng)站資源

現(xiàn)在圖庫的網(wǎng)站也很多，我們在選擇圖片的時候也要注意版權(quán)說明，可以下載使用并不代表作者進(jìn)行了原創(chuàng)授權(quán)，在進(jìn)行商用的時候還是需要了解詳情，找一些具備正版授權(quán)的正規(guī)平臺。

 

當(dāng)我們在一些平臺發(fā)現(xiàn)優(yōu)質(zhì)的圖片資源時，可以進(jìn)行采集和分類，如果圖片有編號，可以在存儲的時候把編號備注在名稱上，方便以后需要高清大圖時可以通過編號進(jìn)行搜索。

 

我們在利用圖庫網(wǎng)站搜索圖片的時候可以利用圖片信息篩選更大尺寸；利用相似圖片功能可以搜索更多類似資源；點擊圖片可以進(jìn)到原始出處，可以找到更多系列主題下的資源。在百度識圖、站酷海洛等平臺里面，設(shè)計師可以利用以圖搜圖功能在圖庫里面找尋高清正版圖片。

 

 

推薦一些常用的欣賞圖片的網(wǎng)站給大家：站酷海洛、500px、1x、Pinterest、unsplash、foodiesfeed等等。網(wǎng)站很多，其實很難都在用，根據(jù)自己需求選擇性使用就好。

 

 

6.2、巧用關(guān)鍵詞發(fā)散

現(xiàn)在找圖片的網(wǎng)站很多，但是我們要善于進(jìn)行一些關(guān)鍵詞發(fā)散，有些資源直接搜索不一定能夠找到更合適的。

 

舉一個簡單的例子來說一下關(guān)鍵詞發(fā)散的作用，比如圓形和香蕉是沒有本質(zhì)聯(lián)系的，但是通過關(guān)鍵詞發(fā)散就會產(chǎn)生關(guān)聯(lián)，圓形→西瓜→水果→香蕉。換到圖片資源中來原理相似，比如我們要找一張美女圖片，不一定搜索的關(guān)鍵詞是“美女”，這個關(guān)鍵詞進(jìn)行發(fā)散可以衍生出時尚雜志、街拍、模特、氣質(zhì)、時尚大片、穿搭等等關(guān)鍵詞，這樣通過發(fā)散出來的關(guān)鍵詞也許能找到更加符合的圖片資源。

 

 

 

6.3、關(guān)注雷鋒

有時候同樣的方式找圖和設(shè)計，但是每個人的審美和設(shè)計感覺都不一樣，也會影響最終作品的效果。方法技巧都可以短時間來提升，但是設(shè)計感覺是需要長時間進(jìn)行熏陶的。我們可以關(guān)注一些優(yōu)秀的設(shè)計師，關(guān)注他們創(chuàng)建的畫板和分享的資源，讓他們的審美能力成為你的一層過濾網(wǎng)，為你篩選一些劣質(zhì)的資源。

 

我們也可以通過老司機(jī)們關(guān)注的設(shè)計師或者畫板來尋找出更多的優(yōu)質(zhì)資源，通過關(guān)系鏈可以讓你認(rèn)識和發(fā)現(xiàn)更多優(yōu)秀的設(shè)計師。

 

 

6.4、創(chuàng)建自己的圖庫資源

很多設(shè)計師會忽略日常資源采集的重要性，總是在需要的時候才去尋找想要的資源，但是總會徒勞。也有很多通過一些途徑一次性獲得上百G資源，內(nèi)心滿是喜悅，以為從此設(shè)計無憂，卻不知后面似乎也沒啥用……你肯定還有更多這樣類似的情況。

 

俗話說有備無患，養(yǎng)成良好的設(shè)計師職場習(xí)慣很重要。日常的采集習(xí)慣將會大大提升設(shè)計師后期的項目設(shè)計靈感來源與執(zhí)行效率，設(shè)計做不好其中部分因素就是靈感素材沒有找對。

 

建立靈感圖庫相當(dāng)于形成一本字典，當(dāng)你需要的時候可以進(jìn)行查詢；閑暇的時候可以進(jìn)行回顧，去挖掘一些優(yōu)秀作品背后的軌跡，以便能夠運用到后期的項目中，提升工作執(zhí)行效率。

 

 

之前寫了一篇相關(guān)的文章《設(shè)計師如何創(chuàng)建靈感資源庫》，有需要的伙伴兒可以閱讀了解。

https://www.zcool.com.cn/article/ZODY4ODgw.html

 

 

 

 

隨著用戶對體驗的要求不斷提升，我們需要從各個方面加強(qiáng)設(shè)計細(xì)節(jié)，圖片資源的好壞不僅傳遞的是商品的品質(zhì)，也能夠體現(xiàn)產(chǎn)品的格調(diào)。希望今天的分享可以帶給大家對圖片的認(rèn)知，在后期產(chǎn)品設(shè)計的過程中可以考慮得更全面，最后感謝各位酷友的支持，如有補(bǔ)充歡迎留言互動。