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

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

GIVE IT TRY! This is a fun exercise to add to your NEW WEBSITES!

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. Im 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.

subway car

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 like Andy Baio did! 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, Im from NYC, this is a part of me and I love that energy. I first opened the image in adobe photoshop and got busy.

trainII

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 option allows for the negative areas to remain open so that if you layer the image over another image or animation 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.

tips

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 are free, and really awesome!) 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 back round 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.

fast-pixels

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.

oldertrainsII

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.

bboy-vecotr-asset

This digital asset above is a two frame GIF animation that was made with a transparent back round. 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.

The final final piece above was published on my to.be platform. Rather than reposting the screen recording GIF conversion of the piece I grabbed the iframe source code from to.be and embedded it into this blog editor template. I can resize it by its height or width if needed.

Updated – 10/11/16 – A second variation was created with a static graphic asset laying over the animated back round. This too is taken from the iframe source code on my to.be feed.

(By the Way, writing tutorials is a great way to practice blogging! )

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

Doing Business in 21st Century

Cory Doctorow’s recent Keynote at DConstruct raised such interesting issues I never knew existed. “We treat successful artist with a reverence bordering on worship.” Doctorow explains how those who were successful last year gets to be successful again this year due to their worshiping consumers. I agree with this quote because successful artists ends up  limiting competition and creativity.

Another quote I really enjoyed was “Anytime someone has put a lock to something that belongs to you and won’t give you the key they didn’t put that lock there for your benefit” This quote explains how companies “protect and lock” your work from being stolen while allowing others to inspect and manipulate your work. By the time you want to break the lock your customers are bonded with the company and you have to start at ground zero.

protest animated GIF

This impacts me because one day, maybe tomorrow I want to contribute more to the internet and create something that pays but without being stifled. It makes doing business difficult with companies either giving you the run around or bullying you into submission.

I TOTALLY AGREE !

One specific piece of writing that stood out to me from the exercise we did during the first day of class was ” The second learning objective allows you to express yourself, through an online identity. A digital identity is how one can portray themselves, through technology, and through various types of social media. Sites… Read more: I TOTALLY AGREE !

One specific piece of writing that stood out to me from the exercise we did during the first day of class was ” The second learning objective allows you to express yourself, through an online identity. A digital identity is how one can portray themselves, through technology, and through various types of social media. Sites such as Tumblr, Youtube, and Facebook are all places where people can create a digital identity.  Digital identities allow you to showcase whatever talent that you want to share with the world, it doesn’t necessarily have to be a talent, it can be thoughts, feelings or even a collection of things you like displayed through an online profile. ” I decided to choose this specific post because I can agree and relate to using social media to express myself. I use social media on a daily basis to keep up to date with my friends and family. I personally use Instagram to post my pics for my followers to view. When I post up my pictures on Instagram I am sharing it with my friends , and this is a creation of a digital identity. The benefit of creating a digital identity allows people to post anything they wish to share with others. Having a digital identity is similar to being an author of a book you can write whatever you feel like and people will read it if they are interested in the piece. This quote relates to me in terms of whats most important in this class because we the students will be creating our very own digital identities using word press and other tools. This class will allows us to explore and  express ourselves through writings , posts, and images to share with the public.

I TOTALLY AGREE!

One specific piece of writing that stood out to me from the exercise we did during the first day of class was ” The second learning objective allows you to express yourself, through an online identity. A digital identity is how one can portray themselves, through technology, and through various types of social media. Sites such as Tumblr, Youtube, and Facebook are all places where people can create a digital identity.  Digital identities allow you to showcase whatever talent that you want to share with the world, it doesn’t necessarily have to be a talent, it can be thoughts, feelings or even a collection of things you like displayed through an online profile. ” I decided to choose this specific post because I can agree and relate to using social media to express myself. I use social media on a daily basis to keep up to date with my friends and family. I personally use Instagram to post my pics for my followers to view. When I post up my pictures on Instagram I am sharing it with my friends , and this is a creation of a digital identity. The benefit of creating a digital identity allows people to post anything they wish to share with others. Having a digital identity is similar to being an author of a book you can write whatever you feel like and people will read it if they are interested in the piece. This quote relates to me in terms of whats most important in this class because we the students will be creating our very own digital identities using word press and other tools. This class will allows us to explore and  express ourselves through writings , posts, and images to share with the public.

YES ! I AGREE!