每一個設計項目對設計師而言都是一次系統性的工程。將自己的時間精力投注其中，把自己的想法和需求結合到一起，力求做到最佳的表達，輸出對受眾最好的設計。每一張草圖，每個概念，甚至每個圖標都是設計師努力創造的結果。對于許多并不從事這一行業的人而言，設計師的工作是一場浪漫而有趣的冒險，對于深入其中的從業者而言，設計是一場伴隨著精力和情緒犧牲的曠日持久的戰爭。

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

這些小工具和小插件在關鍵的時刻發揮著作用，讓設計師在緊湊的時間表當中，更快完成設計工作。今天我們要推薦的這些設計工具，都能夠非常稱職地完成一部分設計工作，幫你推動設計項目的進度。

Landscape 是一款專業的圖片裁切和尺寸調整工具，它會替你考慮好圖片應用到不同的社交網站和平臺上的使用需求，并且一鍵生成所有可用的圖片，省去了逐個裁切的過程。

Adele 則是著名團隊 UXPin 所創建的一個素材庫，這個團隊以改進工作流程并且瘋狂贈送各種素材而聞名設計圈。這次他們將所有的設計系統和素材庫都集中到了一起，并且還提供了一個快速搜索的參考指南，這就是 Adele。

配色工具

作為視覺設計的核心，配色是設計師最為關心的設計內容之一。考慮到這一需求，我搜集了 Gradpad、Hex Naw、Liveweave 以及 Coolhue 這四款專業水準以上的專業配色設計工具。

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

Coolhue 則來的更加直接，它直接為你提供現成的漸變配色，你可以直接從中選取你喜歡的配色，使用 HEX值或者下載相應代碼直接運用到網站當中。

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

字體排版

字體排版同樣是設計中最基礎的領域。在最新的工具，我專門挑選了 Font Combination Kit 和 Typehero 這兩款工具，它們可以更好地提升字體排版的可讀性，提供更加豐富的用戶體驗。

Font Combination Kit 是來自 kkuistore 團隊的一項字體服務， 它能幫你找到堪稱完美的字體組合，其中已經包含了34種經過驗證的字體組合，可以拿來直接使用。

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

圖形和圖像

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

相比之下，Standart 所提供的圖形元素則沒有UnDraw 那么強的功能性，不過美感倒是相當不錯，每個圖標都足夠簡單和優雅，你可以根據你的需求，適當地挑選使用。

裝飾性細節

使用更加程序化的方法來創造裝飾細節，更加符合當下的原則，因為使用 HTML、CSS、JS或者SVG來創建裝飾性的元素，會更加輕量級，在適用范圍上更廣。也正是在這樣的前提之下，我想推薦 BGPatterns 和 SVG Backgrounds 這兩個工具。

SVG Backgrounds 內置了十幾種奇妙的幾何圖案，你可以通過改變色彩，不透明度，或者調整比例，來實現你想要的效果。

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

品牌設計

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

第一個免費LOGO設計工具是由著名的服務商 Envato 所提供的，簡而言之，它就是一系列 EPS 格式的圖形素材的合集，你可以在這個基礎上創造很多奇趣的LOGO標識。

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

效率工具

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

另外一個工具則是 Copychar，這個工具將各種不那么好直接在電腦上輸出的符號和表情都匯總到一起，當你點擊特定的符號和表情的時候會直接復制它，然后粘貼就能用了！

展示工具

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

結語

在快節奏的工作當中，合適地借助細分的工具來幫你完善諸多細節，可以讓你將精力集中在更重要、更關鍵的事情上。

本文由資深網設計部網絡搜集整理，本文版權歸原作者所有，轉載出處 
本文地址：https://www.uisdc.com/18-free-tools-for-web-designer