Overlays - Tumblr Posts
Hello!! A couple years ago I posted this tutorial for making gifs with a moving overlay effect. In the two and a half years since I made that tutorial, I've learned some new tricks for this gif effect but most importantly I've learned how to explain things better.
For that reason, I've created this new and improved tutorial for my overlay gif effect. The basics are the same but it's simpler, I go into more detail, give better explanations, and have more comprehensive instructions.
The easiest way to do this effect with this method is to use smart objects and work in timeline. For this tutorial, I’m assuming you know the basics of giffing like cropping, resizing, colouring, etc. If you need help with this I’d suggest you look at some other tutorials and guides!!
First, we’re going to start off with three things.
1. A completed gif converted into a smart object that is going to be the base gif. I'm going to call this "gif1". You’ll want this gif to be at least 3 seconds because it needs to last as long as the overlay plus a little bit of extra time in the beginning. This is the base gif I’ll be using in the example (except I trimmed it so that I could meet the size limit).
2. A second completed gif converted into a smart object that is going to go over the base gif. We’re going to call this "gif2". This gif should be at least 2 seconds but I’ve made it work with shorter. Gif2 needs to be the same dimensions or bigger than gif1. This is the gif I'll be using in the example (except I trimmed it so that I could meet the size limit).
3. An overlay in video form. These can be found on tumblr and youtube by search for overlay or transition packs. For this example, I'll be using an ink drop overlay I found on youtube.
Step 1: Turning the overlay video into an overlay gif Most overlays aren’t going to instantly fit the gif effect you’re trying to achieve right away. This is the overlay I got from youtube and as you can see it’s too slow and needs a crop/resize to be usable.
To fix it, I sped the frame rate up, cropped the overlay, and resized the overlay so it fits over my base gif. I also sharpened the overlay (500% amount, 0.3px radius) so that the edges were smooth. This is the new overlay gif and the one I’ll be using for the gif effect.
A tip: I also like to add a brightness/contrast layer to get rid of the grey on the overlay gif. Because we’re working with blending modes to achieve this effect, any parts of the overlay that are grey will be a blended mix of gif1 and gif2. If you think this will look good for your gif effect then don't worry about it!
Another tip: try to get the entire overlay movement to fit into a 2-3 second window. Anything longer than that will likely be cut off when you have to trim your gif to meet the upload size limit and it would suck to only have half of the overlay.
Step 2: Creating the gif effect Drag a copy of gif2 and a copy of the overlay gif onto the gif1 canvas. I like to use Ctrl+Shift+V so that the layers are pasted in the same position as they were on the previous canvas. MAKE SURE that both overlay layers are in the same position on the canvas. If one of the overlay layers is higher/lower/etc. than the other then the effect won't work properly.
Then, make a second copy of the overlay and invert it (Ctrl+i). These are the layers you should have:
Before you go any further, trim gif2 and both overlay layers so they are all the same length.
Now, we need to rearrange the layers and set blending modes. The top layer should be whichever overlay goes from black to white. This is because when we change the blending modes, the white part of this layer will disappear and look like its being replaced by gif2. In this case, that is the overlay (inverted) layer. Then we want gif2, the other overlay layer, and then gif1.
A tip: this process can be done the other way where the top layer is the overlay that goes from white > black however, you are much more likely to have an error where there is a grey/black line around the overlay effect in your final gif. In order to avoid that, I always use the black > white layer on top.
Next, set the top overlay layer to darken. You should only see the black part from the overlay and gif2 should fill in the white part. Here’s how that looks in my example.
Next, select the top overlay layer and gif2 and convert both layers into one smart object. Your layers tab should look like this now.
Now, set the new layer’s blending mode to lighten and the overlay layer’s blending mode to darken. Once you do this, you should be able to see gif1 as well as the overlay gif.
Step 3: Timeline and exporting At the moment, gif1 is still significantly longer than the overlay gifs. Since this gif is just over 10 mb (which is pretty small for this effect) I’m going to trim about 1/4 of a second off the end of gif1 and then drag the overlay layers so they all end at the same time.
Now you’re free to export the gif! This is the finished effect for the example gif!
A tip: sometimes, when I convert to from timeline to frames, the gif becomes a little longer and slower. It has to do with different frame rates across the videos and photoshop but I'm not smart enough to understand it. If that happens, just set all the frames with the overlay layers to 0.04 speed instead of 0.05.
And we're finished! I hope that was helpful and made sense. If you have any questions feel free to drop them in my inbox or send me a message!! <3
Hi! If you don’t mind me asking, how do you do the torn paper effect thing in your edits? (Btw your gifs are always amazing and I love them!!)
hi! thank you so much, it means the world 💚 i don't mind at all, i always love to help anyway i can! i'll be using this gif from my pinned gifset for this, tutorial under the cut
ALT
ALT
ALT
i always look for them online, either google or freepik or behance. just type *torn paper png* *torn paper transparent*. i don’t have the link for the one i used here so i uploaded it here for you. you have to always be careful when you’re searching for them because many times (even if you’re looking for pngs) the background isn’t transparent. you can also use a brush to create it yourself that you can find here, it’s not a method i use but it can maybe work better for you! i open the torn paper on photoshop and i place it on top of my gif this is what we have now but i don’t like how light and fake it looks
ALT
ALT
ALT
ALT
ALT
ALT
so i use this b&w gradient map, set it to linear burn blending mode and then right click clipping mask
ALT
ALT
ALT
ALT
ALT
ALT
now it looks more ragged but i’m not satisfied yet so i will use a texture
ALT
ALT
ALT
ALT
ALT
ALT
i used this concrete one (you can search on google and use any kind of texture you want and give the torn paper any look you wish) and i set it to multiply blending mode, 10% opacity, then right click create clipping mask
ALT
ALT
ALT
ALT
ALT
ALT
this is what our gif looks like now but can you see that the edges of the torn paper look a bit weird? like black on top of the red?
ALT
ALT
ALT
ALT
ALT
ALT
i go to my original gif, create a new layer and paint it black. then add a layer mask on it and while using a soft 0% hardness eraser tool brush, start deleting parts from the right side of the gif. you might wanna also duplicate the layer once or twice so it looks perfect! and now we have this
ALT
ALT
voila! i hope it’s all understandable, anything else you might need, my ask is always open! ❤️
BEATING HEART EFFECT TUTORIAL: I was asked by the amazing Samantha @shegos how I made the animated beating heart effect on my Witcher gifset so I thought I would make a tutorial about it! I’ve used this same effect before on this Merlin gifset. This tutorial assumes you have basic giffing skills and work on Photoshop with a timeline.
Keep reading
Ripped paper edges on gifs + text tutorial
Some people was asking me about how to make ripped edges on gifs like on mine destiel giset, so i decided to make a tutorial for this and give you some tips for text on your gif graphics. For making this you’ll need photoshop and basic knowledge for making gifs with the timeline.
Keep reading
Je partage mes petites mines d’or (celles que j’utilise le plus souvent) car je pense que ça pourrait être utile à pas mal de monde =) Bien entendu, il faut fouiller, chercher, trier ... Mais ça vaut vraiment la peine d’y jeter un coup d’œil, car il y a quelques merveilles ! ♥
ENG { I share my sources (the ones I use most often) because I think it could be useful to a lot of people. Of course, you have to search, sort ... But it is definitely worth it, because there are some wonders ! ♥
IMAGES, TEXTURES, OVERLAYS, PATTERNS :
https://twitter.com/archillect
https://unsplash.com/s/photos/texture
https://www.wildtextures.com/
https://stocksnap.io/popular
https://www.pinterest.ca/felicefelicis/patterntexture/
https://www.pinterest.fr/poesiescendrees/aes-graphisme/
https://www.pinterest.fr/karinaresendiz7/overlays/?autologin=true
https://www.toptal.com/designers/subtlepatterns/
https://necessary-disorder.tumblr.com/
https://graphicburger.com/
https://allresources.tumblr.com/
https://www.pinterest.fr/flightofthestars_/ressources-collaboratives/
CITATIONS POUR AVATARS (FR/ENG) :
https://asperaastra.forumactif.com/h6-quote
https://nemoanimus.tumblr.com/
https://www.kaakook.fr/
Aaawn
"love at first sight" aspects?
Sun aspecting Venus
Venus/Ascendant/DC ruler conjunct North Node
Venus hard aspect to Mars, Uranus, Jupiter, Neptune
Sun/Venus/Mars conjunct the ascendant or descendant
Venus/Mars/Uranus/Sun/Ascendant falling in the 5th or 7th
shape clipping tutorial
for anon! clubbing gifs 1 and 3 of this set together since the logic is similar
1. crop main clip
whether directly on photoshop or on vapoursynth (like I do)
2. sharpen + colour
I wanted gif 1 to be black and white so I slapped on a black and white layer
then added brightness/contrast and curves to increase the contrast between the blacks and whites so that it doesn’t look too greyscale
went with my usual colouring steps: brightness/contrast, curves, levels, vibrance, selective colouring, hue/saturation
then to isolate the background because I wanted it to be blue but not affect his face, I took a soft brush:
and brushed over the areas I wanted to hide on a layer mask (see that black spot in the thumbnail)
then used hue/saturation to remove the yellows in the background, and selective colouring to change the greens to cyans, enhance the cyans/ blues, and change the overall colouring to something more cyan
3. position shape(s)
use the rectangle tool to create a shape (in my case, a diamond) of your choice, with fill and white outline (up to you whether you want the outline or not)
duplicate the shape and lay it out however you want
same logic for the paper tear, position it however you want it on the scene
4. load & clip additional scenes
measure the rough dimensions the additional scenes should be - I do this before loading the clips into photoshop because I load them into vapoursynth first which requires the (more or less) precise dimensions of the clip
position clips above the shapes you want to clip them to
(I’m showing this altogether but I did this one by one for each scene so it wouldn’t be so messy)
at the thumbnail, position your cursor between the scene layer and the shape layer, then hold the option/alt key (on mac, not sure if it’s the same on pc). you should get this clipping symbol (I drew the one in red okay I couldn’t get a screenshot of it aklsdlkflk)
with the option/alt key held down, click, and the scene layer on top will get clipped to the shape layer below
do for the rest of the scenes
same thing here: position scene where you want it to go - you can always adjust it later after it’s been clipped to the shape
option/alt + click to clip
for this one, I also added an inner shadow on the tear to give it a bit of depth
and since I’d fubbed up the dimensions of the clipped scene and it wasn’t long enough to cover the entire tear, I duplicated the scene, flipped it vertically, and masked it to the paper tear, to cover up the bottom left corner of the tear
(so yes if you look closely at that corner of the gif you’ll notice that it’s moving in a different direction from the rest of the gif - lol - but at least it’s covered up and not super obvious)
5. colour additional scenes
I wanted something that was coloured but overall blue, so I put on a gradient map to colour the whole scene blue, then added brightness/contrast and curves to increase the contrast between the dark and light areas
for the following scene, black and white colouring - same steps as the main scene
duplicated the colouring for the first two scenes for the rest because I’m lazy
went with black and white for the scene in the paper tear, but instead of going super contrasted like my other black and white scenes in gif 1 (the one with the diamonds), I went opposite here and reduced the contrast
also put in a gif overlay on the main scene - which is the technique used in gifs 2 and 4 of this set
6. typography
and done!
^ spot the part I cheated to cover up the paper tear lol
gif with a colored background and reference image tutorial: part 2 of 2
hi! so a while back I made a tarot card set for the old guard and was asked for a tutorial, and since I was planning a tarot set for 911 lone star, I decided to use that for this tutorial (apparently the tutorial is too long for one post, this is the continuation of part one)
I will continuing to show how to make this gif from scratch:
(sharpening and coloring the main gif, coloring the background, coloring the image, adding both to the same canvas and adding the typography)
rest of the tutorial is below the cut!
Keep reading
The blending in your Lucas gifset was absolutely gorgeous! Do you have or know a tutorial on how to do it?
Blending Tutorial!
Firstly, thank you for the compliment anon! Now, I'm going to go through the process considering that you already know how to make regular gifs and know how to use adjustment layers, so I'll be focusing specifically on blending but if you need those tutorials I can make them, just ask!
This is gonna be our end result after the whole process:
This specific gif from this gifset(with the typography removed) is focused on a color palette with only two adjacent colors so it's a bit easier to make the blending look good but this process works for any kind of gif! So let's start the tutorial!
1. Get your desired gifs into the same canvas
These are the two gifs I'll be blending for this gifset. Make your gifs and resize them to the size of your final gif. Remember to turn the layers of each gif into Smart Objects so that you can move them around properly when blending.
I usually make the gifs and just copy and paste one of them onto the canvas where I made the other one. You can also make your gifs and save them separately from each other first and then put them into the same canvas, but I prefer to make all adjustments except for resizing in one canvas so I can tweak the positioning of each gif as well as the coloring so everything looks the way I want it to.
2. Put each gif into a folder
This will make it easier for when you start using adjustment layers on each gif so that the adjustments don't interfere with other layers.
3. Set layer mode to screen
Set both folders to Screen, this will help blend them together better than if you were relying only on the opacity of the layers. I also usually create a new layer and use the paint bucket tool to color it black. Your gif should look something like this:
And your layers like this:
The black background makes sure there aren't any transparent spots in your gif when you use the layer masks to blend them as you can see here:
4. Create layer masks
Select each group one at a time and go into Layer > Layer Mask > Reveal All. Your layers should now look like this:
5. Start erasing each gif on the layer mask
Use a soft airbrush to erase each gif to your liking. With layer masks you can use the eraser tool or the brush tool. Layer masks work based on color value(how light or dark the color is). The darker the color you paint with your brush the less opaque it will be. Painting in black will erase the area completely and painting it white will make it completely visible. The eraser defaults to the same effect as if painting with a brush in black.
This is the final result of the blending:
This is how each of the gifs look after I erased them with the layer masks:
This is what my layers look like:
As you can see I've erased one of the gifs way more than the other, that's because I only erased parts of the gif that would interfere heavily with the gif I wanted to be more visible. Make sure to move around the timeline of your gif to see if you need to erase more or less of each gif since the person or thing you're trying to keep visible can move around and get covered.
6. Make your color adjustments
If you've already made your adjustments before pasting both gifs into the canvas you can skip this step. Since this gifset was focused on orange and yellow I adjust my colors to match that. I keep my adjusment layers in groups inside the respective gif's folder so I can turn them all on or off easier and so they occupy less space in my Layers tab.
And this is what the colors look like in the end:
7. Export your gif
This is what my export settings look like:
This doesn't interfere with the blending and a lot of these settings are personal preference but I thought it was worth sharing.
And finally we've arrived at our final result as shown previously:
Other blending tutorials:
Now the links to some other blending tutorials that might have different methods(sometimes because of different desired outcomes). I'll be tagging the creators for if anyone wants to look at their content!
Tutorial using gradients and lighten mode by @linda-darnell
Tutorial using erasing with layer masks by @eddiediaaz
Tutorial adding color on top by @miriammaisel
Tutorial using screen and color layer modes by @disaster-lineage
That's it! Hope this was helpful!
Oh I aodre this very much, and I've got to know how you did that overlay transition if you wouldn't mind telling me 👀👀
Hiiii, sorry this took me a while, so this was my first time doing this effect on that gifset so i wanted to do another to make sure i was doing right so i could give this little tutorial for you, so i'm gonna be doing it using this gif from one of my latest gifsets
So for this tutorial you are gonna need:
2 gifs you want to use
a transition/stock video of ink or something similar (i got mine here)
and at least basic knowledge of making gifs with timeline on photoshop
So first off get the 2 gifs you want to use and colour and sharpen how you please, then drag one of them on top of the other so they're both on the same gif - for the sake of this tutorial i've labelled the layers as the background and the foreground
Next i get the ink footage (uploaded to photoshop the same way i'd normally upload gifs convert to smart object etc. etc.) and then drag that into the foreground folder
Then set the ink layer to screen and it'll show the foreground gif in the black ink like this:
Now copy the ink layer and move that to the background layer, change the layer style to multiply and you'll get this;
Now here is where i had to do a lot of experimenting to actually figure out how to get the background to show - there's probably an easier way to do it? but if there is i couldn't work it out.
I found to get it to show i had to set the foreground grouped layer to difference - but then it shows the background like this;
So to remedy this i placed a white layer set to difference under the ink layer in the background group;
That then counteracts the foreground layer being set to difference on the background layer and there you have it - an ink overlay transition
I hope i explained this decently i'm not the best at explaining this, if you have any questions don't be afraid to ask - and if you wanna see the gifset i used this with it's here
Tutorial - Movie posters
The lovely @kosem-sultan asked me for a tutorial for this poster in specific
Keep reading
Hi! Can I ask how you did the double exposure gifs for your merlin set? They're beautiful btw!
heyy, thank you!! of course!
it's actually not very hard, the trick is to find the right shots for this. here's how i did it (reference gifset), under the cut.
for this tutorial i will be: — using photoshop cs5 on windows — assuming you know how to make gifs using the timeline — have basic coloring, sharpening, groups, and layer masks knowledge
I. CHOOSING THE RIGHT SHOTS
the ultimate trick to pull this off is to choose the right image. in order to do the double exposure, you need a silhouette shot that has these:
a defined and dark silhouette with a background that is not too busy
enough contrast between the silhouette and the background
the silhouette should take at least 50% of the space
not too much movement
here are a few examples of why they work and why they won't:
gwen: perfect example since this shot is already quite contrasted with a defined silhouette. there won't be a lot of work needed to make this one work.
merlin: not a great example because even tho there's a somewhat good contrast between him and the background, the silhouette is just too bright, not dark enough.
arthur: another good example, even if there are some bright spots on his face and armor. since he's not moving too much, you can definitely brush some black over him to make his silhouette darker (i'll explain/show later)
morgana: this one could work because the contrast is great, but of course her skintone is very bright against the black clothing. that being said, since the movement is not too bad, it could be possible to brush some black over her and move these layers with keyframes (as mentioned for arthur's example). i haven't tried it tho, but i think it would work well enough.
once you have your silhouette shot, you need another gif for the double exposure. what works best, in my opinion, are:
wide, large shots
shots with no to little camera movement (no pan, zoom, etc), but the subjects in the shot can have little movement of course
pretty cinematography/scenery shots
i find these are easier to find and make it work, it's not as "precise" as with silhouette shots. it's mostly just trial and error to see what works best with the silhouettes.
II. PREPPING THE SILHOUETTE
for the effect to work, we want a silhouette that's dark as possible. i'm gonna use the gwen and arthur shots as examples.
for the gwen gif, i started by sharpening, and then upped the contrast by quite a lot so her silhouette is mostly black, while retaining some nice details. i've used only 3 layers here:
selective color layer: in the blacks tab, playing with the black slider (value: +10)
brightness/contrast layer: added a lot of contrast (+61) and a bit of brightness (+10)
black and white layer: on top, its blending mode set to soft light and at 20% opacity. gives a bit more depth and contrast
then for the arthur example, i've also sharpened it first, and added contrast layers in this order (the skintone looks horrible, but it won't matter soon lol):
levels layer: black slider at 0, grey slider at 0.76, white slider at 104
selective color layer: in the blacks tab, black slider at +10
brightness/contrast layer: brightness at +1-, contrast at +47
black and white layer: on top, its blending mode set to soft light and at 20% opacity. gives a bit more depth and contrast
as you can see, half of his face is still quite bright. to correct that, create a new empty layer and put it between the gif and the coloring layers.
using a really soft brush and the black color, brush some black over his face and body on that new empty layer. you can edit the layer's opacity if you want, i've set mine to 71%. since arthur doesn't move much here, there's no need to keyframe this layer's position. for the morgana example, this is where you'd need to play with keyframes to make it work. here's where i'm at now after this:
you can always edit this layer later if you need, after doing the double exposure blending.
once the silhouette is all ready, you can put all layers in a group and rename it (i've renamed mine silhouette).
III. BLENDING
now the fun part! import the wide/scenery shot in photoshop, then resize it to the same height of your silhouette gif. make sure the gif is a smart object layer, and sharpen it. finally, bring this gif onto the silhouette canvas (by right clicking the smart object > duplicate layer). once you have both gifs onto your canvas, put the wide shot gif layer in a group, and set this group's blending option to screen.
you can then position the wide/scenery gif the way you like it in the canvas. this is how it looks for both examples after i've done that:
if the blending mode screen doesn't give you the best result, so you can play around with other blending modes (such as lighten and linear dodge in these particular cases), but generally speaking, screen is the real mvp here haha.
IV. COLORING
now that the double exposure effect is done, we need to color the gifs to bring them together. i went with simple coloring here, simply enhancing the colors that were already there. just make sure that the coloring layers for each gif are in their respective groups. here's how i've colored both examples:
gwen silhouette group: i added a gradient map layer on top of the contrast layers in black to green and set the blending mode to color
scenery shot group: multiple coloring layers, with a green color fill layer (blending mode set to color), with a layer mask so it only affects the top half of the gif
for the arthur gif, i did something very similar but with warmer colors. i didn't use a gradient map for arthur though:
arthur silhouette group: i made the yellow warmer, closer to orange/red, with a hue/saturation layer, and added more vibrance. didn't feel like it needed a gradient map layer here though.
wide shot group: basic coloring layers to enhance colors from the merlin & daegal shot, and an orange color fill layer set to the color blending mode.
at this point you're pretty much done. just need to add some final touches and typography (if you want).
V. FINAL TOUCHES
a small and completely optional detail, but i wanted to soften the edges of the wide gifs. to do so i've duplicated the smart object gif layer and removed the sharpening filters (right click on smart filter > clear smart filters). put this layer on top of the other smart object layers (but still below the coloring).
then with this same layer still selected, go to filter > blur > gaussian blur... > 10px. this will give you a very blurry gif, but we only want the edges of the canvas to be softer. so add a layer mask to this layer. with a very large and soft brush (mine was at 0% hardness and about 800px size), brush some black onto the layer mask to remove the blur in the middle of the gif.
you can play with this layer's opacity or gaussian blur amount if you want (by double clicking on the gaussian blur smart layer filter). here how both examples look with this gaussian blur layer:
you can also mask some of wide/scenery gifs if you'd prefer, so it shows less outside of the silhouette. just put a layer mask on that whole wide shot group and brush some black or grey on the layer mask. it's what i did for the gwen gif, with a very soft brush and i set the mask density to 72% (i kept the arthur one as is tho):
and that's how i did it! hopefully that was clear enough :)
Hello!! A couple years ago I posted this tutorial for making gifs with a moving overlay effect. In the two and a half years since I made that tutorial, I've learned some new tricks for this gif effect but most importantly I've learned how to explain things better.
For that reason, I've created this new and improved tutorial for my overlay gif effect. The basics are the same but it's simpler, I go into more detail, give better explanations, and have more comprehensive instructions.
The easiest way to do this effect with this method is to use smart objects and work in timeline. For this tutorial, I’m assuming you know the basics of giffing like cropping, resizing, colouring, etc. If you need help with this I’d suggest you look at some other tutorials and guides!!
First, we’re going to start off with three things.
1. A completed gif converted into a smart object that is going to be the base gif. I'm going to call this "gif1". You’ll want this gif to be at least 3 seconds because it needs to last as long as the overlay plus a little bit of extra time in the beginning. This is the base gif I’ll be using in the example (except I trimmed it so that I could meet the size limit).
2. A second completed gif converted into a smart object that is going to go over the base gif. We’re going to call this "gif2". This gif should be at least 2 seconds but I’ve made it work with shorter. Gif2 needs to be the same dimensions or bigger than gif1. This is the gif I'll be using in the example (except I trimmed it so that I could meet the size limit).
3. An overlay in video form. These can be found on tumblr and youtube by search for overlay or transition packs. For this example, I'll be using an ink drop overlay I found on youtube.
Step 1: Turning the overlay video into an overlay gif Most overlays aren’t going to instantly fit the gif effect you’re trying to achieve right away. This is the overlay I got from youtube and as you can see it’s too slow and needs a crop/resize to be usable.
To fix it, I sped the frame rate up, cropped the overlay, and resized the overlay so it fits over my base gif. I also sharpened the overlay (500% amount, 0.3px radius) so that the edges were smooth. This is the new overlay gif and the one I’ll be using for the gif effect.
A tip: I also like to add a brightness/contrast layer to get rid of the grey on the overlay gif. Because we’re working with blending modes to achieve this effect, any parts of the overlay that are grey will be a blended mix of gif1 and gif2. If you think this will look good for your gif effect then don't worry about it!
Another tip: try to get the entire overlay movement to fit into a 2-3 second window. Anything longer than that will likely be cut off when you have to trim your gif to meet the upload size limit and it would suck to only have half of the overlay.
Step 2: Creating the gif effect Drag a copy of gif2 and a copy of the overlay gif onto the gif1 canvas. I like to use Ctrl+Shift+V so that the layers are pasted in the same position as they were on the previous canvas. MAKE SURE that both overlay layers are in the same position on the canvas. If one of the overlay layers is higher/lower/etc. than the other then the effect won't work properly.
Then, make a second copy of the overlay and invert it (Ctrl+i). These are the layers you should have:
Before you go any further, trim gif2 and both overlay layers so they are all the same length.
Now, we need to rearrange the layers and set blending modes. The top layer should be whichever overlay goes from black to white. This is because when we change the blending modes, the white part of this layer will disappear and look like its being replaced by gif2. In this case, that is the overlay (inverted) layer. Then we want gif2, the other overlay layer, and then gif1.
A tip: this process can be done the other way where the top layer is the overlay that goes from white > black however, you are much more likely to have an error where there is a grey/black line around the overlay effect in your final gif. In order to avoid that, I always use the black > white layer on top.
Next, set the top overlay layer to darken. You should only see the black part from the overlay and gif2 should fill in the white part. Here’s how that looks in my example.
Next, select the top overlay layer and gif2 and convert both layers into one smart object. Your layers tab should look like this now.
Now, set the new layer’s blending mode to lighten and the overlay layer’s blending mode to darken. Once you do this, you should be able to see gif1 as well as the overlay gif.
Step 3: Timeline and exporting At the moment, gif1 is still significantly longer than the overlay gifs. Since this gif is just over 10 mb (which is pretty small for this effect) I’m going to trim about 1/4 of a second off the end of gif1 and then drag the overlay layers so they all end at the same time.
Now you’re free to export the gif! This is the finished effect for the example gif!
A tip: sometimes, when I convert to from timeline to frames, the gif becomes a little longer and slower. It has to do with different frame rates across the videos and photoshop but I'm not smart enough to understand it. If that happens, just set all the frames with the overlay layers to 0.04 speed instead of 0.05.
And we're finished! I hope that was helpful and made sense. If you have any questions feel free to drop them in my inbox or send me a message!! <3
Rotoscoping Tutorial by @antoniosvivaldi
Hi everyone! I’m excited to announce my long-delayed Rotoscoping Tutorial - requested by a number of people over the past calendar year.
In this tutorial, I will show you how to create the cutout gifs like this (and seen in most of my gifsets under this tag) with Rotoscoping on After Effects. I’ll also provide additional examples and a number of things that I do to optimise my giffing / Rotoscoping workflow (e.g. useful shortcuts & other things to be aware of).
This is the structure of the tutorial:
Why Rotoscoping? Photoshop video timeline’s limitations
Photoshop workflow pt 1: Preparing your gif
After Effects workflow: Interface, shortcuts, and Rotoscoping tools
Photoshop workflow pt 2: Assembling your gif; with multiple examples
Bonus content: Rotoscoping tips* & workarounds to common issues
For quick reference, here are example gifsets (and where Rotoscoping is used in the posts) that I will mention in the tutorial:
Example 1: Cutout gif effect | panels 2 + 4
Example 2: Changing a gif’s background colour | all panels
Example 3: Cutout gif effect in a shape | all panels
Example 4: Putting it all together | panels 1, 3, & 5
What you need & need to know:
Software: Photoshop & After Effects (After Effects 2021 or later for Rotobrush 2.0)*
Hardware: 16GB RAM required to run later versions of AE*
Difficulty: Advanced; Knowledge in making gifs, applying layer masks, and using video timeline interface assumed
Key concepts: Rotoscoping (AE) / Video Timeline (AE+ PS) / Layer Masks & Groups (PS)
Supplementary files: tutorial resources
*I’m currently running the latest version of PS & AE on an M2 Mac, but I’ve also used older versions (CC 2015 & 2020) on Intel-based Macs. I’ll outline some known compatibility & performance issues, and workarounds later in this tutorial that could help streamline your giffing workflow.
Tutorial under the cut. Like / Reblog this post if you find this tutorial helpful. Linking this post / the example gifsets in your post caption, will be greatly appreciated if you read this to create effects seen in Examples 3 + 4.
Keep reading
So question! how did you manage to get THIS Frame|Border? /post/720862109738713088 ? IT'S AMAZING
thank you so much!! post
so this border is the exact same thing as in this tutorial i did! the only difference is that i changed the layer's blending mode to difference (or exclusion, they're incredibly similar).
then I double-clicked the layer to open the blending mode options and chose color overlay. this keeps the original color as white, but layers another color over top. as im on my phone, i don't have the exact hex code, but i used the color picker and chose the main purple color of the background.
i did the same with the text as well!