2017年设计师的7个超级使用的镀铬扩展

提升网页设计效率的7个Chrome扩展程序

核心要点:

• Chrome扩展程序能简化设计流程，提供检查和编辑网页元素、链接检查和生成复杂CSS代码的工具，无需离开浏览器。
• Page Ruler、WhatFont、CSS3 Generator、Check My Links、Gravit Designer、ColorZilla和StyleBot等扩展程序对设计师特别有用，提供颜色取样、字体识别和实时网站定制等功能。
• 使用这些扩展程序可以节省时间并减少对其他软件的需求，使其成为设计师和开发人员的宝贵资源。

每个设计师都有自己独特的工作方式。无论您是直接在浏览器中进行设计（使用代码），还是仅使用浏览器实时测试网页设计，都有许多Chrome扩展程序可以极大地简化您的工作流程。我最讨厌的事情是什么？不得不打开一个庞大的桌面应用程序来完成一个相对较小的任务，所以我一直在寻找可以快速解决常见设计问题的Chrome扩展程序。

以下是我七个必不可少的Chrome扩展程序，以及六个适用于Firefox的设计师扩展程序（如果您是Web开发人员，您可能需要在所有浏览器中进行交叉测试！）。

1. Page Ruler

Page Ruler是一个有用的Chrome扩展程序，用于查找浏览器中任何元素的位置和/或大小——它比使用Chrome代码检查器更快，或者更糟糕的是，笨拙地遍历CSS文件。首先，使用十字准星围绕目标元素绘制一个选择框。浏览器顶部的栏将显示该元素的长度和宽度，以及它距屏幕每一侧的距离（好像应用了fixed/absolute定位）。

提示：使用箭头键微调您的选择，以获得最大精度。

2. WhatFont

由于我经常需要检查网页上的字体，查看某些文本块中使用的字体大小、实际字体名称及其颜色，因此WhatFont Chrome扩展程序对我来说非常有用。

单击任何文本部分即可查找十六进制/RGBA值、粗细、行高、字体样式以及字体系列。

有时，在浏览器底部添加Chrome检查窗口会在您工作时造成干扰，因此能够在不打开整个检查窗口的情况下获取所有这些信息会使事情变得更容易！

3. CSS3 Generator

CSS3 Generator是一个Chrome应用程序，可帮助您生成一些复杂或难以记住的CSS代码片段。对于简单的事情您不需要它，但让我们面对现实，一些CSS值很难从头开始编写（例如创建跨浏览器兼容的渐变或CSS转换所需的CSS）。只需点击几下，您就可以生成一些非常有用的CSS，在扩展程序预览中预览它，然后复制CSS并将代码粘贴到您的实际CSS文件中。

以下是支持的内容列表：

• 多个文本阴影
• 十六进制/RGBA代码
• CSS转换
• 边框半径
• 多个框阴影
• CSS列
• 箭头（用于工具提示）
• 渐变（线性、径向……甚至条纹）

4. Check My Links

URL键入错误（或完全忘记包含它们，但那是另一回事）相当容易，因此无论您的客户是否需要现有网站的帮助，或者您是从头开始构建网站，Check My Links对于任何网页设计师来说都是必不可少的。

Check My Links将扫描网页并查找损坏的链接——就这么简单。它可以免去您手动检查它们的麻烦。UI非常直观。Check My Links不会列出无效链接，而是简单地将实际网页上的损坏链接变成红色，而有效链接将显示为绿色，因此您可以一目了然地看到需要修复的内容。简单！

5. Gravit Designer

如果您需要设计图形，但又不想打开资源密集型设计应用程序（或者如果您没有/不想购买一个），请下载适用于Chrome的免费Gravit Designer扩展程序。

令人惊讶的是，它非常快。使用常用的画板尺寸开始设计非常容易，包括博客图形、社交媒体图形和常用打印尺寸的预设。Gravit是一个矢量设计应用程序，这使得设计可缩放的分辨率无关的设计变得非常容易。

我惊讶于许多选项和功能——它与使用Sketch等高级设计应用程序并没有太大区别，尽管视觉UI感觉更像Affinity Designer。

预期会有明显的元素，如形状、对齐、翻转、旋转、模糊、投影、复合形状的创建等等。它还能够导出到PNG、JPG、SVG和PDF，符号功能（如Sketch和Adobe XD），具有贝塞尔曲线和贝塞尔曲线的复杂SVG编辑工具，甚至还有滤镜，Gravit Designer实际上对于想要创建营销图形的专业设计师、摄影师和业余设计师来说是一个非常有吸引力的选择。

我的意思是，想象一下能够在Google Chrome中创建设计，而无需打开Photoshop、Illustrator、Sketch或Adobe XD。实际上，您不必想象，您可以立即免费下载Gravit Designer！

6. ColorZilla

ColorZilla是Google Chrome的吸管工具——它使您能够通过几次点击从网页中采样任何颜色。首先，单击Chrome中的ColorZilla扩展程序图标，然后将光标悬停在您要采样的区域上。您将获得该颜色的HSL、十六进制和RGBA值。通常情况下，您需要截取网站屏幕截图并将其导入Photoshop，但ColorZilla更快。ColorZilla还可以根据任何网站按需生成调色板，并使用颜色历史记录功能保存您最近使用的颜色，这使其在ColorPick Eyedropper等竞争对手中脱颖而出。

7. StyleBot

StyleBot是一个方便的Chrome扩展程序，适用于那些想要在实时网站上快速试用自定义CSS的人。它使您可以尝试不同的字体、不同的颜色、不同的样式等，而无需在代码编辑器和Google Chrome之间来回切换。我们发现StyleBot作为一种在实际提交到代码库之前在实时网站上原型设计微小调整和更改的方法非常有用。

结论

使用这些节省时间的扩展程序，通常很繁琐或需要您打开/购买更多软件的任务可以通过几次点击完成，您甚至不必离开Web浏览器即可完成。设计师和开发人员都会发现这些Chrome扩展程序非常有用。

Chrome扩展程序对于开发网站的人肯定很有用，但是希望从实时网站中提取视觉信息以便在Sketch、Adobe XD或Photoshop中使用它的设计师也会很快看到明显的节省时间的好处。

(FAQs部分已省略，因为与伪原创目标不符，且篇幅较长。 可以根据需要单独生成FAQs部分。)

以上是2017年设计师的7个超级使用的镀铬扩展的详细内容。更多信息请关注PHP中文网其他相关文章！