#ps tutorials

[aedearly]

hey balu, do you know how to recolor skin / how a coloring psd works for that? like for a character that's pale and not the shade they should be ( cough cough natlan ) asking bc I want to that but idk how

Hiya, anon! I can explain how I personally do it, but here's a huuuuuuge disclaimer: I'm colourblind, so I heavily rely on colour wheel pointers. Throughout this tutorial, you'll see me constantly comparing where the pointer is and trying to use my somewhat limited knowledge of colour theory. I'm sure other creators have other ways to do this that are much simpler and/or more effective; you should look for and check out other tutorials here on Tumblr, YouTube, or Twitter!

Due to the limited previews of images on Tumblr, you can also open the images on new tabs to see more details.

For religious and political reasons, I will not use a Natlan character as an example. Instead, I'll use Candace (also from Genshin Impact) as our muse. Specifically, I will use her character card art image, which can be found on the Genshin Impact fandom wiki. The image quality is not so great, so that's why we'll see some bleeding pixels here and there. Dealing with those is another tutorial altogether. Also, if you meant an absolutely pale character (with littler to no melanin), that would be another tutorial, too. So, I'll be sticking with these examples and explanations here! This can give you a starting point.

In this tutorial, we will go from this before (left) to this after (right):

Also, I'd like to point out that these steps are for this specific picture/character. Though the same logic can be applied to other characters and images, it's imperative to remember, especially when you're starting your editing adventures, that there is no fool-proof and 100% universal PSD. I'm just explaining the logic behind how a colouring PSD works and some of my mental processes behind it.

Please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~

Now, let's begin!

First, we must notice that skin colours (even paler ones) are shade variations of yellows and reds. If we check the hex code colour/colour pointer on the colour wheel, we will see that Candace's skin colour is at the intersection between red and yellow, and is on the lighter/less saturated part.

Here, I am deepening/saturating the blues of her clothes by creating a Hue/Saturation layer, changing from Master > Blues and adjusting the Hue and Saturation values. Colour theory basics: opposing colours on the colour wheels will give a more significant idea of contrast; the bluer colours will appear colder, and the warmer colours will appear hotter and, therefore, more saturated.

In this second step, I am creating a Selective Colour layer, focusing on the Reds. I want this to be highly reddish for now, so I'm lowering the Cyans to the minimum values I can. Notice how the colour wheel pointers went down, meaning we are in a redder, more saturated and more precise zone. The darker the skin, the redder its colours will be in pictures.

Thirdly, I am now creating a Colour Balance layer. Since I want to adjust the warmer colours (e.g., Reds), I am adding more reds, magentas, and yellows.

The exact process I did for Candace's clothes, I'll do for her accessories. Her accessories blended too much with her skin tone (hex code-wise and I imagine that for the normal eye, too). So, to make the yellows on her accessories pop and be more different from her skin, I created yet another Hue/Saturation layer and changed from Master > Yellows, altering the Hues, Saturation and Lightness values.

Now that we have the image's primary colours (blues, reds, yellows) separated, it is time to deepen/saturate the reds. So here, I made another Selective Colour layer, also focusing on the Reds. Notice that now I'm also increasing the Cyan values. Why? Because Cyans make the reds look darker, and I want exactly that. So everything will increase in value.

To further deepen these colours, I created a Curves Layer and tweaked each RGB curve. I made the blues lighter; meanwhile, the greens and reds went darker. Again, colour theory! Notice on the colour wheel that her skin is extremely red and saturated. This is precisely what I want. Why? Well...

... Because now, by using a Selective Colour layer again, I can make her skin magentaish. Pure magentas are rare in pictures, even fantasy/2D characters. Generally, you will find variations of purples, pinks or reds, but magentas are more difficult to find. Therefore, they're easier to work with/edit. Even if the character had magenta colours, we could've isolated them beforehand, too. This step guarantees that my PSD will solely focus on her skin tone, basically.

Our final step is to create another Hue/Saturation layer and change the setting from Master > Magentas. We will decrease the Saturation and Lightness values and slide the Hue bar to the right. And now, check the colour wheel: it's a beautiful dark brown! It's popping a lot against the yellows and blues. ~

This is where we started vs where we finished!

So there you have it! A speedy but hopefully informative tutorial on how colouring PSD works and how you can quickly love your characters a bit more when doing edits and graphics for them!

Again, please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~

If you have any questions, please let me know!

[kitconnor]

recently, a lot of people have been losing their gifs to reposters, whether that be a whole set stolen or just one gif taken for a textpost. which leads to a lot of us turning towards watermarks to not lose our work. it's not everyone's first choice, particularly because of aesthetics, but it's the best way to keep what you own.

of course, it might seem silly to do a whole "tutorial" on watermarks, but there's a lot of different ways to watermark in a subtle way that still protects your work. i've also seen a lot of people incredibly hesitant to move to watermarks because they believe it marrs their work, which may be true, but there are definitely ways around that. anyway, let's begin !

WATERMARK 1: URL/TRACKED TAG

the most common watermark for people is usually 'thisismyurl.tumblr.com', 'thisismyurl | tumblr', 'thisismyurl' - at least, this is assumed for most people as the best way to watermark.

but if you're like me and constantly want to change your url, you know that there's a good chance a watermark on a gif 3 months ago could be completely different to one now. this is why people are turning to tracking tags.

tracked tags change less frequently, if at all. it's smaller, which makes it more subtle. if you want to go the extra mile like me, you can create a blog under your tracked tag (eg. i track tuserlucie) which means you can reblog anything with your watermark to the blog, showing that it is yours.

placement is key though ! here's 3 different ways you can place it.

NOTE: opacity has not been altered on any of these. depending on how it looks with your gif, opacity looks best at 10-30%.

Font settings: Momcake, thin, 10pt, #ededed.

each of these placements have different advantages.

the first placement (top left) is the one i personally use. it's centered right on the middle but not too high up.

the second placement (top right) is probably the most popular. corners mean people can kind of tuck the watermark away where it doesn't seem obvious. the fourth (bottom right) effectively does the same.

the third placement (bottom left) is 100% the most effective. it sits in a point exactly where it's noticeable, making it less desirable for reposters. on the right opacity too, you hardly notice it.

WATERMARK 2: ICONS/SIGILS

this is an idea that i've seen used mostly by nik @cal-kestis , but is a great and creative way to do it !

an icon or sigil makes your gif totally unique to you. and it's something cute on there which is different to having to put text on there.

(i've put it in orange for the purpose of seeing it)

but you can see here, it doesn't need to be anything special. i've just used an oval shape plus the initials of my url and that's it !

but a sigil can be anything. it doesn't need to have text; it could just be an image. it could just be your icon. either way, it's a cute little alternative to using text.

here's the different options that i preference in action.

SIGIL - bottom right corner

URL - bottom middle

TRACKED TAG - face/body

RESOURCES

here's some resources to use if you want to start watermarking !

FONTS:

Momcake (this one was used throughout all the text watermarks !) Cocogoose Lemon milk Bebas Quicksand PSD

you can access a psd of editable watermarks here.

[anyataylorjoys]

I was asked to put together a demonstration on how I did the analog selection effect in the first gif of my Final Girl set which mostly involved elaborate keyframe work and was like a living hell. This will be a much more simplified version for comprehensive ease, but still very wordy.

This tutorial is for intermediate/experienced level gifmakers who are already familiar with gif-making, keyframes, and layer masks, and this will serve more as a guide than anything.

If you are not comfortably experienced with the above, this may be difficult to follow because I won't be elaborating on every detail, but if you're still interested in recreating something like this regardless, I suggest checking out the below tutorials first:

Giffing 101: A Comprehensive Guide by redbelles

Clipping masks vs. layer masks by kal-kestis on usergif

Shapes and putting gifs inside them by nobie

Create your canvas, make your shapes and align them in the positions you want them to be in. Then get the gifs you plan on filling your shapes with created on standby.

Things to keep in mind before starting: 1. Many of you may have already learned through experience that photoshop has a tendency to create duplicate frames when you are working with multiple gifs on one canvas. It typically occurs when you don't have the same number of frames in all the gifs that you're combining onto your canvas, or rather, your clips are not perfectly aligned. OR when you are working with keyframes, but this time we will have an exception to that rule for what're doing so I won't be discussing the 0.03-interval rule here but if you're curious, it's fully explained this this tutorial by nik on usergif.

To be on the safe side, load in the same number of frames for all gifs. I usually just load in however many frames for each, and then I trim the clips on both ends to be the same, but they have to be exact. If even a single integer is out of place in timeline, you could still risk getting duplicate frames at the end. 2. When making an edit like this, you have to consider the amount of time you have from start to end to make the transitions and rationally plan them out in the space you have available. The more shapes you use, the more frames your gifs will need to be composed of.

3. If you're trying to get the same effect as in my Final Girl edit, where the black & white is default, and the color phases in and out, my goal here is for the color to be visible for at least 10-15 frames each gif, so with 3 gifs, I figured around 65-70 frames would be a good range.

For my first gif, I intentionally loaded in my gamble of 68 frames. For the other two, I loaded in all that was capped in the folders, moved the clips into the positions I wanted them to be in, put them in their designated layer masks, and then trimmed the clips on both sides to match the initial 68-frame clip. ❗️Remember that they have to be exactly aligned like this and all other trimmed off clips deleted before you start your key-framing❗️

Next you wanna make a group for each gif (highlighted in yellow for visibility) to put your coloring adjustments into with a layer mask for their designated shapes, which should look like this in your layers, and like the below in timeline once aligned with the rest of the clips.

I also just tucked the shape layers into the coloring groups to clean it up. But if you plan on creating frames for the gifs, I suggest you move those layers to the bottom and keep them until the end when they can be used for borders, but if not you can make new shapes later.

Assign a black & white gradient map to each gif with a clipping mask on top of your coloring groups.

Now lets say you're not pleased with the outcome of the black & white like for mine, it desperately needs brighting and contrast.

Add your brighting adjustments as needed, and give every adjustment its corresponding layer mask like below.

Next, duplicate both your gif layer and your coloring group, then select both duplicates, as well as your new b&w color adjustments and convert them into a smart object together.

You should now have your original gif + original coloring group, and one single black & white gif on top.

Do this with the rest of the gifs! If you want, you can also combine your original gif and coloring group into a smart object so you have one colored gif, and one black & white counterpart for each.

Now we add the key frames!

You're going to be adding opacity keyframes to your black and white gif layers only. Decide which gif you want the color reveal to start with, and what your reveal pattern is going to be.

I chose to reveal the color of my first gif 11 marks in, which means I need to add a key frame at the 10th mark as well. This is because we don't want a literal "fade-out" effect, we want the change to be immediate. The first key should be at 100% opacity, and the second at 0%. You shouldn't have to worry about duplicate frames upon conversion because all keyframes will only be 1 integer apart.

Once you've decided where your next reveal will start on your second gif of choice, repeat the process.

Then you have to add more 2 more key frames to the prior gif to transition it back into black & white. This needs to occur simultaneously as the next gif transitions into color. Where one starts, another ends, and where one ends, another starts, etc.

Follow this process until you have 2 pairs of keyframes on all your gifs (your final gif should only have 1 pair). Whether you want the transitions to be evenly spaced is your choice and I think it looks cleaner that way. For my final girl set, I was trying to simulate an analog effect similar to making a player selection in an old video game so they were placed methodically to be "jumpy". But play with the keyframe intervals between each gif to get them to look the way you want.

Your keyframes should look like this in the end for reference:

Circling back to adding borders, it's the same keyframe process, but on new shape layers on 0% fill +stroke to serve as the border (if you deleted your shapes earlier). Try adding an "outer glow" blending option to make the border more prominent. Then, make sure the opacity keyframes on the shapes align with the keyframes on the gifs.

If you have any further questions on something not elaborated enough on, my dms are open!

[bylrndgm]

Hey elz! Would you consider doing a tutorial of how you did the frame thing in this post: /post/724195624728379392/and-it-felt-so-nice-so-peaceful-and? It looks so cool!

hi anon! thank you for reaching out. i really appreciate it & you made my day! 💚 ily!!! for length reasons, you'll find the tutorial under the cut!

Resources used:

Photoshop

Vintage flowers pngs -> you can either google vintage/watercolor flower png or here are some DeviantArt packages [x] [x] [x]

Font: Avenir

Workflow

After you have made your gif as you would normally do, it's time for the frame.

First: place the flower

Once you got your flower pngs it's time to place them on your gif. Go on File > Place Embedded... and select the file. This is what will happen.

Now, click on that little tick (✓) on the top right corner, so that your image is actually placed.

Press the shortcut CTRL+T (on Mac: Command+T) to open the transform options - basically it is the same as the photo above. I tend to do it this way, because if I don't like the adjustments, I click on the ⊘ button. If you did that when you placed the image, it would delete the image.

So now, move the image, resize it using the handles on its corners while pressing shift on your keyboard to maintain the proportions.

Once you get a result that satisfies you, click on this button (highlighted in purple)

Now you can wrap the png, and make it "fuller", more natural looking, moving the intersection points of the grid that will pop up

When you're done, confirm.

Now that you placed your png, you can manipulate the colors. Click on the png layer and press CTRL+U (Command+U) and in this case you would adjust the Reds and Yellows.

And you're done!!!!

Second: the border

To make the border use the Rectangle Tool (shortcut: U). On the menu bar on top, set the fill as transparent and the stroke as white

Then drag your mouse and create the rectangle

Then of course, adjust it if needed - by clicking on the rectangle layer, the properties panel will open (if not, go on Window and check Properties).

Now duplicate the layer (CTRL/CMD+J) and make the original rectangle invisible by clicking on the eye next to it.

Right click on the copy and rasterize the layer -> this rasterized layer will be the one you'll work on (you keep the original one as a safe harbor in case you don't like the changes made on the copy).

Now, with the copy selected, pick the Eraser tool (E), reduce the opacity of the layer and zoom in, and erase the parts of the rectangle that goes over the flower. When you're done, set the opacity back to 100%.

Third: add the text

And that is literally it! Super simple and quick to make, and of course you can add as many pngs as you want to create somewhat of a bouquet. The real game changer is the Wrap thing you do to make it more natural, like a real bouquet!!!!

I hope this was helpful and if you have some further questions please please reach out! Love u!!!

E.

[userpeggycarter]

COLORING + SHARPENING TUTORIAL

someone asked for a coloring tutorial and my sharpening settings, so here it is! there are also a few tips to achieve more HQ gifs. :)

tutorial under the cut!

FOR HIGH-QUALITY GIFS

FILE SIZES

it doesn’t matter what your sharpening settings are if the file you’re using to gif is too low quality, so i tend to look for the best that i can get when downloading stuff. 

usually, movies (+2h) look better if they’re 5GB or more, while an episode (40 min/1h) can look good with even 1GB. the minimum definition i try to find is 1080p, but i gif with 2160p (4k) when available. unfortunately, not every computer can handle 4k, but don’t worry, you can gif with 1080p files just fine if they are big enough. contrary to popular belief, size does matter! which means sometimes a bigger 1080p file is better than a smaller 2160p one, for example.

SCREENCAPPING METHOD

this can too influence the quality of your gifs. as a gifmaker, i’ve tried it all: video frames to layers, directly opening video clips, loading files into stack, and i’ve finally settled down with opening screencaps as an image sequence. with bigger files, it doesn’t matter much what technique you use, but i’ve noticed with smaller files you can do wonders if you screencap (either by loading files into stack or opening as an image sequence) instead of using video clips. for example, this gif’s original video file was only 4GB (so smaller than i’ve usually go for), if you can believe it!

here’s a tutorial for setting up and screencapping with MPV, the media player i use to screencap. again, you can keep using video clips for bigger files, but you’ll find this useful when dealing with dire causes. i don't file loads into stack, though, like the video does. i open as an image sequence (open > screencap folder > select any image > click the image sequence button). just select OK for the speed. this will open your screencaps as a video clip (blue bar) in timeline mode (i'm a timeline gifmaker, i don't know about you). you will need this action pack to convert the clip into frames if you're a frames gifmaker. i suggest you convert them into frames even if you're a timeline gifmaker, just convert them into a timeline again at the end. that way you can delete the screencaps right away, otherwise you will delete the screencaps and get a static image as a "gif".

ATTENTION if you’re a Mac Sonoma user, MPV won’t be an option for you unless you downgrade your system. that is, if you have an Intel chip. if you have M1 Max chip (or even a better one), here’s a fix for MPV you can try while keeping that MacOS, because nowadays MPV is skipping frames in its latest build. or you can use MPlayer instead for less hassle. here are two tutorials for setting and using MPlayer. Windows users are fine, you can use MPV without trouble.

FOR EVEN MORE QUALITY

ADD NOISE

here’s a tutorial for adding noise as a way to achieve more HQ gifs if your original material is too low quality.

REDUCE NOISE WITH CAMERA RAW

instead of adding noise, you can reduce it, especially if your gif is very noisy as it is. 

the path is filter > camera raw > detail > nose reduction. i do this before sharpening, but only my video file isn't great to begin with. because it’s a smart filter, you can reduce or increase its opacity by clicking the bars next to its name in the layers panel.

TOPAZ AI

i use Topaz Photo AI to increase the quality of my screencaps when i need to. it’s paid software, but there are… ways to find it for free, usually on t0rrent websites. if someone’s interested, i can make a tutorial solely about it in the future.

SHARPENING SETTINGS

here are my sharpening settings (filter > sharpen > smart sharpen). i sharpen things twice: 500% 0.4px + 10% 10px. here's an action for it, for more convenience. here's a tutorial on how to use Photoshop actions. for animated stuff, i use this action pack.

COLORING

here’s the gif i'm gonna use as a base. it’s already sharpened like the way i always do it.

LIGHTNING THE SHOTS

half of the secret of a good coloring is good lightning. i always useCurves (layers > new adjustment layer > curves) and Brightness & Contrast (layers > new adjustment layer > brightness & contrast). the settings depend on the scene you’re giffing, but i always try make my gifs bright and with high contrast to make the colors pop.

CURVES

besides lighting your scene, the Curves adjustment layer has four automatic options that will color-correct it for you. it’s not always perfect and it doesn’t mean you won’t need to do further coloring, but it’s a great start. it’s a lifesaver for most ridiculously yellow scenes. look at the difference! this gif uses the 3rd automatic option (the screenshot below isn't mine btw so that's why the fourth option is the chosen one), from top to bottom. what automatic option you need to choose depends on the gif.

sometimes i like to tweak my Curves layer. not everybody does that, it’s not that necessary and if you’re not careful, it can screw your gif up. to modify your layer by hand, you will need to click and drag points of that straight line in the position you desire. this is the concept behind it:

basically, the lower part of the line handles the shadows, while the upper part handles the highlights of the image. if you pull a highlight point up, the image’s highlights will be brighter. if you pull it down, it will make them darker. same thing for the shadow points. you should play with it to get a grasp of it, that’s what i did when i first started giffing.

BRIGHTNESS & CONTRAST

then i added a bit of brightness and contrast.

CHANNEL MIXER

the scene looked a bit too yellow, so i used the Channel Mixer (layer > new adjustment layer > channel mixer) adjustment layer. here’s a tutorial of how it works. not every scene needs the Channel Mixer layer though, i mostly use it to remove heavy overall tints. in this particular case, the Curves layer got rid of most of the yellow, but i wanted the gif to be just a bit more blue so the Channel Mixer tweaks are very minimal.

SELECTIVE COLOR

now, this adjustment layer i always use: Selective Color (layer > new adjustment layer > selective color). this is THE adjustment layer to me, alongside the Curves one. this is how it works:

ie, you can separately edit a color this way, giving it tints. for this gif, i wanted to make the colors more vibrant. to achieve that, i edited the selected colors this way:

for the reds, i added even more red in them by moving the first slider to the right, making the color more vibrant. for his hat to have a more warm tint, i added yellow to the reds (third slider, moving it to the right). finally, to make the reds stronger, i moved the last slider to the right (more black).

for the yellows, i made them brighter by adding white to them, thus making the tile wall and Paddington more bright as well.

for the cyans and the blues, i just added the maximum (+100) of black that i could.

i wanted for Paddington's nose to be brighter, so i added more white to the whites.

lastly, i added depth to the blacks by increasing their own blackness.

you should always play with the Selective Colors sliders for a bit, before deciding what you want or need. with time, you will automatically know what to change to correct the color grading. it all takes practice!

HUE/SATURATION

i don’t know if you noticed, but there are some green spots on the blue wall behind Paddington. to correct that, i added a Hue/Saturation adjustment layer (layer > new adjustment layer > hue/saturation) and made the saturation of the greens 0%, making that unwanted green disappear from the background.

while the green spots on the wall are specific for this gif, i use hue/saturation a lot to tweak, well, hue and saturation. sometimes someone’s skin is too yellow, i made it redder by tweaking the reds and the yellows, or vice-versa. the hue bar follows the rainbow bar, so the maximum settings (+100 and -100) give the selected color to change its hue to something more red or pink (the rainbow extremities). changing hue can give pretty whacky results, like turning someone’s skin tone to green, so you will need to play with it to get the hang of it. you can also tweak the opacity of your hue/saturation layer to further improve your gif’s coloring. i didn’t do it in this case, the opacity is still 100%. the reds and the blues had their saturation increased to make them pop just a bit more, without affecting the other colors.

COLOR BALANCE

the highlights of the gif still had a green tint to it due to the automatic correction of the Curves layer, so i used Color Balance. this is how it works: instead of giving specific colors some tints, you can give them to the shadows, highlights, and mid-tones. if your shadows are too blue, you counterbalance them with the opposite color, yellow. same thing with the cyan-red and magenta-green pairings. in my case, i added a bit of magenta.

B&W GRADIENT MAP

now, if this gif was a dish, it’s time for the salt and pepper. i always add a Gradient Map (layer > new adjustment layer > gradient map) (black to white gradient) with the Soft Light blending mode, thus giving my shadows more depth without messing with the mid-tones and highlights. it also doesn’t “deep fry” (you know those memes?) the gif too much by adding even more contrast. usually, the opacity of the layer is between 30% to 70%, it all depends on the gif. it always does wonders, though!

COLOR FILTER

finally, i like to add Color Filters (layer > new adjustment layer > color filter) to my gifs. it’s very handy when giving different scenes for the same minimalistic set because it makes them kind of match despite having completely different colors. in this gif’s case, i added a “deep blue” filter, opacity 50% density 25. you can change the density and the opacity of the layer for further editing, again, it all depends on the gif.

VIBRANCE

if i feel like it, i add a vibrance layer (layer > new adjustment layer > vibrance) to make the colors pop. this can ruin your coloring sometimes, especially when regarding skin color, so be careful. i didn't do it in this gif because i felt i didn't need it.

TA-DA! 🥳

AN OTHER EXAMPLE

the color grading of the original scene it’s pretty good as it is, to be honest. let’s see a worse scenario, a VERY yellow one:

no channel mixer this time because the automatic curves option dealt with the yellowness, but you can see it made the gif too green. i needed to correct that with the following adjustment layers:

curves (automatic option) (gif 2) >> same curves layer (tweaks) (gif 3) >> brightness & contrast (gif 4) >> hue/saturation (tweaked cyan+blue+green) >> selective color >> color balance (gif 5) >> b&w gradient map >> (sepia) filter >> vibrance (gif 6)

i added a hue/saturation layer to remove the blues & greens before my selective color layer because i thought that was more urgent than tweaking the tint of all colors. color balance (gif 4) was the real hero here, though, by removing the green tint. the selective color layer was meant to make the red pop more than anything else, because the rest looked pretty good, especially her skin tone (despite the green tint). you can notice that tweaking the curves layer (small gif 3) also helped A LOT with the green problem.

tl;dr 😵‍💫😵‍💫😵‍💫

here's a list of my go-to's while coloring and lightning gifs. it's not a rule, just a guide. there are gifs in which i don't use all these adjustment layers, or use them in a different order. it all depends!

1. curves (automatic option + tweaks) 2. brightness & contrast 3. channel mixer 4. selective color 5. hue/saturation 6. color balance 7. b&w gradient map 8. color filter 9. vibrance

i'll suggest that you study each adjustment layer listed for more info, either with other Tumblr tutorials or YouTube ones. the YouTube ones focus on images, but you can translate what they teach to gif making very easily. you can ask me to further explain any adjustment layer, too! i was brief to keep this short (which i kinda failed lol).

feel free to ask me for clarification or something else about gifmaking wise, i always like to help. ❤️

[1x20]

hello and welcome to my tutorial on how to create gifs like this one! full explanation under the cut, but if you wanted to take a little peek at the gifset attached to this tutorial, here ya go!

for the purposes of this tutorial i am assuming you know

how to make a gif

what vhs footage looks like

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:

aaaand that's it! thanks for reading! if you have any questions, feel free to come to my askbox, i'm always happy to explain my process. happy giffing 🥰

[the-borgias]

Hi, could you please tell me how to do this slanted layout? the-borgias*tumblr*com/post/695485491217334272/one-chicago-appreciation-week-day-one-favorite

Hi, Anon! I'm sorry this took me a few days to answer but I struggled making this tutorial (not because the process itself is difficult but it is difficult to explain it properly.) Anyway, here's the gifset Anon is asking about. I hope this is easy to understand and I also included a .psd file of the layout :)

PSD FILE OF THE GIF ABOVE & TEMPLATE

What you'll need:

Basic Photoshop knowledge (I use Photoshop 2023)

Basic knowledge on how to make layouts (here are a couple of tutorials: x x)

Basic knowledge about layer masks (tutorial)

STEP 1: Make a basic layout

You can do pretty much any layout you want but for the sake of the tutorial I tried to recreate the same template I used in that gifset. I'm assuming you already know how layouts/templates work so I created a 540x540px canvas and went to View > Guides > New guide layout. I used these settings:

And this is how my canvas looked like:

Now I pressed (M) to use the Rectangular Marquee tool and create the rectangles I wanted. This is my end result:

STEP 2: Tilt the layout

This is actually pretty easy. First we're going to select all our layers. I paired mine in groups so they looked like this:

Once we've selected all of them (groups, layers, whatever you're working with) press Ctrl + T. Your canvas should look like this:

And we're going to tilt it by changing the angle to -2.00 in here:

Now our layout is slanted! But as you can see we have transparent spaces we need to fill. I don't know if this is the easier method to do it but I use the Polygonal Lasso tool (L). I'll use the first orange box as an example:

As you can see I use a ridiculously big zoom so I can be as accurate as possible but it's basically impossible to create a perfect box, so this will work. Once we have selected our desired shape we'll use the Brush tool (B) to paint in the layer of our original orange box:

You have to do this with every box so it's a bit tedious but that's the way I did it 🤷‍♀️ This is the end result:

STEP 3: Place the gifs (using Layer Masks)

But now, how do I know which size my gif should be? Our initial measures won't work because our final boxes are bigger so here's what I do. I'll select the Polygonal lasso tool again and make sure I select a little bit more of the box I'm measuring, like this:

It's a little hard to see it but the dots are just a little bit bigger than the orange shape. To be more accurate, my original box was 178x87px and the shape I selected is 174x100px. So I'm going to make a 174x100px gif and place it right above the background, like this:

Now we're going to select the layers of our gif (I'm assuming you're working with a Group because it's easier) and click Ctrl + the orange box. You should see this in your canvas:

And now create a layer mask in your gif group (if you don't know how to do it check out the tutorials I liked at the start of the post.)

Now you can delete the orange box. And, once again, you have to do this with every box and write down the measures (and remember that all your gifs must to have the same number of screencaps!)

I hope y'all don't mind that I didn't create 8 different gifs lmao I was too lazy so I just used a big gif as a background and made 4 small gifs. This my end result:

For the background I merged the remaining boxes and used that to create the layer mask. I'm not going to explain it since I believe it's much easier if you check out the psd file.

And that's pretty much it! It's the same as making a standard layout you just have to be careful with your gif measures. Oh and also see how my gifset shows those white marks between the gifs under a dark background?

Well, that can't be avoided since we aren't working with straight lines (you can see the same effect in the 2nd gif of this set, different layout but also not straight lines) so we'll just ignore them.

I hope this was helpful (I lowkey feel like this tutorial is a mess) and if you have any questions feel free to ask :)

[eddiediaaz]

Hi! Can I ask how you did the double exposure gifs for your merlin set? They're beautiful btw!

heyy, thank you!! of course!

it's actually not very hard, the trick is to find the right shots for this. here's how i did it (reference gifset), under the cut.

for this tutorial i will be: — using photoshop cs5 on windows — assuming you know how to make gifs using the timeline — have basic coloring, sharpening, groups, and layer masks knowledge

I. CHOOSING THE RIGHT SHOTS

the ultimate trick to pull this off is to choose the right image. in order to do the double exposure, you need a silhouette shot that has these:

a defined and dark silhouette with a background that is not too busy

enough contrast between the silhouette and the background

the silhouette should take at least 50% of the space

not too much movement

here are a few examples of why they work and why they won't:

gwen: perfect example since this shot is already quite contrasted with a defined silhouette. there won't be a lot of work needed to make this one work.

merlin: not a great example because even tho there's a somewhat good contrast between him and the background, the silhouette is just too bright, not dark enough.

arthur: another good example, even if there are some bright spots on his face and armor. since he's not moving too much, you can definitely brush some black over him to make his silhouette darker (i'll explain/show later)

morgana: this one could work because the contrast is great, but of course her skintone is very bright against the black clothing. that being said, since the movement is not too bad, it could be possible to brush some black over her and move these layers with keyframes (as mentioned for arthur's example). i haven't tried it tho, but i think it would work well enough.

once you have your silhouette shot, you need another gif for the double exposure. what works best, in my opinion, are:

wide, large shots

shots with no to little camera movement (no pan, zoom, etc), but the subjects in the shot can have little movement of course

pretty cinematography/scenery shots

i find these are easier to find and make it work, it's not as "precise" as with silhouette shots. it's mostly just trial and error to see what works best with the silhouettes.

II. PREPPING THE SILHOUETTE

for the effect to work, we want a silhouette that's dark as possible. i'm gonna use the gwen and arthur shots as examples.

for the gwen gif, i started by sharpening, and then upped the contrast by quite a lot so her silhouette is mostly black, while retaining some nice details. i've used only 3 layers here:

selective color layer: in the blacks tab, playing with the black slider (value: +10)

brightness/contrast layer: added a lot of contrast (+61) and a bit of brightness (+10)

black and white layer: on top, its blending mode set to soft light and at 20% opacity. gives a bit more depth and contrast

then for the arthur example, i've also sharpened it first, and added contrast layers in this order (the skintone looks horrible, but it won't matter soon lol):

levels layer: black slider at 0, grey slider at 0.76, white slider at 104

selective color layer: in the blacks tab, black slider at +10

brightness/contrast layer: brightness at +1-, contrast at +47

black and white layer: on top, its blending mode set to soft light and at 20% opacity. gives a bit more depth and contrast

as you can see, half of his face is still quite bright. to correct that, create a new empty layer and put it between the gif and the coloring layers.

using a really soft brush and the black color, brush some black over his face and body on that new empty layer. you can edit the layer's opacity if you want, i've set mine to 71%. since arthur doesn't move much here, there's no need to keyframe this layer's position. for the morgana example, this is where you'd need to play with keyframes to make it work. here's where i'm at now after this:

you can always edit this layer later if you need, after doing the double exposure blending.

once the silhouette is all ready, you can put all layers in a group and rename it (i've renamed mine silhouette).

III. BLENDING

now the fun part! import the wide/scenery shot in photoshop, then resize it to the same height of your silhouette gif. make sure the gif is a smart object layer, and sharpen it. finally, bring this gif onto the silhouette canvas (by right clicking the smart object > duplicate layer). once you have both gifs onto your canvas, put the wide shot gif layer in a group, and set this group's blending option to screen.

you can then position the wide/scenery gif the way you like it in the canvas. this is how it looks for both examples after i've done that:

if the blending mode screen doesn't give you the best result, so you can play around with other blending modes (such as lighten and linear dodge in these particular cases), but generally speaking, screen is the real mvp here haha.

IV. COLORING

now that the double exposure effect is done, we need to color the gifs to bring them together. i went with simple coloring here, simply enhancing the colors that were already there. just make sure that the coloring layers for each gif are in their respective groups. here's how i've colored both examples:

gwen silhouette group: i added a gradient map layer on top of the contrast layers in black to green and set the blending mode to color

scenery shot group: multiple coloring layers, with a green color fill layer (blending mode set to color), with a layer mask so it only affects the top half of the gif

for the arthur gif, i did something very similar but with warmer colors. i didn't use a gradient map for arthur though:

arthur silhouette group: i made the yellow warmer, closer to orange/red, with a hue/saturation layer, and added more vibrance. didn't feel like it needed a gradient map layer here though.

wide shot group: basic coloring layers to enhance colors from the merlin & daegal shot, and an orange color fill layer set to the color blending mode.

at this point you're pretty much done. just need to add some final touches and typography (if you want).

V. FINAL TOUCHES

a small and completely optional detail, but i wanted to soften the edges of the wide gifs. to do so i've duplicated the smart object gif layer and removed the sharpening filters (right click on smart filter > clear smart filters). put this layer on top of the other smart object layers (but still below the coloring).

then with this same layer still selected, go to filter > blur > gaussian blur... > 10px. this will give you a very blurry gif, but we only want the edges of the canvas to be softer. so add a layer mask to this layer. with a very large and soft brush (mine was at 0% hardness and about 800px size), brush some black onto the layer mask to remove the blur in the middle of the gif.

you can play with this layer's opacity or gaussian blur amount if you want (by double clicking on the gaussian blur smart layer filter). here how both examples look with this gaussian blur layer:

you can also mask some of wide/scenery gifs if you'd prefer, so it shows less outside of the silhouette. just put a layer mask on that whole wide shot group and brush some black or grey on the layer mask. it's what i did for the gwen gif, with a very soft brush and i set the mask density to 72% (i kept the arthur one as is tho):

and that's how i did it! hopefully that was clear enough :)

[laurabenanti]

I got a couple of asks on how I did the text transition in this set. I'm going to explain as best as I can (with image references).

*Disclaimer: this assumes you have a basic understanding of giffing with video timeline, and keyframes. If you're new to keyframes, check out this tutorial by @userpeggycarter before proceeding.

Step 1: Go through, make your gif, color and all that jazz. if you're not familiar with giffing and need a guide, check this one out by @cal-kestis. Be mindful of the number of frames you have, as it is extremely important when keyframing begins. Make sure you have an even number of frames, or you will have an uneven transition. For this gif I'm at 60 frames total, and I'd be careful exceeding 70, as if you need to go back and delete... It just sucks, so be mindful! You'll see my gif and coloring under a group I titled "base" - and I highly recommend putting your gif/coloring/etc. into groups, as it will make the timeline a bit cleaner, and it's a little easier to find everything you need. But when you're done, you should be here:

*Quick note 1: Make sure your gif is in 8-bit mode. If you aren't familiar with bit modes, that is a tutorial for another time. For now, you can change it here:

Step 2.1: Pick your font/placement/etc. I really recommend being 100% on whatever you pick, along with the size. I've encountered problems when I move the font after the fact with alignment, so it's best to look your gif over to ensure you're satisfied. For this set, I went with Figtree, placed dead center.

I want to add to this by saying, thus far, I have found that white is the only color that works for this. I'm playing around with some other options, but black is 100% a no go. If you find a way to get that working, let me know. I'll amend this tutorial.

Photo of text settings, along with where you should be now.

Step 2.2: Since we're transitioning into a new set of words/text, you need to get that text ready as well. Shorten the length of time the first piece of text runs to halfway (I have 60 frames, so I cut it to 30).

Step 2.3: Duplicate your text layer, type your other text. The two texts should show for length of time, as you have an even number of frames, meaning you can divide by 2. Move it over to the end of where the previous text ends. If that makes no sense, it should look like the below: (again, folder for the typography to know where to reference. I have a small organization addiction so.. creator's choice)

*Quick note 2: I do not recommend changing to a new font or size with this, it won't look quite right. Of course, experiment away! This is just a small caution based on my own experimentation.

Now, to get to the actual fun part...

Step 3.1: Duplicate the first text layer. For this gif, it's the one that says "it didn't change anything". Once you duplicate it, you'll be turning it into a smart object. This is so the filter we apply works. Repeat for the second text layer. Lil gif below:

Quick note 3: I recommend going one text bit at a time, and also would tell you to put each typography layer into its own folder. This is really important for later, so doing it earlier is better.

Step 3.2: We will now apply the filter. To do this, you're going to click the smart object version of our text, then go to Filter → Stylize → Wind. For the gifset I made, I used Method → Blast and Direction → From the Right. Click "OK" and the filter will apply. Duplicate this for the other text layer.

Step 4: We now begin the keyframing. I highly recommend the rule of 0.3, which is when your transitions are over the span of multiples of 3 (i.e. if you start at frame 1 with 100% opacity, frame 3 will be at 0%). We'll be doing 6 frames from 100% to 0%, and vice versa, for this transition. This was the best time I found for this transition, but it's a matter of preference. Just follow that rule of 3.

Step 4.1: Click the smart layer of the text we made on the timeline, then click the little arrow on the left of the name of the layer. You'll see this:

See the little clock next to Opacity? Click it, and you get this lovely little yellow diamond. This is how we control the visibility of the Wind layer. It will start at 100%, keep it there.

Click the arrow on the right of the play button 6 times (aka get to the 6th frame), click the stopwatch again. While on this frame, and the yellow diamond clicked, change the opacity of the Wind layer to 0% It'll look like this:

You will repeat this, in reverse, at the end of the text layer.

Quick note 4: Sometimes, Photoshop is moody. To get the diamond on frame 30 (or whatever frame # the end of your text layer is), put it on the frame prior. You can then nudge that diamond over 1 frame. See below:

Repeat the process for the other text layer.

Step 5: We're basically done! Change your gif from video timeline to frames, maybe do a quick play through to make sure all is well.

Quick note 4 (it's the last one I promise): I have heard from many that when they work with keyframes, they end up with duplicate frames. I, personally, have not encountered this issue. I do not know if it is because of the version of Photoshop others are using, PC vs. Mac, or some other secret third thing. I recommend that, when you check your gif, verify if there are duplicate frames. The keyframe tutorial I linked earlier goes into further detail, and here is another lovely explanation from Nik, the master of all things keyframe transitions.

Step 5.1: Export, and give yourself a high five because you deserve it.

If you have any questions, don't hesitate to reach out! I'll try to clarify anything if needed. Happy giffing!

[theheroheart]

Quick GIF tutorial (Photoshop)

#holy shit this is perfection!!#i am so jealous of this set!#the coloring op THE COLORING!!! (original post)

alright @dontyouknowemma-itsyou and anyone interested, this was really easy to colour so I'm gonna give you a quick breakdown. (i didn't save the psd file?? so i'm redoing this i guess, but i did it on autopilot in the first place. i've been making gifs for over 15 years.)

GONNA INCLUDE A VIDEO AT THE END SHOWING OFF THE SETTINGS!!

General GIF stuff

This is in Photoshop CC. I extract a clip from a video as an MP4 file, which photoshop can open. (I use AviDemux for this, which is free, because it lets you save clips using 'copy' encoding for video output and still change from MKV to MP4 format - without losing any video quality, cause you're not re-encoding.)

Open that shit directly in photoshop as a video layer (just drag and drop), that lets you scan through it to check the colouring works overall. Convert the video layer to Smart Object, that lets you resize and edit it. (Do NOT open a full movie in Photoshop, it'll probably die and it has a max length anyway.)

Also all the colour adjustments are gonna be adjustment layers you can tweak and turn on/off whenever. There's a lil button at the bottom of the Layers window to add them quickly.

When we're done we're choosing a section of the video in the Timeline window and we're doing File->Export->Save For Web. 'Adaptive' (or selective) palette selection, 'pattern' style dithering.

Colouring

Curves layer to lighten. Just pull the curve up. Curves seem to give a much smoother lightening, since it mostly affects the middle, leaving the brights and the darks where they are.

Levels to make the darkest darks pure black, and the lightest lights pure white. Good for limiting GIF size. Don't overdo it though.

Colour balance!! My beloved, most important. So for the Shadows and Highlights, you're gonna move the sliders towards Cyan and Blue, but for the Midtones you're gonna do the opposite - towards Red and Yellow. This means you don't shift the overall colour of the picture, but trust me it does SO MUCH for the contrast and colour. I swear I do this for almost any edit, and also my art tbh. Also if the original clip is like very green or whatever, you can correct that here.

Selective colour. For this I did one thing. For 'Black' dropdown, I upped 'black' and 'yellow' sliders (the latter to counteract the blue in the darks). This in combination with:

Levels again. Bring in those darks, turn them pure black. Basically this does a couple things. It preserves GIF file size, by making sure the dark areas are static (file sizes mostly depends on pixels that are CHANGING). It ALSO makes the palette much more optimized, meaning you don't waste palette on the darks no one sees anyway, and instead uses them in the mid range colour variation, giving much smoother gradients. That's it!! That's all the colouring!!

EDIT: Uh I probably also had a Vibrance layer?? Idk. This just ups the saturation, but it's softer than upping Saturation. Makes the colours pop without overdoing it.

Other tips and tricks

Often I'll put a Smart Sharpen (50% amount, 0,5px radius) filter on the video layer, just to make it a bit crisper. Subtle but effective.

You can manually edit the palette when you save as a GIF, either to reduce file size, or because some colour areas look pixelly. See the video for how.

If your file size is huge but you don't want to shorten or resize, you can reduce the frame rate manually. To do this, FIRST save the GIF, then open the GIF you just saved. Go through in the Timeline window (which is now a Frame Animation rather than a Video Timeline), select every other frame, and delete them. When you do this, remember to select the rest of the frames and double their Frame Delay so you don't end up with a super speedy GIF. (You can also make a GIF slow-mo like this.)

Since the video is a smart object, I literally just resized it in between saving the different GIFs, to change composition between the different shots.

Selective Colour layer can be used for a lot of image tweaking. For example, if something is overly yellow or green, I may go to the Yellow and Green in dropdown and just reduce the yellow slider. (I usually then go to Red in dropdown and ADD some yellow to that, to balance out the reds to be less pink.) Or maybe the overall colours are nice but the blues are dull, so I'll just go to Blue/Cyan and tweak those specifically.

If you have a colouring you like that you want to use on lots of things, remember you can drag-and-drop layers between different images. You can also save a photoshop file with nothing but those layers, to use on later gifs and just tweak as needed. (You can also make Actions to automate stuff, but I won't go into that.)

How easy or hard something is to colour HUGELY depends on the original video, both lighting/colouring and video quality.

Finally the video showing settings!

This is like 5 minutes long and has no commentary or anything. This is mostly to show off where you find each individual thing, and what difference it makes in the colouring.

ANYWAY hope someone found this useful!!! ♥

[patrick-stewart]

Hi! I got asked if I have an icon tutorial so I thought I'd do my best to go through my (probably way too long) process :) I'm going to show how I made that icon up there 👆

When I first started making icons I used this great tutorial by @/strwrs and then slowly added my own preferences to make this chaotic process 💕

First for getting screencaps of things i normally just google "[name of show/movie] screencaps" but one of the ones I use a lot is this site.

1. Open the pic in photoshop and crop it

Here's the full image:

Here's where I'm cropping it:

I like to make the size of my icons 250x250 but it can be more of a preference thing, a lot of people use 200x200 or I've seen 100x100 too.

I also like to crop a little above the image sometimes to give more space above the head

2. Removing the background

Removing the background is way easier on animation than on real people sometimes so I can show 2 examples even though I do it the same way...

First I go to select > select and mask:

Then I use the quick selection tool to select as much of the head as i can and the brush tool to remove/re-add parts that got missed so it should look like this:

(is the quick selection tool great? not all the time but when it works well it's great 🤡)

For something like this where her hair has a lot of texture in it and it's difficult to get a good outline, I'll zoom in really far and use the brush tool to get as many of the big pieces as I can so it looks a little more natural when the background color is added

Sometimes there can be a white/black line around the icon that got missed from erasing the background and you can use the brush tool to erase that as well.

3. resizing and sharpening

Now everything should look like this:

I'm going to go to the right where my layers are at and create a new group by clicking on the folder at the bottom

Then I drag the layer mask up to link it to the group instead of just the image and drag the image into the folder:

Next I like to sharpen before I resize the image so I open the group and highlight the image layer and then go filter > convert for smart filters and then for sharpening: filter > sharpen > smart sharpen with these settings:

Now with the image layer still highlighted i go to image > image size and set it to 250x250

4. the fun part ✨

Now we can add the background color and everything else ✌️

I have a lot of previous templates saved to save me time so what I normally do is open a psd template I have then highlight the group layer i just made then right click > duplicate group and have the destination be the psd and then I can just change the colors of gradients i've already made (For this tutorial though I'll show you how I make the gradients/paint layers)

For coloring this is pretty much what my process usually looks like (im probably going way overboard with it but oh well lol) it really depends on the pic being used, some don't need to be colored as much.

I have found that over brightening/upping the vibrance isn't necessarily a bad thing sometimes (not all the time though) because of how small the icons are it kind of helps the image stand out more when they're used but it's up to you!

(I also put all the adjustment layers into one group because it gets a little chaotic if I don't)

Next we're going to make a gradient ✨ first i go to the adjustment fill button (?) and pick gradient

Then I just pick one of the generic photoshop options that kind of has the look I want ( it doesn't matter too much since it will be edited so it can be any color)

Now to change the color of the gradient click on the color part in the gradient section and you'll see this

I deleted the bottom middle square because I didn't want it, but to change the colors double click on the bottom left or right squares and a color wheel will pop up.

When I pick the lighter color i normally just go up to a lighter section above the darker color

This is the change i made, you can move the middle diamond slider to have the darker or lighter color be more prominent

Next is playing with the angle/scale until it's how you want it, these are what mine ended up being

I also normally adjust the angle so that the lightest part of the gradient is in the top corner where the light source is coming from in the icon pic to make it look more natural

Next I add a solid color layer over the coloring layers with a color that's similar to the background gradient color im using and switch to the brush tool with black paint and with the layer mask selected on the solid color layer paint over everything i don't want colored with black

Then I do a second solid color layer set to a lightish brown, normally on just the hair, to add a bit more contrast

then i set the color fill layer that matches the background to either overlay, soft light, or color (depending on which one looks best for the image) and adjust the opacity/fill to where I want it.

I always set the brown layer to soft light with the opacity at around 80%

And NOW just when you think I might be done...I'm not...because I have to make this process as long as possible 😂

Now I do another color fill layer but this time over the entire image group layer. I normally make the color a slightly lighter color than the darkest part of the background color, set it to soft light, lower the opacity/fill to about 50% or lower, (depending on how much it changes the pic) and then right click > create clipping mask so it only effects the image and not the background

This kind of just tints the image a little with the color to bring it together a little more

Now the icon looks like this:

You can add more fun stuff like doodles/background textures i've used these and these but there's a lot of resource blogs like @/completeresources and @/allresources that have long lists of different textures

If i wanted to add a texture though i would put it over the gradient layer and set it to overlay or soft light

And to add a doodle you just put it at the very top of everything and resize it/turn it using the move tool :)

Then you're done! you can go file > export > quick export as png and thats it 👏

Hopefully this makes sense! I've uploaded the template i made in the tutorial here if that's easier to follow but feel free to ask if you have any questions!

[galindaelphaba]

hi! would it be possible to post a tutorial of how you created the shapes in this set /post/753222419295158272 thank you :)

sure I made the gifset a while ago so don't have the psds saved but i decided to make a new gifset with a similar shape effect and show you how i made that :)

tutorial below the banner/cut

first start by making and colouring your base gif as you'd like. for the example i'm making today i'd like a pink gif.

for simplicity i'll put all the colouring layers in a group so it is easier to see what's going on with the shapes, but this is not a step i usually take.

once you've got your base gif ready search for the image/shape you would like to appear on your gif. in this case i searched for glinda's crown :)

make sure the image has no background and save it. if needed go to https://www.remove.bg/ and remove the background from the image then save it.

open your saved image in photoshop and drag it onto your gif. typically i drag it on the gray area outside the image canvas so it will land in the centre of the canvas.

if the image is too big resize it by using the transform function (ctrl +t)

right click the image layer and go to "Blending Options" (you can also do this by double clicking the layer (but not on the layer name as this will prompt renaming the layer)

go to color overlay and change the colour to white with blend mode normal and click ok

convert the new image layer to a smart object by right clicking and selecting the relevant option

change the blending mode of the new smart object to 'difference'

go back into blending options now and change the color overlay to the desired colour with the blending mode set to 'color'

at this point you can also add a stroke and drop shadow

this results in the below result

i noticed a bit of background missed from remove.bg

so i now add a layer mask and mask over the errant mark

and that's the basics of how to make a shape like the one in the gifset you linked. you can now add any text or other embellishments you may like.

a few other tips:

play around with your stroke settings, i did this a lot when making the so highschool gifset (e.g. i think the basketball one used the centre option)

the stroke option will outline what doesn't have a solid fill. to get each part of the basketball outlined like it is in the gifset i used an image like the first one below where the lines on the ball were also transparent to get the strokes i wanted (if that makes sense). if the whole image was solid, like the second image the outline would just be a circle basically.

in most cases the method i showed here is the best method, but for the so highschool book image i did something slightly different where instead of doing a straight smart object i also duplicated the shape on top with all the details left in. i applied the same effects to the bottom layer as above and on the duplicated layer also set that to difference and added a color overlay like the above

gives a result like this:

you can tweak how this looks a bit by using a selective colour layer clipped to the top layer. i wanted a bit more definition on the hat so i ended up with this after tweaking the neutral and blacks channels

overall my advice is to experiment and see what you like as that is what i basically do :)

[kitconnor]

https://www.tumblr.com/kitconnor/738913211394473984/usergif-new-year-new-fonts-day-1-layer absolutely loved this set 🩷 how did you make the second gif where it goes from color to b&w?

hello, and thank u !! it's a pretty basic process to follow but it can be effective if you're trying to add depth to something.

this is the gif, but this is the effect we're hoping to achieve:

i'm not going to cover every part of the process (ie. colouring, cropping, setting up your gif and blending skills) simply because i'm just trying to achieve the colour to b&w effect ! if you want a guide on anything else, please feel free to ask :)

please note this will guide you through timeline and not frames !

start by doing your basic crop and colouring and then duplicate one gif onto the other for blending. here you can see i'm about to use the layer mask + brush tool to achieve a smooth blend. the top layer (inej) is set on screen.

so after getting everything into position, i'll add a layer mask and then use both the gradient tool (set to black) and the brush tool (also set to black) to get the right blend.

(note: i went back and re-cropped my kaz layer and reordered my layers. try and blend on empty space and not overtop of the subjects faces !)

depending on which gif you choose for b&w, you may need to clip the black and white layer. for instance in the gif that was in the set:

lucy gray is the top layer, and i only needed to clip it to her. to get a clipping mask, right click on a layer and there should be an option called 'create clipping mask', like below !

but back to the main guide 😭 now that i've blended and decided which gif will go to b&w, add that layer above whichever gif you chose. kaz is the bottom layer in this gif so i don't need to worry about the clipping mask.

at this point now (yes i've added different layers here and there, but that's natural) you need to move your b&w to whatever point you need it to come in. however, don't move it to the very end. somewhere around halfway or 3/4 will work best.

after moving the b&w layer, it comes in halfway, but it's clunky. to fix that you'll use a fade transition. fade transitions are found in this little button (a half grey half white box cut diagonally)

then you'll click and drag the fade transition over the b&w layer and drag on the fade transition (NOT the gif) to alter the duration. that's the transition itself below:

and then it looks like this :)

it might take a few tries to get it into the right timing where it's not too quick or too slow. also note that the transition bumps up the gif size, so keep the gif around 30-40 frames if you're cropping at 540x540 like me !

[dayslily]

hi nic!! do u have a tutorial on making gif packs?? i've been trying to look for tutorials and i think i just overwhelmed myself so i dont know where to start :((

omg hi!! i know a tutorial for this method exists, but i cannot seem to find it 😭 i'll go ahead & make one for you ! beneath the cut, you'll find my gifmaking process + all my favorite gif resources. i think something good to note is that every gifmaker i know does it a little differently, so you may prefer other methods like screencap clipping or video-to-layers. i think these tutorials by pochunts would be super helpful if you wanted to explore other options <3 here's the gif i made in the tutorial btw :p

how to make gifs using photoshop's video timeline (+ extra resources):

(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!!

11) uploading your gif packs. i think hosting directly on tumblr is going to give you the best loading time. and by that i do mean, just uploading gifs to a tumblr page 🙂‍↕️ if you choose to use alternate hosting sites like imgbb or gifyu, make sure you back your gifs up with a zip file on google drive.

[gemmascouts]

TILE TRANSITION TUTORIAL

a couple of people have asked me for a tutorial on how I did the penultimate gif in this set, so here goes! this is my first tutorial, so please feel free to reach out with further questions if anything's unclear.

note: this tutorial assumes you know the basics of gifmaking, can create the base gifs, and are familiar with timeline mode.

STEP ONE: create the base gifs! I'd recommend staying between 25-40 frames for each gif, since the transitions we'll use later tend to increase gif sizes. these are the ones I'll be using for this tutorial:

STEP TWO: create the guide layouts for both base gifs. for this panel, I chose a 4x4 grid — I would recommend keeping the number of "tiles" low because it can get tedious, but have a minimum of 9 (3x3 grid).

now your canvas should look like this:

STEP THREE: create the tiles. this is where the going gets rough; there might be easier ways to do this that I couldn't think of 😭 if there are any please send me an ask!

essentially, in this step we'll cut up the base gifs into smaller squares so that each tile can be manipulated separately when we put both gifs together. to do this, first create a square using the rectangle tool and the guides. then duplicate the base gif, move it above the square, apply a clipping mask, and then convert the clipped gif and square (selected in the image below) into one smart object.

ALTERNATELY: you could duplicate the original base gif and use layer masks to isolate tiles. create a layer mask for the duplicated gif layer and, with the layer mask selected, drag your mouse over a square (using the guide layout) and press delete. then press ctrl/cmd + i to invert the layer mask so that the gif only shows in the square of your choosing.

now repeat until you've got the entire gif in tiles, and do the same for the other gif!

since the transition effect is achieved by staggering the crossfades for each tile of the final gif, you can cheat by having multiple tiles "flip" at a time, ideally no more than four. this means you need to cut the base gif up into fewer pieces. to do this, simply draw multiple squares instead of one and then merge the shapes, before duplicating and clipping the gif onto them.

if you do this, it's essential to remember that you have to divide both gifs up in the exact same way. each piece of the b/w gif has to correspond to a piece of the purple gif!

this is what the layers look like for each gif once I'm done:

I have them lettered so that it'll be easier to match them up in the next step.

STEP FOUR: this is the complicated bit that took me two days to figure out. I'll do my best to explain but don't hesitate to reach out if something isn't clear!

to begin, open up a new psd and import both base gifs into it. (remember to click "create video timeline" and ensure that your gifs are all in order before proceeding.)

now, the trickiest part about this transition is ensuring that all the little tiles sync up so that the larger gif is coherent. so first we'll create some markers (just empty layers) to ensure that everything lines up as it should. — marker 1: at about halfway through the first gif (b/w in this case) — marker 2: at about a quarter of the gif length — marker 3: close to the end of the gifs

at this point we're ready to start bringing in the tiles. I'm going to delete the base gifs from this new psd just to keep things cleaner!

first thing to do is import my b/w tile. move the timeline slider over to marker 1 and split the first gif. (if it helps, rename the split gifs and add (start) and (end) to the two halves.) then, move the (end) half to the beginning of the timeline, and the (start) half to line up with marker 3.

the purple tile is easier to manage. simply import it into the psd and line it up with marker 2.

your timeline should now look like this:

notice the overlap between the gifs at their beginnings and ends — this is where you'll be able to cascade the tiles flipping, so it helps to have a significant amount of overlap.

crop the three gifs for this tile as you see fit! since this is the first tile I want to flip from b/w to purple, I'll crop gif 1a (end) all the way to the current position of the timeline slider (red line with blue tip) and leave the beginning of gif 2a uncropped. for the flip from purple to b/w, I'll crop both gifs a bit.

once that's done, drag all three gifs onto the same level in timeline so they form a video group. your timeline should look something like this:

now you just repeat the process for all the other tiles! as long as you made sure that all the tiles in one gif correspond with tiles in the other gif in step three, this should be a fairly painless process. make sure to crop the starts/ends of the gifs separately so that they don't all flip together.

this is what my layers look once I've done all the tiles:

and the gif!

STEP FIVE: transitions! click on the half-white square (top right of the left column in the timeline, beside the scissors) and select the crossfade transition, then drag it between two gifs in a video group. it should create a two-triangle symbol and shorten the overall length of the video group.

apply the transition to all the tile flips, ensuring that the duration of all transitions is constant. this can sometimes be tricky because ps likes to change the duration of each transition, so right click on the transition symbol and manually change all your transition durations to be the same.

your layers should now look something like this:

STEP SIX: draw the grid. bring back the guide layout from step two and using the line tool (I like 2px thickness), trace the grid. adjust opacity as you see fit (50-80% is usually a good idea), so that the canvas looks like this:

STEP SEVEN: export and celebrate! you're done!

I hope this tutorial made sense and was easy to follow, and happy giffing! my inbox is always open for any questions <3

[anyataylorjoys]

Someone asked me how I created the fade transition in this gifset which I’ll try to explain in the most comprehensive way that I can. If you've never done something like this before, I suggest reading through the full tutorial before attempting it so you know what you'll need to plan for.

To follow, you should have:

basic knowledge of how to make gifs in photoshop

some familiarity with the concept of how keyframes work

patience

Difficulty level: Moderate/advanced

Prep + overview

First and foremost, make the two gifs you'll be using. Both will need to have about the same amount of frames.

For ref the gif in my example is 540x540.

I recommend around 60-70 frames max total for a big gif, which can be pushing it if both are in color, then I would aim for 50-60. My gif has a total of 74 frames which I finessed using lossy and this will be explained in Part 4.

⚠️ IMPORTANT: when overlaying two or more gifs and when using key frames, you MUST set your frame delay to 0.03 fps for each gif, which can be changed to 0.05 fps or anything else that you want after converting the combined canvas back into frames. But both gifs have to be set to 0.03 before you convert them to timeline to avoid duplicated frames that don't match up, resulting in an unpleasantly choppy finish.

Part 1: Getting Started

Drag one of your gifs onto the other so they're both on the same canvas.

The gif that your canvas is fading FROM (Gif 1) should be on top of the gif it is fading INTO (Gif 2).

And here's a visual of the order in which your layers should appear by the end of this tutorial, so you know what you're working toward achieving:

Part 2: Creating the grid

Go to: View > Guides > New guide layout

I chose 5 columns and 5 rows to get the result of 25 squares.

The more rows and columns you choose, the more work you'll have to do, and the faster your squares will have to fade out so keep that in mind. I wouldn't recommend any more than 25 squares for this type of transition.

To save time, duplicate the line you've created 3 more times, or as many times as needed (key shortcut: CMD +J) and move each one to align with the guides both horizontally and vertically. You won't need to recreate the lines on the edges of the canvas, only the ones that will show.

After you complete this step, you will no longer need the guides so you can go back in and clear them.

Follow the same duplicating process for the squares with the rectangle tool using the lines you've created.

Align the squares inside the grid lines. The squares should not overlap the lines but fit precisely inside them.

This might take a few tries for each because although to the eye, the squares look all exactly the same size, you'll notice that if you try to use the same duplicated square for every single one without alterations, many of them will be a few pixels off and you'll have to transform the paths to fit.

To do this go to edit > transform path and hold down the command key with the control key as you move one edge to fill the space.

Once you're done, put all the squares in their separate group, which needs to be sandwiched between Gif 1 and Gif 2.

Right click Gif 1 and choose "create clipping mask" from the drop down to mask it to the squares group. This step is super important.

After this point, I also took the opacity of the line groups down to about 40% so the lines wouldn't be so bold. Doing this revealed some squares that needed fixing so even if you aren't going dim the lines, I recommend clicking off the visibility of the lines for a moment to make sure everything is covered properly.

Part 3A: Prep For Key framing

I wanted my squares to fade out in a random-like fashion and if you want the same effect, you will have to decide which squares you want to fade out first, or reversely, which parts of Gif 2 you want to be revealed first.

In order to see what's going on underneath, I made Gif 1 invisible and turned down the opacity of the squares group.

If you want text underneath to be revealed when the squares fade away, I would add that now, and place the text group above Gif 2, but under the squares group.

Make a mental note that where your text is placed and the order in which it will be revealed is also something you will have to plan for.

With the move tool, click on the first square you want to fade out. Every time you click on a square, it will reveal itself in your layers.

I chose A3 to be the first square to fade and I'm gonna move this one to the very top of all the other square layers.

So if I click on D2 next, that layer would need to be moved under the A3 layer and so on. You'll go back and forth between doing this and adding key frames to each one. As you go along, it's crucial that you put them in order from top to bottom and highly suggested that you rename the layers (numerically for example) which will make it easier to see where you've left off as your dragging the layers into place.

Part 3B: Adding the Keyframes

This is where we enter the gates of hell things become tedious.

Open up the squares group in the timeline panel so you can see all the clips.

Here is my example of the general pattern that's followed and its corresponding layers of what you want to achieve when you're finished:

So let’s try it!

Expand the control time magnification all the way to the right so you can see every frame per second.

As shown in Part 3A, select your first chosen square.

Where you place the time-indicator on the panel will indicate the placement of the keyframe. Click on the clock next to opacity to place your first keyframe.

Move the time-indicator over 3 frames and place the next key frame.

Things to consider before moving forward:

Where you place your very first keyframe will be detrimental. If you're using a lot of squares like I did, you may have to start the transition sooner than preferred.

If you're doing 25 squares, the key frames will have to be more condensed which means more overlapping because more frames are required to finish the transition, verses if you're only using a 9-squared grid. See Part 4 for more detailed examples of this.

The opacity will remain at 100% for every initial key frame, and the second one will be at 0%.

Instead of creating two keyframes like this and changing the opacities for every single clip, you can copy the keyframes and paste them onto the other clips by click-dragging your mouse over both of them and they'll both turn yellow. Then right click one of the keyframes and hit copy.

Now drop down to your next clip, move your time-indicator if necessary to the spot where the first keyframe will start and click the clock to create one. Then right click it and hit "paste".

Tip: When you have both keyframes selected, you can also move them side to side by click-dragging one of them while both are highlighted.

Your full repetitive process in steps will go as follows:

click on square of choice on the canvas

drag that square layer to the top under the last renamed

in timeline panel: drop down to next clip, move time-indicator tick to your chosen spot for the next keyframe

create new keyframe

right click new keyframe & paste copied keyframes

repeat until you've done this with every square in the group

Now you can change the opacity of your squares layer group back to 100% and turn on the visibility of Gif 1. Then hit play to see the magic happen.

PART 4: Finished examples

Example 1

the transition starts too soon Cause: initial keyframe was placed at frame 0

the squares fade away too quickly Cause: overlapping keyframes, seen below. (this may be the ideal way to go with more squares, but for only 9, it's too fast)

Example 2

more frame time for first gif

transition wraps up at a good point Cause: in this instance, the first keyframe was placed 9 frames in, and the keyframes are not overlapping. The sequential pair starts where the last pair ended, creating a slower fade of each square.

Part 5: Final Tips and Saving

You can dl my save action here which will convert everything back into frames, change the frame rate to 0.05 and open the export window so you can see the size of the gif immediately.

If it's over 10gb, one way to finesse this is by use of lossy. By definition, lossy “compresses by removing background data” and therefore quality can be lost when pushed too far. But for most gifs, I have not noticed a deterioration in quality at all when saving with lossy until you start getting into 15-20 or higher, then it will start eating away at your gif so keep it minimal.

If you've done this and your gif is losing a noticeable amount of quality and you still haven’t gotten it below 10mb, you will have no choice but to start deleting frames.

When it comes to transitions like this one, sometimes you can't spare a single frame and if this is the case, you will have to return to the timeline state in your history and condense the key frames to fade out quicker so you can shorten the gif. You should always save a history point before converting so you have a bookmark to go back to in case this happens.

That's pretty much it, free to shoot me an ask on here or on @jugheadjones with any questions.