PS制作SVG图标上传阿里iconfont

最新推荐文章于 2025-03-08 16:34:27 发布
原创 最新推荐文章于 2025-03-08 16:34:27 发布 · 1.9k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ux #需求分析

本文介绍了如何使用Photoshop(PS)和Figma两种工具在PNG图标上添加圆型背景并填充颜色，方法包括制作SVG矢量图形，自定义形状，以及导出至阿里图标库Iconfont以支持自定义颜色。

借鉴文章：https://blog.youkuaiyun.com/weixin_45256858/article/details/121383494
https://blog.youkuaiyun.com/k912120/article/details/118787809
需求： 在png图标上加一个圆型背景并且填充颜色
思路：制作svg矢量图形，上传阿里图标库iconfont，开发就可以下载的时候自定义图标或者背景颜色
实现方式：有两种工具一、PS 二、figma

工具一 PS

1.导入图标
在这里插入图片描述
2.新建图层，选择形状工具椭圆，调整大小，填充颜色
在这里插入图片描述
3.移动图层顺序
在这里插入图片描述
4.合并图层
在这里插入图片描述
5.选择魔棒工具,选中图像，（按shift增加选区，alt减少选区）右键选择建立工作路径，之后会有一个容差设弹框，这里设置最小0.5

最低0.47元/天 解锁文章
ps图片导svg，并上传到阿里图标库
k912120的博客
07-16 2922
之前一直用的Inksacpe转的，但是在删除背景时，图片极其容易虚化变形。 最近发现ps导出的svg，也可以上传到阿里，最关键的一步是先把图片“形状化”。 教程如下： 1.打开ps，导入需要转换的图片； 2.用快速选择工具，选中图片形状； 3.在图片上单击右键，选择“建立工作路径”； 4.点击左侧“钢笔”工具，并在图片上单击右键，选择“自定义形状”； 5.点击左侧“矩形”工具，选择“自定义形状工具”，会发现顶部导航的“形状”处，会出现和图片一样的形状，如果没...
Android应用开发之PNG、IconFont、SVG图标资源优化详解
sa3221sa的博客
01-20 739
======== 最近因为一些个人私事导致好久没写博客了，多事之年总算要过去了，突然没了动力，所以赶紧先拿个最近项目中重构的一个小知识点充下数，老题重谈。 在我们App开发中大家可能都会有过如下痛疾（程序员和设计妹妹注意喽）： 好多小的图标好烦人，又占体积还要考虑分辨率，一拉伸就模糊等。 同一个图标不同状态还有不同颜色的多张。 总是幻想IOS、Android、Web等对于一个图标只切一次图多好。 如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案，当然了，采用下面方案对于重型应用或
利用ps导出svg（主要用于上传自定义图标到iconfont）
热门推荐
echo
11-18 1万+
ps版本：2020 借鉴文章：https://blog.youkuaiyun.com/k912120/article/details/118787809 事情起因是我不想多此一举下个AI,本来想ps直接导出svg格式,但是导出来上传到iconfont后却是一片空白，相信很多人第一次都遇到过这种情况。 我一愣，然后打开svg代码看到内容却是这样，怎么会有image标签 当然了，也不是说这种不能用，只是不能用于iconfont上传相对于我们正常的svg 下面正式开始 ...
使用photoshop生成SVG的详细方法
大剑师兰特的GIS世界
06-12 7359
因为SVG矢量图的优势关系，希望制作svg图片，目前手头有photoshop工具，没有Adobe Illustrator等专业软件。在目前拥有的环境下，使用ps来制作svg
利用Adobe Photoshop 2021生成SVG代码
nangua8552的博客
02-26 991
利用Adobe Photoshop 2021生成字母C的SVG代码
制作SVG动画图标
cungui5726的博客
08-21 746
Recently one of my 1st year students proposed a UI design for her photography tutorial site, and asked for my advice as to how to pull it off. In my opinion, SVG was the best answer; while the student...
Photoshop制作图标（只有图标没有背景）
qq_65356682的博客
11-05 778
这里以C#的exe为例 下面里面有白色的是因为之前我没有把中间那个白色的给去掉，按照上述流程 就可以制作自己的图标了，想要什么图标可以直接去网上搜。但是图标是需要.ioc文件的可以再如下链接中转化。结束有不解的问题可以再评论区里回复。
高级 UI 成长之路 (七) SVG 基础使用 + 绘制中国地图
2401_84123213的博客
05-03 461
它定义的图像如下所示:上面水滴形状就是呈现出来的对应的图像，在这段代码中，首先使用 vector 标签来指定这是一幅 SVG 图像，而它有下面几个属性。
WPF图标制作，图形设计转换为矢量Path。
csczh的博客
01-02 4262
WPF 生成图标 按钮 图标设计 WPF按钮样式
精灵图与字体图标的使用
qq_52992057的博客
03-27 1279
精灵图、雪碧图、字体图标
save-ps-to-svg1.0.jsx 让Ps支持svg格式
03-16
让Ps支持svg格式的输出 使用方法：将此文件放到 PS 安装目录下的 /Presets/Scripts 下 说是使用形状工具绘制出来的图像才可以，具体使用请参考网上的教程
sketch-iconfont：此插件可帮助您轻松插入和管理图标字体中的图标
02-04
:warning: 更新之前：如果您正在使用自定义图标字体，请按以下方式导出字体包： 然后更新插件，您可以安装自定义字体包，而不会丢失自定义字体。 深色模式支持-2019年3月18日（版本4.7.0） 添加暗模式支持 版本48支持-2017年12月7日（版本4.6.0） 新版本和发行视频即将发布-2017年1月19日 我拍了一个有关导入自定义图标的（ ） 版本41支持-2016年11月9日（版本4.5.1） 不建议使用ColorWithSVGString方法，已将其修复 修正了非文本层选择问题-2016年10月4日（版本4.4.2） 问题在这里 新功能和修复-2016年8月17日（版本4.4.0）
【亲测免费】 使用Photoshop生成SVG的详细方法
gitblog_06599的博客
10-31 1638
使用Photoshop生成SVG的详细方法 去发现同类优质开源项目:https://gitcode.com/ 在这个教程资源中，我们深入探讨了如何利用Adobe Photoshop这一强大的图像编辑工具来创建和导出SVG（Scalable Vector Graphics）文件。SVG格式因其在网页设计中的灵活性和高清显示而备受青睐。如果你拥有Photoshop但没有Illustrator这样的向量...
svg制作小图标
weixin_34249367的博客
02-17 4770
什么是svg svg(scalable vector graphics)可缩略矢量图形。视网膜屏下分辨率解决方案之一。比如在iphone设备下devicePixelRatio大于1的情况下，防止图片模糊就可以使用svg的图片。svg是基于xml的标记语言。编辑起来类似于html构建页面一样。学习曲线平滑。实际应用于背景图片，小图标的场景较多。 如果获取svg 既然svg常作为图标使用，那么如何复用...
ps制作icon
weixin_44554536的博客
04-18 606
Ps制作icon icon设计十分简单主要是根据灵感来制作的有时只要灵感突发就可以进行设计了而有时却又什么也想不出来，而老师叫我们设计一套属于自己的icon我也是一脸懵逼啥也不懂后来还是看了以前的作业突发灵感才想出来的刚刚开始的时候一直再搭配颜色又用了两天改了N次才算过关的。 icon的类型要整套都是一样的要不然人们看到这个icon会觉得这个icon看起来不好看而且...
SVG 图标制作指南
weixin_33755557的博客
07-03 2090
iconfont解决了我们以前大量使用小图标带来的种种问题，但是也有自身的各种缺陷。比如不支持多色，不同浏览器下的表现不同，需要做各种兼容等。 不久的将来iconfont应该会被svg symbol技术替换。本文就是介绍如何在网页中使用SVG图标。顺带一提蚂蚁金服的Ant.Design已经把方案从原来的字体图标转到SVG图标。 第一步...
制作前端开发中 SVG 图标
谢彦的技术博客
03-08 1127
SVG 是一种使用 XML 定义的可缩放矢量图形。
【SVG】基本图形 —— 制作自己的SVG动态图标
weixin_33852020的博客
03-23 1471
本文章假设读者对SVG有基础的了解。 属性 width 元素的宽度 height 元素的高度 fill 为闭合图形填充颜色 fill-opacity 填充颜色的透明度 stroke 为线条添加颜色 stroke-width 线条宽度 stroke-opacity 线条透明度 stroke-linecap 线条终点的样式，支持三个值：but...
ps制作圆形图标
Junior
07-30 2263
1、新建画布：50 50 72 为了方便操作可以适当放大 2、新建图层：画圆 shift+左键 可画正圆 移动同时按住空格 3、填充圆颜色： 前景色alt+delete 4、拖入图标在最上层 回车结束 5、图标调整 shift+alt+鼠标左键 等比例缩放 6、保存...
ps制作svg图标
最新发布
04-24
<think>好的，用户想用Photoshop制作SVG图标，我需要一步步解释清楚。首先，用户可能已经了解SVG的优势，比如矢量缩放和编辑性，但可能需要具体步骤。根据引用[2]和[5]，Photoshop确实支持SVG导出，但需要注意一些设置。 首先，新建文档时要选择适当的尺寸，比如32x32像素，并设置透明背景。这有助于图标在不同背景下使用。然后，用户可能需要使用形状工具或钢笔工具绘制矢量图形，而不是像素图层，因为SVG需要矢量数据。引用[4]提到使用形状工具和钢笔工具创建图形，这点很重要，因为像素图层无法转换为路径。 接下来，导出步骤是关键。用户需要选择“导出为”，然后选择SVG格式。这里要确保勾选保留路径和形状的选项，可能还要调整响应式设计，这样图标能自适应大小。引用[2]中的教程可能详细说明了导出设置，需要提醒用户检查这些选项。 另外，用户可能需要优化SVG代码，比如删除不必要的元数据，以减小文件大小。可能还要提到使用在线工具或Illustrator进行进一步优化，但用户的问题是针对Photoshop，所以重点放在PS的步骤上。 还要注意，如果用户添加了效果如阴影或渐变，这些可能在导出时出现问题，需要测试。引用[3]提到SVG作为背景图片的应用，所以确保导出的SVG兼容性很重要。 最后，建议用户上传到阿里图标库，如引用[2]所述，可能需要调整颜色和背景。同时，引用[5]提到Photoshop 2022的改进，可能影响导出功能，建议用户确认软件版本是否支持。 总结步骤：创建矢量图形，正确导出设置，优化代码，测试使用。可能的问题包括导出后图形变形或效果丢失，需要检查图层是否为矢量，并调整导出选项。</think>### 如何用 Photoshop 创建 SVG 图标 以下是分步操作指南，结合矢量图形特性与导出设置要求： 1. **新建文档** - 打开Photoshop，选择`文件 > 新建` - 设置画布尺寸（推荐图标常用尺寸如$32 \times 32$像素或$64 \times 64$像素） - **关键设置**：将`颜色模式`设为RGB，`背景内容`选择透明（确保图标背景可编辑）[^4] 2. **绘制矢量图形** - 使用`形状工具`（矩形/椭圆/自定义形状）创建基础图形 - 通过`钢笔工具`绘制复杂路径（锚点编辑可精准控制曲线） - **注意事项**：避免使用栅格化图层（如普通画笔绘制），仅保留矢量形状图层[^5] 3. **添加样式与颜色** - 在属性面板调整填充色、描边粗细（数值需为整数，如$3$px） - 若需渐变效果，使用矢量蒙版渐变（栅格化渐变可能导致导出异常）[^5] 4. **导出SVG文件** - 选择`文件 > 导出 > 导出为` - 格式选择`SVG`，勾选以下选项： - ✅ 保留矢量数据 - ✅ 使用响应式设计（自适应尺寸） - ✅ 最小化文件大小（自动清理冗余代码）[^2][^3] 5. **代码优化（可选）** - 用文本编辑器打开导出的.svg文件 - 删除`<metadata>`等非必要标签（可减少$10\%$-20\%$文件体积） - 检查`viewBox`属性是否包含完整图形范围[^3] ```plaintext 典型SVG导出结构示例： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path fill="#3498db" d="M32 5L5 59h54z"/> </svg> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值