[1] Create your gif

Make it like you normally would, apply coloring, sharpen, etc. If you don’t know how to make gifs yet, click here for some great tutorials.

Assuming you've already converted into a Video Timeline and your layers into a Smart Object in your gif making process, let's proceed.

[2] Drag the playhead to the start of the timeline

Do this before adding text in order to align it with your gif and coloring layers if your playhead isn't at the start of the timeline as demonstrated below:

[3] Add a text layer

NOTE:

We're not centering yet so don't worry if your text isn't centered in this step.

Make sure your text layer is above the gif and coloring layers.

Add text by selecting the letter T key (this is a very useful Photoshop shortcut) then (there are two ways of doing this next bit):

Option 1

Just click anywhere on your canvas like this:

Option 2

Create a text box by clicking and dragging your mouse anywhere on the canvas to form a rectangular shape like this:

You can adjust the size of the text box by clicking and dragging the squares at the corners/edges encircled in pink below:

[4] Adjust the length of text layer

Your text layer may end up being longer or shorter than your gif layer in the Timeline window.

NOTE: This can also apply to coloring layers/coloring psds.

For longer text layers:

4.1 Zoom the layers out in the Timeline window to see the end of the long text layer. Do this by sliding left the triangle icon "▲" between those two mountain-looking icons at the bottom (this will make the next steps easier and you can always undo this step later).

4.2 Drag the end mark (what the pink arrow’s pointing to below) to where the gif ends.

For shorter text layers:

Drag the end of the text layer and align it with the end of the gif layer.

[5] Center the text layer

You may skip this step if you don't plan to center your subtitles in your gif.

Aside from center aligning your text, your subtitles should be centered in the gif as well.

You can center your text in three ways (that I know of):

Option 1: Smart Guides

5.1.1 Make sure you have these selected:

Smart Guides. To do this, go to View > Show > Smart Guides.

Snap. To do this, go to View > Snap.

Guide under Snap To. Go to View > Snap To > click Guides.

5.1.2 Select the Move Tool (shortcut: the letter V key).

5.1.3 Move your text on the canvas around where you think the center is until you see a guide line that runs from the top edge of the canvas to the bottom edge, that's the center guide line. In my example below, the guide lines are neon pink.

NOTE: With Snap activated, your text will just "snap" like a magnet to the center guide line.

5.1.4 Drag your text to the bottom edge.

TIP: To make sure your text doesn't stray from the center guide line, press and hold the shift key while you're dragging the text to the bottom edge.

Option 2: Move Tool Menu

5.2.1 Select the text layer in the Layers window.

5.2.2 Select All by using the shortcut { [Ctrl for Windows / command for Mac] + A }.

5.2.3 Select the Move Tool (V).

5.2.4 In the Move Tool menu, click on the 'align horizontal centers' button and the 'align bottom edges' button as seen below (encircled in pink).

Option 3: Add Guide + Free Transform

5.3.1 Add a center guide by going to View > New Guide... > Orientation: 🔘Vertical > Position: 50% (not px) > OK

5.3.2 Make sure you have these selected:

Snap. To do this, go to View > Snap.

Guide under Snap To. Go to View > Snap To > click Guides.

5.3.3 Select your text layer in the Layers window.

5.3.4 Select Free Transform by using the shortcut { [Ctrl for Windows / command for Mac] + T }. A box will appear around your text.

5.3.5 Drag and align your text to the center guide and then drag it down to the bottom edge. With Snap activated, it will just "snap" like a magnet and stick to the center guide line as you can see below.

[6] Add a gap between your subtitles and the gif's bottom edge

You can do this in two ways (that I know of):

Option 1: Nudge

7.1.1 Select your text layer.

7.1.2 Hold down the Shift key + press the up arrow key once. (I usually stop at one up arrow key only but you can go for two nudges)

NOTE: If you want your text to go higher/lower but just a teeny tiny bit, press the up arrow key without holding down Shift.

Option 2: Add Guide

The process is similar to the third option in section [5], except instead of Vertical, select Horizontal; and instead of a 50% Position, type in 96%. 96% is just my personal preference.

There is no definite amount, so just make sure to avoid placing your subtitles too close to the bottom, left and right edges for better readability.

[7] Caption + Styling

Now that you've successfully added and centered your subtitles, it's time to replace Lorem Ipsum with your subtitles (if you haven't yet) and style the text.

This is explained in my comprehensive gif subtitles style guide. Go check it out! 10/10 recommend 😂

〰️

Start with your gif coloured and sharpened how you like

go to the shape tool (this will usually be a rectangle or whatever shape you last used)

Right click it and select the "Custon Shape tool" - this will be a sort of blob icon. It looks like this:

In the top tool bar there will be a "shape" option

Click the drop down and select the shape you would like to draw. For the gifset you asked about I used the skinny speech bubble that looks like this.

now draw the speech bubble where you would like it on the gif there will be an outline of what you are drawing

this looks like this:

The shape drawn looks like this on my timeline

make sure you adjust this to make it the same length as your gif

you can adjust you speech bubble using the transform tool (ctrl + t). This way you can adjust the direction of the speech bubble if you like by right clicking and flipping it (or by just moving the corners around).

For the purposes of this tutorial i am just going to leave it where it is.

Next to get the effect I had on my speech bubbles change the fill to white

Now go to your shape layer and change the blending mode to "Difference"

now right click the shape layer and select blending options

you get a pop up like this

go into the color overlay the box should now be ticked and you'll get these options. change the blend mode to color and the red colour to the colour you'd like the speech bubble to be.

these are what my settings now look like for this screen

For the set you were talking about I also added a drop shadow. i clicked the drop shadow box and just used the defaults

this is what the speech bubble looks like now

if you'd like to change colour - just change the blue in your blend options :) (e.g. I could have also picked green)

You can also do a gradient fill instead if you like. To do this go to the gradient overlay section instead of colour

then do the same thing except with a gradient

you can also change the angle of the gradient if you'd like

this is the final result:

Then I just add text on top :)

this tutorial also assumes you already have access to something to gif and photoshop. luckily supernatural has a huge fandom which means it's a bit easier to find full episodes and scenepacks just by searching the web or youtube. I personally use photoshop with video timeline on a macbook to gif. there are other ways to make gifs, but I'm not going to get in to them today, there are plenty of resources on tumblr for photoshop alternatives if you're interested.

I also am going to use a clip from season 2 as an example, so a lot of the coloring is based around that kind of lighting and saturation early supernatural had. I might do a second part with a later seasons clip, they're somehow both easier to color because the lighting is brighter and harder because they're often oversaturated and have orange filters.

general resources

this is my main sharpening action I use (specifically the second option, that is what I am using in this tutorial). it's a great general sharpening that works well on basically all footage. I also have been using this sharpening set (specifically the depth or texture option) more often on some spn scenes that are already brighter/less grainy.

inactive blog, but they have a whole tag of PSD colorings specifically for supernatural, along with a ton of other resources and tutorials for photoshop.

great guide to subtitles and how to add subtitles to gifs. I was going to add my own tutorial on adding subtitles but this was getting long and these are two very comprehensive guides. personally, I use the font arial rounded MT, bold, italic, size 16 (or size 12 if I'm doing a 268p gif not a 540p gif) with a drop shadow (distance: 2 spread: 34 size: 10, normal blend mode, 100% opacity) and stroke (size: 1, position outside) both in black. example here.

usergif is a great blog for both inspiration and tutorials if you already know the basics of gif making, but want to learn more advanced stuff.

post I made with some more general resources, including some info about photoshop alternatives.

supernatural episode transcripts - a life saver when you're making gifs with subtitles and can just copy and paste text rather than typing it all by hand.

making the gif

(lot of this is copied from my old gif tutorial I made on my main blog because this part hasn't really changed lol. click on photos for better quality!)

step 1: uploading frames to layers

once you have your video ready, you’re going to import it on photoshop through the file > import > video frames to layers. 

after you select which video you want to use, this screen will pop up.

you want to make sure "selected range only" and "make frame animation" are clicked on. don't use the "limit to every [x] frames" because it will make the animation look really clunky and don't use "from beginning to end" because it will make your file so huge photoshop probably won't be able to open it since there's a 500 (?) frame limit.

use the little tick marks to shorten the video to the frames you want. to make sure you have the right part selected, click on the play button/sideways triangle. it's okay if you have some extra frames before or after the part you want, they're really easy to delete later.

the shorter the video, the easier it is to find the frames you want, so if the video I’m using is longer than about 5 minutes, I shorten it. my laptop allows me to cut videos using quicktime player, but there are programs like bandicam you can use if you have a different kind of computer.

now click "OK" and photoshop will open your video as layers and frames.

Step 2: Cropping, sizing, sharpening, and making the gif 

first thing I do is crop my gif. click on the overlapping square icon on the panel on the left side of your screen (highlighted below). you can either enter the dimensions you want the gif to be, or click on a premade option. i'm just going to use the "square" option for this one.

move the cropping square to wherever on the video you want to crop the video.

next, I go to image > image size and this box will pop up. make sure the width is always 540p because that’s the dimensions for tumblr. the height will automatically adjust. the other options are the settings I personally use but you can play around with them.

next, you want to select all your frames. do this by clicking on the first one, then clicking on the last one while holding the “shift” button.

click on the little part at the bottom of any of the frames that says the time in between frames (in this case, 0.04 is the default) and select the "other" option. a box will pop up. I usually go for 0.06, but if it's a shorter gif, like 22 frames or less, I'll go up to 0.07 or 0.08.

next, you want to go to the right side of your screen and select the layers. do the same thing you did with the frames; click the first layer, then click the last layer while holding “shift.”

after all your frames and layers are selected, click on the little button that has four lines, on the top right of your frames section. click on “convert to video timeline.” this will change your individual frames into an animation.

next, go to filter > convert for smart filters. this will convert all your layers into one layer that is easier to edit.

your screen show now look like this-

now it is time to sharpen your gif! I use sharpening actions (like the ones listed above) because it’s quicker, but this tutorial will show you how to do it manually.

here is the gif so far (cropped, resized, and sharpened).

coloring the gif

this is where it gets a bit more specific to my process for supernatural, but I still use most of these tools (especially the first curves layers) for all my gifs in general. all of the tools you need for coloring are in the “adjustments” tab, next to the layers. 

step 1: curves

this tool is my fave because it does so much of the work for you. I start by using the white eye drop tool (selected in the photo below) and clicking on the whitest part of the gif. in this case, I used sam's shirt.

next, I use the black eye drop tool to select the darkest part of the image. I used the doorway behind sam.

step 2: photo filter

next adjustment I use is usually "photo filter." this one does a lot of work quickly and is great for scenes that are either too blue/cold (in which case I use a warm filter) or too orange/warm (in which case I use a cold filter). for this gif, I selected the third cooling filter option and set it to a density of 12.

step 3: vibrance

vibrance/saturation is a tricky tool, I go back and forth on using it. for a lot of earlier spn I increase the vibrance and for a lot of later spn I decrease the saturation. for this scene, I increased the vibrance to +54.

step 4: selective color

selective color is another one I go back and forth on and when I do use it, I try to do it sparingly because it can make your gif look grainy fast. going to red and decreasing cyan (here by -34) makes the gif a bit more vibrant. then I go to black and increase it by +6 to add some depth to the background and make sam stand out more.

step 5: brightness/contrast

I find curves takes care of most of the brighting I need but I will occasionally also add a brightness/contrast layer as well. here, I increased brightness by +10 and left contrast alone.

step 6: exposure

finally, I add an exposure layer. this tool is great for lower quality footage because increasing the shadows makes it look less grainy. it also adds some more depth. here I decreased exposure by -0.36 and put gamma correction at 0.92.

bonus: I didn't use it for this gif, but color balance is my other frequently used layer. I will add it when the photo filter doesn't do enough and there's a more dominant color (like the dreaded season 8 orange) that I'm trying to tone down.

saving the gif

final step yayyy. go to file > export > save for web (legacy). 

these are my save settings. then you just click “save” and you’re done! you can also play back your gif here to see how it looks.

make sure your gif is under 10mb (you can see how big it is in the bottom left hand corner under your gif) otherwise tumblr won't let you upload it. if your gif is too big, either go back and delete some frames to shorten it, remove some coloring layers, or increase the lossy setting. I never go over 20 with that because your gif will get grainy, but if you're only like a couple mb over, increase it a bit and that should take care of it with minimal quality difference.

and here is the final gif!

i get my icons from multiple different sites, but most frequently, i use freepik and phosphor icons

once you've found the icon(s) you want and download them, it's as simple as plopping them onto your photoshop canvas. now, you can totally leave them as is, but to get the effects that mine have above, follow these steps:

change the blending mode of the icon layer to difference or exclusion

double click (or right click > blending options) on your icon layer to bring up the layer style panel

i applied a drop shadow set to multiply at 50% opacity at an angle of 130 and a distance, spread, and size of 3. you can leave the settings under quality as-is

then i applied a gradient overlay set to linear light at 100% opacity with a style of linear and an angle of 45. the gradient itself is 813f6a to ff91d9

obviously, you can play around with the settings for both of these styles, or you can substitute a color overlay for the gradient overlay if you want just a single color

and that's literally all there is to it! so the "hard" part is just finding the icons, but both freepik and phosphor are pretty easy to search with keywords of what you're looking for.

As always, basic knowledge on making gifs is required to do this type of edits. I linked some useful guides on my previous tutorial here.

PART I: BLENDING

STEP 1, BASE GIF

I recommend getting ready the gifs you're going to use before any try on blending them. And which ones are right to blend? That's just depends on the scenes you're working on. On this gifset, I made two previous blends that didn't make it to the final version cause I didn't like how it turned out. It's all about trial and error.

For this specific blending, as I'm working with only 2 gifs, I'll start editing first the base and then the one "blended". Adjust your BASE GIF in your canvas as you want.

I sized mine like this cause I imagined the second scene of Glinda behind this one.

STEP 2: BACKGROUND

i followed becca's coloring tutorial for this part, except I didn't add any adjustments yet. only coloring the background for a later gradient blending.

STEP 3: BLENDING

Duplicate your other gif into the canvas and change its blending to screen

Now add a layer mask (the button marked with red in the picture) and, with a soft brush at 200px/300px, start erasing whatever you don't want. Remember black is 0% opacity and white is 100%.

STEP 4: THE BLENDED GIF

The problem I noticed by this point is that my background coloring on the BASE GIF was kinda irrelevant cause now the BLENDED GIF completely covered it (｡•́︿•̀｡) and I also wanted this one to be pink. In order to do this, I created a gradient map layer and made it as a clipping mask so it wouldn't affect my main gif.

PART II: COLORING

STEP 5: BASE

For the base coloring, I always follow this tutorial cause it's literally how I learned how to do it. Honestly, check all maziekeen's tutorials (she made A TON) cause they are so good and your learn a lot. However, I tend to give my personal touches like adding another vibrance layer if i feel like it, cause I like the colors to pop; or skipping steps if I don't think they fit my gif/style. Anyways, this is the result for now:

and these are my settings

i tried to translate as much as possible (,,>﹏<,,)

STEP 6: SMALL TOUCHES

Could leave the gif as it is, but when I was working on it, I felt like something was missing. So the last step is to apply/paint some small touches of pink (or whichever color you're working on). This trick I learned it from this beautiful and very detailed tutorial from dani (she is awesome!! and her tutorials and gifs are flawless!!)

Create a new layer, use the soft brush tool at 1000px, zoom out your gif and start painting out of the canvas (you can totally paint inside if you feel like it) Play with different opacities and blending modes of the layer, this is literally how I created all these gifs. I know it sounds stupid ajskjas but it's true!! Try what best fits the structure of the gif. The first one I made is with multiply at 60% and you can see how much the gif changed already.

The second being color at 100% and the third one hard light at 30%

STEP 7: THE CHERRY ON TOP

Finally I added an animated overlay from this post. Changed the blend mode to screen and erased a bit of it on glinda's face creating a layer mask and with a soft brush. Added my texts... and that's a wrap! :D

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.

1.

First we're going to have our gif ready, and make sure you know how many frames it is!! It should preferrably be an even number! (or a divisible number)

2.

Now we're going to make another gif, which will be the lil animated doodle. Go to file > new or press ctrl+n. Create a new document that's going to be 300x300 px, and we'll make the background black:

3.

Now we're going to use a brush to paint the doodle! We're gonna set the size to 4px-7px depending on how thick you want it to be (here i used a 4px brush) and the hardness to 100%, and we're going to trace our doodle on a new layer:

It does not have to be perfect!! It took me a while to get that crown and it looks half assed 😭 if you can use something other than your mouse like a tablet or something i definitely recommend you do it :)

Now we're going to click on "Create Video Timeline":

Now the bottom of our workspace is gonna look like this:

We're going to click on those three little boxes on the bottom left to convert to frame animation:

And there's that! Now for the slightly tricky part.

4.

We're going to set the layer where we drew the doodle to 40% opacity:

And on a new layer, we're going to trace the same doodle:

As you can see it doesn't look the same and it's because it doesnt have to be, that's how we're going to make it look animated!

We're going to repeat that process a few times! What i do to not get confused is that for examples when i'm going to draw layer 3 i first make layer 2 invisble, and then for layer 4 i also make layer 3 invisible and so on

My gif here:

is 40 frames, which means i can make 8 different variations of my doodle and duplicate each 4 times. This is why it's important that you know how many frames your gif is! And it's even much easier if it's an even number.

But what are we going to do to make it look animated? Well, it's all about using the timeline! First, make sure that the frame delay is set to the same as your base gif. I usually set it to 0,05:

Now our first layer can go back to 100% opacity, since we're going to use it too:

So this is what we have so far:

Only layer 1 is visible. So what we're gonna do is click this little plus icon:

It duplicates our frame. And on our layer section we're going to make layer 1 invisible and instead make layer 2 visible, and you'll notice that now our first two frames correspond to our first two layers:

And we're going to do the same thing for each layer! Add a new frame, make layer a invisible, make layer b visible, and so on! Here's what my crown looks like after doing this process with my 8 layers:

As you can see it's too fast, so that's why i'm going to duplicate each frame 4 times, so each variation has 5 frames on the timeline, and that's how we're going to get the same amount of frames as our base gif:

So once we have our animated doodle it's very easy from here! We're going to click on the bottom left again to convert our frame animation to a video timeline:

And we're going to select all of our layers (ctrl+alt+a in windows or just go to select > all layers) and convert them to a smart object (right click > convert to smart object):

So we're going to select our doodle and copy + paste it on top of your base gif, and we're going to set it to lighten or screen, whichever you prefer:

So now we place our doodle where we want it, make it whatever size we want, rotate it... and we're freaking done!

psst: i usually always create in photoshop cs5, but for this effect you need a recent version of photoshop because it's using transform keyframes (i think cs5 doesn't let you do that, or i just don't know how to lol). i used cc 2019 for this.

sorry if this is lengthy or has too much or too little details haha, but i hope it's comprehensible! english is not my first language so i also apologize in advance for any mistakes!

I. PREPARING THE CASSETTE

so, starting with the png here:

i removing everything i didn't want on the cassette png with the brush tool by just drawing the right color over the unwanted text. for the color, i then went to image > adjustments > hue/saturation and in the red tab, i played with the hue slider to get that purple color. finally, i added some text to my liking, and this is what i ended up with:

(not necessary but: i also selected the white lines on each side with the magic wand tool because i wanted these lines to be transparent. once your selection is done, go right click > layer via cut. it will create a new layer of the cutout you just made. you just need to disable or delete the layer to make the selection (lines) transparent.)

at this point you want to have only 2 layers: the revamped cassette and the text layer. you can remove the text layer actually, and just add the title back at the end, as it is not necessary for this effect. i just like to have the visual.

if you have multiple layers, you need to select all of them (except the song title layer), right click on the png layer and click on merge layers. this will create one layer with all the editing you made on the cassette. if you think you will need to edit this later though, i would save the file as a psd before merging the layers.

II. THE EFFECT

okay, so now that you have your cassette, make sure your video timeline is activated, not frame animation, and you are ready to go.

first, you want to create a perfect circle shape around one of the reel with the elliptical marquee tool (hold shift while dragging the circle). make sure it covers the entire area that will later be rotated. make sure this circle is perfectly centered around the reel or otherwise the animation will be a bit lopsided.

then right click on this selection and go "layer via copy". this will create a layer of only that circle selection. important step: right click on that new layer and go "convert to smart object". the layer should look like that, i've renamed mine:

now if you go to your timeline and open that new smart object layer, you will see that you have 3 keyframe options. we only need the transform one.

go to the start of the timeline and activate the transform animation by clicking on the stopwatch button. a keyframe will be created automatically.

to create the actual animation, move the position of the cursor on the timeline further, i put mine at the 01:00f mark so it's easier to create the right timing.

then what you want to do is select the reel smart object layer and hit ctrl + T. a box will appear and this is how you will make the reel rotate.

to rotate the reel shape, move your cursor near the blue box on your canvas and drag it until you have rotated the shape halfway through and hit enter. another keyframe will be created and if you play your animation, the reel should rotate on itself for half a turn

move your position on the timeline to 02:00f and do the same thing: select the left reel smart object, hit ctrl + T, rotate for another half turn, and hit enter. this third keyframe should be the last one needed for the animation and you should have a full animated rotation of the reel.

play your animation, and adjust the speed to your liking by dragging the keyframes on the timeline (but make sure they stay within the same distance from each other). the closer the keyframes are, the faster the animation are, and the further they are, the slower it'll be.

then you can just trim the smart object to your animation's length, and duplicate (right click the smart object > duplicate layer) this layer the amount of times needed (i find this less finicky than duplicating keyframes), and placing them one after the other. three full turns should be enough. this is what my timeline looks like right now:

and my animation for the left side looks like this:

as you can see, we can see the little "dents" peeking through behind the animation. we don't want that! to remove it, select the revamped cassette layer (that should be under the reel smart object), and create another perfect circle around it with the marquee tool. this time make sure it's smaller than the previous one, it just needs to cover these dents.

then right click on this selection on your canvas and go "layer via cut". this will create a new layer with that selection, and all you need to do is to disable it. this is removing the information in that circle.

once you are happy and the animation works, you can just delete that cut layer. now the animation is done and looks like this:

III. SECOND ANIMATION

one you have done it on the left side, you just gotta do the same thing on the right side. you can also try duplicating it, but i found it finicky for some reason (or maybe i'm just not used to the controls of this 2019 photoshop version?).

this is what i have once i've done the same thing on the right reel:

once i am happy with the speed and everything, i want to have only one layer so it's easier to use on gifs. first, i will save this animation as a psd file, in case i want to reuse it. then i am removing the song title layer and will be flattening everything and creating frames from this animation. to do so i am using the "save" action from here.

i'm not sure why it does that, but it's creating a couple of frames where the reels are a bit offset from their position everytime there's a full circle done, so i just delete these 5-6 frames. you can also change the speed here, but by default it should be 0.05.

once you are happy with it, just turn these frames into a smart object with the video timeline again (convert frame animation to video timeline and select all the frame layers > right click > convert to smart object)

now you have a smart object that is ready to be used anywhere!

IV. FINAL TOUCHES

for my particular speak now gifset, i have multiple layers of the animated cassette on each gif:

1, bottom one - cassette layer set to the blending mode "hard light" and set to opacity 86%:

2, middle - this same cassette layer set to hard light, but with the opacity at 100%, AND with a layer mask so it's only applied to the animated reels (i wanted them to show up more):

3, top one - and finally a third layer with another layer mask because i wanted the white label and speak now area to be less see through. it's set to the normal blending mode and the opacity is at 75%

and then i just added the song title on top at 100% opacity and normal blending mode, and added some drop shadows, and tada!

GRADIENT FILL

I'll be using this gif which I've already sharpened and coloured:

First of all let's make the background pop so I'm going to add a gradient fill (Layer -> New fill layer -> Gradient) with these settings (I'm using this colour #0099ff):

Now it's the time to play with the blending settings! Depending on your scene some will look better than others but I usually switch between Soft Light, Overlay, Color or Hue. 90% of the time I use soft light but this scene looked much better using overlay:

As you can see the background looks more blue and vibrant but it's not too much you know.

GRADIENT TOOL

Now it's time to use the gradient tool to give this gif a hazy look. I haven't seen many gifmakers talk about this tool but it's soooo useful and it takes gradients to a whole new level.

Before using this tool we'll need to add a new layer above the gradient fill, like this:

(HELP I just realised I typed “later” instead of “layer” 🤡 but let’s ignore that)

You can choose the gradient tool by pressing 'G' and then clicking here:

Make sure your gradient goes from any colour to a transparent background.

Okay so next to this gradient settings we have five different styles and each one will create a different shape. Depending on the scene I'll use the first, second or fourth one. Here are how they look:

1. Linear gradient

2. Radial gradient + Reverse (if you don't click this you'll end up with a blue circle above your gif)

3. Reflected gradient + Reverse

This time I'm going to use the radial gradient so to draw it start by clicking on the centre of the gif and drag the line (the farther you drag it the less intense the gradient looks):

And this is the gradient:

And here comes the fun part again, playing with the blending setting and the opacity! Before doing anything I duplicate my gradient layer because I always use more than one so this is how your layers should look like:

Let's go to the first gradient tool layer and again try different blending modes: soft light, overlay, hue... Most of the time I'll use 'Soft layer' and I'll leave the opacity at 100%.

For the second layer choose 'Screen' and don't worry if your gif looks too bright because we're going to fix this by decreasing the opacity. Anything between 20-60% should look good but it depends if you want a more vibrant or more natural effect. I ended up using 40% and this is the result:

And we're done!!! As you can see the result looks much different from our first gif and it only takes a couple of layers!

gifs in text

i'm gonna assume you already have basic gifmaking knowledge, so i'm gonna start from this base gif already colored:

i started by finding a big and very thick font that i liked. for this gifset i used a font called barle. i placed my text the way i wanted it, but i used one text layer per letter, because i wanted one different gif per letter. once i had my 9 text layers placed, it looked like this:

then, you need to create a group with a layer mask for each letter. for this, i simply hold the ctrl/command key and click on the letter layer's thumbnail. it will create a selection of the letter.

with this selection on, i click on the folder button to create a new group, then on the add layer mask button. it will create a group with your letter where you can put anothet gif in.

then you just need to rinse and repeat for every letter.

once you have all of your letter groups done, you can select all of the text layers and put them in another group. we'll use these layers again later.

then you just need to bring your second gif onto this canvas and put it in the right group/folder. i usually just bring a smart object gif onto my main canva, slide it in the right folder, then resize, sharpen, and color the second gif in there.

you can just drag this layer once it's inside the group to position it the way you need it. and also use ctrl+T to resize it (drag the corners while holding shift to keep the right propertions). once the gif is positioned, you can go ahead and disable the E text layer you used to create the mask (but don't delete it!). i kept the coloring very minimal since it's a black and white gif, and the layers should look like that:

and this is the gif so far with the first E done:

then you just need to do the same for all other letters, pretty straight forward! for the first D letter, i wanted eddie's face to show instead of using a different gif, so i simply put a black and white layer in that D group. my gif looks like that at this point:

then what's missing is the outline, and it's pretty easy to make. go back to the text layers you created at the beginning. enable them all, and make sure they are on top of everything else. double click on that first text layer to bring in the layer style options, and add a 1px stroke with the color and blending mode you want. I went with yellow and the hard light blending mode. these are my settings:

back to the layers panel, keep the text layer's opacity at 100%, but bring the fill to 0%. this will make online the online show up on the gif.

to apply this setting to other text layers, you can right click the first text layer and select "copy layer style". then select all of the other layers and right click one of them and go "paste layer style". once all the text layers have their outline it should look like that:

to move the outline a bit, make sure they are in a group and select this group (i renamed mine "outline"), then just nudge it by a few pixels with the arrows on your keyboard. i transformed the outline group by about 4px left and up on mine. i also duplicated the whole group because i wanted a deeper color for the outline.

and this is my final result!

animated checkmark

starting with my base gif, i added some animated text and a little box for the checkmark to go in (drew a shape with the rectangle tool and gave it a stroke, the same way i did it for the previous gif):

for the actual checkmark, you can try to find a brush or shapes to download, but i didn't feel like looking it up lol, so i drew the shape myself with a regular brush that comes baked in with photoshop. the best way to draw a custom shape, in my opinion, is to draw the shape as a layer mask on a color fill layer. that way you can always change the color or add layer styles later (like i did).

so on my canvas, on top of everything, i created a color fill layer (layer > new fill layer > solid color) with whatever color i wanted (you can change this later if you need). you will get a new color fill layer, with a layer mask already attached to it. i put this layer at 75% opacity so i can see the gif under it and it's easier to draw the shape in the right spot:

i then selected the layer mask thumbnail and the brush i wanted to use, one of them (not sure i remember which one, sorry haha!):

with the black color selected, just go ahead and draw a checkmark where you want it on the canva. you can always use the brush in white to erase it and start over with the black color if you're not happy with it. but once you have a checkmark you like, it should look like this:

now you just gotta invert the mask so the checkmark is colored, to do this just click on the color fill layer mask you just drew on and hit ctrl/command + i. the mask will get inverted and it will look like this:

then you can add whatever layer style you'd like to the checkmark (and put the layer opacity back to 100% if you want). i added a gradient and a drop shadow to mine, and changed the blending mode from normal to difference to make it match with the text, so now it looks like that:

animation time! this is where you need to use a bit of keyframes, but i promise it's not complicated.

for this animation i wanted to mimick a checkmark being drawned. when you draw a checkmark, you usually do it in 3 steps right? your startung point, then a line down, and then another line up to the end point. it's what i tried to mimick here.

to animate it that way, you need to draw a shape that will hide the checkmark and then move it around to mimick the drawing animation. to do so, create a new group (i've named mine "checkmark") and add a layer mask to this group. you also need to unlink the mask by clicking on the little chain icon next to the mask thumbnail:

now the next steps are a bit of trial and error until you get what you want, i'm gonna try to explain it as best as i can (bear with me haha):

1- go to where you want the animation to start, aka where you want the checkmark to start appearing. for me it was a few frames after the start of the gif.

2- then, with a black brush that wasn't too big nor too soft, i brushed a bit over the checkmark to erase it for now (you may have to go back and edit this after the animation is done). no need to do a huge shape, just big enough to cover the checkmark. if you go back to the move tool and click on the mask thumbnail you have just created and click and drag in the canva, you should be able to move the mask around. this is what you want for steps 5 and 7. basically, on your mask thumbnail on the checkmark group, what is brushed in black will erase what's in the group, and the white part will reveal what's in the group. for now just make sure the shape you just drew is covering the checkmark.

3- once the checkmark is hidden, click on the stopwatch icon next to layer mask postion to start the animation. this will automatically create a keyframe where your cursor is on the timeline (the yellow diamond)

4- once your starting point is done, you want to go a bit further on the timeline with your cursor.

5- then move the mask shape so it reveals just the smallest part of the checkmark (make sure you click the checkmark group mask thumbnail first before moving the mask). once you move the mask with the move tool, a new keyframe will automatically appear where your cursor is on the timeline (another diamond). make sure you drag the shape down the checkmark to mimick it being drawn.

6- go a bit further again on the timeline, where you want the animation to end.

7- and move the shape again to reveal the checkmark (make sure you click the group mask thumbnail first before moving the shape). again, a third keyframe will be automatically created. i dragged the shape up from the bottom of the checkmark to mimick the drawing of the checkmark.

your animation should be done here after these 2 movements, so play it in a loop and see if you are satisfied with the animation you have created. if you don't like it you have options:

you can go back to the group layer mask and edit it with the black or white brush;

you can also go back to each keyframe by positiong your cursor over it and move the mask around in a different way;

and you can select the keyframes (yellow diamonds) and move them around on the timeline. if you push the keyframes closer together, the animation will be faster, and if you space them out more, the animation will take longer. it's up to you!

this animation thing is really just trial and error. you could probably do the same animation with a checkmark you find online, as long as the image file is in a group and the animated mask is applied to the group. and don't forget to unlink the mask before animating a movement or it won't work properly!

and this is what my animation looks like:

I. PREPARING THE TEXT

when you open the template, you should have a group called "songs" with 3 groups for each song. what you wanna do is duplicate these numbered groups until you have the amount of songs you want. for each group, use the move tool or your keyboard's arrows to move the duplicated song text layers/groups on your canvas so they're under the first three that are already there. make sure these new duplicated layers are in the "songs" group.

then type the numbers, song titles, artists, song durations, etc. it should look like that:

i wanted mine to have a smaller gap in between each song, so i used the arrows to move each song group closer together, and it looks like that before the animation:

II. ANIMATED EFFECT

once you have typed everything, make sure there are no mistakes and that you won't need to edit anything about the songs or durations or anything like that, because you won't be able to go back. when that's done, select all of the numbered song groups and right click > Merge Layers.

that will give you one layer with all of the songs together. i've renamed mine "SIX SONGS". make sure this new merged layer is still in the "songs" group.

once that's done, you're ready for the animation. and it's pretty easy, because you only need two keyframes: one at the start of the gif, and one at the end.

go to the start of your gif on the timeline, and toggle the position keyframe animation by clicking on the little stopwatch icon. a little yellow keyframe should appear where the cursor is, at the start of the gif:

then go to the end of the gif with the cursor. with the "SIX SONGS" layer selected, use the move tool or keyboard arrows (my preference) to move up the text until all the songs are inside the darker rectangle. once you move this layer's position, a keyframe will appear on the timeline and the animation will be created.

the animation now looks like this:

if you want, you can now edit the speed of the animation by moving the keyframes. the closer the two keyframes are, the faster the animation will be; the further apart the keyframes are, the slower the animation will be.

III. LAYER MASK

since we want the songs to be contained in the dark rectangle and below the line, we need to add a layer mask. i started by creating a shape of where i want the songs to be contained with the rectangular marquee tool:

then, on the layers panel, select the "songs" group and click on the layer mask icon to create a mask with that rectangular selection.

if you play the animation after making that layer mask, it should now look like this:

if you like it that way then you are done, yay!

but if you'd like softer edges, like i have done for mine, click on the layer mask's black and white thumbnail. use the brush tool with a 0% hardness and the black color to make the edges of the mask softer. make sure you are making your brush strokes with the layer mask's thumbnail selected.

once you have brushed a bit of black with a soft rounded brush on the top and bottom of the mask, the animation should look like this:

the font used here is called figtree from google fonts

the layers are all labeled, some with basic info that tells you what to edit/adjust

the play/pause button layer-group uses a layer mask, but the pause button rectangles are included as well in case you run into any issues.

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

the link to download the template is here. [link update]