Inkscape 线条风格图标制作教程
zhezhongyun 2025-05-28 21:40 70 浏览
本教程将引导你使用 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 键缩放图标至合适大小。
相关推荐
- 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组件库,...
- 一周热门
- 最近发表
-
- Chinese vice premier calls for multilateralism at Davos
- 用C++ Qt手把手打造炫酷汽车仪表盘
- 系列专栏(八):JS的第七种基本类型Symbols
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
- 雅居乐上调出售吉隆坡项目保留金,预计亏损扩大至6.64亿元
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
- 手机性能好不好 GPU玄学曲线告诉你
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
- vue3新特征和所有的属性,方法汇总及其对应源码分析
- China's stability redefines global trade in a volatile era
- 标签列表
-
- 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)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)