A “How To” Net Art & GIF Making Tutorial.

**Note – this post was originally written back in 2016 and it is still one of the most viewed posts on this blog. I’m excited to be able to update it and convert the content into its original intention of utility and application, so lets jump in! Be sure to set up an account on https://mmm.page in advance as it will help you jump right in!

“Net Art” is short for “Internet Art” and is co-dependent on the use of the Internet to create, display, share and archive the works. The term dates back to the mid 1990’s and there are so many great resources out there on the web. A quick search for the term will take you down the rabbit hole! The context of this post and creation series is for beginners and puts an emphasis on the web browser as its means of presentation and sharing the works.

Lets use a NYPL Digital Collections Archive Image.

Its no secret, you can find tons and tons of great historical images in the NYPL Digital Collections Archives. I made this series of GIF animations based on the inspiration from this old subway train image below. I love trains, especially NYC subway trains. I’m a bit bias as NYC subway Graffiti has inspired me from the get go, but here is the “how-to” process below on how I made this series of animations and net art works.

The original image. I found it, I liked it, I was inspired and got to work. (tons of images here) I saved the image from the web. Don’t fret, you wont get sued! I don’t plan to do anything with this image other than inspire creativity and show you how we can breathe new creative life into our history. Let’s revive this image and bring it to life! The NYPL has done a great job of digitizing tons and tons of historical images. I feel a connection to NYC. My family is from NYC, I live in Brooklyn, NYC, this is a part of me and I love that energy. I first opened the image in adobe photoshop and got busy! PS – if you don’t have access to photoshop other applications like https://photopea.com also work well for manipulation images!

Using the rectangular marquee tool I simply removed the interior spaces from the windows of the train, making it transparent negative space. I then saved the image as a psd. file (for archival and re-use purposes) but mainly, I saved the image as a PNG-24 – (file –> save for web – select – PNG-24). The PNG-24 image format option allows for the negative areas to remain transparent and open. This allows you to layer the image over another image or animation and you will be able to see through it. I do this on a regular basis with images that I like, I love to work on repurposing static images with an animation. Its a nice way to connect the past and the present.

**** Updated on 8/13/21 – please supplement the info below using the awesome and powerful https://mmm.page to get started on this for your own work (I originally wrote this using the to.be and newhive.com platforms which no longer exist, sadly) You can also check this tutorial I made with mmm.page here – https://www.ryanseslow.com/mmm-page-awesomeness/

I went back to the web and logged into my to.be account – its a digital art making platform, I also love newhive and jump back and forth testing how far I can stretch my ideas on both platforms – both were free, and really awesome! (Remember, you will be using – https://mmm.page for this ) I started a new “field” on my to.be platform. I added two layers. (sadly, uploaded files on to.be must be 5 mega bytes or smaller, where newhive seems to allow unlimited sizes) no matter, getting comfortable with preparing and resizing images for the web is a task we will all face, a lot! Best to get used to that, and learn how to navigate it. The background which you see above as a static pixelated image is actually an animated GIF of moving pixels (below.) This is an asset that i made a few weeks ago. I keep a stock of this kind of stuff, just for this purpose.

The to.be platform allows for you to drag your graphic assets directly into the field, so I did this first and then layered the prepared image of the old train directly on top. I scaled it to size by pulling the corners. I then used the quicktime application on my mac to “screen record” a few second of the animation. Of course you can publish the work directly onto your to.be feed (or keep it private) but in this case I used it as a “tool” for the screen capture. I later published another version of this animation (below.) Ultimately you can do all of this stuff in one application like photoshop, but I find it much more fun to cross discipline and tinker with multiple software applications and techniques on the web. This is where one can create their own methods, record them, share them and build off of them! I saved my quicktime screen recording and imported it into photoshop. Use the “import –> video frames to layers” option from the file menu and then open your timeline. From there you can crop away the rest of the screen (as you see below) and also resize the animation at will. Im not going mislead you, quicktime will screen record a large file, and it will need to be tinkered with for the best output of display. Output can be in GIF format, or you can also render the frame animation back into an mp4 video file. This is helpful if you want to loop the animation on mobile platforms like Instagram or Vine, or bring it into after effects or imovie, or final cut pro.

Above we see the first output iteration as a GIF animation, a colorful pixel party happening only “inside” of the train. Will you get in? I enjoyed this as an idea so much I had to extend it. I thought, what if one of the party goers inside the train stepped outside for a minute, what would that look like? More fun for sure. I placed this animated digital asset (below) on top of the existing animation by layering over it again. I also utilized the entire width of my screen field to extend the viewers perspective.

This digital asset above is a two frame GIF animation that was made with a transparent background. It was originally a vector image created from this drawing. I love seeing how far I can push ideas, and also convert the applied arts in digital arts.

What do you think? Are you ready to make yours?