哥飞教你如何利用各种工具制作一个SVG格式的Logo

公众号: 哥飞发布时间: 2024年3月22日 00:00 原文链接: https://mp.weixin.qq.com/s?__biz=MjM5OTIzMzYyMA==&mid=2650082516&idx=1&sn=a6073f8d9a74cc7db0550bfd3907f09a&chksm=bf3f3def8848b4f9d39f7115d984f03b75aeee9741723e918057b317b9e90348f20990ab29b5#rd

大家好，我是哥飞。

经常有朋友问，如何给自己的网站制作一个好看的 Logo？

哥飞经常上站，已经总结了一套快速制作 SVG 格式的 Logo 的方法，今天教给大家。

先说下为什么要用 SVG 格式，而不是 PNG ？

因为 SVG 是矢量图形，也就意味着不管怎么放大缩小都能够保持清晰度，可以适合在网站的各个位置显示不同大小尺寸的图片。

好了，了解了为什么要用这种格式之后，我们直接开始吧。

今天我们以制作拼音“GeFei”的Logo 为例，给大家说明。

为什么要用拼音呢？

因为暂时这些AI工具还不太能够正确显示汉字。

第一步，我们需要打开 ideogram.ai 这个文字生成图片工具。

为什么用它，是因为只有这个目前能够比较正确的显示英文字母。

提示词很简单，直接写“a website logo with the words:"GeFei"”。

图片尺寸选择正方形，Magic Prompt 开启，Model 选择 1.0 ，然后点击生成按钮即可。

会显示生成过程，如63%时是这样：

生成完成后是这样：

这里一样要抽卡，不太可能一次就生成满意的结果。

不过其实这次的第四张图片，哥飞还是挺喜欢的，有“飞”的感觉。

<table><tbody><tr><td width="557" valign="top"><p style="text-align: center;"><img class="rich_pages wxw-img js_insertlocalimg js_img_placeholder wx_img_placeholder" data-imgfileid="502598859" data-ratio="1" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGaicGM2azyXNz84c05Mh6tUPTzRseK8UA8POdAbI43zNkFYm4HPMicfYhw/640?wx_fmt=jpeg&from=appmsg#imgIndex=3" data-type="jpeg" data-w="1024" style="aspect-ratio: calc(1) / 1; width: 655px !important; height: auto !important;" data-original-style="" data-index="6" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGaicGM2azyXNz84c05Mh6tUPTzRseK8UA8POdAbI43zNkFYm4HPMicfYhw/640?wx_fmt=jpeg&from=appmsg#imgIndex=3" _width="677px" alt="图片"></p></td></tr></tbody></table>

如果不满意，我们可以继续点击生成按钮，再生成四张图片。

这回生成的四个里边，哥飞喜欢第三个，不过需要做一些修整。

<table><tbody><tr><td width="557" valign="top"><p style="text-align: center;"><img class="rich_pages wxw-img js_insertlocalimg js_img_placeholder wx_img_placeholder" data-imgfileid="502598861" data-ratio="1" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGat8nKj8vV6rvRyAAicU3x4tG92HoUNCtCqWibWbwSLJsNp7NhqjCg5f5g/640?wx_fmt=jpeg&from=appmsg#imgIndex=5" data-type="jpeg" data-w="1024" style="aspect-ratio: calc(1) / 1; width: 655px !important; height: auto !important;" data-original-style="" data-index="8" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGat8nKj8vV6rvRyAAicU3x4tG92HoUNCtCqWibWbwSLJsNp7NhqjCg5f5g/640?wx_fmt=jpeg&from=appmsg#imgIndex=5" _width="677px" alt="图片"></p></td></tr></tbody></table>

整体设计还是有些创意的，我们需要把“i”右边的一个“®”和一个黑色圆点去掉。

这时就需要打开第二个工具 ClipDrop.co/cleanup ，这个工具可以去除图片里我们不需要的元素。

用鼠标把不需要的涂抹掉就好了，完成之后长下面这样。

<table><tbody><tr><td width="557" valign="top"><p style="text-align: center;"><img class="rich_pages wxw-img js_insertlocalimg js_img_placeholder wx_img_placeholder" data-imgfileid="502598863" data-ratio="1" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGaOnkiaK47Iee0gNqVRkbOibhibaTdicrBZvNhxLP3Ujlk9VKfhCLtzhKSKA/640?wx_fmt=jpeg&from=appmsg#imgIndex=7" data-type="jpeg" data-w="720" style="aspect-ratio: calc(1) / 1; width: 655px !important; height: auto !important;" data-original-style="" data-index="10" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/LBrX00GQeicvtFFaFwTlEAYDKkHkWnlGaOnkiaK47Iee0gNqVRkbOibhibaTdicrBZvNhxLP3Ujlk9VKfhCLtzhKSKA/640?wx_fmt=jpeg&from=appmsg#imgIndex=7" _width="677px" alt="图片"></p></td></tr></tbody></table>

接着我们需要使用第三个工具 Vectorizer.ai ，用来把图片转成 SVG 格式。

下载之后，可以用谷歌浏览器打开，预览一下。

如果你不喜欢这个颜色，还可以再调整，SVG代码可用代码编辑器打开修改。

相关链接

04-SEO优化配置