#ps tutorial

First of all, this is what you’ll see once you extract the files from the zip. I know it’s in Spanish, but I got you!!

So you will have to click on the Adobe.Downloader.dmg file, ok? I know Mac won't let you download it, so go to Settings > Privacy & Security > Security.

Click on “Open Anyway.” It’ll ask for your Mac password or Touch ID, just enter it. The point is that the app will finish installing. Then something like this will open.

(Heads up: don’t get too excited. I know it’s cool to have all the Adobe stuff available, but you need a specific patch for each app. I’m still trying to get the one for After Effects. If I manage to get it, send me a message and I’ll pass it to you.)

OK. Alright, now you’re going to click on this gear icon. You need to make sure everything shows up exactly like I’m about to show you, okay?

Once you’ve super double-checked everything, go to “Cleanup,” select all of them, and then click “Start Cleaning.” That’s it. close that tab.

Now, look for PHOTOSHOP. Click download, BUT pay attention you CANNOT download the latest version!!! The patch only works for version 26.2. you’ve been warned.

Then go ahead and download it, and make sure it’s actually downloading all the files. Once it looks like this, close the app.

k so back to downloads, go to the "ps installer" folder and click adobe activation tool.

open ur applications folder and click the photoshop app. then hit start activation, it’s gonna ask for ur macbook password, so just type it in. the log at the bottom should say it's done correctly. close that and open 'no account patch ps,'

hit continue, continue, and click adobe ps patch.

hit install, activate it, let it access ur downloads and ur literally done. just look it up in spotlight and it should be there.

and tadaaah!! done, that’s it. you can delete everything you downloaded with no problem, you already have photoshop installed ✨

some anon asked me on how to resize gifs without losing quality. here's my tut!

first of all tumblr gif size is 540 x 540. you have to make a gif around those sizes. if you're having trouble on remember the specific dimensions here's a good layout. 540px, 268px and 177/178px those are the dimensions tumblr usually allows or it automatically resize them.

next, i go into the ration option next to the dimensions. onyour side of ps it may say original ratio or something else. change it to w x h x resolution. it will automatically resize the gif for you if you put in the dimensions.

so, if i click on the cropping tool, i will have this resize image. if you want to make sure that it actually resized to the dimensions, you can go to the image size and canvas size options like this.

now this will pop up

if you want to change the gif again to for example 542 x 270 you can do that.

now it looks like this

another issue is that you might be way to zoom in into your gif to make it look bad in quality. usually 50% is where i put the zoom.

however, a lot of ppl (me included) use different crop sizes to make smaller gifs. usually for mine rn is 177 x 250

here's also my save for web settings if that helps too!. this is the finished gif!

STEP ONE: MAKING YOUR GIF

choose your footage and plug it into your desired software of choice! i use photoshop for this so i can only attest to the efficacy of these methods in that context

as for shot selection, you could feasibly choose anything. however, i prefer shots without too much movement in them - makes it look more like a home video.

because of the heavy amount of colors and filters, i'd recommend a gif somewhere around the 40-50 frames! but of course you can play around.

oh i also set the frame delay to 0.08 seconds. this is slower than most gifmakers tend to set theirs, but it makes it run buttery smooth imo.

STEP TWO: MAKING THE COLORING

here's where we get vhs specific. if you're unfamiliar with vhs footage, i recommend clicking through this youtube playlist! if you're not interested in the coloring, skip to step three (smart object fuckery + filters)

now while making a set i tend to choose some primary colors for my gifs. in the gifset i linked above, i chose to work with blue and orange-y yellow. in some of the other gifs i'll be using as examples (from an unfinished set) i chose green and yellow.

to create the above coloring i generally use these steps:

1) curves

i'm a maniac so i use the same curves layer to initially edit the luminosity AND colors of my gifs. the purpose of this layer is to edit brightness/contrast like i normally would and already start the process of changing the colors a little bit. this is my curves layer for the blue house gif:

to make the gif go from the left image to the right image:

as you can see i used the brightening curves to make the footage a whole lot lighter. i also increased the reds to get rid of the cyan tint a lot of blue footage has, slightly increased the blues, and once again decreased the greens to get rid of any cyan. this does make the blue hue a bit more purple, which is a nice bonus!

as for the gif of the boy, that one's a little harder to show a before and after for, but i'lls how the curves for good measure:

the original shot was already quite bright so i only edited the brightness a litttle bit. because i knew i wanted the gif to be green and yellow, i increased the greens, decreased the reds (except in the shadows), and decreased the blues (to get yellow)

2) channel mixer

now the channel mixer layer takes a little getting used to so i recommend experimenting. ALWAYS USE THIS LAYER ON THE COLOR BLENDING MODE for a more even result.

i use channel mixers to sort of... unify the colors a bit more. for the house gif, for example, i increased the blue channel to +110% blue, but decreased the blue in the red (-12%) to retain the yellow in the window.

if you want me to explain this more in depth, send an ask! it'll be kinda longwinded though

before / after of the boy gif with curves/channel mixer.

3) levels

this is where it starts looking more vhs-y! vhs footage has light shadows and dark highlights.

first, set your levels layer to luminosity blending mode to retain your beautiful colors.

then, crunch the hell out of your gif to make it very... mid.

this may feel a little wrong at first but i prommy it'll look okay at the end. a before/after for the boy:

now that's starting to look familiar right?

4) color fill/gradient map

because i want to unify my colors/make sure my gif is saturated, i usually add either a color fill or gradient map layer. in the case of the house, i chose to go with a dark blue color fill:

because the coloring of the boy gif was a little more complex, i decided to go with a brown to green gradient map.

this will make the shadows yellow, and the highlights green.

BOTH THESE LAYERS ARE SET TO OVERLAY. i usually fiddle with the opacity of them until i like it, but it's anywhere from 7% - 17% depending on what i feel like that day

5) curves (again)

this layer is probably useless but i do it anyway to make myself feel better. this is just a regular curse layer to up the brightness a tiiiiny bit and amke sure everything's clear. also it helps counteract the darkness your overlay color will add in.

6) color balance

this is my most subtle layer so i won't be able to show before and after but i fiddle with the color distribution a little until i'm satisfied. set this layer to color blending 'cause that's what you wanna affect!

i decided i wanted the house gif shadows to be a little more purple, for example, so i added in red (+3), magenta (-1) and blue (+1). etc etc. do what feels good!

STEP THREE: SMART OBJECT FUCKERY AND FILTERS

OKAY that was a lot. sorry or you're welcome. but good news: now's the fun part. convert your animation to a timeline, then select both your coloring and gif layers, right click, and select convert to smart object.

now that your gif's a smart object, i usually crop it. i tend make vhs aes gifs a 4:3 ratio (so 540 x 405 px) because that's what vhs footage was usually recorded as! crop your gif, resize, and then we can continue.

1) color bleeding

vhs footage usually bleeds its colors - this manifests as a short of... weird subtle halo around any object. the way to recreate this in photoshop is to duplicate your smart object.

set your copied smart object to color blending. now move it to the side a couple of pixels (i usually do around 5px, but you do you!)

as you can see, the tree and chimney (and everything else but less prominently) have a yellow shadow to them. this is exactly what we want!

2) filters

now's the time to add your filters and make it look like shit (but on purpose!) first, select both smart objects and convert to smart object again. this will ensure the filters apply to all layers evenly.

i use the following filters:

unsharp mask (amt 35%, radius 4px) - this will subtly add some sharpening but only on the edges of objects

add noise (amt 7.5%, distr. uniform, not monochromatic) - this will add the signature vhs grain.

box blur (2px) - i edit this to be 75% opacity with the little arrows to the right, just to make sure you can still make SOMETHING out when you're looking at the gif. MAKE SURE THIS FILTER IS ON TOP OF YOUR NOISE FILTER. tumblr will kill your gif otherwise

4) ONE LAST THING

usually at this point i'm not happy with either the saturation or levels. (usually the levels). so on top of your smart object, add another saturation or levels layer and fuck around!

in the case of the house gif, i thought it was too bright still so i set my output levels to 13 and 216. for the boy, i thought the shadows were too dark, so i set my shadow output to 11.

BEFORE & AFTER:

Make your gif as you normally would, sharpen, colour, etc. Then we can get right into it.

First thing you gotta do is Duplicate your video layer/video group depending on your colouring style. (If you keep your colouring layers in a separate folder, make sure both clips are underneath it.)

Now that we have two videos, we'll leave the bottom one alone and add the blurring filter onto our duplicate from Filter -> Blur -> Gaussian Blur:

It's a personal choice how strong you want the blur to be, I usually go with anywhere between 3-5, depending on the quality of the footage and the size of the area I want to blur out.

And if you've done everything correctly, you should see something like this:

And this is where the magic happens. We add a Layer Mask to our duplicate as so:

Then, clicking onto the mask itself, using a black Paint Bucket tool we make the whole thing invisible, then using a white Brush tool we draw on the text to make the blur layer visible only in that area and nowhere else. (Make sure to set your brush's hardness to 0%, keeping the opacity on 100%.)

After you covered the whole text area, your Layer Mask should be looking something like this:

Also note that you can just use the Marquee (Selection) tool and a white Paint Bucket for similar results and quicker editing, I just personally prefer the way it looks with the brush.

Now, here is the trickier part. If you have a gif with multiple credits popping up at different times and you don't wanna keep the blur there when there is nothing underneath, you gotta toggle the ends and beginnings of the duplicate — in this case, duplicates.

Just repeat the same steps for all the separate parts you need to cover up and make sure you have different duplicate videos for all of them. Then adjust the ends of the clips on your Timeline according to where they need to be visible.

And ta-da! Your gif is all done and there are no pesky credits in sight.

(if you want to follow along directly, i'm using this video.)

1) download your video. i use this website (cobalt). for the cleanest final product, try to use videos that are 1080p or higher.

side note: if you're downloading something other than mp4 files, you'll need a file converter- i use handbrake for this. this tends to come up if you're downloading tv shows!!

2) open your video in photoshop. (not import, just regular file > open)

this is what mine looks like now. our layouts may look a little different because mine is tuned to my job too.

if you're new to photoshop, go ahead & pinpoint a few things: your toolbar (yellow), actions panel (pink), adjustments panel (green), layers panel (blue), and video timeline (red). if you don't see these panels, go to window in your topbar & click the names.

general photoshop tip... go to photoshop > settings > preferences and 'up' your number of history stats. this will give you more 'undos' if you mess up rather than hitting a wall :p i have mine set to 75!!

3) convert to smart object. with your base layer protected, right click > convert to smart object, or go to layer > smart objects > convert to smart object. this basically allows you to make changes while keeping the base properties in tact!! you'll notice your timeline change from blue to purple.

bc i use this so often, i made the shortcut cmd+f. you can do the same by going to edit > keyboard shortcuts if you'd like :p

let's focus on that timeline for a moment... get familiar with the split button (red), zoom buttons (yellow), work area (green).

the split button is how we'll divide the video into clips, which will become our gifs. the length of your clip will vary. i just try to fit a completed action into one clip if that makes sense!!

the zoom buttons allow you to move through the video a little easier. this will end up being a personal preference thing. i usually zoom until frames are broken up by 2's (02:00f / 04:00f / etc - shown 2 pics down) but it also depends on the length of the video

the work area defines what will export when you hit save. later on, you'll want to make sure your adjustment layers cover the entire work area.

4) clip your video. skim through your video and pick a scene you'd like to gif. split at the beginning and end by clicking the scissors, so you have something like this. i'll pick three clips for the tutorial.

as a general note, i will clip the entire video in one go, save as a psd, then move onto sizing/coloring/sharpening/etc

go ahead & delete the layers you won't be using as clips. i would rec saving as a psd at this point to save urself the grief of any photoshop crashes since u have now clipped a video to your heart's content!!

5) now, onto sizing your gifs.

first you'll use the crop tool (pink, toolbar). you can input your desired size to keep the scene in ratio (in the pink squared boxes). this is up to personal preference again, i use 260x150.

once you choose a size, you can click the menu the green arrow is pointing to, scroll down, and define a new crop preset.

adjust image size. go to image > image size and type the size you decided. make sure it's set to pixels and that you have the in-ratio button (pink) clicked.

6) next, sharpen your gif.

as you're just starting out, i would suggesting using an action. i have my favorite options in this tag! to keep us on the same pace for this tutorial, i'll use this one by svgarboo.

using an action: click into your actions panel (red), click the options button (yellow) and choose 'load action', use the arrow (green circle) to open your action's folder and choose the playable option (green box). with your layer selected, click the play button (pink).

NOTE: if your play bar isn't over your active layer it won't apply

your video should look a little better & your layer should now look like this over in the layers panel:

if you want to make adjustments, double click the options buttons (pink) and adjust opacity to your liking.

7) coloring your gif. i could not begin to make a coloring tutorial bc i hate how mine turn out 90% of the time </3 BUT there are some beautiful tutorials in here ... I WILL SHOW U HOW TO PLACE THE LAYERS STILL !!!

add a new group (pink) & drag it above video group 1. it will float above your clips on the timeline. this is where your adjustment layers will go! i'm including a screenshot of my adjustment layers so you have an idea.

8) exporting your base gifs. adjust your working area bars to the beginning and end of each clip. go to file > export > save for web. i'll attach a screenshot of my export settings.

WHEN MAKING ADDITIONAL GIFS, REPEAT STEPS 5-8 AS NEEDED. because you used smart objects, you can use ctrl+t/cmd+t on your gif layers to resize instead of cropping each time.

9) adjusting gif speed. open your exported base gifs. you'll see that your video timeline has changed to a frames timeline.

go to options (pink) > select all frames. with all frames selected, click the dropdown arrow (yellow) and adjust your time.

timing will depend on a case-by-case basis. i usually go 0.05, 0.07, or 0.09. play around with speeds until the motion seems fluid and natural. my gif is around 110 frames long so i'm doing 0.05.

10) export again, using the same settings as step 8.

YOU CAN SET UP ACTIONS TO HANDLE STEPS 9 & 10 IN BATCHES. lmk if u would want a tutorial on that :p

now i have 3 finished gifs!!

step 1. i made a base reference for the layout. here's what i started with. you can download the psd here to make it easier. i used the lemon/milk font.

step 2. make your gifs. i made the base gif first, edited it and put it in black and white. i then made the invidual six gifs and repeated that. save them all to one folder for easy access. make sure they all have the same amount of number of frames. (i'm using the same scene for this example just bc i'm lazy rn lol.)

step 3. time to arrange the gifs. i opened my base gif and put all the layers in one group.

i then opened each other gif and also put them in group layers labeled 1-6.

i then copied all the frames from gif 1.

and pasted them over the base gif.

this will put your first gif over the base gif. i then repeat the process for gifs 2-6.

step 4. arrange the gifs!

convert to an animation timeline.

arrange your circles on a layer above the groups of gifs.

set it to screen to make the gifs underneath easier to see with the red + blue as a guideline. i turn the base gif off temporarily to make it easier to see. drag and arrange the 1-6 folders to underneath the circles.

step 5. select all the 1-6 folders and convert it to a smart object / smart files or whatever your version of ps says.

this will turn the 1-6 gifs into one gif.

go to the circles layer and right click and select pixels.

click back on your gif layer, then right click + select inverse.

go to layer > layer mask > reveal all

this has now selected the empty space around the circles. grab a black brush and fill in the selection.

this has removed the excess from the gifs, making them circular.

step 6. choose your colours! i like to use pinterest for my colours, but in this example, i will just use blue + red for the circle gifs and green for the base gif. change the circle layer to multiply. select your base gif layer again. i applied a solid colour above the base gif and chose green for this example. also select that layer to multiply.

step 7. add your text above all these layers and arrange where you want them.

step 8. stroke around circles + text. make a new layer. right click select the circle layer, select pixels.

go to your newly created layer, right click and select stroke.

i used 2px thickness. repeat this for the text layers.

place these stroke layers underneath the circle gifs, but above the base gif. i then tap this layer down and to the left, so it's slightly ajar from the text and circles.

if it blends too much into the base gif, i will lower the transparencyof this stroke layer to around 60%. sometimes it looks fine, though.

step 8. you are now done! you can select all the layers and convert it to a smart object / smart file again.

you now have one gif. i usually save it as a gif and then re-open it to change the speed of the animation, because i am lazy and cannot be bothered to convert it back to a normal animation timeline. i set my gifs usually to 0.06 speed. re-save the gif, and you will end up with something like this, hopefully:

i hope this tutorial was helpful and explained properly. i use a pretty old version of photoshop, so it might look different if you use a more updated version. i use photoshop cs5.