27

How do you create effects like this?

3 years ago from , Ui Web + Graphic Design

I love these "graphics" of lines, and geometric shapes and how this is all distorted. Can anyone help me where to find examples and tutorials to know what kind of tools and processes to use to experiment?

https://s-media-cache-ak0.pinimg.com/564x/82/42/34/82423497caec2ee73486f40bda4c26c7.jpg

https://s-media-cache-ak0.pinimg.com/564x/c3/6d/54/c36d543a7a3338051f2d0b1f1597e7b7.jpg

https://s-media-cache-ak0.pinimg.com/564x/1c/ae/dd/1caeddb87849ab5c7be3e5b695c442f3.jpg

https://s-media-cache-ak0.pinimg.com/564x/a1/9c/17/a19c1791cdea398b8e8c666e1d567176.jpg

http://pkzrey.tumblr.com/post/98872719648

https://s-media-cache-ak0.pinimg.com/236x/91/a3/5d/91a35d33f480dea205b357c41df9fce6.jpg

Thanks.

16 comments

  • Ben BarryBen Barry, 3 years ago

    +1 Processing

    Also, the Illustrator blend method already mentioned with the addition of the warp tool can be useful. Example: http://file.nnlnr.co/2X441B142a2g

    15 points
  • Sam Pierce LollaSam Pierce Lolla, 3 years ago

    A couple of those show the Moire Effect, which is when two similar striped patterns are overlaid with an offset.

    https://en.wikipedia.org/wiki/Moir%C3%A9_pattern

    6 points
  • Account deleted 3 years ago

    Without having to learn Processing or code, the Moire line art stuff (like the first and fifth example) is easy to do in Illustrator:

    1. Just make two line paths ( two squiggles or whatever), 2. Choose an end point from each shape to blend between with white arrow tool 3. Go to Blend tool > Specify Steps > input a step value , click OK and boom. The rest is just fucking around with the properties to get desired effect and adding colors.

    The 4th example (Orbital art) is the same thing. Its just blending 2 different colored shapes over top of each other with a set amount of steps. Also setting the color opacity to multiply.

    I suggest screwing around in Illy and u will figure it out.

    For the glitch stuff I would just use an online glitch generator for. Something like: https://snorpey.github.io/jpg-glitch/

    4 points
  • Account deleted 3 years ago

    For the glitch effect, let me tell the pretty hard path how to do it (at least that's how I do)

    1) Take a note of the original image dimensions.

    2) Convert image to a non compressed format (TIFF or BMP)

    3) Save the new file as Photoshop Raw

    4) Make a duplicate of the original file -because there's a high chance you're going to break the file.

    4) Change the extension of the file to .txt

    5) Without touching the readable datas (which are needed by photoshop later) on the first line, randomly copy paste the scrambled text some where. Or delete. Just don't go crazy.

    6) save the txt file.

    7) change the extension back to raw and open it with ps

    8) photoshop might ask you the dimensions of the file. enter your noted dimensions.

    9) there you go. Totally random some glitch weirdness. Probably.

    (or you can just go for the easy method and use other applications like this one : https://itunes.apple.com/us/app/imageglitch/id417423725?mt=12

    2 points
  • Leon KLeon K, 3 years ago

    https://www.reddit.com/r/glitch_art/ has links to some tutorials on how to create effects like on the third image in it's sidebar. You might want to take a look there.

    1 point
  • Chris KalaniChris Kalani, 3 years ago

    You can do a lot of this with processing: https://processing.org

    1 point
  • Alex HoffmanAlex Hoffman, 3 years ago

    Dunno if you're trying to write code, but canvas can do a lot of this. Here's a JS library for applying a glitch effect to images. https://www.npmjs.com/package/glitch-canvas

    There's even a fun little interactive online editor https://snorpey.github.io/jpg-glitch/

    0 points
  • Shawn MShawn M, 3 years ago

    You can do some similar things with images and video in after affects with this Pixel Sorter plugin http://pixelsorter.info/

    0 points
  • , 3 years ago

    Thanks so much all people...

    0 points
  • Chris DelbuckChris Delbuck, 3 years ago

    Don't overlook p5.js ( https://p5js.org/ ), a Javascript library built around the concepts of Processing, built with support from the Processing Foundation and NYU ITP.

    0 points