Photopea - Tumblr Posts
Masking Gifs in Photopea (Guide)
Recently i noticed some edit blogs wonder how to mask gifs, and ive seen ppl reccomend EZgif...and theres nothing wrong with that! BUT i've recently found a way to mask gifs in Photopea and PERSONALLY to me they look way way better than masking in EZgif.
So heres a step by step on how i made the masked gifs of my holohawk edits on my hololive edit blog.
IMPORTANT FOR STEP 1: if you end up using ScreenTo Gif, DO NOT CLOSE THE APP UNTIL IT FINISHES PROCESSING THE GIF! You can see at the top right of the app how the process is going. It'll say "Completed" when its done!
Aaaand!!!!! You're done! ୨୧(o´∀`o)୨୧
Final product:
Hope this guide helped you all <3 Have fun editing !!!!!
Beastars and The Thing crossover.
A mix of weirdcore and angelcore. I’ve also uploaded on the weirdcore subreddit.
Might redo this one. Its been a while I’ve done anything weirdcore or dreamcore related.
TUTORIAL: EFEITO 3D NO PHOTOPEA
Hello, people! Tudo bom? Fiz um tutorial rapidinho de como fazer o efeito 3D (alguns tbm conhecem como glitch) no photopea. Espero que ajude ❤
1. Abra sua imagem no photopea (é importante que ela já esteja pronta e bonitinha, salva em png)
2. Clique na janela de camadas (1) e depois selecione a camada background (2) (As vezes o photopea faz essa parte automaticamente, mas as vezes ele tbm tira com a nossa cara rs)
3. Agora, na parte superior da tela, clique em camada (1) depois em duplicar camada (2)
4. Dê dois cliques na layer 1 (🐄) pra abrir a janela de estilo de camada
5. Uma vez aberta, você vai lá onde tá escrito canais (👁👄👁). Ali, você tem que tirar a seleção de uma das caixinhas pra dar o efeito 3D e cada uma delas dá uma opção diferente de cores, oka? Se tirar a seleção do R, vai ser vermelho e ciano; se tirar a seleção do G, fica magenta e verde; tirar a seleção do B, fica amarelo e azul. Aí tu que escolhe o que prefere.
6. Agora você vai fazer esse efeito aparecer e pra isso só precisa arrastar a imagem/camada pra qualquer direção e as cores já dão o ar da graça. Como eu gosto de deixar só um tiquinho, costumo dar um mega zoom (daqueles de ver a alma) pra conseguir mover uma distância pequena. Sem o zoom o photopea não é tão preciso na hora de mover tá?!
7. O efeito já tá pronto e é só salvar em png, oka? Maaasss, como a gente gosta de tirar o zoom pra ver como ficou e o photopea é um chato e acaba tirando a camada do lugar na hora que a gente faz isso, a minha dica é: clique em camada (1) e depois em achatar imagem (2). Assim você pode tirar o zoom sem problemas e ver como ficou. Se quiser alterar novamente, basta clicar em editar>desfazer e mover a imagem novamente.
Esse é o efeito final, cada um com uma versão do passo 5 pra vcs verem as cores dos canais:
É isso! Espero ter ajudado. Um beijo da tia yiza e tiau ❤
repost if you use !!
@emberoflife kind of (not really) requested a tutorial for how to merge two gifs together on photopea, and as this is something i’d been thinking about making anyway, i thought why not just do it? big shoutout to @bethmarchs again for teaching me how to do this in the first place… maybe lily should just be making these…
onward!
Keep reading
THE GIFMAKER'S GUIDE TO SUBTITLES
Ever thought about subtitles? Want to learn how to make them? Look no further 'cause here's a tutorial all about them! I'm gonna show you my process of making subtitles on Photopea, but these tips can also be useful for Photoshop users as well. I hope you find this helpful!
FONT
I use a font that's already in Photopea (yaay no need to download anything!) called Open Sans. It's a pretty neutral font and I really love using it for subtitles. I always set the font to Extrabold Italics. Looks the nicest in my opinion!
Here's how it should look like at the top of your workspace:
Locate the font on the left tab, then find the extra bold setting on the right tab.
SIZE
The font size will depend on the width of your gif. For a full-width gif (540px) you can get away with something bigger, but if you have a two-column gifset for example, you'll need to make it smaller. For big gifs, my go-to is either 20px or 25px. Depends on how I'm feeling.
Here's an example to better show you.
Something you also want to keep in mind when subtitling is to have a nice gap between the bottom of the gif and the text itself. "Oh, but how can I find that?" I hear you asking. By turning on distances!
By turning on distances, you can see how big the gap is between the bottom and the text. In this example, I have it set to 15.
If you don't want to forget, you can always add a ruler and line it up with the bottom of the text. Then the rest of your subtitles (if you're making more), all go in the same place. To turn on the ruler function (if you haven't already, go to View > Rulers. You'll now see numbers on the top and the left side of your workspace. Simply drag from the top and a blue appears.
Now any text or shape will snap to that line automatically if you move it around. Now that's neat!
To finish this section off, here are the distances I use for each gif size. As you'll notice, I move the text down a little bit the smaller the gif becomes. But in the end, it's all up to you.
540px — 15
268px — 12
177px — 10
SPACING
What I like to do is increase the tracking so that there is a bit of space between the letters. I put it at 81%, but if you want the spacing to be wider that's cool too!
SHADOWS & OUTLINES
Shadows.... Very scary. But they don't have to be!
Here we have plain text. On its own, can be kinda hard to read. What we need to do in order to fix that is to add some shadows to make the text pop more.
Right-click on the text layer and open up blending options. Then check the drop shadow box and click on it. Set everything to 0, except for opacity (100%) and size (10px). Now you have a shadow all around the text.
Next to the drop shadow, click on the + sign to duplicate it. Change the angle to 137° and set the distance to 1px. Make sure to lower the size to 0.
Now duplicate that layer by clicking the + sign. Everything is exactly the same here, but change the distance to 2px.
Do this once again, changing the distance to 3px. Don't go over 3px, as the shadows will start to look weird!
Now the shadows are all done! This is how it looks
COLORS
Something that's pretty common is to use white and yellow for subtitles (if there are two people speaking for example). You're more than welcome to use those colours, but something I personally like to do is incorporate the subtitles with the gif so that it looks more cohesive. I always pick my text colour after the base gif is finished. Let's take a gif from this Indiana Jones set I made a few months ago as an example:
he looks so good in this movie aND FOR WHAt-
No subtitles... But that is all about to change (oOoOooO)
Write out your text like normal and select the text layer. Go to the character tab (looks like Tt) on the right side to open up it up. Click on the colour box (in this case it's white) so that the color picker appears.
Here's what the screen looks like after all that clicking we did
Then you chose... but chose wisely... (lol I'm gonna shut up now)
After I have my colour picked, I drag the dot around to make it lighter. I don't want it to be super bright, so I drag it towards the top and middle to get a bit of grey. That way, it looks a little muted as well as lighter which is what I personally like.
My tip here is to find the most dominant colour in your gifset if you want your subtitles to look cohesive! Here I've picked a colour, the brown wall behind him because it pops against the greyish tones on his blazer. Here's the final result!
We've now reached the end of this tutorial. I hope you've learned something new and that this makes you want to make MANY subtitles from now on. If you have any questions, don't be afraid to send me and ask. Also TAG MEEEE (#userlace) if you make something, I'd LOVE to see what beautiful gifs you make <3<3<3
Photopea Tutorial
Shoutout to the other Broke Giffers on the Merlin Fic Server! This is a tutorial on how to do overlay gifs specifically for Photopea. It might work for Photoshop, I have no idea.
This tutorial is made on the assumption that you already know how to make a gif and have a rough grasp of how to use Photopea.
So first and foremost, we’re going to choose our gifs. You want to make sure the gifs you choose have different colors. As in, one is dark and the other is light. You can make it work with two gifs of the same coloring and manually recolor one of them, but it’s going to be extra work and more mb’s on your gif. It really just depends on how much work you want to put in and the vibe you’re going for.
Then, you need to actually make the gifs. The gifs need to have the same amount of frames or it might not work quite the way you want. You can use two gifs with different amounts of frames, but there’s always the chance it may not align quite the way you want. The gifs I’m using for this tutorial have 22 frames each.
After making them and opening them in Photopea, I’m going to select all the layers and sharpen them. Then, with all the layers still selected, I’m going to go to Image > Adjustments and adjust my gif as normal using Curves, Selective Color, Hue/Saturation, and Vibrance.
The most important thing to remember when blending gifs together in Photopea is that Photopea will only merge frames. If you have any adjustment layers in, even if they’re invisible, it will not work. This is why you do it through Image Adjustments. If you don’t want to do this for whatever reason, you can add in your adjustments after you combine the gifs.
Next comes putting both gifs into the same project.
On Gif One, you’re going to right click on the name of the gif in the frame/layers list. Choose Duplicate into… In the dialogue box that pops up, click the drop down arrow and choose New Project.
Go back to Gif Two and do the same thing, only this time you’re going to duplicate the gif into same project as Gif One. Now both gifs are together.
Scroll to the bottom and delete the Background Layer.
This works better if you place the darker gif, in this case Elyan, on the bottom. So just drag and drop the gif folder underneath the other. It should look like this:
Highlight the top gif and click on the Blending toolbar. Select Lighten. You can also adjust the Opacity if you would like, but I haven’t done that in this example. Then, after ensuring that all of the layers of the gif you want to move are selected, move the gif to your desired spot using the Move tool. Your gif should now look like this:
There are plenty of giffers who would leave this as is, and there’s no problem with that! However, for my personal preference, I’m going to clean things up.
To clean up the overlays, I’m going to select the top gif and add a Rastor Mask. Next, I’m going to select the Brush tool and use the Mechanical Pencil, size 24. Make sure you’ve changed the brush color to black, then I’m going to color on the gif itself to erase the extra bits from the bottom gif.
Then, I’ll do the exact same with the bottom gif and erase the junk from Gif One. It should look like this (click to enlarge):
Lastly, we’re going to merge the two folders together. At the top of the screen, select Layer and look to the bottom to find Animation > Merge. The gifs should now be in a single folder together. Congratulations! You’ve now made an overlay gif.
This is perfectly fine to post, but you can always add more. For this gif, I’m going to add a little more color and some text.
I also slowed the gif down to about 60% of its original speed and added my watermark. This gif is part of a set I’m working on and just haven’t quite been ready to post it.
If you have any questions, you’re welcome to reach out and ask!
You can see my Anti-White Washing Tutorial here
» Flowerland.psd
effect made by @gmfioart ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download. — don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie! — for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart. !! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.
» 02.photopea action
effect made by @gmfioart ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download. — don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie! — for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart. !! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.
» 04.photopea action
effect made by @gmfioart ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download. — don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie! — for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart. !! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.
» Kaleydo.psd
effect made by @gmfioart ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download.
— don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie!
— for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart.
!! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.
» Naughty.psd
effect made by @harupsds ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download. — don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie! — for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart. !! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.
» Puppy love.psd
effect made by @harupsds ©
— please, like or reblog if you download; por favor, dê like ou reblogue se fizer download. — don't repost or claim as yours; don't copy! não reposte ou divulgue como seu. não copie! — for commercial use, please, contact us or buy from deviantart. para uso comercial, nos chame na ask por gentileza ou compre pelo deviantart.
↷ Download here: Deviantart. !! feedback us! tell us if you like it or if you're having a problem. !! nos dê seu feedback! nos diga se você está satisfeito ou se está tendo problemas com o efeito.