免费网站设计 干货来了！给网页设计师的18个免费超实用工具

译者:游社。com-陈

链接:https://www.uisdc.com/18-free-tools-for-web-designer

每一个设计项目对设计师来说都是一个系统工程。投入你的时间和精力，结合你的想法和需求，努力做到最好的表达，为观众输出最好的设计。每一张素描，每一个概念，甚至每一个图标，都是设计师努力的结果。对于很多不从事这个行业的人来说，设计师的工作是一场浪漫有趣的冒险，对于深入其中的人来说，设计是一场伴随着能量和情感牺牲的持久战。

每一个优秀的设计作品背后，都意味着大量的努力。和其他职业一样，设计师在截止日期的压力下，需要克服很多困难才能实现目标。也正是这种压力促使设计师尽最大努力使用手头所有的材料和工具来实现自己的目标。绝大多数的Sketch插件、PS插件、设计和效率小工具都是在各种细分的设计需求下诞生的。

这些小工具和插件在关键时刻发挥着作用，让设计师能够在紧张的时间表中更快地完成设计工作。今天，我们推荐的所有设计工具都可以非常胜任地完成部分设计工作，帮助您推动设计项目的进展。

风景(https://sproutsocial.com/landscape)是一个专业的工具切割和调整图片大小。它会为你考虑将图片应用到不同的社交网站和平台的需求，一键生成所有可用的图片，从而消除了一个个裁剪的过程。

阿黛尔(https://adele.uxpin.com/)是著名团队UXPin创建的素材库，以改进工作流程和疯狂赠送各种材料而闻名于设计圈。这次他们把所有的设计系统和素材库放在一起，还提供了一个快速搜索的参考指南，就是Adele。

配色工具

色彩搭配作为视觉设计的核心，是设计师最关心的设计内容之一。针对这一需求，我收集了grad pad(http://ourown think . co . uk/grad pad . html)、hexnaw (https://hexnaw.com/)、liveweave(https://liveweave.com/colors/ Index.html)和cool hue(https://web kul . github . io/cool hue/)这四个专业水平以上的专业配色设计工具。

grapad(http://ourownthing.co.uk/gradpad.html)和Live Weave(https://liveweave.com/colors/index.html)可以说是色彩的游乐园，在这里你可以探索更适合自己需求的色彩。渐变填充(http://ourownthing.co.uk/gradpad.html)用于创建渐变颜色，而实时编织(https://liveweave.com/colors/index.html)在相对更传统的色轮的基础上探索合适的颜色，其他各种小工具用于微调颜色亮度和饱和度等属性。

酷派(https://webkul.github.io/coolhue/)比较直接，它直接为你提供现成的渐变配色，你可以直接选择自己喜欢的配色，使用HEX值或者下载相应的代码直接应用到网站上。

与之前的三种工具不同，https://hexnaw.com/的目标是提高现有配色方案的可访问性，确保它能够考虑到所有类型的用户(尤其是有视觉障碍的用户)，并确保配色方案充分可访问。而你需要做的也很简单。输入配色方案进行验证。

字体排版

排版也是设计中最基础的领域。在最新的工具中，我特别选择了两个工具:字体组合套件(http://fontcomb.kkuistore.com/)和type hero(https://type hero . now . sh/)，可以更好的提高字体布局的可读性，提供更丰富的用户体验。

字体组合套件(http://fontcomb.kkuistore.com/)是kkuistore团队的一项字体服务，可以帮助您找到完美的字体组合，包括34种经过验证的字体组合，可以直接使用。

英雄类型(https://typehero.now.sh/)直接覆盖整个谷歌字体字体数据库。你可以用它来调用任何你喜欢的字体。通过设置字体大小、颜色、背景颜色，可以直接测试字体的显示效果，确定符合自己需求的字体。

图形和图像

各种图片和图形材料可以根据共同的需要分为功能性和装饰性两类，但考虑到视觉设计的需要，有时它们之间的界限相当模糊。underow(https://undraw.co/illustrations)的服务就是考虑到了这两点。它是一组具有一定功能的插图，无论是用于网页还是应用程序，都是一个相当好的插图元素。

相比之下，Standart(https://standart.io/)提供的图形元素虽然没有undaw(https://undaw . co/illustrations)提供的图形元素功能强大，但是美感还是挺好的，每个图标都足够简洁优雅，可以根据自己的需要适当选择使用。

装饰细节

使用更程序化的方法来创建装饰细节更符合当前的原则，因为使用HTML、CSS、JS或SVG来创建装饰元素会更轻便、更适用。正是在这样的前提下，我想推荐BG Patterns(http://bgpatterns.com/)和SVG Backgrounds。

SVG背景(https://www.svgbackgrounds.com/)是由十几个奇妙的几何图案组成的。您可以通过更改颜色、不透明度或调整比例来达到所需的效果。

BG Patterns(http://bgpatterns.com/)是Patternninja的前身。虽然不如Patternninja强大，但还是可以帮你打造出漂亮的背景和装饰图案。

品牌设计

品牌设计是一个不可忽视的巨大领域。从简单的LOGO logo到庞大的企业VI设计工具包，设计师需要在品牌设计领域做很多事情，可靠的设计材料可以帮助设计师节省大量的时间和精力。因此，到目前为止，我们可以使用许多设计材料和工具包。不过为了节省你筛选的时间，我选择了两个工具，一个是DIY Free Logo Kits(https://kit . env ATO . com/)，两个是Aleksey Belorukov提供的场景生成工具。

第一个免费的LOGO设计工具(https://kit.envato.com/)是由著名的服务商Envato提供的。简而言之，它是一个EPS格式的图形素材集合，你可以在上面创建许多有趣的logos。

透视场景创建器(https://pixelbuddha.net/freebie/perspective-scene-creator)和Home Vintage Mock Up场景(https://pixelbuddha.net/freebie/ Home-Vintage-Mock Up-Scene)是Aleksey Belorukov提供的两个免费工具和素材，两者都包含了少量非常逼真和优雅的场景，可以根据您的需要进行编辑，生成您想要的视觉手稿和显示效果。

效率工具

效率工具有很多，但是今天我们推荐两个非常特别的。一个是http://shortcuts.design/,，里面有设计开发等不同领域各种软件的常用快捷键。无论你需要工作还是学习软件，它都能给你很好的帮助。

另一个工具是Copy Char (http://copychar.cc/)，收集各种不太好的符号和表达式，直接输出到电脑上。当您单击特定的符号和表达式时，您可以直接复制并粘贴它。

显示工具

最后，我想推荐Presenter(https://presentator . io/)，你可以用它来向你的团队成员或者客户展示你的概念设计。简单直观，功能强大，也非常适合协同工作。最棒的是它和UXPin、InVision之类的工具差不多，但是完全免费。

标签

在快节奏的工作中，使用细分工具帮助你完善许多细节，可以帮助你专注于更重要、更关键的事情。