#mine | tutorials

i usually try and find the overlays in high quality, if it's an image overlay (like the paper one) instead of pasting into the gif layer straight away i usually save the overlay (if i get it from another source outside of photopea) & use open -> place (if the image is already the same size as the gifset otherwise if it's not photopea will resize it to fit, which usually makes it not look the way i wanted)

or i open it separately in another tab and then go layers -> duplicate into -> & choose the tab that has the gif in it & then resize it in the gif

with the paper texture that i used on this set which i shared in this tutorial i think i was able to keep the quality because i changed it from yellow to white by using a curves layer and then a black & white layer

and then i clipped the paper overlay and the adjustment layers to the ripped paper paint brush

honestly when comes to using overlays it really is hit or miss it's not always high quality for me there's a gif transition overlay set i did (i think my first ever one) where the overlay isn't that high quality

i can't confirm or deny if this can help or not but i do think the fact there's not as many colours in that ripped paper set also helped with the quality

the paper itself already has a like grungy/grainy look already which could maybe have helped too

also i found this accidentally while going through photopea and where i found the original paper text (though i still cant find the exact source i used can be found if you go to file -> new -> and on the new project pop up bottom right you can see "templates"

it should open the templates window and you can use the search feature to find templates that could include more high quality textures of paper which you can use the duplicate into option to use in your set (i usually try searching multiple different ones "paper" "ripped paper" "lined paper" to see which ones i prefer & there's a lot that comes up that isn't related 💀)

it really depends on what scene you're using i do recommend using scenes that have less skin tone colours in the background & clothing to make it easier (so reds & yellows) like with the yaojing header i have most of the purple colouring was done with selective colour

this is the outcome with just selective colour

depending on what i'm giffing i can do the next step differently but it's mostly the same i use a colour fill on hue (100%), another colour fill on colour (30%), and then another colour fill on overlay (20%)

though for this header i only have the hue & colour ones because i didn't feel i needed the extra overlay one, the opacity is just literally preference sometimes i do the colour fill higher it really depends on how much i was able to get that colour with the selective colour and how much the hue layer helps, sometimes just the selective colour & hue layers are enough

and then i just mask out the faces (& anything else if necessary), i recommend, if you're using multiple colour fill layers, to group them together and then use a raster mask to take any of the colour off of the faces so the folder tends to look something like this:

^ this way is so much quicker and easier and it means all the layers match unlike if you did each one individually (& i noticed duplicating the layers also is slightly not the same)

another tip is i tend to look for scenes with not as much movement, since photopea doesn't have the keyframes option & i'm very fussy about my colouring going over the person's skin even a little bit so i try to find scenes where the most obvious movement, if there is any, is at the beginning and/or end of the scene. so that when i'm done my masking i just duplicate the first frame and bring it to the top so that i can see if there's any overlap, i also check for this when i press save but most of this is me just being overly fussy 🤣

the majority of the texture for the ripped paper effect i can't really take credit for it's on the paper it's self all i did was make the paper white (because the texture was yellow) and used curves to darken the texture), i got the texture from one of photopea's templates but it seems their whole template section has changed drastically and no longer has like anything i used to see before ???? so i'll just share both versions here:

(original & my edited version)

for the ripped parts i just played around with this brush set in the plugins

once i decided which of the paper brushes to use i had a new layer and used it where i wanted, so top left in the gif above, i clip masked the paper texture (and the adjustment layers as well) onto it so you get that ripped effect (if you don't like or want to add to that you can always use the brush tool again (or the erasure tool) set as the paper brush to add or remove sections i did this a lot when i realised certain words i wanted to show weren't on there (also changing the size of the paper brush when wanting to add a little bit or take a little bit away was a massive help)

i also always add a drop shadow to my paper textures, the settings i used is mostly the same EXCEPT for the angle for all of the ripped paper (it's also my text drop shadow settings) because depending on how the ripped paper looks you might have to change the angle

also i know in the screenshot below it's on but make sure the use global angle is off if you're going to have multiple different angles of drop shadow in your one gif (so if you want your paper texture on 125° but anything else on 60° the global angle needs to be off but if you want them the same then you can keep that on, which is why it's on for me because the angle is the same for both the text & the ripped paper) (and by text this isn't the text on the ripped paper, there isn't any drop shadow on the text itself there, just to clarify this was for my "ripped paper text tutorial by dengswei" text)

as you can see i also clipped my "handwriting" text to the paper layer this is so it stayed on the paper rather then going onto the gif itself (and it saved the fiddly part of masking it away & it felt more authentic this way too)

i found for me it was easier to seperate the text line by line so i knew exactly which part of the text was on which and if i wanted to change anything either it being a typo, changing the paper texture, or wanting a different word on a different line it was easier that way because it didn't end up messing up all of the text (though you don't have to do it that way, it's just what worked for me here)

font i used was: vag-handwritten (a default photopea font)

all of the next part needs to be above the text on your ripped paper:

for the highlighting, circles, and the lines it's pretty much all the same, i chose the colour which matched the gif (so say purple), for the highlight used the rectangle select & colour fill tools and set that to multiply & then played around with opacity (for most of my highlighting it's set to 50%), for the circles it was the same except the circle shape tool (no fill just stroke) set to purple, set to multiply, with 100% opacity (i found the circles looked better with 100% on some gifs depending on what colour i used), & then duplicated it once or twice and then just moved each circle to where i thought it looked best & the double lines is also the same using the line tool, set to multiply, & playing around with the opacity, & positioning them where i like

for the squiggly lines, the hearts, the 3 small doodle lines at either side of a word, & any other doodles i had on there i doodled them myself with my drawing tablet (you probably don't have to use a drawing tablet i just found it easier that way) using the free pen tool and then did the same thing set it to multiply and played with the opacity

if the colour you choose looks too dark or too light with it set to multiply either try a lighter/darker colour, try out something else like lighten, or screen, or increase/decrease the opacity more (i found i had this issue with the yellow being hard to see on the white paper so i used a darker yellow and kept everything at 100% opacity rather than 50%)

so if i turn off screen for a second to show you what the brush layer looks like left is the original without the colour fill layer set on darken & the right is

so this is how it looks if you set it as screen without the colour fill layer set on darken

and this is how it looks with the fill layer set as darken

& for masking yeah i pretty much did mask over the cracks to erase the gif to make the cracks visible (except for the base gif), using the magic wand tool was helpful i just used that as the outline and then used the brush to erase, though there were a few bits that i had to zoom in and make sure it erased the correct parts

this is how my gif looks without the crack layer on & without my base gif (as you can see it's not 100% perfect but compared to my first attempt a lot better)

here's an example of my first attempt where i did it not like how i did the one above (here i messed up quite badly i didn't have the brush layer set on screen for one nor did i do it with a white brush on a black background & set to screen so if you zoom in/look carefully, especially in the gif version, it's quite hard on the eyes) & for some of the gif i forgot to erase parts of the cracks which you can see from the movement so i definitely improved the second time around so practice does make perfect 🤣