hi! I don't know that I really have any go-to fonts, I tend to just go through my entire list for every set trying to figure out what works 😂 but typically I have a small sans serif font paired with a larger or script font. here are some that I think I use fairly often? but you can also ask about any specific fonts you see if you like any 🥰
bourbon grotesque
jitzu (swash) - I think I got this one from a font pack on here because I can't find a download link
Hello! I received a few messages asking me to share the template that i made for my cal kestis playlist set, so I thought it was time to make a post for it!
Below is some basic info + download link.
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.
feel free to tag me in your edits! i would love to see them <3
HOW TO: Do a Motion Blur Transition
Using Timeline or Frame Animation
Hi! Someone asked me for a tutorial on the transition effect in the second gif of this set (also featured in this set and the text on this set). So, here it is! This is one of the easiest and least tedious of the gif transition effects in my opinion — and I’m going to go over how to do it both in Timeline and Frame Animation (using the screencap method). Disclaimer: This tutorial assumes you have a basic understanding of gif-making in Photoshop.
Hello!! A couple years ago I posted this tutorial for making gifs with a moving overlay effect. In the two and a half years since I made that tutorial, I've learned some new tricks for this gif effect but most importantly I've learned how to explain things better.
For that reason, I've created this new and improved tutorial for my overlay gif effect. The basics are the same but it's simpler, I go into more detail, give better explanations, and have more comprehensive instructions.
The easiest way to do this effect with this method is to use smart objects and work in timeline. For this tutorial, I’m assuming you know the basics of giffing like cropping, resizing, colouring, etc. If you need help with this I’d suggest you look at some other tutorials and guides!!
First, we’re going to start off with three things.
1. A completed gif converted into a smart object that is going to be the base gif. I'm going to call this "gif1". You’ll want this gif to be at least 3 seconds because it needs to last as long as the overlay plus a little bit of extra time in the beginning.
This is the base gif I’ll be using in the example (except I trimmed it so that I could meet the size limit).
2. A second completed gif converted into a smart object that is going to go over the base gif. We’re going to call this "gif2". This gif should be at least 2 seconds but I’ve made it work with shorter. Gif2 needs to be the same dimensions or bigger than gif1.
This is the gif I'll be using in the example (except I trimmed it so that I could meet the size limit).
3. An overlay in video form. These can be found on tumblr and youtube by search for overlay or transition packs. For this example, I'll be using an ink drop overlay I found on youtube.
Step 1: Turning the overlay video into an overlay gif
Most overlays aren’t going to instantly fit the gif effect you’re trying to achieve right away. This is the overlay I got from youtube and as you can see it’s too slow and needs a crop/resize to be usable.
To fix it, I sped the frame rate up, cropped the overlay, and resized the overlay so it fits over my base gif. I also sharpened the overlay (500% amount, 0.3px radius) so that the edges were smooth. This is the new overlay gif and the one I’ll be using for the gif effect.
A tip: I also like to add a brightness/contrast layer to get rid of the grey on the overlay gif. Because we’re working with blending modes to achieve this effect, any parts of the overlay that are grey will be a blended mix of gif1 and gif2. If you think this will look good for your gif effect then don't worry about it!
Another tip: try to get the entire overlay movement to fit into a 2-3 second window. Anything longer than that will likely be cut off when you have to trim your gif to meet the upload size limit and it would suck to only have half of the overlay.
Step 2: Creating the gif effect
Drag a copy of gif2 and a copy of the overlay gif onto the gif1 canvas. I like to use Ctrl+Shift+V so that the layers are pasted in the same position as they were on the previous canvas. MAKE SURE that both overlay layers are in the same position on the canvas. If one of the overlay layers is higher/lower/etc. than the other then the effect won't work properly.
Then, make a second copy of the overlay and invert it (Ctrl+i). These are the layers you should have:
Before you go any further, trim gif2 and both overlay layers so they are all the same length.
Now, we need to rearrange the layers and set blending modes. The top layer should be whichever overlay goes from black to white. This is because when we change the blending modes, the white part of this layer will disappear and look like its being replaced by gif2. In this case, that is the overlay (inverted) layer. Then we want gif2, the other overlay layer, and then gif1.
A tip: this process can be done the other way where the top layer is the overlay that goes from white > black however, you are much more likely to have an error where there is a grey/black line around the overlay effect in your final gif. In order to avoid that, I always use the black > white layer on top.
Next, set the top overlay layer to darken. You should only see the black part from the overlay and gif2 should fill in the white part. Here’s how that looks in my example.
Next, select the top overlay layer and gif2 and convert both layers into one smart object. Your layers tab should look like this now.
Now, set the new layer’s blending mode to lighten and the overlay layer’s blending mode to darken. Once you do this, you should be able to see gif1 as well as the overlay gif.
Step 3: Timeline and exporting
At the moment, gif1 is still significantly longer than the overlay gifs. Since this gif is just over 10 mb (which is pretty small for this effect) I’m going to trim about 1/4 of a second off the end of gif1 and then drag the overlay layers so they all end at the same time.
Now you’re free to export the gif! This is the finished effect for the example gif!
A tip: sometimes, when I convert to from timeline to frames, the gif becomes a little longer and slower. It has to do with different frame rates across the videos and photoshop but I'm not smart enough to understand it. If that happens, just set all the frames with the overlay layers to 0.04 speed instead of 0.05.
And we're finished! I hope that was helpful and made sense. If you have any questions feel free to drop them in my inbox or send me a message!! <3
LETTERBOXD STATS TEMPLATE PACK by tj @mikelogan
Includes 11 separate and completely customizable .psd files + 3 font families
Header with date and statistics
Weekly graph
Milestones
Genres, Countries, & Languages
Themes & Nanogenres
Breakdown
Top Cast
Top Directors
Most Liked Review and/or List
Highs and Lows
Ratings Comparison
WHAT YOU NEED*:
Basic gifmaking knowledge
Including: layer masks and clipping masks
TO USE:
PLEASE GIVE CREDIT BY LINKING BACK TO THIS POST
PLEASE DO NOT REPOST/CLAIM AS YOUR OWN
REBLOGS ARE APPRECIATED
FEEL FREE TO TAG ME IN ANY SETS YOU MAKE WITH #USERTJ
MEDIAFIRE DL | MEGA DL
MY LETTERBOXD
*A FEW NOTES:
All graphs are completely customizable using layer masks. For all the bar graphs, I find them easiest to edit using the rectangular marquee tool to select the proper area and then using your brush tool. For the pie charts, I had the best luck using the polygonal lasso tool to select the slice I wanted to mask.
All the information used was taken directly from my Letterboxd stats page. I believe there are a few sections only available to patrons of the site, such as the Ratings Comparison.
The only parts I left out were the lists integrated into the stats page and the Crew & Studios section. The fonts included in the folder are the exact ones used by Letterboxd, so you could always use them to create your own templates for those if you want to.
I have no issue with anyone using these templates to help create their own, but please give proper credit. Making these took literal hours.
IF YOU HAVE ANY QUESTIONS OR PROBLEMS WITH THE TEMPLATES, PLEASE SEND ME AN ASK OR A MESSAGE AND I'LL HELP HOWEVER I CAN!
You said it was a ghost story. It isn’t. No? It’s a love story. Same thing, really.
TJ MIKELOGAN’s HALLOWEEN 2024 EVENT
day thirteen ↬ horror television
template
this blog is such a cool idea!! i'm fairly new to gifmaking and still learning how to get the best out of photopea. i was wondering if you knew of a way to get gif overlays to work seeing as there isn't a timeline function? like when one gif blends into another with like an ink effect? i was trying and failing yesterday 😅
hello!! thank you for the question <3 apologies for the wait on this tutorial, but follow the steps under the cut below to learn how to make a gif like this!
Before you do anything, make sure you know how many frames your gif is going to be. This is vital for this tutorial, as you are going to be blending gifs together and to do so, you need all of them to be the same length.
step one: the transition gif
Once you have found the gif overlay you want to use for your transition (I will be using the first one from this pack), open it in Photopea. Since you should know how many frames your gif is going to be, make sure you delete the unnecessary frames from the gif overlay. For example, my gif is going to be 36 frames, so I will make sure to delete any other frames I don’t want besides 36 frames. You will also probably need to rename the frames that you’re going to be keeping; with the gif overlay I’m using, all of the frames are titled something like “_a_frm0,30”. However, my gifs end with “,50”, so I need to change the names of the 36 frames of this overlay so they all say “_a_frm0,50” for all 36 frames. This is arguably the most tedious bit of the entire process, which is why I do it first before anything else.
Now you will need to save two different versions of this gif. The first version will be for the “first” gif, and the second version will be for the “second” gif that your gif will transition into. As you likely noticed, gif overlays are black and white; for this tutorial, the first version will be the gif as it comes, and the second version will be inverted. Below are what mine look like after having cropping and resizing the gifs to the size I need them to be for my finished product:
In order to do the inversion, while selecting the folder of your gif overlay on the “Layer” panel on your right, go to Layer… > New Adjustment Layer > Gradient Map…. With the pop up that shows up, check the “Reverse” button to invert your gif overlay. Save this version as well as the other version without the inversion.
step two: creating the transition
after creating both your gif overlay versions as well as the two gifs you’re going to transition between, open up all four of the completed gifs you have created thus far.
Copy over the gif overlays on top of their respective gifs (so, your first gif should have the first version of the gif overlay, and the second gif you want to transition to should have the inverted version of the gif overlay). To copy over the gifs, right click and select Duplicate Into… and select the gif that the overlay will be on. You will want the black of these overlays to show up on both of them, so make sure you set the blending mode on the gif overlay to “Multiply” (you don’t have to change anything about the actual gif that is going to be part of the transition).
Once you have completed this, go to Layer > Animation > Merge in order to combine the gifs with the overlay on them. These are what my gifs look like with the gif overlay transition over them:
step three: final gif
Create a new canvas by going to File > New and creating one with a black background and sized to the size you’ve cropped your other gifs. Duplicate your merged gifs into this canvas, first gif on the bottom above the Background layer and the second gif above that first gif.
You don’t have to do anything to the first gif, but for the second gif, you will need to change the blending mode to “Screen” for the transition to work properly.
From here, do anything else you would like to do to your finished product (add your watermark, do typography, etc). Once you’ve done what you wanted for your finished product, merge your gifs again using Layer > Animation > Merge and then save your gif.
And you’re done! You have successfully completed your gif overlay transition. :)
Ty for the reply, I would love an in depth tutorial if you don't mind as i really wanna get this effect to work and I kinda work best when it's spelt out for me when learning new techniques lol :)
hey anon, no worries! here's how i used this amazing template by @danesdehaan and added a rolling effect like this (from this gifset):
this effect uses photoshop's timeline. i use cs5, for reference.
detailed tutorial under the cut :)
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:
HOW TO: Make an iPhone Layout
+ Downloadable Template
Hi! I've gotten a few messages asking for a tutorial on my iPhone gifsets — but instead of only doing a tutorial (that would probably be triple the length this one already is), I decided to turn my layout into a template with all the bits and bobs! In the "tutorial" under the cut, I'll share everything you'll need, a free template download, and quickly go over how to use this template. :)
Disclaimer: This template uses Video Timeline and this tutorial assumes you have a basic to intermediate understanding of Photoshop.
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.
If you notice anything wonky about the template, kindly let me know so I can fix it! And if you have any questions about how to use this template, please don't hesitate to send me a message! I just ask that you try to be specific in your question so I'm able to answer you the best I can!
Hello!! A couple years ago I posted this tutorial for making gifs with a moving overlay effect. In the two and a half years since I made that tutorial, I've learned some new tricks for this gif effect but most importantly I've learned how to explain things better.
For that reason, I've created this new and improved tutorial for my overlay gif effect. The basics are the same but it's simpler, I go into more detail, give better explanations, and have more comprehensive instructions.
The easiest way to do this effect with this method is to use smart objects and work in timeline. For this tutorial, I’m assuming you know the basics of giffing like cropping, resizing, colouring, etc. If you need help with this I’d suggest you look at some other tutorials and guides!!
First, we’re going to start off with three things.
1. A completed gif converted into a smart object that is going to be the base gif. I'm going to call this "gif1". You’ll want this gif to be at least 3 seconds because it needs to last as long as the overlay plus a little bit of extra time in the beginning.
This is the base gif I’ll be using in the example (except I trimmed it so that I could meet the size limit).
2. A second completed gif converted into a smart object that is going to go over the base gif. We’re going to call this "gif2". This gif should be at least 2 seconds but I’ve made it work with shorter. Gif2 needs to be the same dimensions or bigger than gif1.
This is the gif I'll be using in the example (except I trimmed it so that I could meet the size limit).
3. An overlay in video form. These can be found on tumblr and youtube by search for overlay or transition packs. For this example, I'll be using an ink drop overlay I found on youtube.
Step 1: Turning the overlay video into an overlay gif
Most overlays aren’t going to instantly fit the gif effect you’re trying to achieve right away. This is the overlay I got from youtube and as you can see it’s too slow and needs a crop/resize to be usable.
To fix it, I sped the frame rate up, cropped the overlay, and resized the overlay so it fits over my base gif. I also sharpened the overlay (500% amount, 0.3px radius) so that the edges were smooth. This is the new overlay gif and the one I’ll be using for the gif effect.
A tip: I also like to add a brightness/contrast layer to get rid of the grey on the overlay gif. Because we’re working with blending modes to achieve this effect, any parts of the overlay that are grey will be a blended mix of gif1 and gif2. If you think this will look good for your gif effect then don't worry about it!
Another tip: try to get the entire overlay movement to fit into a 2-3 second window. Anything longer than that will likely be cut off when you have to trim your gif to meet the upload size limit and it would suck to only have half of the overlay.
Step 2: Creating the gif effect
Drag a copy of gif2 and a copy of the overlay gif onto the gif1 canvas. I like to use Ctrl+Shift+V so that the layers are pasted in the same position as they were on the previous canvas. MAKE SURE that both overlay layers are in the same position on the canvas. If one of the overlay layers is higher/lower/etc. than the other then the effect won't work properly.
Then, make a second copy of the overlay and invert it (Ctrl+i). These are the layers you should have:
Before you go any further, trim gif2 and both overlay layers so they are all the same length.
Now, we need to rearrange the layers and set blending modes. The top layer should be whichever overlay goes from black to white. This is because when we change the blending modes, the white part of this layer will disappear and look like its being replaced by gif2. In this case, that is the overlay (inverted) layer. Then we want gif2, the other overlay layer, and then gif1.
A tip: this process can be done the other way where the top layer is the overlay that goes from white > black however, you are much more likely to have an error where there is a grey/black line around the overlay effect in your final gif. In order to avoid that, I always use the black > white layer on top.
Next, set the top overlay layer to darken. You should only see the black part from the overlay and gif2 should fill in the white part. Here’s how that looks in my example.
Next, select the top overlay layer and gif2 and convert both layers into one smart object. Your layers tab should look like this now.
Now, set the new layer’s blending mode to lighten and the overlay layer’s blending mode to darken. Once you do this, you should be able to see gif1 as well as the overlay gif.
Step 3: Timeline and exporting
At the moment, gif1 is still significantly longer than the overlay gifs. Since this gif is just over 10 mb (which is pretty small for this effect) I’m going to trim about 1/4 of a second off the end of gif1 and then drag the overlay layers so they all end at the same time.
Now you’re free to export the gif! This is the finished effect for the example gif!
A tip: sometimes, when I convert to from timeline to frames, the gif becomes a little longer and slower. It has to do with different frame rates across the videos and photoshop but I'm not smart enough to understand it. If that happens, just set all the frames with the overlay layers to 0.04 speed instead of 0.05.
And we're finished! I hope that was helpful and made sense. If you have any questions feel free to drop them in my inbox or send me a message!! <3
INK OVERLAY GIF PACK
gifs for you to use in your overlays, graphics or backgrounds - or just as they are! please like or reblog if you intend to use - many thanks…
Octomoosey <3
May I ask how did you create the first GIF effect? Thank you 😍😍
Heyoo 🌻 Before I start - I suck at explaining so there's a high chance this will be a hot mess - if something is unclear, let me know 🥰
Okay so here's how I did the blending thingy on the first gif of this set (there must be an easier way though, this is just how I worked it out by myself):
1. First of all, you'll need a B&W overlay gif, I got mine from here.
2. I created the two gifs separately and converted them to Video timeline, then selected all the layers on both of them and converted them to Smart Object. I opened my Overlay gif and did the same thing. Starting from here I worked in two windows:
3. The first window was my base gif (the purpl-ish one): I drag-n-dropped the Overlay gif on my base gif, I added an Invert layer as a clipping mask on the Overlay gif, so the blackness would swim in from the left side, like this:
4. Then I set the Overlay gif to Darken, this is how the first window looked like:
5. Moving on to my second window - my Overlay gif: I drag-n-dropped the B&W gif on the Overlay gif and set it to Darken/Multiply (I forgot which one because I forgot to save the PSD lol but it depends on your gif anyway).
Now you can see that the two windows are the two halves of the final gif, perfectly matching 🌝
6. I selected both layers in my second window (B&W gif and the Overlay gif), converted them into a Smart object, and drag-n-dropped this new Smart object on the top of my purple gif (aka first window), then set it Screen.
That's pretty much it, after this I just threw in some textures, Solid color layers and the text - they all help to make the blending a little smoother. 😊
I hope I could explain it decent-ishly, but yeah, let me know if you still have questions (or if I messed something up hehe)! 🥰
I was just wondering if you have a tutorial on how you created this effect in your gifset, it's something I'd like to try but have no idea where to start. Your set is so pretty! Any helps appreciated x
Hey Nonnie, thank you! This is super late, but I don't actually have the psd for this set anymore (I delete them as soon as I post them), so we're just gonna wing it with a gif I made the other day. I think this ask is about the text, but if it's anything else, just drop me another line and I'll get to it when I can!
I'm pretty sure I got this tutorial from the wonderful @eddiediaaz but I then turned it into Lazy Girl Hours :)) anywho, here we go!
We’ll be making this gif:
This tutorial assumes basic knowledge of gif-making, Photoshop, and coloring. I’ve only described the typography tutorial in this, but you can reach out if you have any questions.
Tutorial under the cut:
Couple things to note beforehand:
There is a lot of trial and error involved when doing any sort of effect, and this is no exception! You might have to play around with the colors and the settings before you find something that looks good and readable and that fits your set!
This text effect works better on big gifs (540px width).
For this, I find that a simple font works better than a fully-cursive one, but play around with what you like. The boxes may need some adjusting if you use a font with too many tall or tail letters (i.e. text where all the letters aren't on one uniform line - that's why capital letters work so well.)
Movement works really well with effects like these, but again, it depends on your gif + readability. If you have a blended gif, it may take a little more trial and error.
I work in frame animation for all my text effects, but this works just as well in timeline as well.
We’re going to start with this gif:
First, I like to put my text on the gif. You can obviously move this around later so don't worry too much about how it looks right now.
The dialogue is "Just don't feel it." "Feel" is one of those Big Words for this quote, so I'm going to emphasize it with cursive text.
I am using Moon for the sans serif text, and Santa Fe Spring for the cursive text. Keep both of these in white for now:
Next, we're going to use the rectangular marquee tool to draw our rectangles around the capital letters (we're not touching the cursive text right now). I just eyeball this, and then try to center it as much as possible.
(The rectangular marquee tool has a keyboard shortcut of M, and it's the second tool in that little toolbar on the left of most people's Photoshop.)
This is what that'll look like:
Next, we're going to go down to the icons at the bottom right of the layers panel and select the half-black half-white circle > Color Fill.... You should get a color dialogue box. Choose your color - I'm using #8d0000. Then, we're going to move that layer below the corresponding text layer, and set its blending mode to Difference. This is what that looks like (click the image for better quality):
I'm going to repeat that with the other two boxes as well, using the same color. The boxes will look different with the Difference blending mode because of the shadows underneath.
For example, the box with "it" looks like a solid red square because it's against a completely black background, while the other two have some blue shading to them since there are some highlights behind them.
This is what my gif looks like now:
Next, I like to go The Lazy Girl™ route and put all three color-fill layers into one group underneath all the text layers. This just lets me edit the drop shadow of all three of them at the same time.
Right-click the group and open up the Blending Options. In Drop Shadow, these are the settings I'm using. The drop shadow color is #0c6477:
(Note: uncheck "Use Global Light" especially if you're working in frame animation to make sure all the drop shadow has the same angle on all frames.)
This is what my gif looks like now:
Now that we've finished that, time to move on to the cursive text.
I usually match the cursive text to the palette of the rest of the text, and since the drop shadow is our "accent" color, so to speak, I'm going to use a lighter version of that color. I am also going to add a drop shadow for readability.
The color I used for the text is #acfffe and I actually ended up adding two drop shadows, just because I needed something subtle that doesn't overwhelm the text, especially since it's a delicate font. Here are the settings for both layers:
And here's what my gif looks like now:
Now, before we move on to the lines, just check the adjustment of all these text layers, see if there's anything you want to change. It's easier to change now than after the lines are added, since you'll most likely have to redraw them if you move the boxes after the fact.
To draw the lines, we're going to use the Line Tool. I just freehand all of this, and I try to go from center to center of the boxes when I can. It all depends on your angles.
My lines are 2px thick, but you can change these depending on your preference. Here's what mine look like right now:
We're going to do the same lazy hack that we did for the color fill, and put all three line layers into a group. Move this group below the text layer and the color fill layers. The reason for this is so that the lines look like they're coming seamlessly from the box, rather than from on top of them or something.
Then, set the group to opacity 50%. I like more subtle, simple looks in my gifs, so I don't like super high opacities.
And that's it! This is our final gif:
Some final notes:
Absolutely play around with the blending modes of the color fill layers for this effect. These two gifs are the exact same color we've been using, just two different blending modes. You can see how drastically different they look. The first one is Linear Dodge (Add) and the second one is Vivid Light:
It can change how your gif looks in a BIG way, so play around with it, see what you like, especially if you don't really like the "two toned" thing going on.
Sometimes, I also like playing with the width and height of the text in the font settings, making it shorter and wider, or making it taller and more compact. You can play with the letter spacing as well. The world is your oyster, etc etc.
One other thing I've started doing is erasing the lines with a big brush, just to fade them from his face a little, like this:
To do that, use a layer mask on the line layer folder, and a brush that's 0% hardness, and at least 200px big. For this gif, I also changed the opacity of the lines back to 100% so the fading effect is a little more pronounced:
(this gif isn't the best example for this, but oh well. Anywho, hope this helps, Nonnie! Let me know if you have any questions.
Your recent yellow jackets set is everything!!! How did you do the sound wave effect on photopea 👀
hi anon! thank u for asking <3
for this tutorial, you will need to make the soundwaves using VEED.IO, as seen in the original tutorial from @usergif. the main differences come when you put the finished soundwave gif into photopea! for this tutorial, you should have a basic understanding of giffing in photopea.
below the cut is the tutorial for photopea:
before we get too far, i should say that you should be saving your gifs as psds throughout this tutorial. to do that, go to file > save as PSD and save it somewhere you can find it again. with that being said, let’s go forward into the tutorial!
part one: editing the soundwave .gif
once you have your soundwave .gif, in photopea, go to file > open… and open up the file. your photopea dashboard should look something like this:
scroll to the bottom of your .gif file’s layers. you should have a frame that’s titled something like “_a_frm0,80” with the little eye icon on the left showing that it’s visible. we don’t really want this frame, since (as you probably noticed) the soundwaves aren’t moving, which defeats the purpose of the soundwaves in general. so, delete it!
(if you panic that now the workspace is blank because you deleted that first frame, click the little box next to your next frame (for me, that would be “_a_frm1,90”) to make that frame visible)
now, from here, i’d highly recommend knowing how many frames your finished product is going to be. for the gif i’m making, i know it’s going to be 30 frames, and the VEED.IO gif i have now is 60 frames; thus, i’m going to delete the 30 extra frames so that the gifs i’m creating will merge correctly.
another thing to note: since we deleted that “_a_frm0,80” frame, now your frames are accurately counting from 1 to whatever the last frame is. so, when you go to delete frames, keep that in mind!
for me, i want to keep the last 30 frames of my VEED.IO gif, so i’m going to make the frame titled “_a_frm31,90” visible by clicking that little box like we did before. i will then left click the frame titled “_a_frm30,80”, scroll down and, while pressing shift, click my “_a_frm1,90” frame to highlight the other 30 frames that i don’t want. with all of the frames selected, drag them into the little trash icon at the bottom right.
the reason i did that whole deleting extra frames part first is because now is the most tedious part of this tutorial: renaming the frames.
as you’ve noticed from these frames, all of them have a “,80” or “,90” — that is basically how fast the gif is going to be move once you save it as a .gif file. for the VEED.IO gif file, these tend to alternate between “,80” and “,90”. however, i know that my other gifs are going to have “,50” for all of the frames, so we need to change this so that the finished gif doesn’t have the soundwaves moving twice as fast as the gifs behind them.
there’s no way that i’ve found that’s faster for this, so for now, double click each frame and change the “,80” or “,90” to “,50”. here’s the before and after of what my frames look like:
but we aren’t done yet; my finished gif is going to end up being 540px in width, so i’m going to go ahead and change the width of my VEED.IO gif by going to image > image size… and changing the height to 535px (don’t worry about the height, it doesn’t really matter). you can make it 540px if you’d like, but i want to give myself room to adjust the soundwaves on the finished product once we actually get there, so i’m making it a few pixels smaller than it should be.
for this next step, in your gif layers, make sure you have the last frame (in my case, “_a_frm61,50”) selected. you should have a color that you want to have for your finished product; for me, i want mine to end up being purple, so while having that last frame selected, go to layer > new adjustment layer > gradient map…, which should bring up the following popup:
left click the gradient in the popup, and change the white to whatever color you want for your final gif. my soundwaves now look like this, with the purple gradient map:
and now you can close the gif folder, since we’re finished messing with everything in it! however, we aren’t quite done with making the soundwave gif itself; we need to get rid of that VEED.IO watermark in the corner.
there’s a couple ways to do this, but i think the easiest way is to just draw over it. using the “rectangular select” tool and creating a new (transparent) layer, use the paint brush tool in black to paint over the watermark (you will only be able to draw within the selected area). below is a screenshot of the different buttons and steps:
and now your soundwave gif is done! now you can go to file > export as > GIF.
part two: making the finished product
now that you have your soundwave gif ready, make your other gif or gifs for the finished product! i won’t go into detail about how i made mine, but just know i’m going to be using three other gifs besides the soundwave gif we just made.
with all of your gifs made, go to file > new… and create a new canvas. here are the specifications for my gif:
open all of your gifs, including the soundwave gif file we made a moment ago. now i noticed in making my soundwave gif that i miscounted my frames by one; no problem, i will do just like i did earlier and delete the frame titled “_a_frm0,50” so that my soundwave gif matches my other gifs.
on your new canvas, put in all of the other gifs (not the soundwave gif, yet) and blend them together as you please (if you have more than one; if you just have one gif, then just put that gif onto the canvas with no changes). if you’re confused about how to blend gifs, here is my tutorial, and there is another tutorial by arwen @benoitblanc here that you can follow as well!
now that all of my gifs are put together, duplicate your soundwave gif into that canvas by right clicking the soundwave gif folder and clicking “duplicate into…” and choose the new canvas you have created. it should look something like this:
that’s not where i want the soundwave file to be, so open up the gif folder for the soundwave gif. use the same steps we did to select the frames from before and then move the gif wherever you’d like on your canvas. i want my soundwaves at the bottom of the canvas, so i click and drag the soundwave gif (on the canvas) and drag it down until it is centered and half of it is visible.
with my soundwaves moved, now my gif looks like this on the canvas:
now we want to get rid of the big black box that is covering a majority of the bottom half of the gif. to do so, use the blending mode dropdown menu and choose either “screen” or “lighten”. depending on the color of your soundwaves, one may look better than the other; just choose what you like best! for my gif, i chose “screen”.
now, from here, it’s free reign to do what you want with the gif. i added some gradients by going to layer > new fill layer > gradient fill and selecting the second option from the gradient dropdown menu to make a one-sided purple gradient (i did this a few times to mess with the blending modes and angles of the gradients). now my gif looks like this:
which i like much better than what i had before!
now, add whatever text you’d like, and once you’re completely finished messing around with your gif, go to layer > animation > merge to combine your soundwave gif with your other gif(s). then, go to file > export as > GIF, double check that your final gif looks like how you want it in the preview (and that it’s under 10MB), and save!
and now you have a finished gif with the soundwaves! congrats! hopefully this tutorial was coherent and in depth enough for you, anon. feel free to send me other questions if you have them!
We’ve all been there, unfortunately. But don’t worry, there’s something to do.
How do I know my tags are broken?
It takes from a few seconds to 3 minutes for your post to appear in the tags. If after 3 minutes your post still isn’t in the tags, there’s an issue. You can always try to post each gif individually to see if the issue comes from one gif or if it comes from your blog. Sometimes, a gif cannot appear on your dash either for some reasons.
Is only my main blog affected?
Unfortunately, not. If your post doesn’t appear it will affect all your sideblogs. It’s not a bad thing, because you can always try to post from an empty blog to see if your tags are broken without posting 15 times in a row from your main.
Is there a way for my post to appear in the tags?
Actually, yes, there’s one! It’s dumb but pretty easy. You just need to put an image that’s already in the tags. Don’t worry, I have the perfect image for you. You can put a transparent line after, before or in the middle of your gifs. You will find the transparent line in the middle of the two images.
You will find an example here (the line is after the caption) and you can always copy the transparent line from this post if you prefer. You can save the transparent line in your phone/computer and use it when you need it. Mine has been saved months ago and it still works.
Can I put the transparent line even if I already posted my gifset?
Absolutely, and your gifset will appear in the tags within a few minutes.
If you have any questions, ask me! Tumblr is weird
Heyyyyyy!! It’s been a million years since I did a tutorial. How is everyone? I thought I’d share my process of removing that yellow tint that some movies have. I’ll be showing you how I made the gif shown above from Indiana Jones & The Raiders of the Lost Ark, and at the end I’ll show you some more examples :D
what you’ll need:
Your scene of choice, screencapped and ready to rumble
Photopea, lots of storage and a damn good internet connection lmao
Basic gif knowledge
Read the full tutorial below the cut! And share it with your friends if you liked it! <3<3<3
