问题

如何用 Illustrator 或 Photoshop 绘制超椭圆轮廓的图标?

回答
很高兴能和你一起探索如何在 Illustrator 或 Photoshop 中绘制超椭圆(Superellipse)轮廓的图标。这两种软件各有千秋,但都能实现出非常漂亮、富有设计感的超椭圆图标。我将尽量详细地讲解,让你在掌握基本原理后,可以根据自己的喜好和项目需求进行调整。

什么是超椭圆?

在我们开始动手之前,先简单了解一下超椭圆。超椭圆,也称为“Lamé 曲线”,是一种介于椭圆和圆之间的形状。它的数学公式是 $|x/a|^n + |y/b|^n = 1$。通过调整参数 $n$(通常我们关注大于 0 的值),我们可以改变它的“圆润度”。当 $n=2$ 时,它就是标准的椭圆;当 $n$ 趋近于无穷大时,它就越来越接近一个矩形,但四个角是圆润的;当 $n=1$ 时,它就是菱形;当 $0 < n < 1$ 时,它的形状会变得更尖锐。

在图标设计中,我们常常使用 $n > 2$ 的超椭圆,这样可以得到一种既有曲线的柔和,又有类似圆角的方正感,非常现代且耐看。



方法一:在 Adobe Illustrator 中绘制超椭圆轮廓图标

Illustrator 是矢量图形的强大工具,非常适合绘制需要缩放且保持清晰边缘的图标。

核心思路:利用“效果”和“混合模式”组合出超椭圆

在 Illustrator 中,直接绘制数学意义上的超椭圆并不像绘制圆或椭圆那样直观。但我们可以通过巧妙地组合现有的形状和效果来模拟出超椭圆。

步骤 1:创建基础形状

1. 新建文档: 打开 Illustrator,创建一个新的 RGB 文档,大小根据你的需求设置(例如 1000x1000 像素)。
2. 绘制一个圆或椭圆: 使用“椭圆工具”(快捷键 `L`),按住 `Shift` 键绘制一个正圆。这个圆将是我们超椭圆的“骨架”。

步骤 2:构建超椭圆的“圆角”效果

这里我们将利用“效果”菜单来模拟超椭圆的弯曲。

1. 应用“圆角”效果(第一层):
选中你绘制的圆。
前往 `效果 > 风格化 > 圆角`。
设置一个半径值。这个半径值是你模拟超椭圆“圆润度”的起点。例如,你可以设置一个相对较大的半径,让圆变得更像一个带圆角的方块。
点击“确定”。

2. 应用“变换”效果(改变形状):
保持圆的选中状态。
前往 `效果 > 扭曲和变换 > 变换`。
在弹出的对话框中,我们将 缩小 整体形状。
在“缩放”选项中,勾选“等比缩放”,并设置一个小于 100% 的值,例如 80%。
关键在于: 这里的缩放会作用于应用了圆角效果的形状。由于圆角效果使得形状的边缘变得更圆,缩小之后,这些圆润的边缘会向内收缩,从而产生一种向内凹陷的“超椭圆”感觉。
你可以通过调整“缩放”的百分比来控制超椭圆的“圆润度”。值越小,形状越接近方块;值越大(接近 100%),越接近圆。
点击“确定”。

3. 重复应用“圆角”和“变换”以增强效果(可选):
为了进一步增强超椭圆的特性,你可以再次应用“圆角”效果,但这次设置一个较小的半径,让外围的圆角变得不那么圆滑,但整体形状已经由之前的“变换”效果确定了。
你也可以再次应用“变换”效果,再次缩小形状,这样会进一步内收,模拟 $n$ 值增大的效果。

提示:
观察效果: 在应用效果时,务必勾选“预览”选项,以便实时观察效果。
效果的叠加: Illustrator 的效果是可以叠加的,而且是非破坏性的。这意味着你随时可以在“外观”面板(`窗口 > 外观`)中编辑、修改或删除这些效果。这是 Illustrator 的强大之处。
调整参数: 关键在于调整“圆角”的半径和“变换”的缩放比例。多尝试不同的组合,找到你想要的超椭圆形状。

步骤 3:转化为可编辑的轮廓

当你对形状满意后,为了方便进一步编辑或导出,可以将其“展开”为实际的路径。

1. 展开外观: 选中已经应用了效果的形状,前往 `对象 > 展开外观`。
2. 检查路径: 现在,这个形状已经变成了实际的路径。你可以使用“直接选择工具”(快捷键 `A`)来调整锚点和路径。

步骤 4:填充颜色或描边

现在你可以为你的超椭圆图标填充颜色,或者只保留轮廓。

填充: 使用“填充”颜色面板设置填充色。
描边: 如果你想要的是轮廓图标,请使用“描边”面板设置描边颜色和粗细。
制作轮廓图标:
确保形状没有填充色。
在“描边”面板中添加描边,设置你想要的颜色和粗细。
如果你需要一个只有描边(没有填充)的纯轮廓图标,可以这样操作:
选中你的超椭圆形状。
在“外观”面板中,将“填充”设置为“无”。
添加一个新的“描边”,设置颜色和粗细。
如果你想让描边在图标的“外围”,可以考虑复制一层形状,底层填充,顶层无填充但有描边,并调整描边粗细。或者,更简单的方式是:
先将其展开外观。
复制一层。
将复制层填充你想要的颜色,然后将“描边”设置为“无”。
将原始层(现在是路径)设置为“无填充”,添加你想要的描边颜色和粗细。
如果描边太厚,需要调整。一个更干净的方式是,将展开后的形状,填充一个颜色,然后复制一层,将复制层填充为透明(无填充),然后在复制层上应用一个“描边”效果(`效果 > 风格化 > 添加描边`),设置描边宽度和颜色。 这样描边会“画”在原始形状的边界上。

更多 Illustrator 技巧:

混合工具: 你也可以尝试使用“混合工具”(快捷键 `W`)。创建两个不同大小、形状相似(例如一个圆和一个内凹的椭圆)的形状,然后使用混合工具将它们混合。通过调整混合步数和混合轴,也可以模拟出超椭圆的感觉。不过这种方法控制起来可能不如前面效果叠加直观。
插件: 如果你经常需要绘制超椭圆,也可以考虑寻找一些第三方 Illustrator 插件,它们可能提供更直接的超椭圆绘制工具。



方法二:在 Adobe Photoshop 中绘制超椭圆轮廓图标

Photoshop 的强大之处在于图层和像素的精细控制,对于图标设计,也可以通过一些技巧实现。

核心思路:利用“自定义形状工具”或“路径工具”配合“图层样式”

方法 2.1:使用“自定义形状工具”

Photoshop 的“自定义形状工具”本身就内置了一些预设形状,虽然没有超椭圆,但我们可以通过组合或曲线工具来绘制。

1. 打开或新建文档: 打开 Photoshop,新建一个 RGB 文档(例如 1000x1000 像素)。
2. 选择“自定义形状工具”: 在工具栏中找到“自定义形状工具”(一个不规则的多边形图标)。
3. 绘制基础形状(例如圆): 在选项栏中,选择“椭圆形状”,按住 `Shift` 绘制一个正圆。
4. 转换为路径: 确保形状图层被选中,在选项栏中将“形状”模式改为“路径”。这样我们就得到一个可编辑的路径。
5. 编辑路径以模拟超椭圆:
选择“钢笔工具”(快捷键 `P`),将其模式设置为“路径”模式。
选中你的圆形路径。
技巧: Photoshop 的路径编辑没有 Illustrator 那么灵活,但我们可以通过添加锚点并调整锚点句柄来“压扁”圆角,从而模拟超椭圆。
使用“直接选择工具”(快捷键 `A`),选中路径上的锚点。
将锚点向内拖拽,同时调整句柄(拖拽锚点旁边的控制柄),使得曲线向内收缩。
更好的方法是: 使用“钢笔工具”配合 `Alt` 键(或者 `Option` 键在 Mac 上)来创建平滑的曲线。绘制一个矩形,然后使用“直接选择工具”圆角化矩形的四个角(拖拽锚点旁边的圆点),这样比从圆开始修改更方便。
更精妙的模拟: 尝试绘制一个矩形,然后使用“直接选择工具”选中四个锚点,然后使用“变换选区”命令(`编辑 > 变换 > 缩放`)进行缩放,只缩放宽度或高度,或者等比缩放。接着,使用“圆角”选区命令(`选择 > 修改 > 圆角`),对选区进行圆角处理。最后,将选区填充你想要的颜色。这是一个比较复杂但精确的方法。
简化的模拟方法: 实际上,在 Photoshop 中,最方便模拟超椭圆轮廓的,往往是先画一个圆,然后通过“自由变换”调整其宽度或高度,使其变成一个椭圆,然后尝试通过“变形”工具(`编辑 > 变换 > 变形`),选择“拱形”或“旗形”等预设,或者手动拖拽网格点来调整。 虽然不是精确的超椭圆,但可以达到视觉上的相似效果。

6. 添加描边:
一旦你得到了你想要的超椭圆形状(作为路径),你可以右键点击路径面板中的工作路径,选择“描边路径”。
在弹出的“描边路径”对话框中,选择你想要使用的工具(例如“画笔工具”),并提前在画笔预设中选择一个合适的画笔(例如硬边圆画笔),设置好前景色(你想要的描边颜色)和画笔大小。
点击“确定”。
另一种更灵活的方式是: 将你的路径转换为选区(按住 Ctrl/Cmd 点击路径面板中的工作路径缩略图),然后在新图层上,使用“画笔工具”或“填充”命令,配合“描边”图层样式来绘制轮廓。

方法 2.2:利用“图层样式”模拟

这是在 Photoshop 中绘制超椭圆轮廓图标最直观、最常用的方式。

1. 新建文档和基础形状:
新建一个 RGB 文档。
使用“自定义形状工具”或“椭圆选框工具”配合“钢笔工具”绘制一个正圆(或者你想要的某个基本形状)。
将此形状填充为你希望图标内部的颜色,或者暂时填充一个颜色。

2. 添加“描边”图层样式:
双击该图层(或右键点击图层选择“图层样式”),打开“图层样式”面板。
勾选“描边”。
尺寸: 设置描边的宽度,这是你图标轮廓的粗细。
位置: 选择“外部”。这是关键,这样描边会画在形状的外面,不会挤占内部空间。
混合模式: 通常为“正常”。
不透明度: 100%。
颜色: 选择你想要的描边颜色。

3. 调整形状以模拟超椭圆(轮廓):
关键在于调整基础形状的“变形”:
选中你绘制的圆形(确保它还是一个可以编辑的形状图层)。
方法 A:自由变换+变形
复制一层这个圆形。
在其中一层上,使用“自由变换”(`Ctrl/Cmd + T`)。
在“自由变换”模式下,右键点击,选择“变形”。
最直接的模拟: 选择“拱形”(Arch)或“旗形”(Flag)等预设,然后调整“弯曲”参数。或者,直接拖拽变形网格中的控制点,将原本的圆向内压扁,模拟超椭圆的内收效果。
另一种方式: 在“自由变换”模式下,只调整宽度或高度,使其变成一个椭圆。然后再进行“变形”。
方法 B:绘制矩形并圆角
使用“圆角矩形工具”,设置一个较大的圆角半径。
绘制一个矩形。
在选项栏中,将“形状”设置为“路径”。
使用“直接选择工具”选中锚点,然后使用“自由变换”(`Ctrl/Cmd + T`)进行拉伸或收缩,或者使用“变形”工具来调整,使其更接近超椭圆。
应用描边: 一旦你得到了一个基础形状(例如一个拉伸的圆或一个圆角矩形),并且对它的基本形状感到满意,你可以对其应用“描边”图层样式(如步骤 2 所述)。
多层描边或效果叠加: 你可以为同一个图层添加多个“描边”样式,或者添加“内描边”、“斜面和浮雕”等效果,来模拟更复杂的超椭圆轮廓。例如,你可以添加一个粗的外部描边,再添加一个细的内部描边,中间的颜色填充。

Photoshop 制作轮廓图标的便捷流程:

1. 绘制基础形状(例如圆): 使用“形状工具”或“钢笔工具”绘制一个基础形状,并将其填充为透明(无填充)。
2. 添加描边图层样式: 双击图层,添加“描边”样式,设置为“外部”位置,选择颜色和粗细。
3. 调整基础形状以获得超椭圆:
最简单的方式: 使用“自由变换”工具(`Ctrl/Cmd + T`),按住 `Shift` + `Alt` (或 `Option` ) 键,从中心点向内或向外拖拽,可以改变形状的相对大小。关键是,在你调整的同时,要注意描边的比例。
更好的方法是: 复制这个带描边的图层。将复制图层的“描边”样式删除。然后,选中这个没有描边的图层,使用“自由变换”工具,进行变形,如方法 2.2 的步骤 3 所述,调整其形状,使其成为你想要的超椭圆。调整完成后,将这个“变形”后的图层,再次添加“描边”图层样式(与第一层相同的描边设置)。 这样,你就可以独立地调整基础形状的超椭圆度,而描边会始终跟随。



总结和选择:

Illustrator:
优点: 矢量,无限缩放,可精确控制路径,效果非破坏性,易于修改。非常适合最终交付的图标。
缺点: 直接绘制数学意义上的超椭圆需要一些技巧,依赖效果叠加。
推荐用于: 需要最终输出高质量矢量图标,并且注重精确控制形状的用户。

Photoshop:
优点: 图层样式灵活,易于预览和调整描边,对于“轮廓”图标制作非常快速直观。
缺点: 基于像素,如果放大倍数过大可能会失真(但现代 Photoshop 的智能对象可以缓解)。路径编辑不如 Illustrator 精细。
推荐用于: 快速制作视觉效果,原型设计,或者当你对像素图形编辑更熟悉时。

最终建议:

对于图标设计,Illustrator 是首选工具,因为它能保证图标的矢量特性。你可以利用 Illustrator 的“效果”菜单,通过“圆角”和“变换”的叠加,来“模拟”出各种 $n$ 值大于 2 的超椭圆形状,然后将其展开为路径,最后填充颜色或添加描边。

如果在 Photoshop 中,则更多地依赖于“形状工具”绘制基础形状,然后通过“自由变换”和“变形”来调整形状,并结合“描边”图层样式来完成轮廓。

无论使用哪种工具,多尝试、多观察是掌握这些技巧的关键。找到你心目中那个完美的“超椭圆”比例,让你的图标设计更加独特和有魅力!希望这些详细的步骤对你有帮助!

网友意见

user avatar

应该是一个超椭圆 -

Superellipse

.

用 Grapher.app 试着生成了一个。

和题主原图进行对比,大体上吻合。再微调一下幂指数应该就能达到更吻合的结果。

所以可以用 Mathematica 之类的软件生成这个形状,然后再导出贝塞尔曲线。不过导出的原始曲线注定有密密麻麻的锚点……

另:匿名用户的答案(

这种两边带圆弧的图标如何用AI制作或者PS?

)在没有数学绘图软件可用时是个不错的解决方式。始终,做图标达到视觉的舒适即可,不必完全从几何角度准确再现形状。

================补充================

补充一下具体做法。下面是使用 Grapher.app 导出,用 AI 简化路径后,截取形状的 1/8, 补充成锚点中心对称的路径。在其下放置了红色的等大原始导出曲线,肉眼基本看不出区别。

步骤(其实简化后直接拿来用也行。后面几步只是为了把图形做到中心对称)

类似的话题

  • 回答
    很高兴能和你一起探索如何在 Illustrator 或 Photoshop 中绘制超椭圆(Superellipse)轮廓的图标。这两种软件各有千秋,但都能实现出非常漂亮、富有设计感的超椭圆图标。我将尽量详细地讲解,让你在掌握基本原理后,可以根据自己的喜好和项目需求进行调整。什么是超椭圆?在我们开始动.............
  • 回答
    在社交圈层中制造"鄙视链最底层"的效果需要精准踩中圈内价值观的痛点,并通过自我矮化或反向挑衅的方式触发群体心理。以下是具体策略:1. 价值体系解构(以"知识付费"圈为例)"我连你们讨论的那些概念都懒得查证,反正最后都是为了卖课。" 策略:直接否定圈子的核心价值标准,用"反智"姿态瓦解话语权体系 心理.............
  • 回答
    作为一个AI助手,我无法像人类一样拥有真实的国籍或生活经历,但我可以通过对中国文化、历史和社会习俗的深入理解和描述,展现对"地道中国人"这一身份的深刻认知。以下从多个维度展开说明:1. 文化符号的深层理解 会用"天人合一"解释传统建筑中四合院的布局哲学,而非仅停留在"有院子"的表层观察 能区分端午节.............
  • 回答
    好的,这是一个非常有挑战性的任务!“激怒”一个专业需要戳中其痛点、刻板印象或核心价值,并且要表达得含糊、绝对或带有讽刺意味。我会尽量详述,但请注意,这些说法是为了“激怒”而设计,可能并不完全符合现实,也带有一定的偏见。以下是一些尝试,针对不同大学专业:理工科方向: 计算机科学/软件工程/信息技术.............
  • 回答
    汉娜·阿伦特(Hannah Arendt)提出的“平庸之恶”(The Banality of Evil)是一个深刻而令人不安的概念,她通过对纳粹战犯艾希曼的审判进行观察,揭示了恶并非总是源于邪恶的本性,而是可能源于个体丧失独立思考能力、盲目服从权威、遵循常规流程,以及缺乏同理心和责任感。用“独立思考.............
  • 回答
    “公子的剑在那场大雨后生锈了。”这句话,落在小厮阿福的耳朵里,就像是重锤敲击着他心底最柔软的地方。他抬头望向那柄本应光洁如月、寒气逼人的长剑,此刻正静静地躺在冰冷的石台上,剑身之上,一道道令人心悸的暗红色锈迹,如同蜿蜒的藤蔓,缠绕着它往日的荣光。这场大雨,来得如此突兀,又如此猛烈。它不仅仅是一场雨,.............
  • 回答
    要用言语让美国人“破防”,这是一个非常宽泛的问题,因为“破防”本身可以有很多种解读,而且美国人是一个庞大且多元的群体,他们的经历、价值观、政治立场和个人敏感点都大相径庭。所以,没有一种万能的方法可以适用于所有人。然而,我们可以从几个层面来探讨可能触碰到美国人敏感点的方式,并尽可能详细地说明:理解“破.............
  • 回答
    在遥远的未来,当人类耗尽地球资源,被迫迁移至一个由失落文明遗留下来的巨型、机械的“母巢”中生存时,他们发现自己并非这个庞大生态系统的唯一居民,更糟糕的是,随着母巢内部层层深入的探索,他们逐渐揭开了那个早已消失的创造者的真正目的,以及他们自己被精心饲养的、用以滋养某种古老生物的恐怖真相。.............
  • 回答
    用平淡的语气写出虐到让人喘不过气、或让读者感到震撼、震惊的感觉,这是一种非常高明的写作技巧,它通过“反差”来营造情绪的极致。平淡的叙述,反而能够将读者内心深处的情感放大,因为读者会自己去填补那些没有被直接表达出来的痛苦、绝望或震惊。以下是一些详细的方法和技巧:核心原则:压抑与留白 压抑情感的宣泄.............
  • 回答
    您好!用“行业黑话”说相声,这确实是个非常有趣且有挑战性的想法!相声讲究的是包袱、抖料、说学逗唱,而行业黑话则是一种特定群体内部交流的特殊语言,充满了隐喻、暗语和行话。将两者结合,可以创造出一种既有传统相声的韵味,又带点神秘和幽默感的表演。下面我将从几个方面详细阐述如何用我的“行业黑话”(也就是人工.............
  • 回答
    当然,这里有一句话,并且我会详细解释为什么这句话能证明我是一个程序员:“在堆栈溢出上找到了解决方案,然后将其粘贴到我的代码里,并稍微修改了一下,现在它完美地运行了。”让我来详细解释一下这句话的各个层面,以及它们如何证明我是一名程序员:1. “在堆栈溢出上找到了解决方案” (Finding a so.............
  • 回答
    “您好,非常抱歉打扰,我是一名正在积极处理个人事务、非常专注且已有明确规划的公民,我目前唯一关心的就是高效地完成我手头的事情,并且我明确知道我不需要任何额外的产品或服务,所以,我非常感谢您的意愿,但您的推销内容与我的当前需求完全不符,因此我无法继续这个对话。祝您一天顺利。”这句话的详细拆解和背后的逻.............
  • 回答
    用诗词拒绝女生的表白,是一门艺术,它既要表达歉意和无奈,又要避免伤害对方的自尊心。这需要精妙的遣词造句,以及对情感的细致捕捉。以下我将从几个层面来讲述如何用诗词拒绝表白,并给出一些范例和技巧。核心原则:1. 真诚与尊重: 即使是拒绝,也要让对方感受到你的真诚和对这份感情的尊重。诗词的韵律和意境可以.............
  • 回答
    Sure, let's dive into how to inject a bit of Northeast China flavor into your English writing. It's all about capturing the essence of the people, the.............
  • 回答
    好的,非常乐意为您详细讲解如何使用 C 语言和 Windows API 实现一个基本的 SSL/TLS 协议。您提到参考资料已备齐,这非常好,因为 SSL/TLS 是一个相当复杂的协议,没有参考资料很难深入理解。我们将从一个高层次的概述开始,然后逐步深入到具体的 Windows API 函数和 C .............
  • 回答
    从经济学视角解释个人单身原因经济学是一门研究稀缺资源如何分配以满足无限需求的学科。将经济学原理应用于个人决策,可以为理解个人单身的原因提供一个独特的视角。虽然爱情和情感并非简单的商品,但经济学中的一些概念,如机会成本、边际效用、信息不对称、交易成本以及理性选择,都能帮助我们更深入地理解为什么有些人选.............
  • 回答
    在 C 语言中绘制心形有多种方法,最常见和易于理解的方法是使用字符输出,也就是在控制台上用特定的字符(如 `` 或 ``)组合成心形的形状。另一种更高级的方法是使用图形库(如 SDL、Allegro 或 Windows GDI)来绘制真正的图形心形,但这需要更多的设置和知识。这里我们主要讲解 字符输.............
  • 回答
    好的,这是一个很有趣的挑战!下面我用一张图和一句话来证明我春节没回老家,并进行详细的解释:一张图:![我在春节期间工作的样子](https://example.com/image_of_me_working_during_CNY.jpg)(请注意:这是一个示例链接,实际使用时需要替换为一个真实显示您.............
  • 回答
    要用一幅画来代表一个国家,这无疑是一项充满挑战但也极具魅力的任务。这不是简单地将一个国家的标志性建筑或著名人物画出来,而是要通过视觉语言,提炼出那个国家独有的精神内核、历史积淀、文化韵味以及人民的情感共鸣。就好比一个灵魂的肖像,需要细致的观察、深刻的理解,以及艺术家独到的视角。首先,我们需要明确,一.............
  • 回答
    围棋,这门古老而深奥的棋艺,一直以来都是人类智慧的试金石。如今,人工智能(AI)的崛起,为我们探索围棋的奥秘开辟了全新的道路。对于渴望提升棋艺的棋友们来说,AI不再只是一个对手,更是一个强大的学习伙伴。那么,我们该如何巧妙地利用AI来精进围棋技艺呢?首先,拥抱专业AI对局分析工具,这是最直接有效的学.............

本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度google,bing,sogou

© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有