如何做好系統(tǒng)性的選擇網(wǎng)頁(yè)設(shè)計(jì)中的圖片？從0開始教你如何做網(wǎng)頁(yè)圖片

時(shí)間：2023-07-25 23:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-25 23:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何做好系統(tǒng)性的選擇網(wǎng)頁(yè)設(shè)計(jì)中的圖片？從0開始教你如何做網(wǎng)頁(yè)圖片：上周有讀者留言：

如何為網(wǎng)頁(yè)系統(tǒng)性的選擇圖片素材？




這個(gè)課題太大，只有規(guī)律，沒有公式能直接套用。




有的設(shè)計(jì)師，手握幾十個(gè)素材站，腦子還是懵的，不知道根據(jù)什么去選圖，更不知道怎么修改圖片。

所以你覺得網(wǎng)頁(yè)做得不夠優(yōu)秀，是甲方的圖丑，但真的雨你無(wú)瓜嗎？

1. 甲方提供圖片素材的，但素材品質(zhì)Emmm……

2. 甲方不提供圖片素材，需要找素材，但有的行業(yè)很難找到品質(zhì)高的免費(fèi)圖片。




甲方提供了素材和LOGO，我們可以通過LOGO、VI色、點(diǎn)睛色+輔助色、延展圖形，來(lái)確定配色方案，挑選適合的圖片；


如果甲方?jīng)]有提供VI色，可以根據(jù)行業(yè)屬性、slogan文案確定配色方案，找需要的圖片。

例如，博物館類網(wǎng)站通常會(huì)選用紅色做點(diǎn)睛色，醫(yī)療通常用綠色或者藍(lán)色，律師事務(wù)所通常用藍(lán)色或者紅色，很少看到律師事務(wù)所用黑色吧（覺得找這樣的律所打官司前途一片黑暗，看不到勝訴的可能，哈）服務(wù)行業(yè)：金融、貨幣等可以用繪制的icon、抽象的圖片。

相對(duì)找素材，運(yùn)用好現(xiàn)有素材才是更重要的。




經(jīng)常會(huì)遇到甲方給的圖片過于小，模糊，產(chǎn)品拍的差，環(huán)境雜。只能盡量挑選合適的圖片，并在圖片優(yōu)化上下功夫，有幾種方法：




1. 色調(diào)統(tǒng)一

下面4張配圖，原圖有冷有暖，有明有暗，我們需要以一張圖片為標(biāo)準(zhǔn)，把亮度統(tǒng)一，冷暖色統(tǒng)一。（下圖中作為標(biāo)準(zhǔn)的是第一張。）




2. 摳圖加場(chǎng)景

常用于產(chǎn)品圖片環(huán)境亂，需要把主體物摳下來(lái)，加純色或氛圍背景。




3. 加重高光

一般用于金屬、機(jī)械類產(chǎn)品。通常要把原素材的高光進(jìn)行加重處理，精修細(xì)節(jié)，突出產(chǎn)品材質(zhì)和質(zhì)感。




4. 重新繪制

護(hù)膚品、美容儀類產(chǎn)品很少直接用原圖的，都會(huì)把產(chǎn)品繪制一遍，繪制的方法百度一下教程很多，這里就不貼鏈接了。




5. 圖片結(jié)構(gòu)統(tǒng)一

圖片結(jié)構(gòu)統(tǒng)一，主體物角度統(tǒng)一（特別是人物和產(chǎn)品），踩這個(gè)雷的作品很多。所以以團(tuán)隊(duì)板塊的配圖舉例，這組圖人物頭部有大有小，留白也不一致。

修改后的人物頭部大小和留白一致，品質(zhì)感提升很多，兩組人物圖，面部朝向都是中間。

6. 圖片走勢(shì)統(tǒng)一

一組圖片在走勢(shì)上也要保持一致，才能看起來(lái)更“順眼”，例如:

7. 色彩疊加

如果有的圖片，實(shí)在改也不行，修也修不大出來(lái)，也沒找到更適合的，可以試試把網(wǎng)頁(yè)的點(diǎn)睛色疊加在圖像上。色彩疊加能夠幫助所有的圖像保持一致的品牌感。尤其是暗色疊加，能很大提升閱讀slogan/文案的幾率。

8. 配圖模特動(dòng)作、眼神引導(dǎo)

根據(jù)配圖模特的眼神方向、身體動(dòng)作造型進(jìn)行文字排版，把用戶引導(dǎo)到文案信息上，示例：




圖片并不是選好做好，就萬(wàn)事大吉了，還要兼顧網(wǎng)站的加載速度，是否居中等。有幾個(gè)需要注意的點(diǎn)：




1.圖片的尺寸，要盡量為偶數(shù)。

原因是——在15年之前的老版本瀏覽器中渲染的時(shí)候，奇數(shù)很容易出現(xiàn)邊緣模糊。（現(xiàn)在大部分都已經(jīng)更新，這里想到了提一句。）




2.圖片過大，影響網(wǎng)站加載速度。

網(wǎng)站在打開時(shí)需要同時(shí)加載很多圖片，圖片大小，是影響網(wǎng)站打開速度的因素之一。造成圖片文件較大的原因一般分為以下幾種：色彩過于豐富、尺寸大、無(wú)壓縮。把圖片在肉眼很難區(qū)分出品質(zhì)變化的情況下進(jìn)行適當(dāng)壓縮，是必要做的工作。




這里附帶壓縮圖片的教程：

https://www.uemo.net/list/post/49160/




之前寫過一篇推薦素材庫(kù)的文章，和推薦icon的文章，素材不夠的伙伴可以拿來(lái)用用：

· 用好線性icon，你就是UI街上最亮的仔

· 別人家設(shè)計(jì)師靈感不斷的秘密，可能是這些穩(wěn)定的素材網(wǎng)站

還有UEdna的網(wǎng)址導(dǎo)航，很全很強(qiáng)大了

http://www.ueso.net/

---

快來(lái)，聊5毛錢的
你有什么神奇的方法拯救圖片素材？
每天10點(diǎn)搶U碼，多重樣式，免費(fèi)空間，個(gè)性化域名，讓你的作品在自己的個(gè)人站里閃閃發(fā)光~個(gè)人站申請(qǐng)地址： http://www.uedna.com/