每一個(gè)設(shè)計(jì)項(xiàng)目對(duì)設(shè)計(jì)師而言都是一次系統(tǒng)性的工程。將自己的時(shí)間精力投注其中，把自己的想法和需求結(jié)合到一起，力求做到最佳的表達(dá)，輸出對(duì)受眾最好的設(shè)計(jì)。每一張草圖，每個(gè)概念，甚至每個(gè)圖標(biāo)都是設(shè)計(jì)師努力創(chuàng)造的結(jié)果。對(duì)于許多并不從事這一行業(yè)的人而言，設(shè)計(jì)師的工作是一場浪漫而有趣的冒險(xiǎn)，對(duì)于深入其中的從業(yè)者而言，設(shè)計(jì)是一場伴隨著精力和情緒犧牲的曠日持久的戰(zhàn)爭。

每一個(gè)杰出的設(shè)計(jì)作品背后，都意味著大量的努力。和其他的職業(yè)一樣，設(shè)計(jì)師需要在 Deadline 的壓力之下，克服重重困難達(dá)成目標(biāo)。也正是這種壓力，促使設(shè)計(jì)師竭盡全力去利用手頭所有的素材、工具來達(dá)成目標(biāo)。絕大多數(shù)的Sketch插件、PS插件、設(shè)計(jì)和效率小工具，都是在各種細(xì)分的設(shè)計(jì)需求之下誕生的。

這些小工具和小插件在關(guān)鍵的時(shí)刻發(fā)揮著作用，讓設(shè)計(jì)師在緊湊的時(shí)間表當(dāng)中，更快完成設(shè)計(jì)工作。今天我們要推薦的這些設(shè)計(jì)工具，都能夠非常稱職地完成一部分設(shè)計(jì)工作，幫你推動(dòng)設(shè)計(jì)項(xiàng)目的進(jìn)度。

Landscape 是一款專業(yè)的圖片裁切和尺寸調(diào)整工具，它會(huì)替你考慮好圖片應(yīng)用到不同的社交網(wǎng)站和平臺(tái)上的使用需求，并且一鍵生成所有可用的圖片，省去了逐個(gè)裁切的過程。

Adele 則是著名團(tuán)隊(duì) UXPin 所創(chuàng)建的一個(gè)素材庫，這個(gè)團(tuán)隊(duì)以改進(jìn)工作流程并且瘋狂贈(zèng)送各種素材而聞名設(shè)計(jì)圈。這次他們將所有的設(shè)計(jì)系統(tǒng)和素材庫都集中到了一起，并且還提供了一個(gè)快速搜索的參考指南，這就是 Adele。

配色工具

作為視覺設(shè)計(jì)的核心，配色是設(shè)計(jì)師最為關(guān)心的設(shè)計(jì)內(nèi)容之一。考慮到這一需求，我搜集了 Gradpad、Hex Naw、Liveweave 以及 Coolhue 這四款專業(yè)水準(zhǔn)以上的專業(yè)配色設(shè)計(jì)工具。

GradPad 和 Liveweave 可以說是色彩的游樂場，你可以在其中盡情地探索更貼合你需求的色彩。GradPad 是用來創(chuàng)造漸變色彩的，而 Liveweave 則是在相對(duì)更傳統(tǒng)的色輪的基礎(chǔ)上來探索合適的色彩，各種其他小工具則供你進(jìn)行色彩明暗、飽和度等屬性上的微調(diào)。

Coolhue 則來的更加直接，它直接為你提供現(xiàn)成的漸變配色，你可以直接從中選取你喜歡的配色，使用 HEX值或者下載相應(yīng)代碼直接運(yùn)用到網(wǎng)站當(dāng)中。

和前面3個(gè)工具不同的地方在于，Hex naw 的目標(biāo)是提升已有配色方案的可訪問性，確保它能夠兼顧到各種用戶（尤其是有視覺障礙的用戶），確保配色方案具備有足夠好的可訪問性。而你所需要做的也很簡單，把配色方案輸入進(jìn)去就可以驗(yàn)證了。

字體排版

字體排版同樣是設(shè)計(jì)中最基礎(chǔ)的領(lǐng)域。在最新的工具，我專門挑選了 Font Combination Kit 和 Typehero 這兩款工具，它們可以更好地提升字體排版的可讀性，提供更加豐富的用戶體驗(yàn)。

Font Combination Kit 是來自 kkuistore 團(tuán)隊(duì)的一項(xiàng)字體服務(wù)， 它能幫你找到堪稱完美的字體組合，其中已經(jīng)包含了34種經(jīng)過驗(yàn)證的字體組合，可以拿來直接使用。

Typehero 則直接涵蓋了整個(gè) Google Fonts 字體數(shù)據(jù)庫，你可以借助它調(diào)用任何你喜歡的字體，通過設(shè)置字體尺寸、色彩和背景色彩，用來直接測試字體的顯示效果，確定符合你需求的字體。

圖形和圖像

各種圖片和圖形素材可以按照常見的需求分為功能性和裝飾性兩類，不過考慮到視覺設(shè)計(jì)的需求，有的時(shí)候這中間的界限是比較模糊的。而UnDraw 這個(gè)服務(wù)就正好兼顧了這兩點(diǎn)，這是一套具有一定功能性的插圖合集，無論是用在網(wǎng)頁還是 APP 當(dāng)中都是相當(dāng)不錯(cuò)的插畫元素。

相比之下，Standart 所提供的圖形元素則沒有UnDraw 那么強(qiáng)的功能性，不過美感倒是相當(dāng)不錯(cuò)，每個(gè)圖標(biāo)都足夠簡單和優(yōu)雅，你可以根據(jù)你的需求，適當(dāng)?shù)靥暨x使用。

裝飾性細(xì)節(jié)

使用更加程序化的方法來創(chuàng)造裝飾細(xì)節(jié)，更加符合當(dāng)下的原則，因?yàn)槭褂?HTML、CSS、JS或者SVG來創(chuàng)建裝飾性的元素，會(huì)更加輕量級(jí)，在適用范圍上更廣。也正是在這樣的前提之下，我想推薦 BGPatterns 和 SVG Backgrounds 這兩個(gè)工具。

SVG Backgrounds 內(nèi)置了十幾種奇妙的幾何圖案，你可以通過改變色彩，不透明度，或者調(diào)整比例，來實(shí)現(xiàn)你想要的效果。

BGPatterns 是 Patternninja 的前身，雖然它沒有 Patternninja 那么強(qiáng)大，但是它仍然能夠幫你創(chuàng)造出足夠漂亮的背景和裝飾性的圖案。

品牌設(shè)計(jì)

品牌設(shè)計(jì)是一個(gè)不容忽視的巨大領(lǐng)域。從簡約的LOGO標(biāo)識(shí)，到巨大的企業(yè) VI設(shè)計(jì)工具包，在品牌設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師需要做的事情有很多，而靠譜的設(shè)計(jì)素材能夠幫助設(shè)計(jì)師節(jié)省很多時(shí)間精力。相應(yīng)的，截至目前，我們可以用的各種設(shè)計(jì)素材和工具包也已經(jīng)很多了。不過，為了幫你省去篩選的時(shí)間，我優(yōu)選了兩款工具，一個(gè)是  DIY Free Logo Kits ，以及兩款由 Aleksey Belorukov 所提供的場景生成工具。

第一個(gè)免費(fèi)LOGO設(shè)計(jì)工具是由著名的服務(wù)商 Envato 所提供的，簡而言之，它就是一系列 EPS 格式的圖形素材的合集，你可以在這個(gè)基礎(chǔ)上創(chuàng)造很多奇趣的LOGO標(biāo)識(shí)。

Perspective Scene Creator 和 Home Vintage Mockup Scene 則是 Aleksey Belorukov 所提供的兩個(gè)免費(fèi)的工具和素材，兩者都包含少量非常逼真且非常優(yōu)雅的場景，你可以根據(jù)你的需求來編輯，生成你想要的視覺稿和展示效果。

效率工具

效率工具有很多，但是今天要推薦兩個(gè)非常特別的。一個(gè)是在線快捷鍵速查手冊(cè) Shortcuts，它包含了設(shè)計(jì)、開發(fā)等不同領(lǐng)域各種軟件的常見快捷鍵，無論你是出于工作需要還是學(xué)習(xí)軟件的需要，它都能給你很好的輔助。

另外一個(gè)工具則是 Copychar，這個(gè)工具將各種不那么好直接在電腦上輸出的符號(hào)和表情都匯總到一起，當(dāng)你點(diǎn)擊特定的符號(hào)和表情的時(shí)候會(huì)直接復(fù)制它，然后粘貼就能用了！

展示工具

最后，還要為你推薦 Presentator 這個(gè)展示平臺(tái)，你可以使用它來向你的團(tuán)隊(duì)成員或者客戶展示你的概念設(shè)計(jì)，它足夠簡單，直觀且功能豐富，也非常適合協(xié)同工作。最棒的地方在于，它和 UXPin 以及 InVision 這類工具功能類似，但是完全免費(fèi)。

結(jié)語

在快節(jié)奏的工作當(dāng)中，合適地借助細(xì)分的工具來幫你完善諸多細(xì)節(jié)，可以讓你將精力集中在更重要、更關(guān)鍵的事情上。

本文由資深網(wǎng)設(shè)計(jì)部網(wǎng)絡(luò)搜集整理，本文版權(quán)歸原作者所有，轉(zhuǎn)載出處 
本文地址：https://www.uisdc.com/18-free-tools-for-web-designer