用户头像

发起人：Secant 初入职场

an INTeresting Person

回复 ( 7 )

  1. Secant
    Secant 初入职场
    0
    举报 回复
    理由
    举报 取消

    多谢邀请。

    我再来抛一个砖：

    lowpoly风格本身如果用Ai直接绘制就是一件比较耗时耗力的工作，也有不少制作lowpoly风格的小工具，这些在知乎上已经有很多知友提到过了，见：如何简单地把一张相片处理成低多边形 Low Poly 3D 风格效果？ – 图像处理、如何使用JavaScript生成lowpoly风格图像？ – 前端开发等。所以说把这种风格的图像制作方式局限于Ai和Ps是不太容易轻易得到理想的效果的（或者不太容易想到）。再加上题主本身给出的图并不完全是lowpoly，所以我这里采用的方法是：

    使用Processing。

    我也是最近刚接触Processing，目前找到一种能够实现相似效果的方法。

    首先根据原图可以看出主要任务仍然是散点+连线，也就是剖分。常用的剖分算法是delaunay三角剖分，经过查询，有一个Processing的第三方库mesh可以实现这一点，具体介绍和下载地址详见：Mesh – A Processing Library by Lee Byron示例程序如下，保存为.pde：

    import megamu.mesh.*;
import processing.pdf.*;
PImage gollum;
int[][] points=new int[3][6000];
float[][] meshpoints = new float[points[0].length][2];
float[][] myEdges;
Delaunay myDelaunay;
void setup() {
  size(1100, 787);
  gollum=loadImage("77aed73e704c09a69af43dd78dc012bb_r.jpg");
  for (int i=0; i<points[0].length; i++) {
    points[0][i]=(int)random(gollum.width);
    points[1][i]=(int)random(gollum.height);
    points[2][i]=0;
    meshpoints[i][0]=points[0][i];
    meshpoints[i][1]=points[1][i];
  }
  myDelaunay=new Delaunay(meshpoints);
  myEdges=myDelaunay.getEdges();
  noLoop();
  beginRecord(PDF, "gollum.pdf");
}
void draw() {
  background(9, 24, 83);
  loadPixels();
  for (int i=0; i<points[0].length; i++) {
    points[2][i]=(int)(brightness(gollum.pixels[points[0][i]+points[1][i]*width])/255.0*10);
    if (points[2][i]!=0) {
      ellipseMode(CENTER);
      noStroke();
      fill(250, 201, 13, random(sqrt(points[2][i]*8000)));
      float r=random(points[2][i]/2, points[2][i]);
      ellipse(points[0][i], points[1][i], r, r);
    }
  }
  for (int j=0; j<myEdges.length; j++) {
    float startX = myEdges[j][0];
    float startY = myEdges[j][1];
    float endX = myEdges[j][2];
    float endY = myEdges[j][3];
    float bold1=brightness(gollum.pixels[(int)startX+(int)startY*width])/255.0*10;
    float bold2=brightness(gollum.pixels[(int)endX+(int)endY*width])/255.0*10;
    if (bold1!=0&&bold2!=0) {
      stroke(250, 201, 13, random(sqrt(bold1+bold2)*40/1.2, sqrt(bold1+bold2)*40));
      strokeWeight(sqrt(bold1+bold2)/4);
      line(startX+(endX-startX)*0.2, startY+(endY-startY)*0.2, endX-(endX-startX)*0.2, endY-(endY-startY)*0.2);
    }
  }
  endRecord();
}

  2. 郑越升
    郑越升 初入职场
    0
    举报 回复
    理由
    举报 取消

    这种效果我能想到的只有两种办法。第一种是建模然后使用AE里面的Plexus，第二种就是@Secant 所说的Processing。第一种办法不需要编程，但是需要建模，比较局限，如果我想做一个人脸的点线网格效果还要建模，太麻烦了。第二种办法不需要建模，只要写好一个程序，其实就可以反复利用。

    为了方便不想打代码的同学，在这里我借鉴@Secant 的思路，使用Mesh的库写了一个可控的小小程序（貌似电脑要装java才能用？），希望能够帮到你。

    小程序下载地址：

    步骤二：存储为jpg格式，把图片放到小程序的文件夹里面，命名为[img.jpg]。

    步骤三：双击exe文件，运行小程序。你可以通过控制一些简单地参数：

    [+]键：增加点线数量。

    [-]键：减少点线数量。

    [p]键：显示/隐藏点。

    [l]键：显示/隐藏线。

    步骤四：调好参数之后，关闭程序，你会发现文件夹多了一个[img.pdf]的文件，是矢量的哦。这时候你可以把它导入ps、ai软件进一步处理啦！

    【人物网格效果】

    步骤一：在PS里面讲图片处理成黑白，不处理成黑白也可以，不过黑白方便点。然后我们把不需要形成点线的背景用[笔刷]刷成黑色，只留下人物主体。大小也不要超过1280*720。

    步骤二：同文字网格效果一样。导出jpg格式放到小程序文件夹里，命名为[img.jpg]，执行程序，并控制点线。

    [+]键：增加点线数量。

    [-]键：减少点线数量。

    [p]键：显示/隐藏点。

    [l]键：显示/隐藏线。

    默认

    隐藏点

    隐藏线

    代码：

    import megamu.mesh.*;
import processing.pdf.*;

int pointNum = 4000;
 // 点的数量
int minPointRadius = 1;  // 最小点的半径
int maxPointRadius = 4;  // 最大点的半径
float minStrokeWidth = 0.3;  // 最小的线宽 
float maxStrokeWidth = 1;  // 最大的线宽
int alphaRandomStength = 15;  // 透明度随机强度
boolean createEdges = true;  // 显示边
boolean createPoints = true;  // 显示点

PImage image;
Delaunay myDelaunay;
void setup() {
  image = loadImage("img.jpg");
  image.loadPixels();

  size(1280,720);
  noLoop();
}
void draw() {
  
  float[][] points = new float[pointNum][2];
  float[][] edges = new float[pointNum][4];
  float[] alpha = new float[pointNum];
  float[] r = new float[pointNum];
  
  for (int i = 0 ; i < pointNum ; i++) {
    int x = (int)random(0, image.width);
    int y = (int)random(0, image.height);
    float b = brightness(image.get(x, y))/255.0;
    if (b != 0) {
      r[i] = (int)(minPointRadius + (maxPointRadius-minPointRadius)*b + random(-1, 1));
      alpha[i] = (int)(b*255+random(-alphaRandomStength, alphaRandomStength));
      if (alpha[i] > 255)
        alpha[i] = 255;
      else if (alpha[i] < 0)
        alpha[i] = 0;
      points[i][0] = x;
      points[i][1] = y;
    } else {
      i--;
    }
  }
  myDelaunay = new Delaunay(points);
  edges = myDelaunay.getEdges();

  // 开始绘画
  beginRecord(PDF, "img.pdf");
  background(0);
  noStroke();
  if (createPoints) {
    for (int i = 0 ; i < pointNum ; i++) {
      ellipseMode(CENTER);
      fill(255, alpha[i]);
      ellipse(points[i][0], points[i][1], r[i],r[i]);
    }
  }
  if (createEdges) {
    for (int i = 0 ; i < edges.length ; i++) {
      int startX = (int)edges[i][0];
      int startY = (int)edges[i][1];
      int endX = (int)edges[i][2];
      int endY = (int)edges[i][3];
      float b1 = brightness(image.get(startX, startY))/255.0;
      float b2 = brightness(image.get(endX, endY))/255.0;
      float edgeAlpha = ((b1 < b2 ? b1 : b2)*255+random(-alphaRandomStength, alphaRandomStength));
       if (edgeAlpha > 255)
         edgeAlpha = 255;
       else if (edgeAlpha < 0)
         edgeAlpha = 0;
      float distance = sqrt(pow(startX,startY) + pow(endX, endY));
      float factor =  distance > 15 ? 1 : distance/15.0;
      float strokeWidth = minStrokeWidth + (maxStrokeWidth - minStrokeWidth)*factor;
      strokeWeight(strokeWidth);
      stroke(255, edgeAlpha);
      line(startX, startY, endX, endY);
    }
  }
  endRecord();
}
// 处理按键事件
void keyPressed() {
  if (key == '+') {
    pointNum = pointNum + 400;  // 增加点
    if (pointNum > 15000)
      pointNum = 15000;
    redraw();
  } else if(key == '-') {
    pointNum = pointNum - 400;  // 减少点
    if (pointNum < 400)
      pointNum = 400;
    redraw();
  } else if(key == 'l') {
    createEdges = !createEdges;
    redraw();
  } else if(key == 'p') {
    createPoints = !createPoints;
    redraw();
  }
}

  3. 大雄
    大雄 初入职场
    0
    举报 回复
    理由
    举报 取消

    这个有点像AE 的一款粒子插件plexus

  4. 谷琪
    谷琪 初入职场
    0
    举报 回复
    理由
    举报 取消

    我的看法是 将前景和后景的散点粒子单独做。手和飞机用玛雅之类的导出模型 然后在AE里使用plexus直接生成

  5. 七日课吧
    七日课吧 初入职场
    0
    举报 回复
    理由
    举报 取消

    链接：看三星华为如何玩转《PLEXUS》 – MG动画 – 知乎专栏

    其实这个图就是用ae的最牛插件之一Plexus做出来的。

    Plexus（点线粒子）。Plexus的中文意思是血管、淋巴管、神经等的意思。顾名思义这个插件做出来的东西就像人的血管一样。专业术语翻译过来我们叫他点线粒子，就是点线连接的意思。我这么说可能很多人还是没有概念，我给大家在网上找几张图，大家看看就一栏目了然了。

    看了上面这几张图是不是就觉得Plexus太强大了。只因为这个插件做的的东西逼格太高，所以很多大公司在选择发布会开场宣传片的时候，都选择用这个插件做的东西。以体现一个公司的水准——简约、时尚、国际范。比如三星、华为。苹果也用了这个插件，但是只其中一小段。下面大家看一下三星和华为的开场动画，体验一下国际公司的水准。

    炫动手指舞，三星Galaxy S2特效广告—在线播放—优酷网，视频高清在线观看” ></a><meta name=”irTitle” content=”炫动手指舞，三星Galaxy S2特效广告” /><meta name=”irAlbumName” cont http://v.youku.com/v_show/id_XMjc2NzEyOTQ4 http://v.youku.com/v_show/id_XNjM4NzU0MjUy http://v.youku.com/v_show/id_XNDY4MjYxMTUy

  6. Cc jiaowo
    Cc jiaowo 初入职场
    0
    举报 回复
    理由
    举报 取消

    Mathematica

    借高票答案的图，五行

    img=ColorConvert[图,"Grayscale"];{x,y}=ImageDimensions[img];
pts=Reverse/@RandomChoice[Tuples@{Range[y],Range[x]},3000];
dat=MeshPrimitives[DelaunayMesh@pts,2]/.Polygon->List;
Graphics[{{Yellow,Opacity[ImageValue[img,#[[1]]]],Thickness[0.001],Line[#]}&/@({#+(#2-#)/(n=5),#+(n-1)(#2-#)/n}&@@@Flatten[Partition[#,2,1,1]&/@Flatten[dat,1],1]),{Yellow,Opacity[ImageValue[img,#]],PointSize[ImageValue[img,#]/140],Point[#]}&/@pts},Frame->False,Background->RGBColor[{0.031,0.1,0.32}]]
  7. 孟超
    孟超 初入职场
    0
    举报 回复
    理由
    举报 取消

    能用软件做出来，

    手机码字，提供个基本思路吧～

    首先做一张，或者找一张渐变的底图作为底层，

    找到手和纸飞机的素材。

    找到星空的素材，或者创作星空素材出来干脆，反正看吧，如果想要相似度足够高就自己创作一个星空的素材。看你的需求

    素材网站建议站酷。

    第一步：将你找到的素材导入进软件中去，

    第二步：把手和飞机摆放到大致位置。可能需要使用到透视。原则上尽可能接近原图即可，

    第三步：调整手和纸飞机的颜色，最好用去色做成黑白的。然后调整他们的透明度。

    第四步：把星空素材制作好叠在手和纸飞机上层。或者在二者之上直接绘制

    直接绘制感觉还比较简单一点，只要就是花点时间

我来回答

Captcha 点击图片更换验证码