站点图标制作过程

添加了站点图标,本文记录制作过程。内容涉及svg格式图片网络下载,svg格式图片在线编辑,photoshop修改png图片,png图片在线转换为ico图标。为有相同遭遇的小伙伴提供指引。

选取基础图片

  • 本文使用的是开源的svg格式的四叶草作为基础图片。
  • 图标来源https://materialdesignicons.com/搜索clover
  • 导出svg格式源文件如下:
    1
    2
    3
    4
    5
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,11.18C15.3,8.18 17,6.64 17,4.69C17,3.19 15.75,2 14.25,2C13.39,2 12.57,2.36 12,3C11.43,2.36 10.61,2 9.69,2C8.19,2 7,3.25 7,4.75C7,6.64 8.7,8.18 12,11.18M11.18,12C8.18,8.7 6.64,7 4.69,7C3.19,7 2,8.25 2,9.75C2,10.61 2.36,11.43 3,12C2.36,12.57 2,13.39 2,14.31C2,15.81 3.25,17 4.75,17C6.64,17 8.18,15.3 11.18,12M12.83,12C15.82,15.3 17.36,17 19.31,17C20.81,17 22,15.75 22,14.25C22,13.39 21.64,12.57 21,12C21.64,11.43 22,10.61 22,9.69C22,8.19 20.75,7 19.25,7C17.36,7 15.82,8.7 12.83,12M12,12.82C8.7,15.82 7,17.36 7,19.31C7,20.81 8.25,22 9.75,22C10.61,22 11.43,21.64 12,21C12.57,21.64 13.39,22 14.31,22C15.81,22 17,20.75 17,19.25C17,17.36 15.3,15.82 12,12.82Z" />
    </svg>
  • 下载生成fav.svg

svg在线编辑

  • 利用网上工具进行svg编辑
  • 在线工具网站https://c.runoob.com/more/svgeditor/
  • 导入刚才生成的fav.svg
  • 进行编辑,我只是添加了文字WQ,字体选择Euphoria Script,因为我认为比较漂亮
  • 我试着导出png格式,但是失败,只是存储了svg格式的,文件源代码为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
    <g>
    <title>background</title>
    <rect fill="#ffffff" id="canvas_background" height="402" width="402" y="-1" x="-1"/>
    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
    </g>
    <g>
    <title>Layer 1</title>
    <g stroke="null" id="svg_5">
    <path stroke="null" id="svg_4" d="m200.141955,184.875345c65.386845,-58.992581 99.070978,-89.275439 99.070978,-127.620617c0,-29.49629 -24.767744,-52.896681 -54.489038,-52.896681c-17.040208,0 -33.287848,7.07911 -44.58194,19.664194c-11.294091,-12.585084 -27.541732,-19.664194 -45.770792,-19.664194c-29.721293,0 -53.300186,24.580242 -53.300186,54.076533c0,37.165326 33.684132,67.448184 99.070978,126.440765m-16.24764,16.124639c-59.442587,-64.891839 -89.956448,-98.320968 -128.594129,-98.320968c-29.721293,0 -53.300186,24.580242 -53.300186,54.076533c0,16.911207 7.13311,33.035845 19.814196,44.244436c-12.681085,11.20859 -19.814196,27.333229 -19.814196,45.424287c0,29.49629 24.767744,52.896681 54.489038,52.896681c37.44883,0 67.962691,-33.429129 127.405277,-98.320968m32.693423,0c59.244445,64.891839 89.758306,98.320968 128.395987,98.320968c29.721293,0 53.300186,-24.580242 53.300186,-54.076533c0,-16.911207 -7.13311,-33.035845 -19.814196,-44.244436c12.681085,-11.20859 19.814196,-27.333229 19.814196,-45.424287c0,-29.49629 -24.767744,-52.896681 -54.489038,-52.896681c-37.44883,0 -67.962691,33.429129 -127.207135,98.320968m-16.445782,16.124639c-65.386845,58.992581 -99.070978,89.275439 -99.070978,127.620617c0,29.49629 24.767744,52.896681 54.489038,52.896681c17.040208,0 33.287848,-7.07911 44.58194,-19.664194c11.294091,12.585084 27.541732,19.664194 45.770792,19.664194c29.721293,0 53.300186,-24.580242 53.300186,-54.076533c0,-37.165326 -33.684132,-67.448184 -99.070978,-126.440765z"/>
    </g>
    <text stroke="#000000" transform="matrix(2.941027879714966,0,0,2.9348838329315186,-850.8677682094276,-121.38372795656323) " xml:space="preserve" text-anchor="start" font-family="Euphoria Script" font-size="47" id="svg_6" y="121.63946" x="298.168409" stroke-width="0" fill="#ffffff">W</text>
    <text stroke="#000000" transform="matrix(2.941027879714966,0,0,2.9348838329315186,-850.8677682094276,-121.38372795656323) " xml:space="preserve" text-anchor="start" font-family="Euphoria Script" font-size="47" id="svg_7" y="118.913628" x="386.232858" stroke-width="0" fill="#ffffff">Q</text>
    </g>
    </svg>
  • 由于本地没有Euphoria Script需要自行搜索安装到本地之后再安装,预览svg文件才能正常显示

  • 字体备份ckx3

图片编辑及生成

  • 使用截图软件将打开的svg文件截图生成png,由于我选择的字体比较特殊,所以自行转换
  • 使用Photoshop进行,参考了微软和谷歌图标的颜色取值对四叶草颜色进行修饰
  • 更改后导出png格式的图片
  • 利用网上工具转换成ico格式

生成的文件存入相关目录

  • 存入模板的themes\next\source\images文件夹
  • 在next.yml中进行相关设置,即可应用。

成品欣赏

avatar1
avatar1

总结

  • 利用了网络资源和开源项目,在此致谢。
0%