hi, your overlay tutorial is sooooo beautiful! I wonder if you could make tutorial for overlaying image and gif as seen in this Natasha edit /post/693119366952288256/pscentral-event-06-favorite it's sooo beautiful!
Hi there! I just want to make sure you know that I am not the same creator of that gifset, but I can definitely explain how this person made that gifset.
This is the Natasha gifset, as you can see it’s gorgeous.
Before I begin I want to start by saying it’s totally fine to take inspiration from other gifs, to see something that someone has done and replicate it in your own way. With giffing, at the end of the day, we’re all using the same source material, the same amount of scenes and minutes of screen time to create something so there are going to be similarities in gifs across the same fandom.
However, it is never okay to steal someone’s gifs and repost them as your own, nor is it okay to directly and blatantly copy someone’s gifset frame for frame to post even if you make the gifs yourself.
Copying to learn a technique is fine so long as that gifset stays in your drafts or stays in your groupchat.
It is always a good idea to give credit where credit is due when giffing, in that if you use a text post/tweet/a specific set of graphics or theme, to credit the person you got the idea from by linking back to where you got it.
I’m assuming you’re asking specifically about the third gif. The process is going to be similar to the one I detailed here, however the gif on the left has either a grayscale or black and white filter on it, or you can even open a Hue/Sat layer and take out as much saturation as you want. It all depends on the look you’re going for!
The gif on the right has cyan added to it, whether they did that with a brush or layers idk and I’m not going to try to recreate it exactly, so if you want to know for sure I recommend asking them. But I can show you a similar process with Photopea, which is what I’m assuming you’re wanting (although to be completely honest I primarily use Photoshop now😂😭)/
Lately in my own gifs I’ve been doing blend types other than Lighten (like Screen for example), and this kind of looks like that but I could be wrong! Again, it all just depends on what kind of look you want, the vibe or aesthetic you’re going for.
The tutorial I make for you will use Lucas from Stranger Things S4 because that is the only live action on my hard drive at the moment😂😭
I mainly gif anime now (anime sideblog: @icythot-bakubitch) and I could absolutely do a tutorial with it but it won’t come out the same as what you’re wanting to see.
This tutorial is made on the basis that you already know 1) how to make a gif 2) how to make overlays and 3) have a good sense of familiarity with photopea/photoshop.
If you don’t have those things, you’re welcome to look at my other tutorials:
Make A Gif | Anti-White Washing (BBC Merlin) (OFMD) | Overlays
Please remember that this gif is made with Photopea and not Photoshop, so there is going to be a deficit in quality compared to the set you’ve shown me. Your quality will come out much better if you’re able to use Photoshop.
Basically all I really did was add a Black and White layer to the bottom gif, making adjustments to keep as much quality as possible and adjusting the brightness to my taste. The original gif is already pretty dark, I probably should have picked something else but for a tutorial I’m not that pressed.
On the top gif, I used Selective Color and Hue/Sat to change the cyan of his background to purple.
Using a soft round brush I cleaned up their faces and got rid of any parts of the background that I felt was too distracting.
Attached below is a side by side of the original and recolor respectively, and then a screenshot of my layers.
Again, this is my way of doing things. It’s going to look different from someone else’s. Focus on finding a style that you like and that works for you. Just because a style of giffing is popular or something a lot of people are doing doesn’t mean that you have to do that.
I’m sure there are better or more efficient ways of doing things as well! And there isn’t one set way of doing things, this is not a be all end all of doing overlays or giffing.
If you have questions regarding the Natasha set more specifically, I highly recommend asking the creator personally. All I’m doing is explaining the recoloring process when it comes to overlay gifs as it applies to Photopea.
The first thing you are gonna want to do is open TWO GIFS. These gifs should hold little movement to make this process easier for you. If the subjects move a lot it doesn’t work as easily so I’d stay away from gifs that have walking or a lot of head movement. As always, my ask is open for requests and questions. Please like / reblog if you find this helpful.
This tutorial assumes a few things.
You have two gifs made of two subjects. (tutorials in my masterlist)
You know how to use a raster mask (tutorial in my google docs masterlist)
You know how to add a psd (tutorial in my masterlist)
Your recent yellow jackets set is everything!!! How did you do the sound wave effect on photopea 👀
hi anon! thank u for asking <3
for this tutorial, you will need to make the soundwaves using VEED.IO, as seen in the original tutorial from @usergif. the main differences come when you put the finished soundwave gif into photopea! for this tutorial, you should have a basic understanding of giffing in photopea.
below the cut is the tutorial for photopea:
before we get too far, i should say that you should be saving your gifs as psds throughout this tutorial. to do that, go to file > save as PSD and save it somewhere you can find it again. with that being said, let’s go forward into the tutorial!
part one: editing the soundwave .gif
once you have your soundwave .gif, in photopea, go to file > open… and open up the file. your photopea dashboard should look something like this:
scroll to the bottom of your .gif file’s layers. you should have a frame that’s titled something like “_a_frm0,80” with the little eye icon on the left showing that it’s visible. we don’t really want this frame, since (as you probably noticed) the soundwaves aren’t moving, which defeats the purpose of the soundwaves in general. so, delete it!
(if you panic that now the workspace is blank because you deleted that first frame, click the little box next to your next frame (for me, that would be “_a_frm1,90”) to make that frame visible)
now, from here, i’d highly recommend knowing how many frames your finished product is going to be. for the gif i’m making, i know it’s going to be 30 frames, and the VEED.IO gif i have now is 60 frames; thus, i’m going to delete the 30 extra frames so that the gifs i’m creating will merge correctly.
another thing to note: since we deleted that “_a_frm0,80” frame, now your frames are accurately counting from 1 to whatever the last frame is. so, when you go to delete frames, keep that in mind!
for me, i want to keep the last 30 frames of my VEED.IO gif, so i’m going to make the frame titled “_a_frm31,90” visible by clicking that little box like we did before. i will then left click the frame titled “_a_frm30,80”, scroll down and, while pressing shift, click my “_a_frm1,90” frame to highlight the other 30 frames that i don’t want. with all of the frames selected, drag them into the little trash icon at the bottom right.
the reason i did that whole deleting extra frames part first is because now is the most tedious part of this tutorial: renaming the frames.
as you’ve noticed from these frames, all of them have a “,80” or “,90” — that is basically how fast the gif is going to be move once you save it as a .gif file. for the VEED.IO gif file, these tend to alternate between “,80” and “,90”. however, i know that my other gifs are going to have “,50” for all of the frames, so we need to change this so that the finished gif doesn’t have the soundwaves moving twice as fast as the gifs behind them.
there’s no way that i’ve found that’s faster for this, so for now, double click each frame and change the “,80” or “,90” to “,50”. here’s the before and after of what my frames look like:
but we aren’t done yet; my finished gif is going to end up being 540px in width, so i’m going to go ahead and change the width of my VEED.IO gif by going to image > image size… and changing the height to 535px (don’t worry about the height, it doesn’t really matter). you can make it 540px if you’d like, but i want to give myself room to adjust the soundwaves on the finished product once we actually get there, so i’m making it a few pixels smaller than it should be.
for this next step, in your gif layers, make sure you have the last frame (in my case, “_a_frm61,50”) selected. you should have a color that you want to have for your finished product; for me, i want mine to end up being purple, so while having that last frame selected, go to layer > new adjustment layer > gradient map…, which should bring up the following popup:
left click the gradient in the popup, and change the white to whatever color you want for your final gif. my soundwaves now look like this, with the purple gradient map:
and now you can close the gif folder, since we’re finished messing with everything in it! however, we aren’t quite done with making the soundwave gif itself; we need to get rid of that VEED.IO watermark in the corner.
there’s a couple ways to do this, but i think the easiest way is to just draw over it. using the “rectangular select” tool and creating a new (transparent) layer, use the paint brush tool in black to paint over the watermark (you will only be able to draw within the selected area). below is a screenshot of the different buttons and steps:
and now your soundwave gif is done! now you can go to file > export as > GIF.
part two: making the finished product
now that you have your soundwave gif ready, make your other gif or gifs for the finished product! i won’t go into detail about how i made mine, but just know i’m going to be using three other gifs besides the soundwave gif we just made.
with all of your gifs made, go to file > new… and create a new canvas. here are the specifications for my gif:
open all of your gifs, including the soundwave gif file we made a moment ago. now i noticed in making my soundwave gif that i miscounted my frames by one; no problem, i will do just like i did earlier and delete the frame titled “_a_frm0,50” so that my soundwave gif matches my other gifs.
on your new canvas, put in all of the other gifs (not the soundwave gif, yet) and blend them together as you please (if you have more than one; if you just have one gif, then just put that gif onto the canvas with no changes). if you’re confused about how to blend gifs, here is my tutorial, and there is another tutorial by arwen @benoitblanc here that you can follow as well!
now that all of my gifs are put together, duplicate your soundwave gif into that canvas by right clicking the soundwave gif folder and clicking “duplicate into…” and choose the new canvas you have created. it should look something like this:
that’s not where i want the soundwave file to be, so open up the gif folder for the soundwave gif. use the same steps we did to select the frames from before and then move the gif wherever you’d like on your canvas. i want my soundwaves at the bottom of the canvas, so i click and drag the soundwave gif (on the canvas) and drag it down until it is centered and half of it is visible.
with my soundwaves moved, now my gif looks like this on the canvas:
now we want to get rid of the big black box that is covering a majority of the bottom half of the gif. to do so, use the blending mode dropdown menu and choose either “screen” or “lighten”. depending on the color of your soundwaves, one may look better than the other; just choose what you like best! for my gif, i chose “screen”.
now, from here, it’s free reign to do what you want with the gif. i added some gradients by going to layer > new fill layer > gradient fill and selecting the second option from the gradient dropdown menu to make a one-sided purple gradient (i did this a few times to mess with the blending modes and angles of the gradients). now my gif looks like this:
which i like much better than what i had before!
now, add whatever text you’d like, and once you’re completely finished messing around with your gif, go to layer > animation > merge to combine your soundwave gif with your other gif(s). then, go to file > export as > GIF, double check that your final gif looks like how you want it in the preview (and that it’s under 10MB), and save!
and now you have a finished gif with the soundwaves! congrats! hopefully this tutorial was coherent and in depth enough for you, anon. feel free to send me other questions if you have them!
HOW TO USE SMART OBJECTS ! (photopea version). . . okay so I was talking to a friend one day walking them through photoediting without opening my laptop and I found my next tutorial to be SMART OBJECTS and how to use them! This tutorial will cover what is a smart object, how to edit one, and how to make one. Credit to fleursource for the icon border template used in this tutorial AND on my icons in the indie at this time.
Let’s start with what a smart object is and by doing so, going to google the definition: A smart object is the ultimate non-destructive layer in Photoshop. So that means that you can use them in a way that won’t mess with your whole image / can easily be taken out and redo. Like how on filters you can click the little eye and it is as if that sharpening didn’t happen.
As always, if you have a tutorial request, need help with something, or anything else my ask box is always open. Please LIKE / REBLOG / COMMENT on this post if you find it helpful. Reblogging this post shares it to others that might be struggling with smart objects as well.
Is it possible for you to do a tutorial on how to sharpen screencaps from photopea?
Under the cut is me showing you how to do this sharpening in photopea. If this helps you then please like / reblog. Any questions, requests, and more can be sent to my ask box.
FILTER > SHARPEN > SMART SHARPEN. The gif shows you where to go and what to click for this one. You'll want to go to the top bar where the word filter is and click which will bring up a drop down menu where you'll want to find the word SHARPEN. It will bring up it's own section and that is where I'd pick smart sharpen.
AMOUNT : 200%
RADIUS : 2.5
I personally wouldn't go any higher than a 2.5 radius when it comes to sharpening but these are the settings that I use for this image.
So you might be wanting to know what smart sharpening is and does. I found a definition on google that might help you out.
"Smart Sharpen can detect edges, so it sharpens edges without sharpening noise. It also creates thinner, less noticeable halos around edges, resulting in a cleaner image." this definition comes from photoshopessentials but I feel like it is important
Depending on what you are doing would also depend on how sharp you want your pictures. For smaller things like discord icons, tumblr avatars, and more, I recommend it being sharper than you normally would just because details are lost when things are small as compared to large. For things that are a little bit larger, there is the ability to see things clearer and you'll notice if something is a tad too sharp easier so going easier on the sharpening is my recommendation.
PHOTOPEA BLENDING TUTORIAL by kai @heroeddiemunson
howdy! i’m back with another tutorial for photopea :) nobody asked for this one, but i have noticed people who have reblogged my gifsets commenting on my blending, and i thought it’d be cool to have a tutorial on how i do it!
what you need:
photopea (basically photoshop in your browser, completely free!)
basic giffing knowledge, because i won’t cover it in this tutorial (other tutorials: tutorial by @benoitblanc, tutorial by @ashleysolsen)
♡ tutorial under the cut
♡ got inspired by those soft icons you always see on pinterest ^_^
♡ i saw this tut on alight motion forever ago and wanted to translate it to photoshop <- it probably exists already HELP
♡ used for my faded wisteria psd !
step 1
♡ duplicate your layer so you have two of the same image
♡ add unsharp mask ( or just sharpen ) to the bottom layer
♡ my unsharp settings are: amount: 50 , radius 1.0 , threshold 0
step 2
♡ add gaussian blur to your top layer , i use anywhere from 5.0 to 10.0 depending how blurry you want it to be . for the example images i used 10.0
♡ set the layer's fill to 50%
♡ you can use opacity instead , you can also adjust the percentage
step 3
♡ add exposure to the top layer
♡ set your settings to exposure: 0.75 , offset: -0.0200 , and gamma correction: 0.75
♡ these settings can ofc be adjusted as well
Hi! Would it be possible to post a tutorial of how you created the text in this post /post/707087448305451008/removing-yellow-tint-on-photopea-heyyyyyy thank you :)
💜 TYPOGRAPHY TUTORIAL (PHOTOPEA EDITION) 💜
Hi anon! It's really easy! here's how i do it! <3 as always, basic gifmaking knowledge is required. feel free to ask if you have more questions <3
tutorial below the cut 💜
i. prep-work & coloring
You write out your text as normal in white, then you change the blend mode to exclusion
right-click on your text layer, and click on blending options to open the layer style window. Tick the color overlay box and click on the tab. there you'll be able to change the overlay color and the blend mode (i used pin light for this, but you might have to play around with the color and blend modes to find the one best for your gif)
(i also added a background color to match the text)
at this point you'll also want to add drop shadow to make the text readable. i usually turn down the distance to 0 and keep the rest of the settings as is, except maybe increase the opacity (which i didn't do here bc i'm laaaaazyyy)
ii. wobbly text
okay! so now the coloring bit is done. double-click on the white square on your text layer to select all of your text. on the top of the page you'll see options to change font, text size etc (idk what this is called but you know what it is). you'll need to click on the box that says wrap
click on style > flag, and then you'll be able to adjust how "wobbly" you want the text to be (in this example the bend is at 40%)
press okay and you're done! hooray!
iii. white outline
the last step is to add a line to make the text pop even more. first, create a new blank layer
right-click on your text layer and click on select pixels. click on the blank layer you just created. then you go to edit > stroke. these are the settings i use.
after pressing ok, you'll now have a white outline around your text. move the outline layer around until you're happy
this is how it looks when it's done!
really not my best work but :P this scene is meant for a different gifset but i kinda like this coloring lol hope this answers your question!
hey kai if you want could you do a tutorial on how to put gifs inside shapes (like your MARGOT ROBBIE as HARLEY QUINN in the DC EXTENDED UNIVERSE) it looks so good
howdy anon! i’ve answered something similar to this before, but i figured that a proper tutorial would be nice, so thank u for sending an ask about it :)
as per usual, you will need basic giffing knowledge for photopea, as well as the website itself, to complete this tutorial. this tutorial is also very wordy, but i do have some images to help with the process. if you have any questions about the process, please feel free to send in another ask.
without further ado, let’s go!
so, when making your gifs, the first thing you need to do is make sure that they are the same amount of frames. otherwise, your gif will end up looking strange with one gif looping faster than the other one.
once you have all of your clips you want to use for the gif you’re making (i will be using two, but you can use more than that!), decide which one you want to be in the shape that you’re going to be choosing. for the sake of this tutorial, i am going to be using a simple circle shape, but you can use any variety of shapes however you’d like. i have some notes below about different ways to get different shapes:
on your left toolbar, directly under the “move” tool, there is the option for a “rectangle select” tool. right clicking this option also allows for you to choose ellipse select for circles. by adding a new layer to your canvas (on the top options, go to layer > new > layer), you can use either of these shapes to make a rectangle or circle, which you can then fill in by going to edit > fill…
on your left toolbar, above the “zoom” and “hand” tools, there should be a rectangle. right clicking this should give you the option for other shapes, such as ellipses, lines, and custom shapes. depending on what you want for your gif, you can choose any of these options for your own gif shape, but beware that these shapes are all fairly limited to what photopea has to offer.
for other shapes that photopea doesn’t offer (like the starburst shape that mattel uses for barbie edits, for example), i will go to google and just look up things like “mattel logo shape png”, or whatever other shape i’m looking for, and try to look for a transparent png. while this does give you a lot of options, you may not be able to find a transparent option (i use remove.bg to help with that!) or you may have to do some editing around the edges to get the shape the way you want it (many of the mattel logos have a big MATTEL in the middle that ruins the edges of the starburst shape, so you’ll have to fix that, for example)
more notes about choosing your shape:
if you get a shape off google, make sure that your cropping fits that shape! if you have a shape that is some weird dimensions that arent a 1x1 ratio, your gif cropping will have to reflect that so it fits in the shape.
you should also know how big you want your shape to be on the finished product — for me, the entire gif canvas is going to be 540x540, so i’m going to make the shaped gif 240x240 so that both the big gif in the background and the shaped gif are visible in the final product. this will all depend on what you are doing for your gifs, though, so play around with different shapes/sizes in another canvas the size of your final product.
first thing’s first, make your gif for within the shape however you want. as you have (probably) seen from other gifsets of mine, there’s multiple ways you can choose to make the gif within your shape: you can do like this edit and have a colored overlay, or you could do like this edit and have normal coloring with a pop of color, or some other thing that you’d like to do! for this edit, i’m going to keep the sanji gif within my shape colored fairly normal with a pop of blue to match his shirt. my gif, as of now (without the shape), looks like this:
from here, add your shape on top of all your layers (as i said before, your gif should be cropped so the shape fits perfectly within the cropped gif!). go to the very bottom of your gif frames, and put that shape directly under the first frame (which is likely titled “_a_Background” or “_a_frm0,50”, depending on how you gif your gifs) while still within the gif folder you most likely have, especially if you follow my tutorials. this part is tedious, but starting with that first frame, go through every frame of your gif, right click, and select the “clipping mask” option. because you have that shape at the very bottom, every layer above it will follow the same clipping mask to put the gif within the shape. after your done, your frames should look something like this:
and now my gif looks like this:
which isn’t what i want, because i want that blue color in the shape with the rest of the gif! there’s an easy way to fix this, if you’re like me and have that gradient color: click and drag all of your adjustment layers into the folder with your gif (i know, goes against everything i’ve said before in my other tutorials, right?) so that you can do the same thing you did with your frame layers and create a clipping mask for those gradient color layers. you don’t have to do this for the other adjustment layers for your coloring, by the way, just for the gradient color layers! now my gif looks like this:
much better! and now that we have the shaped gif finished and in its shape (make sure you save the psd!), you can sharpen and export your gif by going to file > export as > .GIF and you’ve made your shaped gif!
now you can make your other gif to be behind the shaped gif; i won’t provide a tutorial for how i made this gif, other than it follows my usual coloring + a gradient layer to make the entire gif blue:
now that you have both of your gifs, we can move on to putting them on the same canvas!
after putting both of your gifs on the same canvas, position the shaped gif wherever you’d like to place it on the canvas. you can center it, place it in a corner, whatever you want! it’s your gif, your choice. i placed my circle sanji gif towards the bottom left corner of the canvas because i wanted to be able to see both the little gif and the larger gif clearly. :)
from here, you can do a number of things to make the shaped gif stand out; what i did for mine is add a shadow behind the gif and an outline of the circle that’s off centered from the circle gif itself. here’s how i did both of those things:
shadow: double click the shaped gif’s folder to open up the “blending options” pop up menu. check the “drop shadow” option towards the bottom of the list, and adjust it to how you want it to be. once you’re happy with how the shadow looks, click “OK” to close the pop up menu. below are my settings for this particular shadow on this gif, but this may change depending on your own gif (feel free to play around with these settings!):
off-centered outline: this is specifically for circles/rectangles; if you have another shape that you got off google, for example, this part of the tutorial will not work (but if you want to know how to do something like this for a shape like that, i can create another tutorial! just ask <3). create a new layer (layer > new > layer through the topbar menu) and create an ellipses the same size as the circle i created earlier. from here, go to edit > stroke… to make the pop up menu show up (you will not be able to preview this when you edit this layer, so if you’re unhappy with how it looks once you click “OK”, use CTRL+Z to undo and try again!). once you have the shape as you want it, go to select > deselect on the topbar to deselect the section you just made, and use the move tool to move the shape around however you want. if you want to make the shape less intense, change the opacity located near the layers menu (i put mine at 30%). below are the settings for my shape, which you can of course play with as you'd like for your own gifs:
now that you’ve done that, do anything else you’d like to do to your gif — add text, put a watermark, whatever you’d like! after you’re finished with that, save your psd and then go to layer > animation > merge to merge all of your gifs together before going to file > export as > .GIF. and then you’re done! congrats, you’ve just made a shaped gif in photopea! :)
Coloring (not detailed. Links to other tutorials included)
Exporting
Obligatory Mentions: @photopeablr ; @miwtual ; @benoitblanc ; @ashleysolsen
Definitely check out these blogs for tips, tutorials and resources, they're a gold mine. Finally I recommend browsing the PHOTOPEA TUTORIAL / PHOTOPEA TUTORIAL GIF tags.
DISCLAIMER: English is not my first language and I'm not an expert on what I'm going to discuss, so if anything's unclear feel free to drop another ask.
1. SCREENCAPPING -> PotPlayer (the one I use) or MVP or KMPlayer
INSTALL PotPlayer (tutorial)
Play your movie/episode and press Ctrl + G. The Consecutive Image Capturer window will pop up. Click Start to capture consecutive frames, Stop when you got what you needed.
Where it says "Image Type -> Format" I recommend picking PNG, for higher quality screencaps.
To access the folder where the screencaps are stored, type %appdata% in windows search, open the PotPlayerMini64 folder (or 32, depending on your system) and then the Capture folder. That's where you'll find your screencaps.
Admittedly MVP is a lot faster but I prefer Potplayer because it generates (at least in my case) higher quality screencaps. MVP kind of alters the hue and it made it harder for me to color my gifs. Still, if you're interested in how to use it, I recommend this tutorial.
As for KMPlayer, every tutorial out there is outdated and I couldn't figure out the new version of the software.
2. GIF WIDTH/HEIGHT, SIZE LIMIT, EZGIF OPTMIZER
At this point you should already know how big your gifs are going to be. Remember the ideal gif width(s) on tumblr are 540 px / 268 px / 177 px. These specific numbers take into account the 4 px space between the gifs. No restrictions on height. Here are some examples:
You can play around with the height (177x400, 177x540, 268x200, 268x268, 268x350, 268x400, 540x440, 540x500, 540x540 etc) but if you go over the 10 MB limit you'll either have to make your gifs smaller/delete some frames.
OR you can go on ezgif and optimize your gif, which is usually what I do. The quality might suffer a little, but I'm not really (that) obsessed with how crispy my gifs look, or I'd download photoshop.
Depending on the gif size, you can decrease the compression level. I've never had to go over 35. It's better to start at 5 (minimum) and then go from there until you reach your desired ( <10mb) gif size. Now that I think about it I should have included this passage at the end of the tutorial, I guess I'll just mention it again.
3. LOAD YOUR FRAMES
File -> Open... -> Pick one of your screencaps. The first one, the last one, a random one. Doesn't matter. That's your Background.
File -> Open & Place -> Select all the frames (including the one you already loaded in the previous passage) you need for your gif and load them.
(I recommend creating a specific folder for the screencaps of each gif you're going to make.)
WARNING: When you Place your screencaps make sure the Crop tool is NOT selected, especially if you've already used it and the width/height values have been entered. It will mess things up - I don't know why, could be a bug.
You can either select them all with Ctrl+A or with the method I explained in the ask: "when you want to select more than one frame or all frames at once select the first one, then scroll to the bottom and, while pressing Shift, select the last one. this way ALL your frames will be selected".
WARNING: Depending on how fast your computer is / on your RAM, this process may take a while. My old computer was old and slow af, while my new one can load even a 100 frames relatively fast, all things considered. Even so, I recommend ALWAYS saving your work before loading new frames for a new gif, because photopea might crash unexpectedly. Just save your work as often as you can, even while coloring or before exporting. Trust me, I speak from experience.
Now you can go ahead and delete the Background at the bottom, you won't need it anymore.
4. CROPPING AND RESIZING
Right now your screencaps are still smart objects. Before rasterizing and converting to frames, you need to crop your gif.
Technically you can rasterize/convert to frames and then crop, BUT if you do it in that order photopea will automatically delete the cropped pixels, even if you don't select the "Delete Cropped Pixels" Option. Might be another bug, unclear.
Basically, if you crop your gif and then realize you cropped a little too much to the left or the right, you can go ahead, select the Move Tool (shortcut: V) and, after selecting ALL YOUR FRAMES, move them around on your canvas until you are satisfied. You won't be able to do this if you rasterize first and then crop, the excess pixels will be deleted. I don't know why, I found out by accident lol.
CROPPING
(Cropped pixels: the gray/opaque area outside of the selected area. That area disappears once you press enter and crop, but the pixels are retained, so you can move the frames around and reposition them as you like. In this case I could move the frames to the left and include Silver's figure [curly guy in the foreground] in the crop)
After deleting the Background, you will need to select all your frames (using the Shift key), use the C shortcut on your keyboard to choose the Crop tool. Or you can click on it, whatever's more convenient. Once you do that, a dropdown menu is going to appear. You need to select the "FIXED SIZE" option, as shown in the following screencap.
Once you do that, you can type in your desired width and height. Do not immediately press enter.
Your work area should now look like this. Now you can click on one of the white squares and enlarge the selected area until the edges are lined up. You can then move it around until it covers the area you wish to gif.
WARNING: to move the big rectangle around, you're gonna have to click on a random point of the work area, PREFERABLY not to close to the rectangle itself, or you might accidentally rotate it.
See? When your cursor is close to the selected area it turns into this rotating tool. Move it away until it reverts to your usual cursor, then you can start moving the rectangle. Press Enter when you're satisfied with the area you selected.
RESIZE
This isn't always necessary (pretty much never in my case) - and it's a passage I often forget myself - but it's mentioned in most of the tutorials I came across over the years, so I'd be remiss if I didn't include it in mine. After cropping, you'll want to resize your image.
IMAGE -> Image Size...
This window will pop up. Now, should the values in the Width and Height space be anything other than 540 and 400 (or the values you entered yourself, whatever they might be) you need to correct that. They've always been correct in my case, but again. Had to mention it.
5. RASTERIZE & MAKE FRAMES
Now that your screencaps are cropped, you can go ahead and convert them.
LAYER -> Rasterize (if you skip this passage you won't be able to Sharpen (or use any filter) on your frames at once. You'll have to Sharpen your frames one by one.
Photopea doesn't feature a timeline and it's not a video editor, which makes this passage crucial. When you select all your smart objects and try to apply a filter, the filter will only by applied to ONE frame. Once you rasterize your smart objects and make them into frames, you can select them all and sharpen them at once.
Unfortunately this also means that you won't be able to - I don't know how to explain this properly so bear with me - use all smart filters/use them in the same way a photoshop user can. For example, you can sharpen / remove noise / add noise / unsharp mask... but you can't act on those filters in the same way a photoshop user can.
When you work on smart objects you can change the blend mode - which is critical if you decide to use a filter like High Pass. If you simply apply a high pass filter on photopea you won't be able to change the blend mode and your gif will look like this (following screencaps). Or rather, you will be able to change the blend mode by clicking on the little wheel next to "High pass" (circled in green in the 2nd screencap), but you'll have to apply the filter to each frame manually, one by one.
Then you can rasterize/make into frames, but it's extremely time consuming. I did it once or twice when I first started making gifs and it got old pretty soon haha.
Layer -> Animation -> Make frames. This passage will add "_a_" at the beginning of all your frames and it's what allows you to make a (moving) gif. As I said in the ask, if you skip this passage your gif will not move.
6. SHARPENING
Some people prefer to color first and sharpen later, but I found that sharpening filters (more or less) dramatically alter the aspect of your gif and already brighten it a bit (depending on your settings) and you may end up with an excessively bright gif.
Now, sharpening settings are not necessarily set in stone. The most popular ones are 500/0.4 + 10/10, which I use sometimes. But you may also need to take into account the quality of the files you're working with + the specific tv show you're giffing. I've been using different settings for pretty much every tv show I gif, especially in the last couple months. Some examples:
followed by
OR
AMOUNT: 500% RADIUS 0.3px
followed by
AMOUNT: 20% (or 10%) RADIUS 10px
You'll just need to experiment and see what works best for your gifs.
Some gifmakers use the UNSHARP MASK filter as well (I think it's pretty popular among photopea users?) but it makes my gifs look extra grainy, makes the borders look super bright and it clashes with my coloring method(s), so I use it rarely and with very moderate settings. Something like this:
Again, depends on the gif and on what you like. I've seen it used with great results by other gifmakers!
REDUCE NOISE
Sometimes - and this is especially the case for dark scenes - your gif may look excessively grainy, depending on how bright you want to make it. Reducing noise can help. Keep it mind, it can also make it worse and mess up the quality. BUT it also reduces the size of your gif. Obviously, the higher the settings, the more quality will suffer.
These are my standard settings (either 2/70% or 2/80%). It's almost imperceptible, but it helps with some of the trickier scenes.
ADDING NOISE
Adding noise (1% or 2% max) can sometimes help with quality (or make it worse, just like reduce noise) but it will make your gif so so so much bigger, and occasionally damage the frames, which means you won't be able to load your gif on tumblr, so I rarely use it.
You'll also want to create ACTIONS which will allow you to sharpen your gifs much faster.
HOW TO CREATE AN ACTION ON PHOTOPEA
The Action Button (shaped like a Play button as you can see in the following screencaps) may not be there if you're using photopea for the first time. If that's the case click on the magnifiying glass next to "Account" (in red) and type "actions". Press Enter and the button should immediately show up.
Once you do that, click on the Folder (circled in yellow)
and rename it however you like.
now click on New Action (circled in red). now you can press the Recording button (circled in green)
Now
FILTERS -> Smart Sharpen
and you can enter your values. Then you repeat this passage (WITHOUT pressing rec, WITHOUT pressing new action or anything else, you just open the smart shapen window again) and, if you want, you can sharpen your gif some more (10%, 10px, or anything you want.)
Maybe, before creating an action, experiment with the settings first and see what works best.
When you're satisfied, you can PRESS STOP (it's the rec button, which is now a square) and you can DOWNLOAD your action (downwards facing arrow, the last button next to the bin. Sorry, forgot to circle it) .
You need to download your action and then upload it on your photopea. When you do, a window will pop up and photopea will ask you whether you wish to load the action every time you open the program. You choose "Okay" and the action will be loaded in the storage.
When you want to sharpen your gif, you select all your frames, then you click on the Play button, and select the Action, NOT the folder, or it won't work.
Actions can also be created to more rapidly crop and convert your frames, but it doesn't always work on photopea (for me at least). The process is exactly the same, except once you start recording you 1) crop your gif as explained in step 4, 2) convert into frames. Then you stop the recording and download the action and upload it. This won't work for the Rasterize step by the way. Just the Animation -> Make Frame step.
7. COLORING
Now you can color your gif. I won't include a coloring tutorial simply because I use a different method for every tv show I gif for. You normally want to begin with a brightness or a curve layer, but sometimes I start with a Channel Mixer layer to immediately get rid of yellow/green filters (there's a tutorial for this particular tool which you will find in the list I mention in the link below)
[Plus I'm not really an authority on this matter as my method is generally... fuck around and find out. Two years of coloring and I still have no idea what I'm doing. 70% of the time.]
Simple Gif Coloring for Beginners -> very detailed + it includes a pretty handy list of tutorials at the bottom.
8. EXPORTING
Now you can export your gif. Some gifmakers export their (sharpened) gifs BEFORE coloring and then load the gifs on photopea to color them. I'm not sure it makes any difference.
FILE -> EXPORT AS -> GIF
(not colored, just sharpened)
As you can see, unlike photoshop the exporting settings are pretty thread bare. The only option available is dither - it sometimes help with color banding - which, and I'm quoting from google for maximum clarity:
"refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size."
SPEED
When you export your gif, it will play at a very decreased speed (100%). I usually set it at 180/190%, but as for every other tool, you might want to play around a little bit.
GIF SIZE/EZGIF OPTIMIZER (See Step 2)
And that's it.
P.S.: worth repeating
Save your work as often as you can, even while coloring or before exporting.
ages and ages ago @jaeyxns asked for a tutorial of how to overlay gif effects onto edits, so i am finally here! thank you so much for your patience. from the bottom of my heart, my bad.
we're going to look at two very similar scenarios here: overlaying a gif effect onto a still image and then onto another gif.
onwards!
as mentioned in this great tutorial for the same effect on photoshop by @camwritesbooks, your first step in either case is going to be to find your overlay gif. you can do that by searching for the effect you want (smoke, snow, etc) on google or youtube- in this case, you may have to make your own gif- or searching for overlay gifs on tumblr. i got my falling snow gif from here. for the purposes of this tutorial, your overlay gif will work best if it includes a dark background (black is best) with light effects.
next you want to upload your gif(s) and, if relevant, image(s) to photopea. crop/resize as needed so that they're the same size by going to image in the master menu, then "image size" and plugging in the desired dimensions:
(to crop, you use the crop tool in the editor menu on the left!)
next, duplicate your overlay gif onto your base image/gif. you can do this by right-clicking on the folder in the workbar to the right, then selecting "duplicate into" and choosing your base from the dropdown:
now go into your base gif. you should just see the overlay gif on top of it. to rectify this, select the folder of the overlay gif in the workbar, then go to the blending mode dropdown just above it (it will likely say "pass through") and change the blending mode to screen.
(if your overlay gif has a light background with dark effects, i THINK you can get the same effect if you choose darken instead, but i'm not completely sure.)
if your base is a still image, you're all done! you can go to file in the master menu and export as a gif.
if your base is another gif, you've got one more step. you need to merge your gifs. i cover how to do that in this tutorial, but if you need a refresher, your first step here is to select the folders of both the base and overlay gifs at the same time. then, go to layer in the master menu, scroll down to "animation," and select "merge". DO NOT select "merge layers."
now you should be good to export your gif! if your base and overlay gifs weren't the same number of frames or the same framerate, it might look a little clunky at first, but you should be able to easily adjust the speed in the export window to make it look cleaner. i ended up speeding scully up to around 120%. there's a way you can completely fix the problem but it's really time-consuming and involves a lot of math, so i won't get into it here. if you'd like me to explain it in more detail, let me know!
I FOUND SEVERAL PSDS OF AC GIFS I’VE ALREADY MADE SO MAYBE I CAN CRANK ONE LAST SET OUT OF THIS FANDOM SINCE D+ WON’T LET ME SCREEN RECORD ANYMORE. HALLELUJAH.
@lightasthesun requested a photopea tutorial for how to make gradient borders on gifs, so i am here! this tutorial is heavily inspired by the fantastic one for the same effect on photoshop by @allresources, which you can find here.
PHOTOPEA GLITCH TRANSITION TUTORIAL by kai @heroeddiemunson
howdy! so i’ve recently come to realize that i haven’t come across any tutorials for creating a glitch transition on photopea. as someone who has done this transition many times in photopea, i figured that i should create a tutorial to show how i personally do this effect!
what you need:
photopea (basically photoshop in your browser, completely free!)
basic giffing knowledge, because i won’t cover it in this tutorial (other tutorials: tutorial by @benoitblanc, tutorial by @ashleysolsen)
i also recommend watching this youtube video for a real time visual of what i’m going to be describing in this tutorial. this video is what taught me how to do this glitch effect, so if how i’m describing it is at all confusing, check out the video to see it in action!
without further ado, make sure you save your psds regularly and let’s begin the tutorial :)
romaincrisis
andulkaphoto
origamiaround
kianamaiart
stormborns
