Logo 设计

方形图标: Logo_green Logo Logo_green_no_question Logo_no_question

圆形图标: Logo_green_round

设计思路

基于 Qt 官方图标,添加 中文文档 字样。

图标全程使用 svg 资源,以便在所有分辨率下都得到较好的显示效果。

使用 Draw.io 编辑生成最终图像。

方形图标

参考 chm 和 Qt4 Aassistant 的图标风格,在右下角添加问号标识。

填充文字时,带问号版缩放高度至 16pt,无问号版缩放高度至 20pt。绿色字体因为边缘不明显,带问号版略微放大高度至 17pt

圆形图标

设置 70x70pt 的圆,在适当位置放置 Qt 官方图标和 中文文档 字样,官方图标大小不变,文本缩放高度至 19pt

添加 70x70pt 的外接矩形,采用相同尺寸。

资源来源

Qt图标

原始图标来自 Qt 官方网站 内嵌 svg 代码。

Qt


问号字样

Logo 设计 - 图7

问号图像使用 FontAwesome 字体中的 Question 符号,并修改颜色为 Qt 配色,添加白色描边:

  1. <path ... fill="#41cd52" stroke-width="30" stroke="white"/>

中文文档字样

中文文档_green 中文文档

使用 Noto Sans CJK SC Bold 字体,即 思源黑体 的粗体效果。

基于 text-to-svg 模块,使用 Node.js 将文本的字形转换为 svg 图像:

  1. // 导入 text-to-svg 模块
  2. const TextToSVG = require('text-to-svg');
  3. // 加载字体,创建对象
  4. const textToSVG = TextToSVG.loadSync('字体路径/NotoSansCJKsc-Bold.otf');
  5. // 主题色填充,无描边
  6. const attributes = {fill: '#41cd52'};
  7. // 使用 72 磅渲染
  8. const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};
  9. // 渲染文本,生成 svg
  10. var fs = require("fs");
  11. fs.writeFile("/uploads/projects/qt-document-cn/Logo/Text_green.svg", textToSVG.getSVG('中文文档', options), () => {});