Hey, let me drunkenly animate your photos in about 25 to 60 days!

gr80 you've already got the seamless scroll down

https://farm8.staticflickr.com/7550/15897757320_dbf7bdd850_o.gif

gr80 you've already got the seamless scroll down

i got that by googling for seamless wallpaper (it still has the watermark) and then making a layer that was two copies of the same square next to each other.

any tips on other seamless scroll techniques?

and then making a layer that was two copies of the same square next to each other.

this is the key, so you're already most of the way there. if the background image that you want to scroll is symmetrical, it's easier, but it's still possible with non-symmetrical images.

i'm not sure what software you're using (photoshop?), but basically, as you said, you want to have two copies of the same background that are contiguous to each other. let's say you have the original square on the right, and then the copied square adjacent to it on the left.

the idea is to have the first first frame of the animation display just the original square on the right, and then the final frame of the animation display the copied square on the left. at this point, if you flip back and forth between the first and final frames, the background square should look identical - they're actually two different parts of the same layer, but they're lined up perfectly, showing the same thing.

then, when you tween (again if you're using photoshop) between the first and final frames, photoshop will create as many frames as you choose between the two, and gradually scroll over from the square on the right to the square on the left. the last step is to delete the final frame of the animation (otherwise you'll have two consecutive frames where the background image appears to be in the same spot).

from your GIFs above i think you already knew all that! but it gets slightly trickier if you're dealing with non-symmetrical scrolling images, or if you want to go for a diagonal scroll.

non-symmetrical: it's the same idea as symmetrical images, it's just that you have to do an extra step of prep by converting your unsymmetrical image to a symmetrical image. there are plenty of ways to do that, but the quickest (i think) is just to create a copy of the image, flip it horizontally, and then move the copy over to the side of the original, then merge the two together as a new, twice as large, layer.

diagonal: same idea as non-symmetrical, except that you'll need to create copies above, below, and to the sides of the original before merging into your new layer. all that matters is that the background image appears to be in the same spot in the first and final frames, even though it's actually displaying a different part of the same image. good lord i'm terrible at explaining this, sorry, but i think you'll already know what i mean.

other things: one thing i like to do is create multiple scrolling background layers that appear to be moving at different speeds. for example, 6 scrolling background layers, each one with ocean waves. each of the 6 scrolling layers has a different length (maybe one of them is 800 pixels wide, another is 1000 pixels wide, etc). you prepare each of the 6 layers by making copies of them and doubling their length (and if the waves are non-symmetrical, horizontally flipping the copies). then you make sure that the 6 layers are lined up properly in the first and final frames of the animation - when you click back and forth the waves should look identical, even though you're seeing a different part of the same image. finally, when you tween between the first and final frames, the 6 wave layers will move at different speeds, seamlessly. the shorter waves will appear to move more slowly, while the lengthier waves will appear to move more quickly because they have to travel faster during the same amount of frames.

once you've got multiple scrolls going on, it's an easy leap to start making them scroll in different directions. it's also fun to play with moire patterns by using parallel lines as your scroll layers and applying effects like overlay or darken or whatever.

actually, based on the background circular swirls in your GIFs i'm guessing you're using after effects? you can do circle spins in photoshop but it is a massive pain in the ass.

One technique for making seamless textures is by creating roughly what you want, then using the "offset" function to get the seams at the edges to the centre. Fix those, then offset it a couple more times to make sure new seams didn't appear. But uh, that's probably less useful for making animations than it would be if you were creating a 3D model or something.

I tried to make a gif last week, but Gimp made me want to go hang myself.

lol yeah i have been doing these all manually... the "tween" button has proven to be very sad and confusing to me so far.... tell me more abt it bc every time i click it i get angry and delete everything

w/ the drew/koala one, i googled for seamless art and found that background then doubled it, (as previously discussed) and then nudged it manually about 20 mouse clicks each time i manually created a new frame, until i had enough frames for it to repeat

the stevie, kitty, and leonardo gifs were all done by manually creating 36 different frames and then 36 different background layers (each rotated 10° from the previous), pretty tedious but very rewarding

the frankenstein one was the same process but i was lucky enough to find a spiral image that looped seamlessly after only 7 frames (or 60° of rotation i guess.... or 70°?? idk)

here's my first attempt at creating my own seamless background, done for a big vin diesel fan:

http://i.imgur.com/kOhD7Hb.gif

i basically just made sure that the only vin diesels that left the canvas area were exactly 50% on the canvas and 50% off (so i could nudge a copy all the way over to the opposite edge and have the other 50% on that side of the canvas)

here's a slower version w/o my friend, if you look at the top right corner you can see a yellow vin's elbow that doesn't quite line up, oops. probably could have fixed that by just sending yellow vin back a few layers

http://i.imgur.com/0iWiJv7.gif

so yeah tell me abt tweening

i feel your manual labor pain, because that's the way i did scrolls for a couple years, rather than using tweens. and even now, sometimes manual is the way to go.

tweening is actually pretty easy and useful once you have the proper settings. here's a screenshot i found, for reference:

http://i.imgur.com/o2dp2fN.jpg

i think these might be the default settings, but either way, start with that.

the easiest thing to do as a demo/test is to create a white background layer, and then a second layer with a black dot (or whatever). in your animation panel, make two frames. in the first frame, put the black dot layer in the upper-left corner, and in the second frame, position the dot layer in the lower-right corner.

then, with the first frame selected, click the tween button. (this will automatically subscribe you to a mailing list for collectors of rare tween pop star memorabilia). choose the number of frames to add: 5 or so will be fine. make sure that position, opacity and effects are all checked, then click OK. this will insert 5 new frames between the frame you have selected (the first frame) and the next frame. tweening will compare the position of the black dot layer in the first frame (in the upper-left corner) with the position of the layer in the subsequent frame (in the lower-right corner), and then automatically make the black dot "move" from the first position to the second over the course of 5 new frames. the effect will be that the black dot will move from the upper-left to the lower-right over the course of 7 frames (the first frame, the 5 frames you added using tween, and the final frame).

as you've probably guessed, you can also use tweening to fade in or out, since it also keeps track of opacity. another simple demo: 2 layers (background white layer and a black dot layer in the center), 2 frames. in the first frame, the opacity of the black dot is set to 0%. in the second frame, the opacity of the black dot is set to 100%. if you use tween to add frames between the two, it will gradually move the opacity slider for the black dot from 0 to 100% in the frames that are added. comes in handy sometimes.

so back to the seamless scroll thing.

let's assume you have the setup you described earlier - a layer that's composed of two identical square images, side by side. i'll call the left half side A and the right half side B. open up the animation panel, and in the first frame, make sure that only side B is visible. create a second frame and reposition the layer in the second frame so that only side A is visible. when you click back and forth between frame 1 and 2 there should be no visible difference, even though in frame 1 you're looking at side B and in frame 2 you're looking at side A. then, select frame 1 and tween it, adding 9 new frames. this will give you a total of 11 frames - the 1st frame that shows side B, the 11th frame that shows side A, and 9 tweened frames in between.

if you hit the play button on the animation panel at this point, you'll see that it slowly slides from side B to side A. you'll also notice that there's an annoying lag between the last frame and the first frame whenever the GIF repeats. the reason for this lag is that frame 11 and 1 look the same, since one shows side B and the other shows side A, which look identical. just delete frame 11, leaving you with 10 frames and (hopefully) the seamless scroll effect.

ahhhhhh, ok i think i've got it. thanks for that ex plainer!

still probably no way to tween the 36 layer rotating backgrounds though, right?

i believe that you can, actually, but only in after effects, not photoshop. but i'm almost certain that with AE you can select a layer/element, apply an effect (probably "rotate" or something close to it), and then specify how long you want the effect to take to execute (360 rotation over 1 second or over 10 seconds, for example).

one of my new years resolutions is to lock myself in a room with AE and fuck around until i'm proficient. however, i've also managed to convince myself that doing things the slow, laborious way with photoshop is often better, because i'm forced to look at every frame and make adjustments, hopefully giving things a more organic feel rather than feeling like a program executed a line of code.

otm, also its a good way to learn what everything in PS does from the ground up

one thing that's cool about photoshop is that there's like a million different ways to do the same thing. there's almost certainly a way that you could write a script or action that would automatically convert a single image into 36 different layers (10 degree rotation, 20 degree, etc, all the way around the circle), so that at least you wouldn't have to deal with that step when working with rotating animations.

no way man these are artisinal craft rotating gifs

hahaha

we should start a digital etsy

any tips on finding good free no-watermark seamless art? seems like they're all behind paywalls

like repeating pattern seamless images? nope. just a few weeks ago i went on a hunt and came up empty. if you're going to be using them a lot, it might pay to invest some time into creating them yourself. Øystein's method would work for some things, and there are other ways you can use as well. i haven't done much searching, but it wouldn't surprise me if there was some sort of online seamless pattern generator tool.

i am now seamlessly tweening!!!!!!

http://i.imgur.com/PFWKgQW.gif
http://i.imgur.com/WcfPalD.gif
http://i.imgur.com/23Y7Ifd.gif
http://i.imgur.com/FHoHss0.gif

Oh hell yeah

i just noticed that artfcity featured one of my GIFs as a GIF of the Day back in November, and then also at the top of their GIFs that GIFs that Made Our Year feature. unattributed in both, unfortunately. still, pretty cool!

very nice.

I kinda wish they'd give me a shoutout just because they're based in Brooklyn and it would be really cool if they knew I'm trying to make stuff, but anonymity kinda comes with the territory

i'm sure if you sent them a quick note they'd oblige

yeah i sent them a little tweet tweet

and there you go

Mother of God, tweening. How long has that been sitting there. I've been meticulously scooting images around frame by frame like I'm Ollie Johnston.

These are pretty great.

http://beautifuldecay.com/2015/02/12/artist-brings-sculptures-life-mesmerizing-moving-gifs/

So the The .GIFYs award is back again, and this time I'm nominated twice. If you're reading this and want to help me out by voting, mine are 1) the scrolling trio of buildings in the "Can't Look Away" category, and 2) the cat that gets lifted up into space in the "Cats" category.

it's nagl to criticize because i was nominated, but this pretty much sums it up: http://artfcity.com/2015/02/17/some-concerns-about-the-2015-gifys/

very otm critique.

shame they didnt learn all those lessons last year (or call it quits after last year)

ha, looks like artfcity decided to just take most of the same GIFY categories and do their own, better version:

http://artfcity.com/2015/02/18/gif-of-the-day-the-art-f-city-giffies-part-one/

http://38.media.tumblr.com/95053bfccfc1b826e0e0288bce66c52a/tumblr_ni1jen4yR51qdmmiqo2_500.gif
http://33.media.tumblr.com/97fbdb6496af01b4c32f54e41d4eff10/tumblr_njhmyqzkTL1qdmmiqo1_500.gif
http://38.media.tumblr.com/1e78f29813ed1979e9f8700a35a3e4b2/tumblr_njs75nvMpL1qdmmiqo1_500.gif
http://38.media.tumblr.com/1c0899fd550967af526b9a96655696fe/tumblr_nk9ejdTgZP1qdmmiqo3_250.gifhttp://38.media.tumblr.com/29b3eaf11565533f4440952e9da98e37/tumblr_nk9ejdTgZP1qdmmiqo2_250.gifhttp://38.media.tumblr.com/0356ccfa358e4c93fd1529c392c46831/tumblr_nk9ejdTgZP1qdmmiqo1_250.gif

http://33.media.tumblr.com/56de2bcb78e0cc450d95a45c64f8061b/tumblr_nkjxf7DGBq1qdmmiqo1_500.gif
http://33.media.tumblr.com/f316d7d2917fe0b9a5a367f66cf6c06e/tumblr_nkgpt1KBMZ1qdmmiqo1_500.gif
http://33.media.tumblr.com/ea9fc544ba9604ec341ddd8c78e87317/tumblr_nkk5qjFIMH1qdmmiqo1_500.gif

How am I seeing shadows on the green from Boehner?

how's 30 sec stories coming along?

https://31.media.tumblr.com/581ef97d0ea38808e5991481846a738a/tumblr_nkknp3ocqq1qdmmiqo2_500.gif

http://38.media.tumblr.com/55edf2aa2a8d363e8ce6c113635fba27/tumblr_nkllbjrkGq1qdmmiqo1_500.gif

how's 30 sec stories coming along?

still working on it but at much slower pace. each one takes me forever and i'm starting to get pissed at myself when i can't make a better visual accompaniment. i know i should just put up some of the other ones with a blank black bg or whatever but it feels like too much of a defeat. i want to eventually get 30 stories up total (at 15 now, with 3 more ready to go), but it will probably take me a while.

go with god fella

Hands thing rules. I want an Animated GIF wall.

serious about the shadow thing.

i think it's probably just an accidental optical illusion caused by the thin white strip between the images.

or - as always - SATAN??!!

http://33.media.tumblr.com/d29d4b47a038b4d4a683af956667c5e4/tumblr_nko1bvlUXQ1qdmmiqo1_500.gif
http://33.media.tumblr.com/3f0e3bdccc351cf4194a83f0fe28298c/tumblr_nko45aWoKD1qdmmiqo1_500.gif
http://33.media.tumblr.com/9cbf7c7e191d9fc6f01a0391b90dcd79/tumblr_nko2blxK9X1qdmmiqo1_500.gif

HANDS AGAIN!!!!!!!

(last ones, sorry)

Oh I can't wait to show those to everyone at Wednesday Night!

very adult swim

feel free to tell me to get fucked but i've always wanted to see a gif of lil bub with eyes like hypnotoad

if you ever find yourself with sufficient downtime..

have to mention this for the lols, sorry, but the The Gifys winners were announced yesterday, and the 2014 GIF of the year was the clip of obama on a skateboard. which was featured on jay leno back in 2012. lol.

electricsound i might be able to do it really quick! i'm totally out of touch - i had to look up hypnotoad!

http://38.media.tumblr.com/ff8a1c9e7ecf9a6b6b330f75084062e5/tumblr_nkt78baAKE1qdmmiqo1_500.gif

http://33.media.tumblr.com/205903846461eb4fa3dd8e3edf729229/tumblr_nkwvctEzR51qdmmiqo2_500.gif

wow just saw the bub one, amazing!!! thanks!

kinda bleh week (trying to figure out how to use a new Ps+final cut blend of tools that i should have been using a long time ago) but i like the last one

http://38.media.tumblr.com/b59c134c515fb9a04b4d170bfcac25fb/tumblr_nla7rkXJY21qdmmiqo1_400.gif
http://38.media.tumblr.com/9a66670e8f443506fb435999f04b5c9b/tumblr_nlfujtggpm1qdmmiqo1_500.gif
http://38.media.tumblr.com/e4cc5a1e69bf6d2842b8ebd39fe8b32a/tumblr_nlmy6ddC6P1qdmmiqo1_400.gif
http://38.media.tumblr.com/9ffaffae37a143d969290287a06dc788/tumblr_nlvzfybANj1qdmmiqo1_500.gif
http://33.media.tumblr.com/850dbc12d4207c29b6d070f5579a3774/tumblr_nlw3trpfXB1qdmmiqo1_500.gif
http://38.media.tumblr.com/3664a98161ebe8fa6ff5e572fb932462/tumblr_nlw3t0LXqa1qdmmiqo1_500.gif
http://33.media.tumblr.com/2b90edb9ecc2f81e84775157b02b1398/tumblr_nlxsju6onK1qdmmiqo1_500.gif
http://38.media.tumblr.com/56c5bdd01d415111d6c711d33e266552/tumblr_nlxu9vrM6W1qdmmiqo1_500.gif

very Master Control Program, that last one