百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Inkscape 线条风格图标制作教程

zhezhongyun 2025-05-28 21:40 70 浏览

本教程将引导你使用 Inkscape 创建一系列线条风格的图标。我们将通过组合基本形状、路径操作和描边样式来实现这些图标。主要原理包括:使用基本形状作为构建模块,通过路径操作(如联合、差集、分割、打平)来合并或修改形状,将对象转换为路径以便进行节点编辑,最后应用统一的描边样式并移除填充。

1. 地图标记图标

我们将从一个简单的地图标记图标开始。

  1. 按下键盘上的 1 键,将视图缩放到 100%。
  2. 选择 Squares and rectangles 工具。按住 Ctrl 键,点击并拖动以绘制一个正方形。
  3. 双击左下角的颜色条打开 Fill and Stroke 面板。
  4. 在 Fill and Stroke 面板中,选择 Stroke paint 标签页,点击 No paint (X 图标) 以确保没有描边。
  5. 选择 Fill 标签页,将 Opacity (%) 滑块调整到大约 53.1%。
  6. 点击右上角的磁铁图标启用 Snapping。
  7. 选择 Circles and ellipses 工具。将光标移动到正方形的左上角,当提示 Handle to corner 时点击并拖动到正方形的右下角,当提示 Handle to corner 时松开,这样就创建了一个与正方形等大的内切圆。
  8. 选择 Select and transform objects 工具 (快捷键 S 或 F1)。点击右上角的磁铁图标禁用 Snapping。
  9. 右键点击圆形,选择 Duplicate。
  10. 按住 Ctrl 和 Shift 键,拖动新复制圆形的角控点,将其等比缩小到大约原先的 1/3 大小。
  11. 点击并拖动选择所有三个对象(正方形、大圆、小圆)。
  12. 再次点击已选择的对象组,使其出现旋转控点。按住 Ctrl 键,拖动角部的旋转控点,将对象组旋转45度,使正方形变成菱形。
  13. 放大视图以便操作。选择 Create and edit shapes with the Boolean tool (Shape Builder tool) (快捷键 X)。
  14. 确保工具栏中的 Finish: 选项为 + (Add) 模式。
  15. 点击并拖动,从大圆形的上部区域穿过菱形的下半部分,将这两个部分合并。
  16. 选择 Select and transform objects 工具。
  17. (可选步骤,使尖角变圆) 选择 Edit paths by nodes 工具 (快捷键 N)。
  18. 在工具控制栏中,点击 Add Corners LPE 图标 (带圆角的方形图标)。
  19. 点击选中标记底部尖端的节点 (它会变成蓝色菱形)。
  20. 拖动该节点旁边出现的小圆形控点向内拉动,直到尖角变得圆润。调整到大约 14.94 (这是一个参考值,可以目测调整)。
  21. 选择 Select and transform objects 工具。
  22. 选中地图标记形状,然后点击菜单 Path > Object to Path。
  23. 在 Fill and Stroke 面板中,将 Opacity (%) 调回 100.0%。
  24. 按下键盘上的 1 键,将视图缩放到 100%。
  25. 在屏幕左下角的调色板区域,点击 Fill 旁边的红色 X 以移除填充色。
  26. 按住 Shift 键,同时点击调色板中的黑色,为对象添加黑色描边。
  27. 打开 Fill and Stroke 面板,切换到 Stroke style 标签页。
  28. 将 Width 设置为 5.000 px。
  29. 确保工具栏中 When scaling objects, scale the stroke width by the same proportion 按钮(通常是一系列平行线图标)未被激活 (这样缩放时描边宽度不变)。
  30. 按住 Ctrl 键,拖动对象的角控点将其等比缩小到合适的图标尺寸。



2. 篮球图标

接下来制作篮球图标。

  1. 按下键盘上的 1 键,将视图缩放到 100%。
  2. 选择 Circles and ellipses 工具。按住 Ctrl 键,点击并拖动绘制一个正圆。当前描边宽度应为 5.000 px,无填充。
  3. 选择 Select and transform objects 工具。
  4. 右键点击圆形,选择 Duplicate (或者按 Ctrl + D)。
  5. 按住 Ctrl 和 Shift 键,拖动复制出圆形的角控点,将其从中心向外等比放大,大约比原圆大 1.5 倍左右。
  6. 选中较大的外圆,点击菜单 Path > Object to Path。
  7. 选择 Edit paths by nodes 工具。
  8. 点击选中外圆顶部的节点,按住 Shift 键再点击选中底部的节点。
  9. 在工具控制栏中,点击 Break path at selected nodes 图标。
  10. 点击菜单 Path > Break Apart。
  11. 选择 Select and transform objects 工具。点击画布空白处取消选择。
  12. 选择左半边的弧形,按住 Ctrl 键,将其水平向左移动一段距离。
  13. 选择右半边的弧形,按住 Ctrl 键,将其水平向右移动一段距离。
  14. 选中所有三个对象(小圆和两个弧形)。
  15. 点击菜单 Object > Align and Distribute...。
  16. 在 Align and Distribute 面板中,将 Relative to: 设置为 Last selected。
  17. 点击 Distribute horizontally with even horizontal gaps 图标 (在 Distribute 部分,通常是中间带均匀间隔的三个矩形图标)。
  18. 点击画布空白处取消选择。
  19. 选择 Draw Bezier curves and straight lines 工具 (快捷键 B)。
  20. 确保工具栏中 Mode: 设置为 Create regular Bezier path (第一个图标)。
  21. 在篮球图标的上方点击一下设置起点,按住 Ctrl 键向下拖动,在图标下方点击一下设置终点,然后按 Enter 键,绘制一条垂直线。
  22. 在 Fill and Stroke 面板的 Stroke style 标签页中,确保其 Width 为 5.000 px。
  23. 选择这条垂直线,然后按住 Shift 键加选中心的小圆。
  24. 在 Align and Distribute 面板中,Relative to: 仍然是 Last selected,点击 Center on vertical axis 和 Center on horizontal axis 图标,使直线与圆心对齐。
  25. 选中垂直线,按 Ctrl+D 复制它。
  26. 点击工具栏中的 Object Rotate 90 degrees clockwise (XC) 图标,将复制的直线旋转90度。
  27. 选中所有对象(篮球的圆圈、两条弧线、两条中心直线)。
  28. 点击菜单 Path > Division。
  29. 点击画布空白处取消选择。现在篮球的各个部分都被分割开了。
  30. 仔细选择并删除多余的线段:主要是两条中心直线超出主体圆的部分,以及两条弧线在中心圆内部的部分。
  31. 选中所有剩余的篮球部件。
  32. 按住 Ctrl 键,拖动角控点将整个篮球图标等比缩小到合适的尺寸。



3. 嘴唇图标

现在来制作嘴唇图标。

  1. 按下键盘上的 1 键,视图缩放至 100%。
  2. 选择 Circles and ellipses 工具。按住 Ctrl 键,点击并拖动绘制一个正圆。
  3. 移除描边:按住 Shift 键并点击左下角调色板中的红色 X。
  4. 设置填充色:点击左下角调色板中的黑色。
  5. 选择 Select and transform objects 工具。
  6. 打开 Path Effects... 面板:点击菜单 Path > Path Effects... (或按 Ctrl+Shift+7)。
  7. 在 Path Effects 面板中,点击 + 号。
  8. 在弹出的对话框中,搜索或找到 Tiling 效果,并点击 Add。
  9. 在 Path Effects 面板的 Tiling 设置中:将 Rows 设置为 2。将 Columns 设置为 2,然后按 Enter。
  10. 放大视图。选择 Create and edit shapes with the Boolean tool (Shape Builder tool)。
  11. 确保工具栏中 Finish: 选项为 + (Add) 模式。
  12. 点击并拖动,穿过左上、右上和右下三个圆的重叠部分,将它们合并成一个形状。
  13. 选择 Select and transform objects 工具。
  14. 点击选中合并后的形状,使其出现旋转控点。按住 Ctrl 键,拖动角部旋转控点,将其旋转至水平。
  15. 现在我们来制作嘴唇的下半部分。选中此形状,按 Ctrl+D 复制。
  16. 按键盘上的 H 键将其水平翻转。
  17. 启用 Snapping。
  18. 将复制并翻转后的形状向下移动,使其顶部的两个尖端与原形状底部的两个尖端对齐并吸附。
  19. 选择 Edit paths by nodes 工具。
  20. 选中上半部分嘴唇。点击并拖动框选其最中间的两个节点。
  21. 在工具栏中点击 Add new nodes into selected segments (+号图标),在它们之间添加一个新节点。
  22. 再次点击 Add new nodes into selected segments,再添加两个新节点,使得中间共有三个新节点。
  23. 选中下半部分嘴唇。重复步骤 20-22,也在其中间添加三个新节点。
  24. 禁用 Snapping。
  25. 选中上半部分嘴唇最中间的节点。按住 Ctrl 键,将其向下拖动约 20.82 px。
  26. 选中上半部分嘴唇中间节点左侧和右侧的两个节点。按住 Ctrl 键,将它们也略微向下拖动,但幅度小于中间节点 (例如,下移约 8.92 px)。
  27. 选中下半部分嘴唇最中间的节点。按住 Ctrl 键,将其向上拖动约 27.18 px。
  28. 选中下半部分嘴唇中间节点左侧和右侧的两个节点。按住 Ctrl 键,将它们也略微向上拖动,幅度小于中间节点 (例如,上移约 9.77 px)。
  29. 选中所有对象。
  30. 在 Fill and Stroke 面板中,将 Opacity (%) 调至 100.0%。
  31. 移除填充 (点击左下角红色 X)。
  32. 添加黑色描边 (按住 Shift 点击黑色),宽度设置为 5.000 px,Join 和 Cap 均设置为圆角。
  33. 按住 Ctrl 键缩放图标至合适大小。








相关推荐

Chinese vice premier calls for multilateralism at Davos

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...

用C++ Qt手把手打造炫酷汽车仪表盘

一、项目背景与核心价值在车载HMI(人机交互界面)开发领域,虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块,涵盖以下技术要点:Qt图形绘制核心机制(QPa...

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能

点击“了解更多”获取工具亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布!新版本支...

雅居乐上调出售吉隆坡项目保留金,预计亏损扩大至6.64亿元

1月2日,雅居乐集团(03383.HK)发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告,2023年11月8日(交易时段后),集团子公司AgileRealEstateDeve...

Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...

手机性能好不好 GPU玄学曲线告诉你

前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”,所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下,在系统“开发者选项中被称为“GPU显示配置文件”或...

小迈科技 X Hologres:高可用的百亿级广告实时数仓建设

通过本文,我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月,是一家致力以数字化领先为优势,实现业务高质量自增长的移动互联网科技公司。始...

vue3新特征和所有的属性,方法汇总及其对应源码分析

vue3新特征汇总与源码分析(备注:vue3使用typescript编写)何为应用?constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...

China's stability redefines global trade in a volatile era

ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...

QML 实现图片帧渐隐渐显轮播

前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方式...

前端惊魂夜:我竟在CSS里写出了JavaScript?

凌晨两点,写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底,屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果,我翻遍了MDN文档,试遍了所有已知的CSS技巧,却始终差那么一口气。“要是CSS...

10 个派上用场的 Flutter 小部件

尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在的某些功能。在今天的文章中,我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...

让我的 Flutter 代码整洁 10 倍的 5 种

如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画,猜猜怎么着?你已经使用过Mixin了——恭喜你,你已经处于一段你甚至不知道的关...

daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库

漂亮有特色的CSS组件库,组件代码非常简洁,也支持深度定制主题、定制组件,可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库,...