nothing but my gay intuition

1. Blog customization

The first thing you should do as soon as you land on Tumblr is add a profile picture and header before you interact with people. You want to be distinguishable from bots and therefore avoid getting blocked. You can also add anything to your bio, there's no character limit. Some folks add their name and pronouns, but there are no rules about that. There are also no rules about profile pictures. It can be a picture of you, a picture of your dog, a picture of a rock, or a picture of your favorite character. If you plan on staying on the fandom side, you might notice that a lot of fandom blogs have colorful-looking icons (a cutout of a character on a colorful background), for these icons and also headers I suggest checking out source blogs that make those icons. For starters, @iconheadersource is a goldmine where you definitely going to find something that’d suit you and your blog.

Tumblr on mobile and Tumblr on desktop are two different creatures when it comes to customization. On the desktop, you can customize your blog with coding (HTML + JS). Now Bob will demonstrate to us some examples of blogs on desktop.

If you want to customize your desktop blog, I suggest checking out @phantomcodes and @glenthemes for the codes.

Tutorial on how to install themes

Using javascript on Tumblr pages

2. Search Engine

Nice! You've made your blog look pretty! Now, let's shift our focus to the search engine and ways to discover content. As mentioned earlier, you curate your dashboard by looking for things you enjoy and like. Search using hashtags or the names of your interests (TV shows, movies, birds, music, etc.) to find your piece of cake. For instance, folks who create posts about TV shows you like use tags to ensure their posts reach others interested in the same thing. So, let's go ahead and search for something right now.

Once you search for that specific tag, you are redirected to the corresponding tag page. Here, you can see that posts are sorted by "Latest" or "Top" (indicating posts with the most notes). On the right side, you will find related tags and blogs which are frequently using the searched tag. By following the tag, both the tag itself and the posts tagged with it will automatically appear on your dashboard in the "Your tags" section. You have the option to filter tags according to your preferences. In the settings, you can choose to block specific tags if you prefer not to see content related to some particular topics.

The only method for sharing posts and content on this website is through reblogging. On Tumblr, reposting others' content, including art, gifs, and fics, is not accepted. Reposting means downloading art, gifs, etc., creating your own post, and then sharing it. And that's a big no-no, strongly discouraged. Your likes essentially function as bookmarks, and you have the option to set them to be private. When you save something, it doesn't appear on your friends' dashboards.

We don't censor things here, and I advise you not to do so too. If you need to mention a word that might be potentially triggering or could be flagged on another social media, feel free to say it. Many users have specific topics and tags filtered out, so if you use variations like "K!tKat" instead of "KitKat" in the tags, it can bypass the tag filter, potentially causing more harm as people will see content that triggers them. And remember to always tag posts that have flickering or flashing!!!

If you want to organize your reblogs or make comments on a reblog, use the tags section and not the comments section itself. This is called "#add tags." Feel free to type whatever you want, but keep in mind that the original poster receives notifications when someone reblogs their post and adds tags. Yes, all tags are visible to us.

Okay, so let's quickly recap this information with the help of our dear friend, Bob.

3. Social interactions

So let's move on to one of the crucial topics - how to make friends on Tumblr? Personally, I don't think there's one particular formula for that. Sometimes you just see a funny bloke posting about something as random as desert rain frogs, grab them, and go "You're my friend now" and that's how you become mutuals. 

Tumblr doesn't have the supposed hierarchy, and you don't have to listen to anyone who tells you otherwise, you curate your own experience and blocking is pretty normalized here. Notes and followers (which are private for everyone) don't really matter, stick to your beliefs and your vibe and you'll be fine. We're all equal losers here.

However, there are other, more common ways to become friends with someone. You can start by reblogging someone's post, adding tags to the reblog, and then following the person. Create your own posts, tag them to ensure they reach the folks who are interested in the same things as you, and participate in fandom events and challenges if you're into that. Interact with people you want to befriend, message them, send them asks. You will eventually find your crowd. You'll also find swifties, and fans of supernatural who never moved on from that destiel love confession four years ago, they also can be your friends, at some point, you will become friends and chill with each other. Be open to new interests to make sure your dashboard is not dull and boring.

4. Fandom / Gifmaking

Fandoms play a significant role on Tumblr, they're closely tied with gifmaking. As a fellow creature of fandom, I'm adding this part because we don't gatekeep - more gifmakers and fandom enthusiasts mean a better fandom experience. As I mentioned earlier, everything has its tag, making it easy to find your favorite TV show fandom by searching for the tag. This is also how you can connect with people who share an interest in that specific TV show. Upon entering the tag, you'll stumble upon numerous moving pictures – these are GIFs. People create GIFs of everything, from their "blorbo" (the term for favorite character) to beloved ships and favorite moments. There are also plenty of creative GIFs with different coloring and complicated effects. And the best part? You can do it too!

There are a lot of ways to make GIFs. Some people use Photoshop, and some use Photopea which is an excellent accessible option. I'll be linking posts for Photoshop under this text. For Photopea tutorials and guides, please check out @photopeablr.

I've been making GIFs for three years at this point, and those are the tutorials I used when I was just starting out:

how to make a gif:

basic gif making tutorial + mvp player installation 

gifmaking for beginners

how to install MVP player on a PC

film downloading & screen-capping tips

correct photoset dimensions 

coloring

how to fix orange-washed characters

how to: coloring east & southeast asian celebs

channel mixer

colored background

color manipulation

vibrant coloring

how to brighten dark scenes

color isolation

effects

glitch effect

blending

crossfade transition

gradient effect in the text

gradient text

red colour accent on the b&w gifs

how to add a gif in a template

blurring gif backgrounds

using templates

text

text tutorial 1

font resources

understanding fonts and typefaces

split text

subtitles

other

icon tutorial

gif headers 

For more tutorials, inspirations, and resources - please check out @usergif. It's a good source blog for all gifmakers.

Wait but what's a source blog? These are blogs that center around a specific theme, creating content for a particular topic. They are managed by multiple editors, these blogs track their own tags to reblog content related to the theme. They can be source blogs dedicated to gifmaking (just like @usergif), a TV show, a movie, a character, a celebrity, a sports team, or literally anything else. Typically, these blogs incorporate terms like "network," "source," "central," "creators," "hub," or "daily" in their usernames, making them easily distinguishable from regular personal blogs. Examples of source blogs that come to my mind right now are @dailyanakin, @heartstoppercentral, and @nancywheelercentral.

Let's also talk about tracking tags, which are often included in blogs's bios, whether they're from source blogs or solo gifmakers. You can add these tags to your posts when creating a gifset related to a specific source blog or something you know a particular gifmaker would appreciate. Basically, the gifmaker can search their tracking tag, much like a regular Tumblr tag, and view the most recent sets in which someone used their tag.

The last thing I want to talk about are usernames, and main and side blogs. On Tumblr, we have two types of blogs: the main blog and the side blog. The main blog is the initial blog created when you sign up for your account. This blog has full functionality and all features, allowing you to follow other blogs, like posts, and send asks to other blogs. In addition to the main blog, you can create side blogs on your account. Side blogs lack some of the features of main blogs; you can't like posts, follow other blogs, or send asks from a side blog. They have slightly different functionality – a side blog can be password-protected, have multiple users, and allow you to send direct messages to people. Other users can follow your side blog, and you can receive asks from them.

Many people use side blogs as URL holders. For instance, when a new TV show is announced, someone might be the quickest to save all canonical character names. You can then message that empty side blog to inquire if they're willing to trade that specific URL or if it's available for a giveaway. Canonical URLs are often challenging to obtain, so many people add letters in between or at the end or use symbols like "-", and they also mix names and surnames of different characters.

5. The End

Okay, so we've just covered how Tumblr works, how fandoms operate, and how to get into gifmaking. I hope this guide by me and Bob has been helpful to you. If you have any questions, feel free to send them to my ask box or simply ask Bob. I hope you enjoy your stay here, and that your experience with this website will be a positive one.

Download your video.

firstly, start by downloading your video with 4k video downloader. (<- this will lead directly to a dl of 4k video downloader if you don't have it already! link is all safe and official <3) i can't really think of any other downloader because i haven't used any apart from this one. it's safe and secure and does a really good job.

you'll want to choose the 1080p option that is the BIGGER file amount. not every video will have that, but i believe that the bigger file size is the youtube premium 1080p. take what you can get with them 😭

2. Load frames, crop, convert to smart object...

just get your normal prep work done! make sure to leave out sharpening. you should essentially just be here:

(if my process looks a bit odd or if, on the other hand, you'd like to know my process, you can check that here.)

3. sharpening.

THIS is the point that changes how your youtube file comes out. often times, you'll find the gif comes out with chunks, squares and overall poor quality. kind of like if i used my regular sharpening:

chunky! gross! trashy! i'm seeing too many pixels and things aren't looking the right way that i'd like. (tbh, it's not the worst i've seen - but you can definitely notice when there's light.) if i went on as it is now and continued to colour it, it would continue to look bad.

so, here's what you'll do.

i use multiple sharpening actions, for different purposes: one for hq downloads, so any movies, tv or downloaded/4k music videos, one making icons and the other for lower quality media and photos. the one that i typically use for youtube quality is @/anyataylorjoy's sharpening action (which many gifmakers use, so i wouldn't be surprised if you do already have it!) which is what you'll use. apply the action, using the 'sharper' lot.

^ that's the settings.

4. sharpening pt 2. (noise)

now, you'll need to add noise to offset how harsh the rest of the gif still comes up.

apply these exact settings onto the gif and ensure that monochromatic is enabled.

sometimes, 2% noise might make it look worse, or not be enough. i personally wouldn't go to anything more than 3%, (i don't think you'll ever want to use 3%) and wouldn't go lower than 1%.

it's grainy looking at the moment, just as is. from here, i'll colour it, and then if i think it's no good, i'll go back and clear the noise filter and toggle it. that's just how the process works, don't stress if it doesn't always go your way 😭 that's just gifmaking!

here's the final product!

and here's another example too, i know this one has a lot going on colour wise, so it can be good to look at it working on something with less bright colours:

as compared to before! before shows the gif was really smooth, as compared to in chappell's, were the lighting was just kind of messing with everything. you're more likely to come across videos that are that weird smooth quality, so i'd say that 7 times out of 10 you'll be applying these settings to something more along the lines of doechii's!

the font used here is called Nunito from google fonts

everything is broken up into folders + all of the layers are labeled

the badges are found under the boxes folder

each hypesquad badge is it's own layer, but the rest are merged together

all of the emojis used here are from the apple color emoji font family

i made this template myself, so all i ask is that you don't claim as your own and you give proper credit if you end up using it!

this template is a modified version of the original one i made to make my gifs, as the original file was very big and confusing to navigate. if there are any issues or anything seems confusing, feel free to shoot me an ask at any time and i will do my best to help!

the link to download the template is here.

for this i tried to find light scenes. the lighter the background of a scene, the easier to create a silhouette of the character. so this scene of arthur getting crowned has a white background and with a gradient map, black selective color and heavy levels it became a silhouette. the gif on top, i used this levels adjustment

above my normal coloring, to make the contrast as popping as i could.

i assume this is the one you were asking about? this gif took me 5 hours in itself, like truly anon i went on a journey. these two scenes i used have mostly black backgrounds, so with coloring, a solid black background underneath, blending and some solid color at tiny parts the background was popping out, i did it.

this one was easy enough, that arthur scene is very basic to use for these kinds of gifsets. light background, back shot, easy to do work with gradient maps. i don't usually use exposure, but i used it for this one to tone down his head more. also i used white solid color set to soft light on his left so the text would be more visible so i wanted the gif to look more contrasted.

my dear anon, this is what the layers of this one look like. i'm scared to even look 😂 from what i remember for the boat, i again used big levels layers, solid black color layers set to soft light and normal for corners and basically painted it. you see that it doesn't move a lot so it was possible. oh i also deleted a lot of parts around it, zoomed in a lot to find missing spots, this one was work. its blending mode was screen.

this one was tricky because i had to add the whole gif with 3 gifs inside the colin one. that scene is from the living and the dead and it had a light background. so a mix of gradient maps and levels again. black selective color didn't work well here because it was fucking up the background of the gif, but black selective color in general is very tricky. it can ruin a gif a lot so only use it when it's an emergency.

PHASE 1: THE ASSETS

1.1 – Download fonts. These are the fonts used for all assets I've included in my template: – SF Pro or SF Pro Display (Regular, Medium, Bold): Either version works, they look nearly identical. You can download directly from https://developer.apple.com/fonts/ or easily find it via Google – Bebas Neue: Free on Google Fonts, Adobe Fonts, and dafont – Times New Roman (Bold): Should be a default font in Photoshop

Make sure to download and install any of the fonts you don't already have before opening my template. That way, once you open the template file, all the settings (font size, weight, spacing, color, opacity, etc.) are as intended.

1.2 – Download my template. Before you use my template, all I ask is that you don't claim or redistribute it as your own and that you give me proper credit in the caption of your post. Making these iPhone gifsets takes me a longgg time and turning this layout into a template took several hours too.

DOWNLOAD TEMPLATE VIA KO-FI ← This template is completely free to download (just enter $0), but if you feel inclined to tip me, I appreciate you! 💖

BTW this template also includes some of my frequently used icons!

NOTE: If, for some reason, you open the template and see the pop-up shown below, click "NO" — otherwise, the fonts will be all messed up:

And if you see this triangle with an exclamation point by a text layer, don't double-click it — it'll mess up the font as well:

PHASE 2: THE GIFS

I'm just going to briefly go over gif sizes and my recommendations. Also, keep in mind when grabbing your scenes, you'll want all of these gifs to be the same amount of frames.

2.1 – Background Gif: 540 x 540 px. I recommend this size so you have a good amount of visibility for the gif behind the iPhone wallpaper. I also recommend making this black and white (or in my case, black and white with a slight blue tint — idk I just like the way it looks) so the wallpaper coloring can stand out.

2.2 – Wallpaper Gif: 230 (w) x 500 (h) px. Keep in mind the very narrow dimensions of the wallpaper! And also keep in mind that you'll have a bunch of apps and widgets covering the image. I try to use wide shots (or layer my clips into looking like wide shots). Also, keep in mind your color scheme for your set and your character's aesthetic! I tend to focus on one or two colors for the wallpaper.

I usually position the wallpaper to the side with 20px bumpers, so there's lots of space to see the background:

2.3 – Large Photo Widget Gif: 201 (w) x 96 (h) px.

2.4 – Small Photo Widget Gif: 94 x 94 px.

PHASE 3: THE TEMPLATE – "IPHONE" FOLDER

In this section, I'll try to quickly walk you through how to use this template and some bits that may require extra instructions. I'll be going through each folder from top to bottom.

3.1 – Status Bar. Time, Service, and WiFi are pretty self-explanatory. In the Battery folder, you can use the shape tool to adjust the shape layers labeled "Fill (Adjustable Shape!)" to customize the battery level.

3.2 – Message Notification. Again, these are pretty self-explanatory. I've already masked the circle for the contact photo, so you can simply import any photo and use the transform tool to shrink it down. The circle is 24x24 px. If you don't want to use a photo, there's another folder called Default Initials.

If your message text can't fit the text box, the message should end with ellipses which is how iOS caps off long texts.

3.3 – Blurred Banner (IMPORTANT) This folder is easy to miss because there's only one placeholder layer in there. On iPhones, the area behind a banner notification and the dock get blurred (including the wallpaper and any apps).

What to do: Make a duplicate of the apps in Row 1 and/or widgets that intersect the message banner, convert them all into one smart object, apply a Gaussian Blur filter (Radius: 3.0 pixels) on the smart object, and move the smart object into this masked folder!

(There's another masked folder in the Wallpaper folder for the dock which I'll go over in that section.)

3.4 – Apps Turn off the yellow guide if you don't need it to keep things aligned and turn off layers you don't need by clicking the eye icon. Replace the "App" placeholder text with your app name, change the color or gradient of the square to compliment your color scheme, and add your custom app icon overlay!

If you can't find an app icon you need from the ones I provided, flaticon.com is a great resource. Also, if you can only find the filled version of an icon, check out this tutorial for how to make any text or shape into an outline.

Also, each app folder has 4 notification bubble options (1-4 digits). Again, you can toggle these on and off as you need!

3.5 – Big Widgets I like using these when my wallpaper has A LOT of negative space to fill. I included the Photos and Books widgets in my template, but there are lots of widgets available on iPhones. You can check some of the other ones I've done here, or if you have an iPhone, simply try adding some widgets to your phone!

There are also widgets bigger than these, but they would take up half of the phone screen which is why I don't use them for these edits.

3.6 – Small Widgets The only thing I'll say about these — because they're pretty straight forward — is there are a lot more weather themes than I included in my template. Also, if you set your character's phone to evening, the weather widget will show a dark background (sometimes with stars), so keep that in mind.

Speaking of, I've included Light Modes and Dark Modes for, I think, every applicable widget.

3.7 – Page Dots These barely perceptible dots indicate that your character has more pages of apps than shown in your gifset (so if an anon tries to come at you, you can just say "it's on the next page of apps" /j /lh)

3.8 – Dock Again, the dock has notification bubble options and I've included the default app designs, custom filled designs, and custom outlined designs for iMessage, Phone, Email, and Safari (there's also a FaceTime alternative if that's how your character rolls). These are usually the apps people keep in their Dock, but this is fully customizable too. So, if your character is, like, super obsessed with Candy Crush or something and needs it in thumb's reach — you can put it in the dock.

3.9 – Wallpaper This whole folder is masked already to a 230x500 px rounded rectangle.

Inside, you'll find another "Blurred Portion" folder for the area behind the message banner notification and the dock.

What to do: Duplicate your gif layer and place it in this folder, remove any sharpening filters, and apply a Gaussian Blur filter (Radius: 3.0 px). Be sure to add any coloring/adjustment layers ABOVE this folder and your original sharpened gif layer.

PHASE 4: EXPORT

We made it!

I hope this template makes it super easy for you to recreate this layout! If you decide to try it out, feel free to tag me with #usernik.

step one: create your base gif

as always before you can start any gifset, you need to pick what scenes you want. i often pick several different moments and experiment with what works best, some scenes will just perfectly meld together while others will be trickier.

you want to firstly select a ‘base gif’, this is the gif that you’re going to layer your other scenes onto. it’s helpful to have a gif where you can identify a darker area where scenes might be able to be blended onto. silhouettes, side-profiles and shots where you can see a portion of the body are an ideal place to start, but you can use any scene where there is a darker area in contrast to the rest. 

for example, i picked this shot as my ‘base’:

in this shot, there are darker areas which standout, her body particularly below the shoulders but also in her hair. this provides a great ‘base’ for holding other scenes.

i’m going to colour my base gif in the way i usually would (i'm not going to go into details here, but if you want to know how i colour my gifs i have a tutorial here) but making an effort to ensure the blacks are thoroughly darkened (you can do this by adding a selective colours > black layer) and i’m done with my base gif:

step two: create your overlaying gif

next, you want to create your overlaying gif. personally i try to avoid using very light scenes as these can take a lot more work to blend in. if this is your first time blending i’d definitely recommend using a scene with a neutral backdrop, or even more ideally a dark backdrop, as this will just more seamlessly work with your base gif.

so, i’ve picked my first overlay scene as the mountain pathway, this will add a bit of texture to my gif and is fairly ‘neutral’ so should blend in well. i’m going to size and colour this as a separate gif with the same purple tones, then create a new folder (see red circle in screenshot) and drag my entire gif into it:

then i’m going to add a vector mask, to do this make sure you’ve selected the group and press this button highlighted in the screenshot:

step three: blending your gifs

now you’re ready to blend! from here, you want to just drag and drop your overlaying gif folder on top of the base gif, then set your overlaying gif folder to ‘screen’ or ‘lighten’ (i usually use screen, but sometimes lighten depending on the scenes - see what looks best!). it now looks like this:

the obvious issue here is that the overlay has taken over her face. so, we’re going to select that vector mask we added to the ‘overlaying gif’ folder, grab a black paint brush, and just brush over her face. this will remove the overlay from that area. 

i use quite a large soft brush for this (around 200px), the larger you use the ‘smoother’ the transition you’ll get. the smaller the brush the harsher your transition will be. this is the part that takes practice, but the beauty of using a vector mask is that you can grab the eraser tool and erase any of the paint strokes you’ve just done to bring the overlay back. by the end my canvas and layer mask look like this:

from this we can see i’ve blocked out the overlay from the ‘top’ of the gif and concentrated it so it just spreads over her shoulders. this captures the overlay in the space i outlined on the base gif as my ‘blending space’ earlier. i’ve also blacked out the overlay on the right hand side as i want to put another gif in this space. at this point the gif is looking like this:

i think my ‘top tip’ with blending is to leave little details to make the transition between the two gifs more natural. for example, you can see there are still patches of the mountain moving up her neck. i could black these out so the mountain scene is just confined to her body, but in leaving it there is creates more of a transition. these little background details of the scene you’re overlaying can really add to the overall texture of your base gif, and for that reason don’t get too hung up on the ‘details’ of making sure your gif is limited to an exact space. 

optional step four: adding more overlay gifs

for this gif i also added the dragon on the right hand side. you don’t have to be limited to overlaying two scenes and in fact, sometimes a nice idea is to use a more ‘landscape’ shot to add texture to your blended gif. to add more, i repeated step two to colour the shot i wanted, dragged this in its own folder on top of all my other blended gifs and set it to screen again:

i repeated the same steps in step three to black out the background, particularly concentrating in removing the line that we can see where the shot finishes. because in this shot the dragon’s head is actually partially cut off by the top, i was very careful with positioning this overlay and used a smaller black brush above the head. this positioning allowed it to look as if the overlay was giving way to yennefer’s face, rather than the shot cutting it off:

and that’s it, i’m done with my gif! this was a nice straightforward blend, but some scenes may not work as easily, which is where we turn to...

step five: using a black paint layer to create overlay space

sometimes your gif doesn’t have an easily blend-able space. maybe the character is wearing something patterned, or the area just isn’t dark enough. for example in this gif, i’ve done all the above sets but the overlay scene doesn’t stand out very well because the armour pattern gets in the way:

but we can fix this quite simply with our black paintbrush. i go back to my ‘base’ gif and under all the colouring create a new layer and with a large soft paintbrush, paint over the armour. i then set this layer to ‘soft light’. then i create another new layer and using a more medium-sized paintbrush, paint exactly behind where the figures are moving. this layer adds black behind the figures so they stand out more clearly, while the soft light layer aids the transition as it darkens the whole area. now we have this:

this has made the overlay a lot more visible. you can use this technique to pretty much darken any layer. i always try and darken the section i want using ‘soft light’ layers as this creates a smoother transition than you’d achieve by just jumping in with your normal black paintbrush layer, but remember you can use multiple layers to reach the effect you want.

this can be taken to the next step to literally blacken out one side of a gif (and it may be useful if you want to do more side-by-side blending scenes), starting with your normal base gif coloured (admittedly mess-ily):

to completely darkening the right-hand side of it using a few black paintbrushed soft light layers:

and overlaying another gif into this darkened patch:

i’ve even used this technique for light scenes with success, it just might take a bit more practice and you’re better off starting with scenes that naturally have a darker background if you are a blending beginner.

the end!

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!