本文從找圖慎框、圖片比例到降噪方法、后期處理技巧后添、運用須知等全方位總結(jié)了關(guān)于圖片設(shè)計的基礎(chǔ)知識笨枯。

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

前言

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

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

圖片在設(shè)計中的重要性

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

? 1. 提高圖片的質(zhì)量

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

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

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

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

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

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

?2. 圖片的真實還原

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

在一些本土的產(chǎn)品設(shè)計中效扫，對于國外圖片素材的運用，需要謹慎對待直砂。如案例中的模特形象菌仁，文案信息的傳達更加偏向于國內(nèi)的場景，如果運用一張國外的模特素材也許格調(diào)更高哆键，可是卻無法真實的還原產(chǎn)品場景掘托，會給決策者傳達一種錯誤的認知瘦锹。

3. 圖片版權(quán)須知

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

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

圖片比例

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

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

1. 圖片比例有什么講究

不同比例的圖片所傳達的信息主體不盡相同，根據(jù)產(chǎ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è)計中合理地運用米绕。

下面選擇幾個常用比例進行分析，希望拋磚引玉馋艺，帶給大家更多的思路栅干。

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

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

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

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

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

對于設(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è)計沒有絕對的標準，我們可以遵循一些優(yōu)秀的規(guī)則罕模，但是也要敢于突破規(guī)則评腺，嘗試更多的可能性。

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

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

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

2. 圖片比例選擇方式

圖片比例選擇方式：

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

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

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

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

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

3. 圖片比例的一致性

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

圖片后期處理技巧

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

1. 裁切簡化圖片

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

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

2. 相同尺寸的裁切

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

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

3. 視平線作為水平線的基準

當我們在選擇人物圖片的時候，一張?zhí)貙戠R頭能傳達一種眼神與眼神交流的感覺吃既，在進行裁切的時候要以視平線為準進行縮放裁切考榨，可以保留眼神的交流感。圖片放得越大鹦倚，眼神的交流感就會越強河质。

4. 調(diào)整圖片的垂直線

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

5. 調(diào)整圖片的地平線

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

6. 通過局部來強化主體

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

7. 局部特征的極端運用

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

8. 三分法

在進行圖片裁切的時候车要，不一定總是將視覺主體放置在畫面中心點允粤，將視覺主體放置在三分處也許可以增加更多樂趣。如果當畫面中主體是人物時翼岁，可以考慮將人物主體或者視平線放置在三分處类垫。

9. 避免接近人物發(fā)際線

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

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

對圖片進行降噪

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

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

1. 找圖前的降噪思考

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

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

2. 設(shè)計軟件的后期處理

有時候沒辦法通過自行拍攝獲取圖片穴豫，我們在通過圖庫網(wǎng)站尋找圖片的時候也不一定要剛好達到心中的標準喧伞，可以用設(shè)計軟件進行后期處理，通常運用 Photoshop 軟件居多。

3. 利用去底來進行降噪

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

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

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

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

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

圖片去底后利用深色作為背景，比較少出現(xiàn)卑惜，一般為品牌色膏执、深灰色、黑色等露久。

圖片運用須知

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

1. 內(nèi)圓角與外圓角的處理

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

2. 圖片的投影設(shè)置

如果我們設(shè)計需要不斷更新的圖片因宇，通常不建議設(shè)置投影七婴，因為圖片配色風(fēng)格、色彩比重察滑、明暗程度等不同打厘，都會影響投影的效果。

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

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

如何找圖

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

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

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

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

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

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

推薦一些常用的圖片網(wǎng)站給大家：站酷海洛、500px拾因、1x旺罢、Pinterest旷余、unsplash、foodiesfeed等等扁达。網(wǎng)站很多正卧，根據(jù)自己需求選擇使用即可。

2. 巧用關(guān)鍵詞發(fā)散

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

舉一個簡單的例子來說一下關(guān)鍵詞發(fā)散的作用惠遏，比如圓形和香蕉是沒有本質(zhì)聯(lián)系的砾跃，但是通過關(guān)鍵詞發(fā)散就會產(chǎn)生關(guān)聯(lián)，圓形→西瓜→水果→香蕉节吮。對圖片資源來說原理相似抽高，比如我們要找一張美女圖片，搜索的關(guān)鍵詞不一定是「美女」透绩，這個關(guān)鍵詞進行發(fā)散可以衍生出時尚雜志翘骂、街拍、模特帚豪、氣質(zhì)碳竟、時尚大片、穿搭等等狸臣，這樣通過發(fā)散出來的關(guān)鍵詞也許能找到更加符合的圖片資源莹桅。

3. 關(guān)注雷鋒

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

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

4. 創(chuàng)建自己的圖庫資源

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

俗話說有備無患菩混，養(yǎng)成良好的設(shè)計習(xí)慣很重要忿墅。日常的采集習(xí)慣將會給設(shè)計師帶來大量靈感和提升執(zhí)行效率，設(shè)計做不好其中部分因素就是靈感素材沒有找對沮峡。

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

隨著用戶對體驗的要求不斷提升呼畸，我們需要從各個方面加強設(shè)計細節(jié)，圖片資源的好壞不僅傳遞的是商品的品質(zhì)颁虐，也能夠體現(xiàn)產(chǎn)品的格調(diào)蛮原。希望今天的分享可以帶給大家對圖片的認知，在后期產(chǎn)品設(shè)計的過程中可以考慮得更全面另绩。