如何制作软件图标
大家好,这节课我们来讲一下如何制作软件的图标。
关于图标设计的建议
如果你的预算充足的话,我建议直接付费找人设计。
关于便宜的设计服务
闲鱼上那些太便宜的就没有必要了,因为我之前踩过坑,他们也是用 AI 给你生成一下。
如果你想自己设计的话,可以参考一下下面的这种方式,我来教一下大家。
大家应该都不是专业的设计师,所以我们可以使用一些工具来辅助完成图标设计。
制作图标的完整流程
在 IconFinder 寻找灵感
首先,我们打开这个网站:IconFinder
打开之后,我们根据自己软件的名称搜索相关图标。
比如说我的软件叫”小喵记账”,我们就搜索一下 cat,然后回车。
我们可以在搜索的结果里面看到非常多的小猫的图片,并且都是卡通的或者线条的,适合用来作为软件的图标。
我们可以在这个里面去:
- 找一下灵感
- 或者找到合适的图标
- 然后把它发给一些作图的 AI,让它再修改一下
比如我们就用这个线条的来作为软件的图标,然后直接下载 PNG。
商用注意事项
如果是商用的话,我建议大家还是把它修改一下,不要直接用原图。
因为我们这节课主要是用来做演示,所以我们就直接用它来作为软件的图标。
使用可画编辑图标
打开可画(https://www.canva.cn),我已经登录了。
我们就直接点击”创建”,然后选择”Logo”。
这个时候我们回到刚才的网站,然后直接把这个图片拖过来:
- 把它拖大一点
- 放到图标的中间
导出 SVG 格式
然后点击右上角的”下载”,选择:
- 透明背景
- 格式选择 SVG
- 然后下载
因为我们代码里面的格式是 SVG 格式,所以我们这里就保存一个 SVG 的格式。
替换项目中的 Logo 文件
找到这个 logo 图标的位置,它是在 static 目录下面。
打开项目文件夹:
client/
└── src/
└── static/
└── logo.svg ← 这个图片就对应我们软件当前的 logo现在把它替换掉:
- 找到
logo.svg文件 - 右键删除
- 找到我们刚才下载的这个 SVG 文件
- 把它复制过来
- 右键重命名,改成
logo.svg
验证效果
修改好之后,我们刷新一下页面。
现在软件的图标已经修改好了! 🎉
补充说明
我们后面可能还需要再去下载一个 PNG 格式的图标。
为什么需要 PNG 格式?
因为我们去上传到小程序或者是说上架到应用商店的时候,应该还是需要去上传一个图片的。
那个地方可能就需要去上传一个 PNG 的图片,所以我们这里可以到时候再去下载。
总结
制作软件图标的步骤:
- 在 IconFinder 搜索并下载合适的图标
- 使用可画等工具进行编辑和调整
- 导出 SVG 格式用于网页和应用
- 必要时准备 PNG 格式用于应用商店
图标设计小技巧
- 保持简洁,避免过于复杂的设计
- 选择与产品定位相符的风格
- 确保图标在不同尺寸下都清晰可辨
- 商用时注意版权问题,建议进行二次设计
