Hiii, I love ur edits so so much!! Was just wondering, how did you edit the last gif for the lucius fox edit? The way the glasses reflected was so cool to me
hello! this is a very good question, and i'm happy to answer it for you. but i feel like I should say to start that this is a pretty convoluted thing, the way i do it. i am almost positive someone else out there does it in a simpler and more straightforward way than i do. that being said, I can show you my process!
the main tools for this particular trick are layer masks and the animation timeline tool. i’ll also be using the movement/selection tools, but those are pretty straightforward I think? we’ll see, i guess!
i’m going to use this catwoman panel as an example.
let's start out by cropping it in and removing all the text bubbles/extra things, just to get a blank slate. i have a tutorial on how I edit panels here, and how I size them here, if that’s something you need. It’s not really necessary for this trick, but I like a clean visual.
i end up with something like this:
now you’ll want to make a new blank layer on top of this one. this will be the one you work on. this part comes down to kind of personal preference/artistic decision making, but you want to fill this blank layer with the sliding effect you want to have. this would be the reflection in lucius’ glasses, or the arrows in this ga/gl gifset.
(it looks very silly, I know. trust the process on this one.)
then, on the layer where I’ve just drawn the white lines, I am going to create a layer mask. select “layer” in the toolbar, find “layer mask,” and select “reveal all.” this won’t change anything about the visual at this point, but it’s necessary for creating this effect.
two things to do right away: unlink the lines from the mask by clicking the little “chain” between the two, and select the layer mask itself to work on.
wrong:
right:
(ignore groups one and two, by the way. those are just old versions of the panel/lines in case i screw up and need to go back to a previous one for some reason. you don’t have to do that; i’m allergic to the delete button.)
use the selection tool to pick the area where you want the affect to appear. for me, that’s all the yellow facets of the diamond, so i’ve outlined it like so:
on the layer mask, fill those sections with black. then hit either ctrl+i or command+i to invert the layer mask, so the white portions become black and the black portions become white. in my case, this makes the white lines… disappear! magic.
basically, what the layer mask is doing is choosing when the pixels on a layer show up. by coloring something in, you’re saying, ‘I don’t want the white lines to show up when they live in this space.’ so because you’ve inverted it, you’ve turned everything outside of the area you want to animate into a no-show zone, and only the area you want to work on is left.
this is probably not a very good explanation. sorry about that. mess around with it on your own and I guarantee it’ll make sense.
we are now done creating the layer mask! click on the layer itself to make sure you’re working on that for this next bit, like so:
this next part is like. actually really hard to explain. but i’ll try my best.
i’ve done a tutorial on how I animate gifs before. some of that might help here, but it does function a little differently. first, you’ll want to go to the timeline at the bottom of your screen.
create a new frame in the timeline with a 0-second delay. then go back up to the image itself, and select the lighting effect you made (my white lines, in this case). move it just a little bit. i’m opting to go just until I can see the first line or two on the diamond.
it won’t look like much. here’s the difference:
you can see (I hope) the tiny bit of “shine” on the upper left corner, where the mask is white and the pixels are visible.
now i’m going to make another new frame in the timeline, and nudge those lines a little more. let’s say six pixels to the right, and two pixels down. now it looks like this:
you will notice the change is almost imperceptible. that’s fine. the resulting animation will be smoother if you do smaller movements, as opposed to bigger ones.
basically… just repeat that. new frame, nudge a little. new frame, nudge a little. over and over, until the lighting effect has moved fully off the area you’re animating on the other side. These edits can get a little long/the number of frames can get huge, so if you catch that happening, wait until you get to the end and then select either all the even or all the odd frames and delete them.
this will double the speed of your animation, but given the very small increments in which we are moving things, it still won’t look too choppy. you could certainly start with bigger movements to cut this off at the pass, but it’s a LOT easier to cut these frames out than to add new ones in if it ends up looking too rough, so I opt for more frames and then remove them later.
once you’ve moved the lighting effect all the way across the image and over the other side, make sure you play it through at least once or twice to get a feel for it. this is what I have:
this is way, way too fast to me. that’s okay! we can mess around with the timeline settings to increase the delay to pretty much anything. I’m going to set it to 0.2 seconds per frame, with a longer setting for the first and last frame to give people a breather between the start and end of the effect. now my timeline looks like this:
and my gif looks like this!
that works better, i think. the more I’ve made gifs, the more I’ve allowed for pauses and slower animations; when I look back at some of the first ones I did, they feel way too fast. but it’s all up to personal preference, really, so mess around with the settings all you want until you get the vibe that you want.
you can also mess around with opacity. if you want something to fade into the background as it moves, use a white-to-black gradient instead of just stark black or white spaces. if you want the shine to be less prominent (not at all necessary here with such a small effect), change the opacity of the entire layer until it's subtle enough for you.
basically, the world is your oyster, and you can mess around with this as much as you want. this is my method; it does not have to be yours.
Edit Requests: Roy Harper "with his stinky trucker hat" for Vee <3
"Are we the best team in the world or what?!"
(ID under the cut.)
ID: Five panels of Roy Harper from Red Hood and the Outlaws (2011), with long hair and a trucker hat. Four are animated.
1: Roy in his Arsenal costume, holding his bow. He has a gray hat on. The background is covered in the word "Outlaw," which lights up one letter at a time.
2: A close-up of Roy's face and hat. He's out of costume. The image is desaturated except for the green of his eyes and snake tattoo and some of the red in his hair.
3: Roy, in costume, sitting in a chair and pulling the bill of his cap down over his eyes. The art from his hat floats over his head, a cartoonish mountain range that almost looks like a crown. It hovers up and down as text appears one narration box at a time: "Roy Harper. / Recovering alcoholic, reluctant hero, Arsenal. / Frustrated mad scientist. / Extremely frustrated."
4: Roy, once again in regular clothes, looks up in surprise. He's desaturated except for reds and greens. The background is a collage of his arrow symbol from the Outlaws comics. Various iterations of the arrowhead light up randomly.
5: A close-up and full-color portrait of the left half of Roy's face out of costume. The red background says, "Arsenal Goes To War" in a bold impact font. A text bubble appears: "All right, buddy boy... The cavalry's arrived."
You do not change the world by the stroke of a pen or the sweep of a sword. You change the world heart by heart, mind by mind.
(ID under the cut)
ID: Four animated panels from Wonder Woman comics.
1: A television set depicts Wally West, dressed as the Flash, and Diana of Themyscira in her Wonder Woman costume. They stand in the middle of a forest fire. Wally starts to run, then comes back to talk to Diana, before finally leaving her behind. Scrolling text above the television reads: "...JLA No Comment..." Scrolling text below the television reads: "News From Colorado..."
2: Diana stands at a podium in a bookstore in front of a crowd. A poster for her book, "Reflections," featuring art of her lasso, is hung on the wall. Someone asks: "Do you, ah, do you have a boyfriend?" Diana responds, "I don't, no, not at the present. I'm not really looking right now." A few hands shoot up. Diana adds, "I should add that I don't have a girlfriend either." A few more hands go up. She says, "Does anyone have any questions about the book?" All the hands go down.
3: Diana stands in the rain as protestors call out to her. At first, it's bigoted statements about immigrants and her liberal lifestyle, but it quickly devolves into panic after someone in the crowd is shot.
4: Diana stands, silhouetted in gold, in front of a tableau of newspapers and magazines with her on the cover. Her silhouette hides her face, but she's smiling in all the photographs. The magazines start in black and white, but light up in colors one at a time.
