怎样的图标才像是一整套?

图标要看起来是一套,需要共用同样的网格、线宽、边角处理、细节程度和配色。把不同图标包里的图标混在一起,或者一次用一条提示词单独生成,通常至少会破坏其中一项。图标集生成器会根据同一段风格描述,把一套中的所有图标画在同一张图上,所以绘制上的选择对所有图标只做一次。之后,每个图标再被单独抠出来,描摹成独立的 SVG。

用 png2svg.art 制作的三套图标:咖啡馆的棕色线条图标、健身记录应用的红色填充图标和旅行应用的纯色平涂图标

我们的三套示例图标,每套都来自一份清单:线条风格的咖啡馆应用、直角填充风格的健身记录应用,以及三种颜色纯色平涂的旅行应用。

怎么制作一套图标?

打开 AI Logo 生成器,选择图标。工作室的标题会变成图标集生成器。

  1. 列出图标。输入你需要的东西,用逗号或顿号分隔,或每行一个:一杯咖啡、可颂、地图标记、集点卡。每一项都会变成一个标签。一套最多 25 个图标。
  2. 选择绘制方式。线条是统一粗细的轮廓线,填充是单色的实心形状,纯色平涂是最多三种颜色的实心形状,参照图片则沿用你上传的图片(需登录),或你已经做好的标志或图标集的风格。
  3. 选择边角。圆角或直角。
  4. 需要的话,用文字描述风格。最多 300 个字符,例如“亲切简约,线条端点圆润,带一点手绘的温度”。这句话会用于这一套中每个图标的绘制。
  5. 发送。每个格子会先显示图标的描摹过程,然后显示完成的 SVG。

新的一套的价格会在发送前显示在按钮上;生成失败的一套不收费。

怎样只修改一个图标,而不重画其他图标?

使用一轮修改。在一轮修改中,你可以附上备注重做图标(“一卷普通的瑜伽垫,不要纹理”),也可以新增图标,每次最多修改九处。重做和新增的图标会按这一套的风格绘制,所以依然保持统一。一套的前几轮修改已包含在内;如果某一轮需要积分,开始前按钮上会注明。

如果只是某个细节不对,重画又没有必要,可以在 SVG 编辑器中打开这个图标,直接修改路径或颜色。

下载包里有什么?

ZIP 包含三部分:

文件夹 内容
svg/ 每个图标一个 SVG,viewBox="0 0 24 24",留 2 px 内边距
png/ 每个图标的透明 PNG,尺寸为 16、24、32、48、64、128、256 和 512 px
sprite.svg 所有图标,每个都是一个 id 为 icon-NAME 的 <symbol>

小尺寸 PNG(48 px 及以下)按各自的尺寸单独绘制,所以线条会落在整像素上,而不是由大图缩小得到。更大的尺寸由 512 px 缩放而来。

怎样在网站上使用这些图标?

线条或填充风格的图标集,SVG 使用 currentColor 绘制,所以图标会跟随周围文字的颜色。改色只需要写 CSS,不用修改文件:

<button class="icon-button">
  <svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
  Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }

如果你希望把颜色直接写进每个文件,可以在下载对话框中选择按设计颜色。纯色平涂风格的图标集始终保留自己的颜色。装饰性图标请标记 aria-hidden="true";单独用作按钮的图标,请给它一个无障碍名称。

什么样的清单效果最好?

具体、能画出来的名词效果最好:“自行车”“秒表”“门锁”。抽象的词(“增长”“信任”)没有给生成器任何具体可画的东西,所以请先把它们换成一个物体(“一株嫩芽”“一次握手”)。整份清单的细节程度要保持一致。一套里既有“圆点”又有“城市天际线”,无论怎么画都会显得参差不齐。

上线之前,请把每个图标放在文字旁边,以 16 px 和 24 px 检查一遍,检查它们在你的背景上的对比度,并确认相似的图标仍然容易区分。生成器不会检查图标是否与别人的标识相似,所以打算注册为商标的图标,请自行审查。