#photopea tutorial

add your image..

get your psd..

go to the psd layer and follow these steps.. go back to your image tab and your image should be colored by then..

to export, go to [file] and then press [export as](press png if only an image/press gif if animated)..

if coloring isn’t working.. vvv

make sure you’re actually on the psd layer when transferring the psd.. OR..

after doing my sharpening process, i go to filter > filter gallery... and scroll through the list until i find the grain filter under the texture heading (near the bottom):

then, on the right side of the pop up, i adjust the intensity to 5 and set the grain type to soft:

this (as you probably already suspected) adds grain to your gif, but in my own giffing experience, it helps mitigate the forced grain that photopea gifs inevitably will have just because of the nature of photopea as a platform.

in addition to this, you can also add noise to your gif. BIG warning though, adding any amount of noise to your gif will make the file size MUCH larger, so i recommend using this setting more sparingly. the grain filter should help with the majority of the issue, but some movies/tv/music videos/etc may need this extra push

to add noise, go to filter > noise > add noise. some gifs may need to have the amount set to 2%, but in most cases, 1% should work just fine (and i don't ever touch any of the other settings):

PRELIMINARY

okay i have my episode file here i open it in mplayer

find the scene you want to gif

and hold down command/control + shift + s for the duration of the scene (its longer than you think!) shoot for about 50 frames

also wait before you do open settings for mplayer and change the screenshot location where it saves screenshots, to a folder of your choosing (i use the term screenshot here cus thats wat mplayer calls it on the settings page but mostly im gonna call them “screencaps”)

optional but worth it: after you take your screencaps, open the folder in finder and decide what frames (shoot for 50) you’re going to use for your gif, put those in a folder and label it so its easy to find when making the gif. delete all screenshots you dont want then and there!

STEP ONE: OPENING

open photopea.

open -> open screencap #1 in series

we now have our base product and from now on will be working in this project

file -> open and place. go to your gif folder open it and select screencap #2 through your last screencap

wait for it to load and afterwards hit the grey check mark when its done

select all layers (click layer one, hold shift, click last layer) -> right click, rasterize

now we have all the layers! this isnt a gif yet we'll get to that last but the point is we have all the layers in order that will become our gif when we export

STEP TWO: CROP + RESIZE

select all the layers and hit the crop button on your left hand toolbar

at the top, click “fixed size”

add your dimensions*, always a width of 540 or 268. height is dealers choice, but honestly just do 540x400 for now while were learning

a box will appear on your image, use the white boxes at the corners to resize the blue box around where you want the crop to be

click grey checkmark when youre ready

when you're done with cropping be sure to click the arrow on the left hand toolbar otherwise youre gonna be in crop mode while you make your gif and its really annoying

*only the width matters! 540px or 268px

if youre doing one gif per row use 540, if two, it's 268

technically yes there's also three gifs per row its 177 178 177 but no one uses that anymore so i hesitated to even mention it

540x450, 540x400 or 540x350 are all pretty solid bets for dimensions you probably wont use much else

yay we’re halfway done!

STEP THREE: SHARPENING

you should still have all your layers selected

filters -> sharpen -> smart sharpen. 200% at 0.4px radius

filters -> sharpen -> smart sharpen. 10% at 10px radius

optional: adding noise. this isn't technically sharpening but i think its nice and diffuses the image well

filters -> noise -> add noise -> 4% (or whatever you think seems right but keep it under 10%)

STEP FOUR: COLORING

a LOT of ink has been spilled on coloring you could go years and not get everything there are so many wonderful ways to do it here is a very basic introductory way

oh wait okay before we start, select all your layers and put them in a folder. (select all layers, click folder button at the bottom of the screen)

(do NOT convert to smart object!!!) just put them in a folder so we can start coloring

select folder

and hit that little circle half colored in at the bottom next to the folder thats called an adjustment layer

brightness/contrast. dont change any of the dials just change the blending mode (click the box that says normal) to 'screen' and adjust the opacity (20-40%) dont wash out your image just give it a little bit of light

levels your new best friend levels!!! click the white box where it says sample from image and click something on the image that should be white but isnt (i clicked the ticking on his cap) the colors will adjust accordingly. if it looks crazy and washed out dont panic. when you change the black point it will adjust to normal colors

levels again. click sample from image and click black and kind of click around on dark spots on the image until you get the coloring you like

levels again. now we can adjust with that graph that comes up by pulling the white box and the black box below the graph closer together

color balance. color balance is great if we want to add a little more pink or brown to the image

your gif should be done here that should be everything! for very beginner coloring. you can mess around with curves or whatever but honestly most i use are levels and color balance

and obviously there’s so much more to learn and do! i’m just trying to give you a good jumping off point, like you need to know how to make chocolate chip cookies before you can make croissants!

extras: sometimes i use a gradient map or color fill those are both really good like if you want to suggest like some brown or a rosy hue to the image so like open a gradient map (map not fill!!) layer, make it like carmely brown orange on one side, white on the other*, and then change the blending mode to overlay or screen and adjust the opacity (nothing above like 40%). color fill is the same method

*here’s where it gets a little technical: when you’re making a gradient map, be sure to set the blacks as your [color] and keep the whites as white so it looks like below, not the reverse where they have demon eyes. you want to add color to existing color, not add color to white. basically if they have “demon eyes” (you know it when you see it) hit the ‘reverse’ checkbox on the properties page

yknow as i was writing this i added the gradient map and i loved it so i kept it i think im gonna say its an essential lol

STEP FIVE: MAKING IT A GIF

select all the layers in your folder so your screencaps

layer -> animation -> make frames

file -> export as -> gif

if it's over 10MB go back, delete a few frames in your folder it has to be under 10MB

save, make sure the quality is listed as 100%

okay i couldnt figure out the best frame rate mess around with it for me 120% seemed pretty good

et voilà!

please please please ask me if you have questions or if any of these instructions dont make sense please dont hesitate to ask go forth make gifs have fun!!! MWAH!!!! 🩷🩷🩷

open a new project, and either add in your photo/gif manually or just straight up open it by clicking ‘open from computer’.

open your layers and click the half circle located at the very bottom. once the menu pops up, you need to scroll down until you see the option for a gradient map.

once the gradient map is in your layers panel, click the folder icon ( next to the half circle at the bottom ) and place the layer in there.

your folder should say ‘pass through’ on the pull down menu at the top, and you need to change your gradient map to say ‘lighten’ so your coloring isn’t harsh!

double tap the gradient map icon to open the editing panel. change the smoothness to 0%, then drag out 3 different squares on the color panel.

the position for the gray ( 2d2d2d ) should be at 21%, and your two colors of choice should be at 54% and 72%.

reminder that your lighter color should be next to the gray while your darker one is next to the white!!

here is the difference on how your gradient map would appear if set to ‘normal’ ( left ) and ‘lighten’ ( right) !!

next step is to click the half circle again, this time you need to click vibrance then repeat to click exposure. set them up in your folder like this ( keep vibrance & exposure set to ‘normal’ ).

double tap on both and set them up to these settings:

[ vibrance 100, saturation -100 ]

[ exposure 0.58, offset -0.03, gamma correction 0.78 ]

and here is how your coloring should look!! ( obviously i used the colors of my current theme, but you can use whatever ones you want!)

please lmk if you have any questions and if this tutorial helped you! if there’s something different you want a tutorial for, send it to my inbox and i’ll try my best <33

＊ then you have to open photopea and select the open from computer option. it doesn't matter what order you open your images in, but for this tutorial's sake ill open my overlay image first. if youre also doing this, when you open your gif, you'll want to go to file > open rather than just file > open and place.

＊ the menu to open your second image/gif looks like this! you can find it along the top under file. when you have both of these opened, the top of your canvas should look something like this.

＊ if you want to edit the colours of your gif, this is ideally where you would do this. if you don't know how to do this, send in another ask and i'll explain how i did mine!

＊ after this you'll want to move your gif over to your overlay image and put it underneath the overlay image. you can do this like this:

＊ if you're not making any changes to the colours of anything or etc, this is it! this is gonna be Ugly as fuck because i didn't mess with the gif colours before exporting it so be warned.

＊ from here, all you have to do is file > export > export as gif! if you have magically produced the exact same overlay image as me, yours should look something like this!

＊ if when you select export as gif you get a box prompting you to downsize your work, just hit OK. i'm not gonna lie i actually don't have a clue what this does but i've never experienced any issues with it.

• Make a new project. You can use any dimensions.

I’m making it 10 pixels x 10 pixels.

• Make a shape, ratio 1x1, choose an even number so it will be centered.

Delete the background if you want only the shape to be repeated.

• Edit -> Define New -> Pattern

✨ We’re done!

The pattern will be saved in the default folder on Photopea.

• To save the pattern on your computer/device you need to open a dropdown menu on the pattern.

• New fill layer -> Pattern Fill. You´ll see your newly created pattern at the end of the default ones. Click on the pattern then on the arrow pointing down, export as .pat.

Your loaded patterns will appears below the default ones.

You can use anything as a pattern.

3 things to always take into account when it comes to picking your colors is the hue, value and saturation of that color. Putting it really simply, hue is what color it is, value is how dark or light a color is, and saturation is how vibrant a color is.

It’s also good to know the color groups. There’s three groups of colors:

Primary colors! Which are red, blue, and yellow.

Secondary colors! Which are mixes of primary colors, like purple which is a mix of red and blue.

Tertiary colors! Which are a mix of primary and secondary colors, like pink which is a mix of purple and red.

You can also split the color wheel to see warm colors (red to yellow) and cool colors (green to purple).

Now you know the very basics color, hooray! Now you just need to put them together! You can do this using these 7 standard color schemes, sometimes also called color harmonies.

*this graph is from this article.

Analogous - is a color scheme using three colors that sit next to each other on the color wheel.

Complementary - is a color scheme based on colors opposite of each other on the color wheel.

Triadic/Triad - is a color scheme based on three colors evenly split on the color wheel.

Monochromatic - is a color scheme consisting of various shades of one hue.

Tetradic/Tetrad - is a color scheme that connects two sets of complementary pairs, it makes a rectangle on the color wheel.

Split-complementary - is a color scheme based on a color and the two colors beside that color’s complementary color.

Square - is a color scheme based on four evenly split colors on the color wheel, it tends to form a square, hence the name.

Now, you can use all that you know and apply it to your colorings and graphics! Let’s color something together! We’re going to use a split-complementary color scheme, with pink! Pink’s split complementary colors are blue-green and yellow. So let’s start!

Hm. As you can see, while we did use the colors, it doesn’t feel totally right, now does it? This is where hue, value, and saturation come in! We have the hue, sure, but their values and saturations don't compliment each other at all! The yellow being so saturated and vibrant makes the magnets look almost neon, whereas it washes out all the cooler colors, like the green in Thirteen's eye. 

So let’s say we want the magentas and pinks to be our focus color, green and yellow are here to complement/accent it. So, let’s lower the saturation of the yellow to match the green. We can also mix a little of cyan to the green hues in order to make the green cooler to nicely contrast the yellow’s warmth. Which effectively makes the yellow and green both compliment and contrast each other well which lets them work more cohesively with the pinks! We can also darken the blacks, and warm the whites to keep a good amount of contrast between the shades, but it also makes all the hue’s appear to have more similar values in comparison to the black! 

So now, the pink, yellow, and green, now all look to have similar amounts of brightness simply because the blacks are darker. The yellow and green have similar saturation to each other, while the pinks are more saturated, which makes the focus stay on pink while the other two hues compliment it. So we end with this:

Much better, isn't it? The only adjustment layers I used we’re a gradient map at the start, then I added Selective color, Hue/Saturation, and Vibrance. It just took lots of tweaking! But knowing basic color rules, I was able to do it real quickly. Of course, afterwards, you can add lots more layers to make it a stronger or heavier coloring, but for now we’ll leave it simple.

To learn more in depth on how to use some of the adjustment layers, I recommend reading through canarysage’s photopea for dummies posts! 

Lastly, here’s some articles and videos I used to learn, some of which that go more in depth than I did, that might help you further:

Colormaters - Basic Color Theory

Interact-design - Color Theory

Leighcotnoir - Hue, Value, Saturation

Canva - Color theory and the color wheel

Figma - What is color theory?

Colormeanings - Color Harmony

Bluebiscuits’s Basic Color Theory video