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

Inkscape 线条风格图标制作教程

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

本教程将引导你使用 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 键缩放图标至合适大小。








相关推荐

饿了么面试官:实现一下 Element-UI 官网的主题切换动画!

最近看到ElementPlus官网上的切换主题方式非常有趣,这是一个过渡的动画效果所以在网上查了一番,找到基本的实现方法实现基本效果首先我们起一个html文件,写一个按钮,以及简单的背景颜色切...

强大而好用的选择器:focus-within

伪类和伪元素在开发网页样式中,选择器必不可少,而且选择器也是在开发css中非常重要的内容,包括常用的类选择器,id选择,同时还有伪类,伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到,在使用...

令程序员惊叹的一些CSS3效果库

还在寻找那些CSS3的效果库吗?如果你的答案是肯定的,并且目前没有找到,那么你一定不能错过小编为大家收集的这些CSS3效果库,这是一个令你兴奋的集合!最新的CSS3都配备了新的特性,来设计创建动画和互...

伪元素黑魔法:一个替代onerror解决图片加载失败的方案

问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案。有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错。一般我们的思...

前端 - 如何通过CSS修改图片透明度

如果在图片上显示文字,经常会遇到这个情况,就是当文字和背景颜色差不多时,文字会看不清楚,我们一般通过给文字加textshadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题,...

CSS元素居中方法完全指南

这里是工作狂的聚集地职场学术新媒体设计极客专门治愈处女座强迫症。本文为CSS入门翻译redman9原载CSS-Trick人们经常抱怨在CSS中居中元素的问题,其实这个问题并不复杂,只是因为方法众...

CSS图像 hover 动画效果

点击页底“阅读原文”下载原码CSSHover在网页设计中是极为常用的一个CSS效果,只要你有创造力,都可以让Hover变得更多姿多彩,今天我们主要分享40多款使用CSSHOVER完成...

前端能限制用户截图吗?

摘要:在某些业务场景下,保护屏幕信息的私密性,防止用户随意截图分享,成为了前端开发者的一个棘手需求。但浏览器和操作系统的设计,真的允许网页开发者完全掌控用户的截图行为吗?本文将深入探讨前端限制截图的...

每天一个CSS小技巧 - 不规则投影

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时,box-shadow的表现都很棒的。但是,当元素添加可一些伪元素或半透明的装饰之后,border-radius会无视这些。这...

Web开发中10个有用的免费CSS代码

在本文中主要展示了在Web开发中一些免费但是非常有用的代码,开发人员可以下载它们来简化工作流程。在这个集合中的所有代码都是经过精挑细选的,对于开发人员来说非常有用。在开发一个网站时,这些代码将节省大量...

什么是伪类和伪元素?两者有什么区别?单一冒号和双冒号有何不同

https://juejin.im/post/5df1e312f265da33d039d06d?utm_source=bigezhang.com#comment伪类伪类存在的意义是为了通过选择器找到那...

CSS2与CSS3中常用的伪类汇总大全

CSS2与CSS3中有非常多的伪类,可以用于实现各种强大的、酷炫的功能。有用于选择标签状态的,如:a:linka:hoverinput:checkedinput:focus等;也有用于根据结构选...

实用!这8个CSS工具可以提升编程速度

作为网页设计师,为了在预期的时间内能完成项目,前期肯定是要进行大量练习的。但是如果你花了大量的时间在编写CSS代码上,那无疑是浪费时间。工欲善其事必先利其器,聪明的设计师善于利用工具提升他们的编码效率...

《丝路传说怀旧版》宠物融合丹:属性加成与技能继承要点

在《丝路传说怀旧版》中,宠物融合丹是优化宠物属性与技能的核心道具,其使用需结合技能继承规则、品质提升机制及资源规划策略。以下是关键要点分析一、属性加成机制品质提升与属性增长品质阶梯:宠物分为白、绿、蓝...

Python 3.14 t-string 要来了,它与 f-string 有何不同?

Python最近出了个大新闻:PEP-750t-string语法被正式采纳了!这意味着Python将在今年10月发布的3.14版本中引入一种新的字符串前缀t,称为模板字符串(Tem...