Inkscape 线条风格图标制作教程
zhezhongyun 2025-05-28 21:40 85 浏览
本教程将引导你使用 Inkscape 创建一系列线条风格的图标。我们将通过组合基本形状、路径操作和描边样式来实现这些图标。主要原理包括:使用基本形状作为构建模块,通过路径操作(如联合、差集、分割、打平)来合并或修改形状,将对象转换为路径以便进行节点编辑,最后应用统一的描边样式并移除填充。
1. 地图标记图标
我们将从一个简单的地图标记图标开始。
- 按下键盘上的 1 键,将视图缩放到 100%。
- 选择 Squares and rectangles 工具。按住 Ctrl 键,点击并拖动以绘制一个正方形。
- 双击左下角的颜色条打开 Fill and Stroke 面板。
- 在 Fill and Stroke 面板中,选择 Stroke paint 标签页,点击 No paint (X 图标) 以确保没有描边。
- 选择 Fill 标签页,将 Opacity (%) 滑块调整到大约 53.1%。
- 点击右上角的磁铁图标启用 Snapping。
- 选择 Circles and ellipses 工具。将光标移动到正方形的左上角,当提示 Handle to corner 时点击并拖动到正方形的右下角,当提示 Handle to corner 时松开,这样就创建了一个与正方形等大的内切圆。
- 选择 Select and transform objects 工具 (快捷键 S 或 F1)。点击右上角的磁铁图标禁用 Snapping。
- 右键点击圆形,选择 Duplicate。
- 按住 Ctrl 和 Shift 键,拖动新复制圆形的角控点,将其等比缩小到大约原先的 1/3 大小。
- 点击并拖动选择所有三个对象(正方形、大圆、小圆)。
- 再次点击已选择的对象组,使其出现旋转控点。按住 Ctrl 键,拖动角部的旋转控点,将对象组旋转45度,使正方形变成菱形。
- 放大视图以便操作。选择 Create and edit shapes with the Boolean tool (Shape Builder tool) (快捷键 X)。
- 确保工具栏中的 Finish: 选项为 + (Add) 模式。
- 点击并拖动,从大圆形的上部区域穿过菱形的下半部分,将这两个部分合并。
- 选择 Select and transform objects 工具。
- (可选步骤,使尖角变圆) 选择 Edit paths by nodes 工具 (快捷键 N)。
- 在工具控制栏中,点击 Add Corners LPE 图标 (带圆角的方形图标)。
- 点击选中标记底部尖端的节点 (它会变成蓝色菱形)。
- 拖动该节点旁边出现的小圆形控点向内拉动,直到尖角变得圆润。调整到大约 14.94 (这是一个参考值,可以目测调整)。
- 选择 Select and transform objects 工具。
- 选中地图标记形状,然后点击菜单 Path > Object to Path。
- 在 Fill and Stroke 面板中,将 Opacity (%) 调回 100.0%。
- 按下键盘上的 1 键,将视图缩放到 100%。
- 在屏幕左下角的调色板区域,点击 Fill 旁边的红色 X 以移除填充色。
- 按住 Shift 键,同时点击调色板中的黑色,为对象添加黑色描边。
- 打开 Fill and Stroke 面板,切换到 Stroke style 标签页。
- 将 Width 设置为 5.000 px。
- 确保工具栏中 When scaling objects, scale the stroke width by the same proportion 按钮(通常是一系列平行线图标)未被激活 (这样缩放时描边宽度不变)。
- 按住 Ctrl 键,拖动对象的角控点将其等比缩小到合适的图标尺寸。
2. 篮球图标
接下来制作篮球图标。
- 按下键盘上的 1 键,将视图缩放到 100%。
- 选择 Circles and ellipses 工具。按住 Ctrl 键,点击并拖动绘制一个正圆。当前描边宽度应为 5.000 px,无填充。
- 选择 Select and transform objects 工具。
- 右键点击圆形,选择 Duplicate (或者按 Ctrl + D)。
- 按住 Ctrl 和 Shift 键,拖动复制出圆形的角控点,将其从中心向外等比放大,大约比原圆大 1.5 倍左右。
- 选中较大的外圆,点击菜单 Path > Object to Path。
- 选择 Edit paths by nodes 工具。
- 点击选中外圆顶部的节点,按住 Shift 键再点击选中底部的节点。
- 在工具控制栏中,点击 Break path at selected nodes 图标。
- 点击菜单 Path > Break Apart。
- 选择 Select and transform objects 工具。点击画布空白处取消选择。
- 选择左半边的弧形,按住 Ctrl 键,将其水平向左移动一段距离。
- 选择右半边的弧形,按住 Ctrl 键,将其水平向右移动一段距离。
- 选中所有三个对象(小圆和两个弧形)。
- 点击菜单 Object > Align and Distribute...。
- 在 Align and Distribute 面板中,将 Relative to: 设置为 Last selected。
- 点击 Distribute horizontally with even horizontal gaps 图标 (在 Distribute 部分,通常是中间带均匀间隔的三个矩形图标)。
- 点击画布空白处取消选择。
- 选择 Draw Bezier curves and straight lines 工具 (快捷键 B)。
- 确保工具栏中 Mode: 设置为 Create regular Bezier path (第一个图标)。
- 在篮球图标的上方点击一下设置起点,按住 Ctrl 键向下拖动,在图标下方点击一下设置终点,然后按 Enter 键,绘制一条垂直线。
- 在 Fill and Stroke 面板的 Stroke style 标签页中,确保其 Width 为 5.000 px。
- 选择这条垂直线,然后按住 Shift 键加选中心的小圆。
- 在 Align and Distribute 面板中,Relative to: 仍然是 Last selected,点击 Center on vertical axis 和 Center on horizontal axis 图标,使直线与圆心对齐。
- 选中垂直线,按 Ctrl+D 复制它。
- 点击工具栏中的 Object Rotate 90 degrees clockwise (XC) 图标,将复制的直线旋转90度。
- 选中所有对象(篮球的圆圈、两条弧线、两条中心直线)。
- 点击菜单 Path > Division。
- 点击画布空白处取消选择。现在篮球的各个部分都被分割开了。
- 仔细选择并删除多余的线段:主要是两条中心直线超出主体圆的部分,以及两条弧线在中心圆内部的部分。
- 选中所有剩余的篮球部件。
- 按住 Ctrl 键,拖动角控点将整个篮球图标等比缩小到合适的尺寸。
3. 嘴唇图标
现在来制作嘴唇图标。
- 按下键盘上的 1 键,视图缩放至 100%。
- 选择 Circles and ellipses 工具。按住 Ctrl 键,点击并拖动绘制一个正圆。
- 移除描边:按住 Shift 键并点击左下角调色板中的红色 X。
- 设置填充色:点击左下角调色板中的黑色。
- 选择 Select and transform objects 工具。
- 打开 Path Effects... 面板:点击菜单 Path > Path Effects... (或按 Ctrl+Shift+7)。
- 在 Path Effects 面板中,点击 + 号。
- 在弹出的对话框中,搜索或找到 Tiling 效果,并点击 Add。
- 在 Path Effects 面板的 Tiling 设置中:将 Rows 设置为 2。将 Columns 设置为 2,然后按 Enter。
- 放大视图。选择 Create and edit shapes with the Boolean tool (Shape Builder tool)。
- 确保工具栏中 Finish: 选项为 + (Add) 模式。
- 点击并拖动,穿过左上、右上和右下三个圆的重叠部分,将它们合并成一个形状。
- 选择 Select and transform objects 工具。
- 点击选中合并后的形状,使其出现旋转控点。按住 Ctrl 键,拖动角部旋转控点,将其旋转至水平。
- 现在我们来制作嘴唇的下半部分。选中此形状,按 Ctrl+D 复制。
- 按键盘上的 H 键将其水平翻转。
- 启用 Snapping。
- 将复制并翻转后的形状向下移动,使其顶部的两个尖端与原形状底部的两个尖端对齐并吸附。
- 选择 Edit paths by nodes 工具。
- 选中上半部分嘴唇。点击并拖动框选其最中间的两个节点。
- 在工具栏中点击 Add new nodes into selected segments (+号图标),在它们之间添加一个新节点。
- 再次点击 Add new nodes into selected segments,再添加两个新节点,使得中间共有三个新节点。
- 选中下半部分嘴唇。重复步骤 20-22,也在其中间添加三个新节点。
- 禁用 Snapping。
- 选中上半部分嘴唇最中间的节点。按住 Ctrl 键,将其向下拖动约 20.82 px。
- 选中上半部分嘴唇中间节点左侧和右侧的两个节点。按住 Ctrl 键,将它们也略微向下拖动,但幅度小于中间节点 (例如,下移约 8.92 px)。
- 选中下半部分嘴唇最中间的节点。按住 Ctrl 键,将其向上拖动约 27.18 px。
- 选中下半部分嘴唇中间节点左侧和右侧的两个节点。按住 Ctrl 键,将它们也略微向上拖动,幅度小于中间节点 (例如,上移约 9.77 px)。
- 选中所有对象。
- 在 Fill and Stroke 面板中,将 Opacity (%) 调至 100.0%。
- 移除填充 (点击左下角红色 X)。
- 添加黑色描边 (按住 Shift 点击黑色),宽度设置为 5.000 px,Join 和 Cap 均设置为圆角。
- 按住 Ctrl 键缩放图标至合适大小。
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
-
写这个,主要是对自己学习python知识的一个总结,也是加深自己的印象。变量(英文:variable),也叫标识符。在python中,变量的命名规则有以下三点:>变量名只能包含字母、数字和下划线...
- python变量命名规则——来自小白的总结
-
python是一个动态编译类编程语言,所以程序在运行前不需要如C语言的先行编译动作,因此也只有在程序运行过程中才能发现程序的问题。基于此,python的变量就有一定的命名规范。python作为当前热门...
- Python入门学习教程:第 2 章 变量与数据类型
-
2.1什么是变量?在编程中,变量就像一个存放数据的容器,它可以存储各种信息,并且这些信息可以被读取和修改。想象一下,变量就如同我们生活中的盒子,你可以把东西放进去,也可以随时拿出来看看,甚至可以换成...
- 绘制学术论文中的“三线表”具体指导
-
在科研过程中,大家用到最多的可能就是“三线表”。“三线表”,一般主要由三条横线构成,当然在变量名栏里也可以拆分单元格,出现更多的线。更重要的是,“三线表”也是一种数据记录规范,以“三线表”形式记录的数...
- Python基础语法知识--变量和数据类型
-
学习Python中的变量和数据类型至关重要,因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南:1.变量:变量在Python中用于存储数据值。它们充...
- 一文搞懂 Python 中的所有标点符号
-
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~(按位取反符号)~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
- Python变量类型和运算符_python中变量的含义
-
别再被小名词坑哭了:Python新手常犯的那些隐蔽错误,我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本,最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
-
在当今的互联网软件开发领域,SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验,极大地提升了开发效率,成为众多开发者构建Web应用程序的首选。而在Spr...
- Python中下划线 ‘_’ 的用法,你知道几种
-
Python中下划线()是一个有特殊含义和用途的符号,它可以用来表示以下几种情况:1在解释器中,下划线(_)表示上一个表达式的值,可以用来进行快速计算或测试。例如:>>>2+...
- 解锁Shell编程:变量_shell $变量
-
引言:开启Shell编程大门Shell作为用户与Linux内核之间的桥梁,为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理,还能通过编写脚本实现复杂的自动化任务。无论是...
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
-
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
- 更可靠的Rust-语法篇-区分语句/表达式,略览if/loop/while/for
-
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
- C++第五课:变量的命名规则_c++中变量的命名规则
-
变量的命名不是想怎么起就怎么起的,而是有一套固定的规则的。具体规则:1.名字要合法:变量名必须是由字母、数字或下划线组成。例如:a,a1,a_1。2.开头不能是数字。例如:可以a1,但不能起1a。3....
- Rust编程-核心篇-不安全编程_rust安全性
-
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障,但在某些情况下,我们需要突破这些限制来:与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
- 探秘 Python 内存管理:背后的神奇机制
-
在编程的世界里,内存管理就如同幕后的精密操控者,确保程序的高效运行。Python作为一种广泛使用的编程语言,其内存管理机制既巧妙又复杂,为开发者们提供了便利的同时,也展现了强大的底层控制能力。一、P...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- opacity 属性 (32)
- transition 属性 (33)
- 1-1. 变量声明 (31)
