Logo 设计
方形图标:
圆形图标:
设计思路
基于 Qt 官方图标,添加 中文文档
字样。
图标全程使用 svg
资源,以便在所有分辨率下都得到较好的显示效果。
使用 Draw.io 编辑生成最终图像。
方形图标
参考 chm 和 Qt4 Aassistant 的图标风格,在右下角添加问号标识。
填充文字时,带问号版缩放高度至 16pt
,无问号版缩放高度至 20pt
。绿色字体因为边缘不明显,带问号版略微放大高度至 17pt
。
圆形图标
设置 70x70pt 的圆,在适当位置放置 Qt
官方图标和 中文文档
字样,官方图标大小不变,文本缩放高度至 19pt
。
添加 70x70pt 的外接矩形,采用相同尺寸。
资源来源
Qt图标
原始图标来自 Qt 官方网站 内嵌 svg
代码。
问号字样
问号图像使用 FontAwesome 字体中的 Question 符号,并修改颜色为 Qt 配色,添加白色描边:
<path ... fill="#41cd52" stroke-width="30" stroke="white"/>
中文文档字样
使用 Noto Sans CJK SC Bold 字体,即 思源黑体 的粗体效果。
基于 text-to-svg 模块,使用 Node.js
将文本的字形转换为 svg
图像:
// 导入 text-to-svg 模块
const TextToSVG = require('text-to-svg');
// 加载字体,创建对象
const textToSVG = TextToSVG.loadSync('字体路径/NotoSansCJKsc-Bold.otf');
// 主题色填充,无描边
const attributes = {fill: '#41cd52'};
// 使用 72 磅渲染
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};
// 渲染文本,生成 svg
var fs = require("fs");
fs.writeFile("/uploads/projects/qt-document-cn/Logo/Text_green.svg", textToSVG.getSVG('中文文档', options), () => {});