这样的效果用 AI 或 PS 如何实现？

有关回应 · 2021-5-14 21:05:05

我真真的服了啊，明明 @夜愿的答案已经提到了，就是用的Phantasm插件做的，加上打字和模糊也只是3步的事情，纯AI，非破坏性编辑，想改什么字就改什么字只是没居然跑出来这么多不着边际的回答！

千赞的居然还是纯手工的！来来来，老板说了，改成26个英文字母，哦，对了，大小写各一组！还说什么不要乱装逼……

还有那些什么C4D、SketchUp、粒子、JS、Processing、等等的方法，你们是打算让我们这些死美工们把你们活活拍扁吗？

来来来，大家都来看看，这是多么简单而又快乐的事情：

第1步：打字
随便打什么字，字体选粗一点的就行，为了好看，笔画就不要太多了。

第2步：模糊
菜单里找到效果 / 模糊 / 高斯模糊，数值随你的意，不要模糊大得看不出样子，也不要小得跟没有似的，差不多就行。

第3步：Phatasm插件
官方网站：Phantasm v3 - Astute Graphics

可以说 Astute Graphics 公司是世界上最知名的 Illustrator 插件开发公司，看了他们的官网你们就知道，我也不安利了。

安装完Phatasm后，就可以作为AI效果来使用了，这里我们要用到的是 Halftone (半调网格)

默认是这样的 ↓

稍微调整一下，效果就出来了有没有 ↓

就4个调整的地方

Pattern 选 Radial (放射圆形)，并且选择 6 Spoke (6个放射方向)
DPI，就是分辨率，数值越高，圆点越密，可以用键盘的上下方向键调整，注意，数值不支持小数（就是带小数点的数啦）
Dot Gain (圆点大小与明暗对应)，这个跟PS的曲线是一个道理，把暗部区域提亮（这个曲线是减色法曲线，跟RGB加色法相反，暗部在右边，往下拉就是提亮），直到自己满意就可以了

如果还想像题图里给几个选定的小圆点换个颜色，扩展外观，自己换去。

只要你还没扩展外观，什么文字，什么字体，什么效果随便你改，一秒就看到效果，完全自动化，不用纯手工哦，也不用C4D哦，还不用编程哦！！！

很简单有没有，很简单有没有！

当然了，Phatasm 的 Halftone 可不只这么点功能，右上角OK按钮旁边有个下拉菜单，里面一堆预设，至于用哪个，你爱咋滴咋滴！

有关回应 · 2021-5-14 21:05:06

你们都让一下，不要乱装逼！
如果你因失去了太阳而流泪，那么你也将失去群星！

先上效果图：

这种图形的制作流程和脑洞能力，属于AI的进阶教程，题主的野心很大。为了让新手都能明白原理，我的教程会尽量详细，所以也会非常长。不过我相信大家可以学到很多知识点！

通过观察题主的图形，我们会发现以下几点规律：
1.图形“9”由间距基本相同的圆点组成。
2.这些圆点都规律的处在直径不同的同心圆轨道上。
3.图形“9”的轮廓边缘都会产生圆点的形状渐变（缩小）。

那些说彩色半调的同学，可以回去继续进修了。

我们会用到很多AI的工具，一个一个来。咱们先来制作这个图形：

方法有很多种，但是最便利、最符合当下的方法（工具）就是：描边选项。

使用椭圆工具，绘制一个正圆，点击屏幕左上角的“描边”字样，弹出参数调整窗口，设置如下：

粗细：6mm
填充黑色
端点：中间那个
虚线设置参数如图，点击右边的样式
其他默认，绘制完成

接下来我们使用路径偏移工具，绘制同心圆环。选中制作好的圆环—对象—路径—路径偏移（会弹出参数调整窗口，预览打勾，调整出适当的间距（位移参数9mm））—确定：

当位移为正数时，路径向外圈位移；当路径为负数时，路径向内圈位移。重复路径偏移工具的使用，绘制出如下图形（一圈一圈位移的时候，参数请保持一致：9mm）：

位移小技巧：当你绘制出2个同心圆环的时候，你可以全选这2个同心圆环，那么向外路径偏移的时候，位移的参数要设置为18mm（向内同理为-18mm），这时候就直接绘制出了4个同心圆环！当然，你之后还可以全选4个同心圆环，位移参数是之前的2倍（也就是变成36mm），你就直接绘制出了8个同心圆环！

路径偏移向外没有极限，向内却有限制，最后一个圆心的圆点再也无法位移出来哈，没事，我们自己画。大小肯定是6mm，居中对齐：

接下来，我们开始绘制自己想要的任何形状的图形，比如数字或字母，或阿猫阿狗什么的。
我用了“S”字母。输入一个“S”，字体
调整大小后，轮廓化（shift+ctrl+o），与同心圆环（同心圆环先编组）居中对齐：

这时候，我们选中S图形—互换填色和描边（为了方便后续的观察，描边厚度为0.5mm，颜色为红色）：

我们取消同心圆环的编组。其实这时候，每一个圆环都是一个正圆形的闭合路径，选中任何一个圆环并放大观察，都可以看到这条路径：

这时候，我们可以发现，无数条同心圆路径和“S”图形的轮廓路径，产生了许多的路径相交点：
放大画面，黄色圆圈处，就是路径相交点：

接下来需要一点耐心，我们锁定文字路径，再用剪刀工具，在路径相交点左击，断开闭合的圆形路径（先选中这个圆形路径），S轮廓外的路径线段就可以删除了！对每个圆形路径重复以上动作，就可以得到这样的图形（红色的S形路径只是用来参照的，现在可以过河拆桥了）：

我们发现，大部分的路径都已经是打开的，有些闭合的正圆路径因为都处在S图形轮廓内，所以没有被剪断。但闭合的路径等会会产生一个问题，下面会说明这个问题和解决办法。

我要出大招了！这时候，每个路径都是独立的（没有编组，也不要去编组），全选所有路径（除了中间这个圆心，因为这个圆点不是路径，是图形）—描边选项—配置文件（选择一个宽度配置文件，如下图）：

神奇的得到这样的图形：

你会说，这是什么鬼？说好的效果图呢？客官别慌嘛，我之前不是说过，闭合的路径会有一个问题吗？

不过现在不是讲这个问题的时候，为了让小伙伴们深刻理解配置文件这个工具，为了让大家灵活运用这个高级工具，我临时决定要谈谈配置文件的工作原理。也许大家理解这个原理之后，我那个问题也能迎刃而解（理解）了！

在如下图的窗口，我们左击等比右边的三角形按钮，会弹出很多不同的形状图形：

我刚才使用的形状是
我们就发现，每个独立路径中的图形就变成中间大，两头小的状态。你们可以再试试其他的形状，看看能找出什么规律来？

是的，规律就是：在一个配置文件中，图形的高度决定了配置后的图形的大小。越高的地方，配置后的图形越大；越低的地方，配置后的图形越小；图形高度消失的地方，配置后的图形也就消失了。

所以我们反过来看看实践的效果是否符合这个理论？我们制作的图形中，每一个独立的路径图形都是两边小（甚至消失），中间大。因为配置文件的形状就是两边的高度是没有的(成了一个点)，中间的高度是最高的。

我们再来看看那几个闭合的圆形路径，它也是两边小，中间大的状态。可是，这样的形态不符合我们需要的效果呀（我们需要的效果是，S图形的边缘是要缩小的圆点）。

在这里，我们有两个方法可以调整这部分的形态分布：
1.用剪刀工具把闭合的圆形路径分割成2个半圆路径，之后用
这个配置图形，就可以了，嘿嘿
（这个方法简单，不多说了）

2.不剪开路径也行，我们需要绘制特定的配置文件图形，然后就可以配置一下就好了。这个方法有点难，需要不断微调效果，但是你将学习到一个新的技能，这个技能有无限的想象空间。我们选选看，有没有配置图形符合我们需要的形状渐变效果的？擦，居然没有？擦，效果不满意？

没关系，不满意默认的配置文件形状，我们可以自由DIY：
先绘制一条描边直线段，然后点击宽度工具，在直线段上自由拉出高低起伏的形状，最后添加到配置文件，DIY完成：

这种方法虽然可行，但是如果最后渐变的效果不满意，要画死人的。所以，我们也可以什么都不干，直接点击宽度工具，在我们绘制好的S图形上，对不满意的路径，直接手动微调出满意的效果（多试几次，就知道怎么玩了）：

最后当然是单圆点上色喽，虽然简单，我也写一下过程吧。任选一条独立路径—对象—扩展外观—取消编组—分别上色—最终效果：

——————————————————————————————
1.未经授权，盗用、转载的话，我会维权的。
2.不要问我的微信和QQ号，咱们只在社区的私信中，评论中交流学习。
3.不要私信让我帮你免费做任何设计。
————————————————————————
很多人在剪路径的时候遇到问题，统一回复：
请先锁定字母层！你们剪到字母的路径啦！！！

有关回应 · 2021-5-14 21:05:07

偶然看到这个问题（的答案），尤其是 @七朱八白的类编程方法，就又仔细去看了一下题目里的图。我比较认同这一效果应该是（部分）采用编程方法实现的，因为圆点有两个特征：一、它们分布在一系列间距相等的同心圆上；二、它们的大小在文字边缘有从全尺寸到消失的过渡。而这两个特征都可以相当简便地自动完成：先将一个字符图层适度虚化，然后在另一图层中的一系列同心圆上等距地绘制圆点，并使得每个圆点的半径与字符图层上该点对应坐标点下的文字透明度成正比。

由于 Photoshop 和 Illustrator 早已支持 JavaScript / Visual Basic / AppleScript 编程[1]，所以我猜想这个原始图案应该是使用类似的编程方法完成的。但是我手头没有 Photoshop，所以就采用 Processing[2] 来实验这个想法。Processing 本是为视觉艺术和交互设计而开发的一门简易语言以及编程工具，后来被扩展到 Arduino 等平台，非常适合没有什么特定目的的编程初学者入门。

因为手头没有合适的粗大字体，这里采用风靡九梗的 Impact，略作虚化之后如上图。

而「在另一图层中的一系列同心圆上等距地绘制圆点，并使得每个圆点的半径与字符图层上该点对应坐标点下的文字透明度成正比」由于 Processing 没有图层的概念，被转化为「在画布上的一系列同心圆上等距地绘制圆点，并使得每个圆点的半径与此虚化图上该点对应坐标点下的 RGB 值红色分量成正比」，效果如图：

加上鼠标点击和移动部分的代码之后，更可以随意控制圆点的中心位置：

……而上述核心逻辑部分只需要以下 drawDots 函数内的十四行代码。

[code]int dotR = 15, dotSpacing = 5, circleR = 800, x, y;PGraphics pg;boolean lock = false;void drawDots(int x, int y){ int distance = dotR + dotSpacing; float scale = (float)red(pg.get(x, y)) / 255.0; ellipse(x, y, dotR * scale, dotR * scale); for(int r = 0; r

有关回应 · 2021-5-14 21:05:08

用PS的话相当简单，色彩半调滤镜几分钟就能搞定
大概就是打个字→加个样式→栅格→加个滤镜结束这种过程
思路就是这样，要是不懂得话待我睡一觉再来补完教程
--------------------------------
我来补教程了，先来一发完成图

有关回应 · 2021-5-14 21:05:09

高赞很棒，把AI用活了。

这张图第一眼看到就能看出规律性，直接用程序工具来是最简单的，所以才招来那么多javascript\processing之类的做法，要是纯平面设计的没学过这类工具，肯定一脸懵逼。

既然如此，我来个Rhino&Grasshopper版的吧。

一、首先要有个面图形

二、然后以图形中心为圆心生成同心圆，大小盖过图形一点点

三、从圆上等分取点，等分的距离需要与同心圆直径、间距有一定关系才好看

四、计算点到面的最近距离，设置阈值剔除不需要的点

五、以距离为半径画小圆，可以将点到面的距离进行重映射，将小圆的半径调节到合适的范围内

六、导入到AI中进一步调节上色

原型不是二胡卵子，是这个秃头：

这样的效果用 AI 或 PS 如何实现？

5 个回复

浏览过的版块