#gif caption tutorial

[yrsonpurpose]

Are you intending to talk all the way through this?

[aimeecarreros]

[kimmibear]

“Your dad rocks! A plus!”

[cal-kestis]

Hi! I've been asked for a tutorial on my new Google layout, originally seen here and here. So, to make it easy, here are FOUR free templates! All I ask is that you give me proper credit in your caption if you use my template or take inspo from my design. Enjoy! :)

Get the NEW Google templates free via ko-fi! (Donations appreciated but not required <3) Includes PSD templates with pre-made layer masks, shapes, and animations, plus tips for the following designs: – Image search results – Biography – Related searches – Animated "no search results"

Additional resources: – My original animated Google search overlay tutorial & template – Karla Google Font (this is the only font used) – Background via Unsplash

[antoniosvivaldi]

Rotoscoping Tutorial by @antoniosvivaldi​​

Hi everyone! I’m excited to announce my long-delayed Rotoscoping Tutorial - requested by a number of people over the past calendar year. 

In this tutorial, I will show you how to create the cutout gifs like this (and seen in most of my gifsets under this tag) with Rotoscoping on After Effects. I’ll also provide additional examples and a number of things that I do to optimise my giffing / Rotoscoping workflow (e.g. useful shortcuts & other things to be aware of).

This is the structure of the tutorial:

Why Rotoscoping? Photoshop video timeline’s limitations

Photoshop workflow pt 1: Preparing your gif

After Effects workflow: Interface, shortcuts, and Rotoscoping tools

Photoshop workflow pt 2: Assembling your gif; with multiple examples

Bonus content: Rotoscoping tips* & workarounds to common issues

For quick reference, here are example gifsets (and where Rotoscoping is used in the posts) that I will mention in the tutorial:

Example 1: Cutout gif effect | panels 2 + 4

Example 2: Changing a gif’s background colour | all panels

Example 3: Cutout gif effect in a shape | all panels

Example 4: Putting it all together | panels 1, 3, & 5

What you need & need to know:

Software: Photoshop & After Effects (After Effects 2021 or later for Rotobrush 2.0)*

Hardware: 16GB RAM required to run later versions of AE*

Difficulty: Advanced; Knowledge in making gifs, applying layer masks, and using video timeline interface assumed

Key concepts: Rotoscoping (AE) / Video Timeline (AE+ PS) / Layer Masks & Groups (PS)

Supplementary files: tutorial resources

*I’m currently running the latest version of PS & AE on an M2 Mac, but I’ve also used older versions (CC 2015 & 2020) on Intel-based Macs. I’ll outline some known compatibility & performance issues, and workarounds later in this tutorial that could help streamline your giffing workflow.

Tutorial under the cut. Like / Reblog this post if you find this tutorial helpful. Linking this post / the example gifsets in your post caption, will be greatly appreciated if you read this to create effects seen in Examples 3 + 4.

1) Why Rotoscoping?

My Rotoscoping journey is motivated by the shortcomings on Photoshop - namely the limited options to manipulate the Layer Mask keyframes in the video timeline interface, as well my need to gif more efficiently.

Suppose I want to cutout this subject or recolour the background of a gif on Photoshop: I personally classify the gifs that I prepare on PS into 3 types based on the motion of the subject

These are the common Photoshop-only approaches when attempting to mask the subject in the gif.

Case 1: minimal motion in the subject → a simple layer mask will do the trick

Case 2: some linear panning of the subject in the gif → using the Layer Mask Position keyframes in the video timeline interface will do the trick

Case 3: subject moves around a lot (e.g. zoom motion) → Unfortunately this is where a Photoshop-only workflow will require frame by frame masking. Layer Mask Position keyframes only apply positional translation (but not transformation / rotation) on the layer mask

Enter Rotoscoping on After Effects: Instead of resigning to frame by frame procedure on Photoshop, I opted to make my life easier by learning to Rotoscope on After Effects. This essentially provides me an opportunity to cutout / recolour a wider range of gifs with relative ease.

2) Photoshop pt. 1: Preparing your gif

Prepare your gif the usual way - whether you screencap or import frames from video.

Then your Photoshop should look like this:

Now, I shall walkthrough & explain my personal giffing workflow (as of 2023) after loading the gif frames. To speed up the process, import my gif prep action file to Photoshop.

Going to Window > Action, you’ll see a set of actions under the “gif prep” folder. 

"set frame delay for timeline” (highlighted in yellow) will set all of your entire gif’s frame delay to 0.03s

“convert to timeline“ (highlighted in red) will take you to the Video Timeline interface

To play an action, press on the Play button (highlighted in green)

i. Set the frame delay of the entire gif to 0.03s. (play “set frame delay for timeline” from my gif prep action pack)

I work with everything in 0.03s frame delay (or equivalently 30fps) at first. It’s always possible to change the frame delay of the final gif to 0.05s before uploading onto Tumblr.   

ii) Convert this gif to a Smart Video Layer (play “convert to timeline” from my action pack)

Note: I personally don’t resize the gif just yet. That’s because Rotoscoping in full video resolution will render higher quality details around the edges as well as more flexibilities later on in the editing process.

Performance optimisation: If your computer has 8GB of RAM or less, you might find it helpful to crop / resize your gif to Tumblr dimensions now for a less sluggish performance in After Effects later on. 

(I have giffed on a desktop with 8GB of RAM and it’s quite slow at rendering individual frames of a 1080p short clip on AE)

iii) Add colouring adjustments on the gif. This will save you A LOT of time when you Rotoscope gifs that are originally very dark / poorly lit (e.g. the uncoloured Taylor Swift gif shown just above). 

If you usually colour your gifs at the very end of your giffing process (i.e. after sharpening), this will be a bit of a change.Nevertheless I still highly recommend adding some base colourings now to at least increase the contrast between the subject and the background.

iv) To minimise lagging on After Effects, simplify this gif file as follows: 

Flatten / Unsmart this gif file back to frame animation mode: play “flatten” (highlighted in red) from my gif prep action pack

Set the frame delay to 0.03s: play “set frame delay for timeline” (highlighted in green)

Convert the simplified gif file back to the video timeline interface: play “convert to timeline” (highlighted in yellow)

After “unsmarting” and converting back to the video timeline, your interface should look like this

And voila! This gif PSD is now ready to be imported to After Effects for Rotoscoping work!

3) After Effects: Interface and useful shortcuts

Open After Effects and Import (Cmmd / Ctrl + I) your gif PSD that you’ve just prepared.

After importing your gif PSD to After Effects, the interface should look like this. 

In the screenshot below, there are two compositions: the imported gif (highlighted in green) & another composition file made from selecting the imported gif (highlighted in red)

For the rest of the workflow, we will edit from the clone composition (the one highlighted in red), so select this one.

Before we take our plunge into the Rotoscoping, here are a few useful shortcuts to remember. I’ll explain the Roto Brush tool in the next section.

Preview the previous: fn + up arrow

Preview the next frame: fn + down arrow

Add to Roto Brush selection: holding Shift while you’re using the Roto Brush Tool

Subtract from Roto Brush selection: holding Alt while you’re using the Roto Brush Tool

Change Roto Brush size: while holding Cmmd / Ctrl, click + drag your mouse left / right

4) After Effects: The Rotoscoping Process

To access the Rotoscoping tools, click on the Roto Brush icon (highlighted in red in the screenshot below)

Then you’ll get the following dropdown options with two Rotoscoping Tools

Roto Brush Tool: This is where you add / subtract your Rotoscoping selection in your composition

Refine Edge Tool: Paint around the edge of your selection for more refined edges. Very helpful for Rotoscoping fuzzy edges / hairs

To make some Rotoscoping selection, first grab the Roto Brush Tool and click on the subject you want to cut out from your composition. 

When you’re Rotoscoping you’ll see this in the Effect Controls panel. 

There are two versions of Roto Brush:

Version 2.0: The Rotoscoping selection is powered by AI for higher accuracy when you propagate the frames. 

Version 1.0 (Classic): This is the legacy Roto Brush Tool that uses a lesser algorithm. Recommended only if Roto Brush 2.0 is unstable on your machine due to RAM issues.

And two quality settings for Roto Brush 2.0:

Standard

Best

Note: I am currently unable to use Roto Brush 2.0 with Best quality model on my machine to compare the differences myself, so I’ll link this page that explains the two quality settings.

Note: if you’re using an older version of After Effects you’ll see this instead. This corresponds to Roto Brush 1.0 / Classic in the newer versions of AE.

When you’ve made a selection using the Roto Brush Tool, you’ll see the pink lines around the subject. This is the region that you’ve selected to Rotoscope!

To bring out some details around the edges, grab the Refine Edge Tool and paint around the edges

Then the interface will look like this

To view the Rotoscoping selection that you’ve made more intuitively, you could click on the following buttons.

Personally I like the viewing my selection using Toggle Alpha (the second box from the left) & Toggle Alpha Boundary (the 3rd box from the left)

Toggle Alpha

Toggle Alpha Boundary

Note: If you aren’t happy with the initial Roto Brush selection, you can always add (press Shift while using the Roto Brush Tool) / subtract (press Alt / Option using the Roto Brush Tool) your selection.

After you’re happy with your Rotoscoping selection in the first frame of your composition, press fn + down to view the next frame.

Repeat pressing fn + down and fix the selection along the way (e.g. I subtracted a small area from my Rotoscoping selection with the Roto Brush tool to make the edge look cleaner).

After fixing the selection along the way, go back to the composition file (select the clone composition again) and you will see that a cutout gif is made!

To export this, go to File > Export > Add to Render Queue. You’ll be redirected to the Render Queue panel at the bottom of After Effects. 

Highlighted in red: click to change export setings

Highlighted in green: click to change save destination

Highlighted in yellow: click to render video

To preserve the transparency of your cutout gif, you need to change your export settings in the Output Module. 

Under the Video Output section, change your Channels to RGB + Alpha. Press OK. Then Render the video.

5) Photoshop pt. 2: Assembling your final gif

The essence is to drag the cutout gif (aka the video file that you’ve just rendered on AE) into a new PSD composition file. This will be where you’ll do the rest of your giffing. Your workflow will contain the follow steps:

Make a new blank PSD composition file in Tumblr dimensions

Enable the Video Timeline

Follow the instructions detailed in the individual examples i.e. drag the cutout gif into the PSD & adjust the timeline start / end points

Exporting the final gif. If you’ve worked in 0.03s frame delay all the way up to here, just play the action that I’ve provided in the tutorial in the following order to set the frame delay to 0.05s.

EXAMPLE 1: finalising your cutout gif | sample gifset

After enabling the Video Timeline in your PSD composition file you’ll see something like this

Go to your folder, drag the cutout gif you’ve made on After Effects, resize / reposition, then press Enter. 

And also make sure to adjust the Video Timeline’s start / end values.

Add some finishing touches. Because I did the Rotoscoping at full HD resolution, I’ll also need to sharpen my gif in this step.

After you’re happy, you can export this into a gif file and do what you usually do to change the frame delay to 0.05s. 

Notes on my “Unsmarting” approach:

To prevent accidentally writing over a PSD composition file that I’ve spent time editing, I personally render this into a short video (File > Export > Render Video) and use the following export settings (to prevent quality loss)

Then I open the rendered clip and play the actions in my gif prep action pack as follows:

flatten: this “Unsmarts” the clip / video

set frame rate: this sets all frames to have 0.05s frame delay

This is the final interface that I get before I pull up the Save For Web window.

EXAMPLE 2: changing your gif’s background colour (for Case 3 gifs) | sample gifset

From your folder, drag BOTH the cutout gif (rendered on AE) and the original gif to your blank composition. 

Important: you need to make sure that both layers are properly lined up in the composition file (i.e. selecting both layers when repositioning / resizing)

 On Photoshop, press Enter twice and place the cutout gif on top of the original gif from the Layers panel. Then you should get something like this

Select both layers and resize / reposition them in your PSD composition until you’re satisfied with the placements.

The basic idea here is to add some adjustment layers / other things in between the cutout gif and the original gif. To do this, select the original gif layer in the Layers panel.

Then you can start adding.a bunch layers e.g. textures, onto the composition.

And then here’s the exported gif!

6) Fancier Rotoscoping examples

Note: knowledge in using layer masks / groups and making shape / text layers assumed

In the next two examples, I’ll show you how to combine the two previous examples with shape / text layers.

EXAMPLE 3: Placing your cutout gif into a shape / text layer | sample gifset

Add a text / shape layer to your blank PSD composition

We want to prepare a masked group so in the Layers panel:

Make selection from layer: Cmmd / Ctrl + Click (highlighted in red)

Make a new group: click on the folder icon (in yellow)

Create layer mask: click on the icon (in green)

After duplicating the masked group you’ll get something like this in the Layers panel

Drag your cutout gif into the PSD composition

Place the cutout gif into the masked group on top

Select the mask of the top group and paint (in white) over the region you want to reveal for the cutout gif

Add some finishing touches & export the gif!

EXAMPLE 4: Putting it all together | sample gifset

You follow the same approach as in Example 3 to prepare the masked groups, but you need to drag two gif layers in (and resize them using the approach outlined in Example 2)

Place the gif layers as follows

While selecting the mask of the group on top, paint (in white) over the region that you want to reveal in the cutout gif

Now select the original gif (placed within the other group) and add some adjustment layers

After adding some finishing touches & exporting the gif, I get this!

Note: you can do even more overlay effects in the background portion of example 4. There will just be more masked groups + adjustment layers

7) Bonus: Some useful Rotoscoping / giffing lifehacks

GIFFING LIFEHACKS:

— Use best quality footage that you could find & Rotoscope in full video resolution, for better details around the edges

— Poorly lit scenes & low contrast edges are harder to Rotoscope (e.g. Toy Story set / TS evermore set).

If you’re new to AE, I would recommend choosing videos with well-lit gifs with simpler backgrounds and high contrast edges (e.g. Maisie Peters Cate’s Brother set)

— Use Rotobrush 2.0 if you’re using After Effects 2021 or later. It’s more difficult to Rotoscope / change background colour for gifs with a lot of movements with the classic Rotobrush tool. If the scene is tricky, you might want to switch to the “Best” quality model.

HARDWARE-RELATED PERFORMANCE OPTIMISATION:

— The recent versions of Photoshop require at least 8GB of RAM. If you have less RAM, it will still work provided you have enough scratch disk space. For better performance, it’s best to close other applications when you’re using Photoshop.

— The recent versions of After Effects require at least 16GB of RAM. If your machine has less RAM than this, there are some workarounds to prevent your machine from hanging: 

Essential: close other applications that you’re running on your computer

Resize your gif down to Tumblr dimensions & sharpen it before importing to After Effects.

Install an older version of AE 

8) Bonus: Some known software + hardware issues, and workarounds

KNOWN ISSUES ON PHOTOSHOP:

I currently have minimal issues in my giffing workflow, but I’ll nevertheless outline a few common known Photoshop issues for anyone who needs some workarounds.

— Video Timeline interface missing: this affects Apple Silicon Macs (i.e. M1 / M1 Pro / M1 Max / M1 Ultra / M2 / M2 Pro / M2 Max)

Update to newer version of Photoshop (updated 2022 or 2023)

Open Photoshop with Rosetta

— Scratch disk full error: This is a common issue with machines that lack RAM & have nearly used up internal storage. Editing video layers in the timeline interface uses a lot of memory hence will require a lot of scratch disk space. 

Make sure that you have enough free storage space while using Photoshop. Alternatively you can use an external hard drive as a scratch disk.

KNOWN ISSUES ON AFTER EFFECTS:

These are a few issues that I have personally ran into over the course of giffing on multiple devices & multiple versions of After Effects.

Note: Inputs from M1 / M2 Mac users with regards to experiences on using the After Effects Rotoscoping tools are welcome!

— Rotobrush 2.0 set to “Best” quality model causes AE to crash: this affects anyone who’s using MacOS Ventura

I’m currently experiencing this issue on my M2 Mac. The workaround right now is to change the Roto Brush 2.0 quality setting to Standard. 

This is due to some software compatibility issues on Adobe’s side specifically with MacOS Ventura. Fingers crossed that they will properly fix this bug in the future updates!

— Cannot re-open project files with Rotoscoping: this affects anyone using the initial release of After Effects 2020 (I had installed this on an Intel-based machine and it sucked)

The only option here is to update to a later version of After Effects.

8) More useful Rotoscoping resources

Rotoscoping + Keyframes Tutorial by @jenna--ortega​

Rotoscoping + Masking Tutorial by @usergif​

Rotoscoping For Beginners in After Effects | Motion Graphics Tutorial

I hope you enjoy reading this! If you have any questions / need any help related to this tutorial, feel free to send me an ask!

[usergif]

NEW YEAR, NEW FONTS #USERGIFNYNF  TYPOGRAPHY CHALLENGE ・ JAN 8-12

Let's kick off 2024 with a new challenge... all about typography! If typography has ever made you feel stuck, we hope this challenge helps you break out of your comfort zone, discover new fonts, and try new styles! This event is open to gifmakers from all fandoms and will run from January 8-12, featuring 5 prompts:

DAY 1 (1/8): LAYER STYLES ↳ Use any combination of blending options (screen, hard light, difference, etc.) and/or layer effects (bevel, shadow, glow, gradient overlay, etc.). DAY 2 (1/9): ONLY ONE ↳ Refine your choices and use ONLY ONE font throughout your entire set. DAY 3 (1/10): PERFECT PAIRS ↳ Use a different font pairing per gif. Check out our font pairing recs! DAY 4 (1/11): THREE TYPEFACES ↳ Use 1 Serif + 1 Sans Serif + 1 Script typeface in your set. DAY 5 (1/12): FAVORITE FONT(S) ↳ Show off your favorite font(s) any way you want!

Rules for how to participate below the cut:

Reblog this post and follow @usergif

Create a gifset using the prompts provided above

Tag #usergifNYNF so we can reblog your creations!

Caption your post with: @usergif new year, new fonts: day # - prompt description [fonts used: font name (source)]*

*Optional: We encourage including font names and their sources in your caption so others can find them [e.g. Blastimo Sans (dafont.com)]. After all, this challenge is about discovering new fonts and typography styles! You can also put this in a "read more" after your main caption or put a link in part of your caption that redirects to an internal Tumblr link (e.g. a page on your blog that lists fonts used). We don't recommend linking to external sites as doing this too many times in one post can affect the visibility of your post.

Questions about the event? Send us an ask here. We’ll tag all event answers with #usergifNYNF.ask. Need inspo? Check our RESOURCE DIRECTORY for typography tutorials or look through some of our members' font recs!

We also want to take this moment to thank you all for helping us reach over 10k followers! We hope this blog can continue to be a source of help and inspiration for gif effects, and we can’t wait to see what you create for this challenge! 🪄

Fonts used: Gif 1, in order of appearance: Traveling Typewriter*, Bassy*, Buy More*, Germanica [Plain Germanica]*, Doky*, Magic Retro*, GIN Grotesk [Gin Rounded] (befonts.com), Random House*, Lostar*, Amberla*, Schizoid Personality* (* = dafont.com) Gif 2: Karla (Google Fonts), Buffalo Script (dafontfree.io)

[gavisfanta]

hii i love ur story's sm☺️☺️

but i was wondering if you can do a instagram with gavi? with the story!!☺️☺️

INSTA FEED - GAVI

summary: you tried your hardest to hide it, but your dog gave it away

warnings: noneee

@yourinsta

Finally back in Barcelona 🫶🏻🫶🏻 missed my home

liked by random and 829,829 others.

random: i hope you enjoyed your spain roadtrip❤️❤️

random: youre so pretttyyyy

random: girly i love you but Colleen Hoover is not it.

random: i think it ends with us is good

random: i hope ill see you

random: where is that?

random: she said it in the caption, barcelona

random: no but where in barcelona

random: barceloneta i think

yourbestie: I MISS YOU

yourinsta: I MISS YOU TOO

random: so cuteee

-

@yourinsta

feliz dia de Saint Jordi!!!!! 💞💞

liked by yourbestie and 299,619 others.

random: that bear is so adorable😍

yourbestie: who's that hot chick in that first pic??? 😍😍😍

yourinsta: awww❤️

random: can we switch bodies?

random: frr

random: ouuu who are those gifts from...

random: 😍😍

random: youre so prettyyyy

random: her and gavi would actually fit together as a couple

random: I SEE IT I SEE IT

-

@yourinsta

do you guys think he will be mad at me??? 🫠

liked by random 508,729 and others.

yourbestie: yeah honey i dont know but that perfume costs 200 euros....

yourinsta: its okay... ill just tell him that it was an accident...😬😬😬

random: WHO IS HE?!??!?!?!

random: okay but her pics>>>

random: i wish i was you

random: im atill not giving up about my theory with her and Gavi

random: im with you

random: YOU. ARE. SO. PRETTY.

random: 😍😍😍

random: can you check the dm i sent you??

-

@yourinsta

< BCN 3

liked by pablogavi and 999,629 others.

random: love the fit girly

random: i was there yesterday

random: LOVE THE PICS

random: where is your jacket from??

random: THE FACT THAT GAVI LIKE THIS.

random: MY THEORY IS BECOMING THE TRUTH....

random: girl i get that you post gavi cause.....

random: im tired of hiding how fine he is

random: dont hide it. 🤷‍♀️

ferrantorres: 🤣

random: lmaoo what ferran??

-

@yourinsta

i love acting like a tourist and going into all the souvenir shops

liked by pablogavi and 729,829 others.

random: I LOVE BARCELONAAA

random: GAVI LIKED AGAIN!??!?!?!

random: you are so prettyy 😍😍

random: the tourist shops are the best lmao

ferrantorres: he said he likes the third pic 🤣🤣

random: who is he...?

random: HE?

random: The fact that I miss her being somewhere else cause her party posts were always so fun

random: ARE WE REALLY GONNA IGNORE GAVI'S COMMENT?????

pablogavi: 😍😍

random: AAAA

random: IM FREAKING OUT

-

@yourinsta

night time in bcn >

liked by pedri, pablogavi and 829,729 others.

random: camp nou at night tho>>

random: how did she even get in there at night?

random: maybe it was a matchday

random: but there was no game yesterday

random: its older then

random: i love living in barcelona

random: i was there in that pool it was so cool

random: the third pic is so quiet...

random: WHY DO PEDRI AND GAVI LIKE HER POSTS

random: where did you get the hoodie from??

random: youre so pretty in the first pic

-

@yourinsta

this past week was an absolute dream, now I'm back to studying 😖

liked by pablogavi, ferrantorres and 739,729 others.

random: i can imagine that the past week was a dream. the barca players also like my posts in my dreams.

random: LMAOOO

random: I'd die to have your hair

random: whats the dogs name??

random: love how she represents the girl aesthetic of studying while having starbucks

random: frrrr

random: i absolutely live for the makeup in the first pic

random: hair tutorial when??

random: orange is so your color

random: nahh its still red

random: i still remember when she was in portugal... that felt like yesterday but ut was like 6 weeks ago

random: can we swap lifes? just for one day? pls

-

@yourinsta

photo dump 🎀

liked by pablogavi, pedri and 1,012,829 others.

random: prettyyyy

pablogavi: buen coche 🤔 (nice car)

random: AAA

random: whats with the emoji tho...

random: how is she so lucky that barca players keep liking her posts???

random: first

random: GAVI DRIVES A CUPRA TOO. MY THEORY

random: shut up do you know how many people drive cupras?

random: yeah shes right

random: youre gorgeous. im serious.

random: hala madrid

-

@yourinsta

day at home 💞

liked by pablogavi, pedri and 1,082,992 others.

random: YOUR HAIR IS SO HEALTHY. HOW.

random: okay i love that dog, its official.

random: youre giving golden retriver

random: i adore your aesthetic fr

random: how do you manage to stay so organized

random: when is your next trip?

random: youre so prettyy

-

@yourinsta

what am i without watching sports??

liked by pablogavi and 992,829 others.

random: F1 ON TOP

pablogavi: 😍

random: hey gavi

yourbestie: What are you without sports in general???

random: TAKE ME WITH YOU

random: frr football and f1>>>

random: oh how i wish to be a wag

random: idk how people can be bored of watching sports

random: i love camp nou its so pretty

-

@pablogavi

liked by yourinsta, pedri and 2,829,729 others

yourinsta: ayy guapo *liked by creator

random: wait hear me out. isnt that yns dog?

random: Omg youre right

random: HES SO FINEEEE

random: since when does he have a dog???

random: cant wait for the game against Cádiz!!!!

random: maybe theyre just friends...?

ferrantorres: 🤣🤣

random: OMG HIII

random: FERRAN SNITCHING??

random: you focus on scoring goal first

random: 😍😍😍

random: THATS YNS DOG???

random: YESS AAAAA

random: oh my god theyre just hanging out, chill that doesnt mean that theyre dating...

-

@yourinsta

fine... yall little detectives figured it out...

liked by pablogavi and 2,018,662 others.

pablogavi: ❤️

pedri: finally!!! took long enough

ferrantorres: yall were so bad at hiding it from public

ferminlopez: they grow up so fast 😭😭

random: AAAAA

random: IM SCREAMING

random: THIS WAS SO UNEXPECTED

mikkykiemeney: welcome to the public wags 🫶🏻❤️

yourinsta: aaaa ❤️

hectorforr_: desearía serlo Y/n 😍😍 joder hermano te ves bien ( i wish i was yn, fuck brother you look good)

random: WHA

random: fort bro crazyyy

pablogavi: 💀

llamineyamal: mis padres 😍😍 (my parents)

random: lmaooo

random: THEYRE DATING???

jpcancelo: Por fin ya no nos molestará más jajaja 🤣🤣🤣 (finally he won't annoy us anymore)

pablogavi: 💀

aurorapaezg: 😍😍

random: aurora tell me is she good to gavi?

random: IM. DYING.

joaofelix14: @yourinsta tenemos que compartir ahora (we gotta share now)

yourinsta: PFFFF

random: HAHAHA

[juergenklopp]

How do you make your gifs?

Hello hello! I love talking about gifmaking, so thank you for giving me the chance to ramble.

Instead of a detailed step-by-step walkthrough, I will link tutorials and resources written by the wonderful Tumblr creators on here along the way. Everyone has their method and preferences, and there’s no right or wrong way to make gifs. I’m going to share techniques and resources I picked up along the way that work best for me—they may or may not be suited to your preferences, but I hope you’ll find some helpful things here.

(Warning: screenshot/image heavy)

USEFUL TUTORIALS AND RESOURCES

Here are some tutorials and resources that I found very useful when I got back into gifmaking:

Gifmaking tutorial using video timeline by @hope-mikaelson is identical to my own process

Gifmaking and coloring tutorial by @kitty-forman​, whose process is very similar to my own

Giffing 101 by @cillianmurphy​, an incredibly detailed tutorial that covers everything you need, including a step-by-step guide to using HandBrake

Gifmaking and coloring tutorial with 4K HDR footage by @sith-maul​, another incredibly detailed tutorial with many useful tips

Gifmaking tutorial by @jeonwonwoo, incredibly comprehensive and covers so many aspects of gifmaking from basics, sharpening, captioning, and text effects

Gifmaking/PS tips and tricks by @payidaresque

Action pack by @anyataylorjoy​, the Save action is especially a true life-saver

@usergif and @clubgif are amazing source blogs with many tutorials on gifmaking, color grading, and gif effects, can’t be thankful enough for the members for their work curating and creating for these blog!

TOOLS

Adobe Photoshop CS6 or higher, any version that supports video timeline. @completeresources​ has many links to download Photoshop, have a look!

Photopea is a free alternative to Photoshop, but it has a slightly different UI, check out these tutorials for gifmaking with Photopea

HandBrake or any other video encoder, especially if you’re working with .MKV formats 

4Kvideodownloader for downloading from YouTube, Vimeo, Instagram, etc.

OBS Studio or any other similar screen capturing software. To prevent duplicate frames in gifs that prevents your gifs from looking smooth, try to match the recording frame rate (FPS) with the source.

IMPORTING FOOTAGE AND WORKING IN VIDEO TIMELINE

I work exclusively in video timeline instead of importing video frames to layers or loading files into stack. For videos that don’t require converting/encoding using HandBrake, especially ones that are already in .MP4 format, I tend to open the video directly on Photoshop, and trim the videos around directly.

As mentioned above, this gifmaking tutorial using video timeline is exactly how I make gifs. I find it more efficient, especially if you’re making multiple gifs from the same video/the same scene with little to no change in lighting conditions You can simply slide around sections of gifs you want to save, and they will all be the same length.

Another thing also covered in the tutorial linked is the ability to change video speed in video timeline mode. Right click on the video and set the speed before proceeding with cropping/resizing. This is also very useful when you’re making blended gifs where you need the footage to have the same length.

Slowing footage down.

As mentioned in this post, changing the FPS before slowing down the gif results in smoother gifs. Doubling the frame rate before slowing down your gifs usually yields the best result.

Speeding footage up.

I love using this to speed up slow motion B-rolls to make the speed slightly more natural. It will result in nice, smooth gifs:

(B-roll footage, normal broadcast speed)

(200% speed)

Subject won’t stay in frame?

Another feature of the video timeline mode. Keyframes are your best friend. This tutorial by @kangyeosaang covers everything you need to know about panning gifs. I use this technique regularly, it’s a life-saver.

COLORING

Here are some coloring tutorials I found very useful:

Coloring tutorial by @brawn-gp beloved, their coloring style is second to none

Mega coloring tutorial by @yenvengerberg, for stylized /vibrant coloring

Understanding Channel Mixer by @zoyanazyalensky

Coloring rainbow gifs by @steveroger, which delves deep into Channel Mixer

I tend to go for neutral-saturated coloring in general,  especially for minimalist gifsets with no effects (blending/isolated coloring/overlays etc.), but the possibility is endless for stylized coloring. Here’s what my adjustment layers look like for the example gifs above.

The base footage for this Charles gifset is incredibly desaturated. I started with a Curves layer to bring contrast to the gif, as well as do some color-correcting to bring the base footage to a more neutral tone. To bump contrast, I also like to add a black and white Gradient Map layer with a Soft Light blending mode at 10%-30% opacity:

The Vibrance layer is then used to lift the saturation of the base footage, with the Selective Color, Hue/Saturation, and Channel Mixer layers to help remove the green/yellow tint to his skintone.

An underrated adjustment layer/preset in my opinion is the Color Lookup. You can layer in pre-loaded .LUT color grading presets to help speed up your process. For this gif, it’s simply a base preset Soft Warming Look to achieve a warm, pink-tinted tone.

In hindsight I feel like this gifset is too saturated, his skintone is skewing very red/pink, I could’ve bumped down the lightness of the reds with a Selective Color layer or a Hue/Saturation layer. Try to err on the side of neutral for skintones. Experiment with layer orders—there’s no right or wrong! Remember that each layer build up on the one before it.

The base footage of the Jalen gif is already quite nicely color-graded, but it’s still muddy and underexposed. As with the Charles gif, I started with a Curves layer to bring the gif to a better baseline contrast. Then I focus on brightening the gif with the Brightness/Contrast and Exposure layers.

The Hue/Saturation and Selective Color layers are to color-correct Jalen’s skin tone—it’s something I spend most of my time coloring gifs and focus a lot on, especially when color grading BIPOC skintones. Putting a Vibrance layer, upping the Vibrance and Saturation, and calling it a day would make his skintone skew very, very yellow/orange.

Focus on the reds and yellow for skintone, play around with the Saturation and Lightness sliders, use the Hue slider with caution.

It can be tricky to achieve the right skin tone when working with sports footage vs the higher quality, higher dynamic range footage of films or TV shows, but I try to keep it as close to the subject’s natural skintone as possible.

Here are some of tutorials with tips and tricks on coloring BIPOC:

How to fix orange-washed characters by @zoyanazyalensky

How to prevent pink-washing and yellow-washing by @jeonwonwoo

Coloring tutorial by @captain-hen

Changing lighting conditions?

Fret not—this is why I love working in video timeline. I’ll take this gifset as an example: it’s a deceptively difficult one to color. The footage is 720p and the sunlight shifts throughout the video, so matching across gifs was tricky.

My solution was to split the clips in sections with consistent lighting, and apply adjustment layers to the individual sections before applying general color grading layers on top of everything.

We can make use of the Fade Transition effect for sections where the lighting changes within the gif section we want to color.

(without vs with Fade on the Brightness/Contrast layer)

The difference is subtle in this example, but the brightness in the right gif is noticeably more consistent throughout. You can also add the Fade Transition effect to the beginning for a fade in, of course.

SHARPENING AND OPTIMIZING GIF QUALITY

This tutorial by @anya-chalotra​ covers everything you need to know about optimizing gifs for Tumblr.

Sharpening.

Sharpening is essential to making crisp gif images. Here’s another ask I answered re: my own sharpening settings and maximizing gif quality.

(base footage, unsharpened)

(color graded, unsharpened)

(color graded, sharpened)

The final gif is sharpened with Smart Sharpen, 500% at 0.3px and 10% at 10px (my standard sharpening settings).

Here are some tutorials and resources on sharpening:

Sharpening process by @anya-chalotra

Sharpening tutorial with added gaussian blur by @haleths

Sharpening action by @daenerys-stormborn

Size your gifs for Tumblr correctly.

This is essential: full width gifs are 540px wide.Two side-by-side gifs should be 268px wide. Here’s a handy post on gif size guide for Tumblr.

Incorrectly sizing your gifs will take away the quality of your gifs: undersizing your gifs will especially make them grainy, blurry, and /or pixelated, and won’t display correctly on many people’s desktop theme. Oversizing usually isn't as dramatic as undersizing, but it will make the gifset glitch when displayed, and the file size will be unnecessarily bloated.

Work with HD footage if possible.

Media fandoms (films/TV shows) are luckier than us in the sports trenches—we have to work with what we have. Broadcast footage is usually subpar: lacks contrast, pixelated, very desaturated, the list goes on. But it’s possible to still make high quality gifs from subpar footage. Here are a couple of tutorials to mask low source footage quality:

low quality video ➜ “HD” gifs tutorial by @nickoffermen

Sharpening low quality footage by @everglow-ing

(This gifset I made is from a 480p footage with horrendous lighting conditions and colors, and the end result is decent I’d say)

Save for Web (File > Export > Save for Web (Legacy) or Ctrl + Alt + Shift + S) settings.

I default to Adaptive + Diffusion but also use Adaptive + Pattern from time to time. Any combination of Adaptive or Selective + Diffusion or Pattern will give you a good result. In my experience some gifs will need the Selective color table for the colors to display correctly.

Here are my default settings:

SAVING AND EXPORTING FOR TUMBLR

Converting to frames and adjusting the gif speed.

If possible, avoid exporting your gif and reopening it to adjust the frame speed. I used to do this sometimes when I’m lazy, I have to admit, but this is where this Action as mentioned at the beginning comes in very handy. It converts all visible layer into smart object, then converts it back to frame animation.

Step-by-step:

1. Select all layers

2. Right click > Convert to Smart Object

3. Go to the Timeline menu (≡) > Convert Frames > Flatten Frames into Clips

4. Go to the Timeline menu again (≡) > Convert Frames > Convert to Frame Animation

5. In the same menu (≡), select Make Frames from Layers

6. Delete the first frame (it’s a duplicate) then set your frame speed

Now you can adjust the frame speed before exporting it (Save for Web).

Pay attention to the source framerate.

The frame delay of 0.05 s is usually the default to make gifs for TV shows and films, and it is preferred by most gifmakers. This stems from the fact that most movies and TV shows are 24 or 25 FPS. This may not be the case for all source videos: you might get 30 FPS footage, and sports or gaming footage can be 50 or 60 FPS. Gif speed also depends on the FPS of your original file. Play around with gif speed and see what feels most natural to you.

My rule of thumb is the frame delay Photoshop gives you + 0.01 s. For example, 50 FPS footage will give you 0.02 s frame delay (25 FPS gives you 0.04, 30 FPS gives you 0.03, etc.), so set it to 0.03 s. I usually err on the side of a faster frame delay for smoothness in in-game sports footage, anything else (interviews, press conferences, B-rolls) can get away with being slowed down. Again, experiment and see what you think looks best!

Keep gifs under the Tumblr file size limit (10 MB).

Cut down the number of frames. My gifs are usually around 60-70 frames for 540px full-width gifs, but depending on the coloring, sometimes you can get away with more. 268px gifs can go up to 200+ frames.

Crop your gifs. Remember to keep full-width gifs at 540px wide, but if necessary, you can crop the height. My go-to sizes are 540x540, 540x500, 540x450, and 540x400.

Amp up the contrast of your gifs. Flat colors like black cut down gif size.

The Grain filter or Noise filter, though beautiful for aesthetics or simply necessary sometimes to mask low source footage quality/pixelating, may bloat your gif size.

Play your gifs back before exporting.

Pay attention to duplicate frames or glitches, you might need to get rid of them!

Hope this is helpful! Don’t hesitate to send an Ask or DM if you need any help, I will happily answer all your questions and send over PSDs. (I’m also on Discord—just shoot me a message if you need my tag!) Happy creating :]

[wolfes]

[Caption: a yellow and green gif of Alina from Shadow and Bone; the first gif of her looking away from Mal fades into her crying over him. End caption.]

TRANSITION TUTORIAL by v @shangs

I got some questions about how I did the glitch effect in this set, and I think because the glitch sets with green and magenta/red and cyan protrusions like this one are more complex that the effect seems like it’s hard, but it’s deceptively simple! I’ll show you how to do transitions like this with an effect buffer in between, whether it’s a glitch effect or a light leak or anything else. 

What you’ll need:

Photoshop with timeline (I use 2022)

A transition video for the effect 

Preferably, a good knowledge of how to use the timeline for gifs

Two or more gifs

Tutorial under the cut!

I start out with my two gifs, sharpened, colored, on separate documents, and in timeline mode. The first thing you’re going to do is convert both of your gifs into Smart Objects, so that we don’t have to worry about all the coloring layers. Just select everything you have in the timeline, right click, and convert to Smart Object. 

Now, right click on one of the gifs, select Duplicate Layer, and transfer it to the other gif’s PSD. Then just click File > Save as Copy, save the new PSD wherever you like, and close the first two PSDS, then open the copy. I recommend not saving your work in the first two PSDS with the single gifs so that if you have something you want to change, your gif isn’t locked into Smart Object Mode and you can go back to edit things.

Now, you have both your gifs on the same canvas in the same PSD. The timeline should look like this:

[Caption: A picture of the Photoshop timeline so the gifs’ boxes are in a stacked line.]

Now, drag the gif you want to go second or to ‘fade in,’ so to speak, onto the row of the first. Your gifs will automatically form a Video Group and the timeline will look like this:

[Caption: A picture of the timeline with the gifs’ boxes side-by-side.]

Now your gifs will play sequentially! I’m lucky and for some reason this almost 80 frame gif didn’t even hit 10mb, but you may need to trim some frames off the ends later if the gif is too big. 

Let’s switch gears and look at this unassuming little box in the corner of the timeline. The box with the white filled in triangle on the bottom holds Photoshop’s premade transition effects. You can do things like fade to black, crossfade, just fade between two gifs, and more. 

[Caption: A photo of the square on the timeline that has Photoshop’s transition effects.]

I like using the Cross Fade effect for my gifs with this method, but it’s entirely up to you what effects you apply! Some transitions may even work better without an effect. Experimentation is key.

[Caption: A photo of the timeline with the triangles denoting the cross fade effect put between the gif boxes.]

I went ahead and applied the cross fade effect to my gif, and this is what it looks like on the timeline.

Now to add the gif effect! Make the gif however you would like. For this one I actually recommend just opening the video with File > Open as long as it’s small enough, and it’ll open as a blue box on the timeline and if you right click it you can change the speed. Regardless, what I do is just make the gif, sharpen and trim to my liking, then duplicate that layer onto my timeline (just make sure that, when you click the three lines on the timeline menu and go to Set Timeline Frame Rate, that the rate of this video is the same as the rate of your two gifs from before, or you might get some choppy frames). I then place the gif around the middle, where the transition happens - you have to scrub around to find the perfect place to put it but I like to have it so that the gif covers both ends of the transition.

To put it visually, here’s the timeline:

[Caption: A photo of the Photoshop timeline with the effect overlay stacked on top of the base gif.]

Your overlay gif should be outside the video group of your base gif.

I set the overlay to Screen and change the opacity. You can also add some color overlays - I actually went in with a gradient on top of the overlay, clipped it to the transition, and set it to Color so it wasn’t too bright of a white on my gif.

Save and export as normal - I like to take it back to frames mode before I save so I can keep the frame rate at 0.05 - and that’s all! A really simple way to get a sophisticated-looking transition.

Happy giffing!

[starwarscolors]

Welcome to @starwarscolors' first official event, "Coloring a Galaxy Far, Far Away!" This event is open to all creators who love colorful Star Wars edits just as much as we do. The event will run from September 24 to September 30. Interested in participating? Check out the guidelines under the cut!

PROMPTS:

DAY 1: FAVORITE COLOR [September 24] Make an edit of any Star Wars media featuring your favorite color!

DAY 2: COLOR THEMES [September 25] Make an edit of any Star Wars media featuring specific color themes, such as primary, secondary, or tertiary colors!

DAY 3: FAVORITE COLOR COMBINATION [September 26] Make an edit of any Star Wars media featuring your favorite color combination(s)!

DAY 4: COLOR MEANINGS [September 27] Make an edit of any Star Wars media featuring a representation of any color meanings of your choice! This can mean color associations (i.e. with characters, ships, media, etc), definitions of specific colors, "moods"/emotions of specific colors, or any other creative idea you think of!

DAY 5: UNDERRATED COLOR(S) [September 28] Make an edit of any Star Wars media featuring a color/colors you think are underrated!

DAY 6: COLOR PALETTE [September 29] Make an edit of any Star Wars media featuring a color palette of your choice from this website!

DAY 7: FREE CHOICE [September 30] Make any type of colorful edit of any Star Wars media! No restrictions here!

GUIDELINES BELOW CUT!

Want to create for this event? Here are the steps you should take!

Reblog this post and follow @starwarscolors

Create an edit that contains noticeable color manipulation — whether pale, vibrant, black and white, or something else, your edit must visibly demonstrate color manipulation.

Interpret each day's prompt to your own interests and abilities. You're free to participate as little or as much as you want.

Post your edit on the designated days. (Late submissions will be accepted up to a week after the event ends!)

Caption your post: @starwarscolors coloring a galaxy far, far away: Day # | Prompt Title

Tag us at #swcolorsweek23 so we can find and reblog your beautiful creations!

Note: we do not reblog any problematic characters, figures, actors, etc. If your creation goes against our rules, we will unfortunately not be able to reblog your work. You can find a list of content we do not reblog on our rules page.

Please make sure that you avoid [color]washing in your edits. We will not reblog your creations if we see [color]washing occuring. For guidance on how to avoid this, check out these tutorials: x, x, x.

If you have any other questions, feel free to send us an ask!

[guzhufuren]

love love LOVE your The Sign gifsets. im still a newbie in giffing lmao and your gifs are like reaaally pretty so i was wondering how you do your gifs? i really like how it's sharp and the colors pop up beautifully (only if you don't mind sharing ofcc <333)

bun this is the kindest thing you could have said to me, thank you so much <3 i wanted to write down my giffing process for a while in case anyone would find anything in it helpful, so thanks for giving me a push!

guzhu-furen's photoshop gifmaking process (kinda oriented on saving up time)

from

to

1. Downloading a video. i prefer to download video files instead of making screen recordings because the latter usually leaves watermarks/captions and makes image quality lower. i will not be linking the downloading websites themselves directly, but they are all easy to find through search engines if you know what to search for! i download ql dramas from:

youtube:

if the video you need is above 1080p quality, search for youtube4kdownloader

if the video is age restricted, search for 9xbuddy

both these websites work for normal videos too!

mkvdrama usually has 1080p episodes of most asian dramas.

dramacool also has downloading options in case the show is not available on other websites!

2. Screencapping (i learned it through this tutorial)

i screencap using KMPlayer. here is the installer i used, but you can find versions of this program on various websites and torrents too! install the program and proceed.

screencapping steps: open KMPlayer > press "CTRL + G" to summon the Frame Extraction window > set identical settings to these:

note which computer folder the screencaps will go to (it has a label "Extract to") > go to that folder on your computer and create a bunch of numbered folders there, for example ten folders named from 1 to 10, these would be our separate folders for ten gifs > write "1" or a name of another numbered folder after the backslash in "Extract to" bar in kmplayer > go the timestamp that will be the beginning of your gif in KMPlayer > press "Start" in the Frame Extraction window and press play on the video > when the moment you need to gif is over, press pause on the video and press "Stop" in the Frame Extraction window. great, you now have your folder of screencaps!

3. Importing screencaps to Photoshop

i use Adobe Photoshop 2023, but had used Adobe Photoshop CS5 for a long time before that, so you can use any version you have or find! it's available on various websites and torrents.

open Photoshop > Scripts > Load Files into Stack > press Browse in the "Load Layers" window that was opened

open your screencaps folder (and pin the KMPlayer Capture folder for faster future access) > pick the screencaps you want for your gif by clicking on the first one, and then clicking on the finishing one while pressing Shift on the keyboard > click OK and let them load for some time! i have 65 screencaps loading at the moment

when the screencaps finish loading go to Window > press Timeline > press Create Video Timeline in the opened sidebar > press three dots that will say "Convert to frame animation"

4. Sizing & making the base of a gif

next part will be automatic. i use actions for almost everything from this moment. download the basic action pack here and my additional action pack that we will need here. load them in your photoshop actions window (Actions > Load Actions).

play the Script action to create frames.

now onto sizing your gif. these are tumblr's width dimensions for 3 types of gifs

my gifs are usually 540 px in width and 640, 400 or 345 px in height. i added a 400 px action (Sizing 400) in the action pack, you can use it! or you can follow the steps by hand:

Image > Image Size > put in the height you want and add 4-6 pixels there (mine will be 406 for a 400 px high gif) > OK

now we need to crop the gif for it to fit tumblr's dimensions:

Image > Canvas Size > change Width to 540 (or 268 or 177) and take away the 4-6 pixels that we left in the previous step in Height

when you figure out which gif dimensions work best for you, record an action and use it to save up time!

after sizing use the action Smart Object. now we have the base of our gif!

you can move your gif left or right if you want! i will be doing this because i would like to show more hips in the gif.

press Ctrl + T > move the layer however you need (not in height though) > press Enter to save

i moved it to the right and my gif looks like this now:

5. Sharpening (i use Tan's sharpening settings explained here)

i added two sharpening actions in the pack, they are called Sharpen Spicy and Sharpen Spicy 12. you can use one of them or you can sharpen your gif by hand, i will explain how to do it below.

Filter > Sharpen > Smart Sharpen > 500% amount, 0,2 px radius > OK

Filter > Sharpen > Smart Sharpen > 17% amount, 10,0 px radius > OK (you can change 17% to lesser or bigger, depending how intense you want your sharpening to look. i use 17% for 4k footage and 12% for 1080 px or less videos)

to smooth the sharpening a bit i use Gaussian Blur (this is optional, you can leave the sharpening as it is if you want your gif to be sharper).

Filter > Blur > Gaussian Blur > Radius 1,0 pixels > OK

now change blending intensity to let only a bit of the blurring effect stay (you need to change this by hand if you used the sharpening action also).

press Blending Options (the highlighted place) twice > change Opacity to 10%

this is what my gifs looks like with sharpening now!

6. Colouring (i learned how to colour the way i do through this tutorial)

to make it easier for you to learn i will share my blank colouring file. i created it to save as much time while giffing as possible, so whenever i need to colour a gif i simply duplicate all the blank adjustment layers to the base of my every gif and start colouring! once you figure out which adjustment layers work for you best, i recommend creating a blank colouring file too to save time.

if you want to go the easy way, open my colouring file and duplicate selected layers to your gif file by Layer > Duplicate Layer > insert gif's document name

if you want to learn by hand, create the adjustment layers that i will be naming in the process on your own, you can find them all in Layer > New Adjustment Layer

now we will use adjustment layers for our colouring from the bottom to the top! first, Exposure layer to add a bit of light to the gif. i don't always use Exposure because sometimes shots are bright enough on their own. i will, however, use it here. don't use it on your gif too much, because in the next few steps we will also be brightening the gif with other adjustment layers. i added +0,49:

next, Hue/Saturation layer. i use it in gifs with neon lighting to color correct overly bright colours. for example if your characters are standing in neon pink, you might want to lessen Saturation in Magentas and Reds to make the final gif less pixelated, and etc. i will not use Hue/Saturation on this gif, cause it doesn't need it.

proceed to the layer Levels. this layer usually does most of my colouring. click on the lowest white dropper in your Levels window:

now choose a light place on your gif and click on it with the white dropper. it works especially well if you use the white dropper on the lightened parts of face skin. you can play around by choosing different bright spots and seeing what works best. here is the spot i chose and the resulting colouring:

this is too light, so now we need to balance it out with the black dropper:

choose one of the darkest places this time and click it with black dropper! once again, you can play around and click different spot to see what works best. i will be clicking the highlighted spot and you can see what my gif will look like with this Levels settings

as you can see, darkest places became darker and other colours were corrected a bit! now, this is still too bright, so i will be decreasing the opacity of Levels layer from 100% to a smaller number:

i will have to continue in another post because tumblr only allows 30 pictures per one post in the new editor now and i'd like to explain everything in visuals. click to continue

[cal-kestis]

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!

[jpivblog]

set up an image gallery 4 ur own website:

hello. with the instability and uncertainty of the various social medias in use today, its been the "cool new thing" to get back to doing the "cool old thing" and make custom html websites again. independence!

my friends have asked me how to set up an image gallery type thing for their own websites enough times that i made this tutorial a while back:

uhhh if this link breaks in the future for whatever reason let me know and i'll update it lol

why use glightbox over the zillion other image gallery lightbox things out there? well at the time this was the best one that suited my preferences: it has clickable arrows on the sides, an X button, keyboard left/right controls, a caption/description box, didnt require you to get a noncommercial license, etc. nowadays you could probably look into implementing something more modern like https://photoswipe.com/, but you're on your own there.

[befemininenow]

Deconstructing the sissy in you (extra)

Let’s go back to the beginning of the tutorial. However, let’s amplify it a little more. You always had a thing for this thing called “feminization”, which involved forcing men into wearing feminine clothing or adopting feminine roles in an embarrassing manner. That kind of thing was your kink/fetish for a good while and imagined what would it be like if it happened for real. Little did you know it was a gateway to explore your sexuality.

You browse the web for TG captions and transformations as a way to spend some “me time”. All of a sudden, you see this post:

“Damn, she’s sexy!” you say out loud. You obviously want to be inside her body, but deep in your mind, you secretly want to be in her body. As in, you want to feel her soft skin, her boobs, her skirt, hair, you want to be her!

In no time, you start to see more pics like this:

Eventually, your feed begins to fill with captions like these...

...while some daring strangers fill your inbox with captions like these...

Soon enough, you start to get into female fashion, changed your way of words, became interested in men, and slowly incorporated your feminization in your public life. Those hypnos and captions have changed your thinking! It got to the point where you opened a Tumblr, started to make "sissy besties", and asked for tips on how to become more "feminine". It felt mutual, it felt exclusive, it felt like becoming a part of the Mean Girls!

But you wanted more. You wanted hypnosis that can destroy your "manhood". You wanted captions that affirmed your "sissy identity". You wanted hormones to grow boobs and ass. You wanted to become a woman at an instant!

But how? Desperately wanting to view more captions, you decide to find more of them on your search bar. You type "feminization captions" and the results are abundant! But as you scroll all the way down to a dead end, you find a picture of a sexy, blonde woman in red that catches your attention:

"OMG! She's so gorgeous! She's the type I want to become! I need to find out who she is!" Just as you click to the image, you're sent to a blog that you're somehow familiar and/or following. You try to find the image and as you keep on scrolling, you found it belongs to a certain blog: @befemininenow. ""Be feminine now?" This is it! This is what I need! Someone who can instantly change me into a feminine woman!"

But as you read the pinned post and the introduction greeting, you feel a little conflicted. You like feminization, but the blog doesn't cater to sissies. Yet, the captions feel so persuasive and alluring, you don't know where to start. You decide to go all the way back and finally found the one that seems the sexiest.

What was the caption that caught your attention?:

Of course the one with Lilly Roma and her tight, revealing, black suit! But instead of being a sissy caption, it's a caption that tells you to be a fellow sister! "Sister? Mmm... I... I like that. Better than sissy!"

You browse the blog and find more than enough caption to your taste:

Some were a dream, some were so sexual, some were unbelievable, and some... hit right at home.

Very few captions mention the word "sissy" and when they do, it's usually not as you expected it to be. That's because the blog is about embracing femininity instead of treating it as humiliating. You try to find if there are more blogs like hers and luckily for you, there's a bunch more...

Joanna's Journey, A Miss Inside, Every Alice, Gym Bunny Candie Hart, GGS-Trans-Inspo, and so much more!

It took a while for you to realize that some of those feminization blogs aren't like the rest, including sissy blogs like Sissypinkfashionfun. They may seem a bit unrealistic at times, maybe a little overboard with the "wipe masculinity" posts. But what you love about those blogs the most is that all of them have something in common: they are not ashamed of femininity, but rather embrace it as their own.

It all makes sense: as a kid, you wanted to be a ballerina:

Later on in life, you wanted to become a princess:

But now...

You just wish you can come out as your true self! Why be ashamed of being feminine? Why do you need to be punished for showing weakness? Why be subject to bullying for behaving a certain way? You don't really want to be a "sissy", but you want to be a girl. You love your feminine side.

But in order to move on from your "sissy phase", there is one step you would have to do:

That's right, girl! It means you have to come out. Whether you like it or not, it's the next step to your change. You can keep hiding in the closet, experiment with the "sissy lifestyle", and reblog feminization captions all you want. But as much as you hate to face reality, she is you. You're transgender. You're a woman inside, even if your current anatomy doesn't match it.

The latter sentence didn't discourage Mikaela Ville nor Angelick Poleth (girl in the next pic) from postponing transition. Look at them now. Don't you wish to want to be like them?

But to be sure of the change, to be sure of what you really want, how far will you go into your life change? Do you want just dress feminine, but still identify as a man? Maybe you identify as a different gender? Or do you want to go further and take hormones to turn into a woman?

Whatever you end up identifying as, know your identity and femininity are valid. Find your nearest gender support group, talk to doctors and therapists who can assist your gender change, and be very safe in today's environment. Remember, you are not a sissy, but a brave woman! Unlock the cages and let the lioness inside out!

(End of guides. Thank you for reading 'till the end!)

[usergif]

RESOURCE DIRECTORY 2.0 + HOW TO NAVIGATE USERGIF

Hello! We hit 10k followers! I want to take this moment to thank all our wonderful followers and the talented members of usergif! We created this blog less than 2 years ago and are constantly blown away by your support and beautiful creations. As a thank-you, we're proud to announce our new and improved resource directory!!! Shout out to arithemes' custom page which allowed us to create a more streamlined and organized directory for everyone to use. Under the cut, you'll find a guide to help you find exactly the resource you're looking for on our blog. Happy gifmaking! :)

THE UPDATED DIRECTORY

All resources are in alphabetical order first by the creator's URL (at the time of entry), then by the resource's title. Each title is a clickable link that'll redirect you to the original post. Beneath that, you'll find the creator's URL and the resource's relevant filter tags:

As always, whenever I add new entries to the directory, you'll see the last date listed on the right side of the blog here:

If you don't see one of your recent tutorials listed there, please be patient. I update the directory on a monthly basis, but only add resources that have already exited our queue.

THE FILTERS

Please note: the Source section has exclusive filters, meaning you can only select one at a time. In the Type and Effects sections, you can select as many filters as you want. However, if you select 2 filters in one section, like "animated" and "blending," it'll show results for any resource with either of those tags, not necessarily resources that include both of those tags.

Here's a breakdown of how we categorize our resources:

Source: ↳ all: posted by any creator ↳ usergif: posted by usergif

Type: ↳ all: click this to reset filter selections ↳ action: pre-recorded photoshop functions that can be replayed ↳ basics: non-effects-related resources to help new gifmakers get their feet off the ground (please remember usergif is not a resource for beginner-level gifs and focuses on intermediate to advanced gif effects. however, we thought it would be helpful to keep some basic resources available) ↳ brush: various brush shapes like ripped paper edges or intricate textures ↳ fonts: names and links to fonts or font packs ↳ template: pre-made, downloadable layouts and designs ↳ texture: overlays that add a different finish to a gif such as Ben Day dots (retro comic dots) or glitter ↳ tutorial: any post that provides an explanation for a gif effects process ↳ other

Effect: ↳ all: click this to reset filter selections ↳ animated: an effect that applies movement to an element such as rotating text or wiggling shapes ↳ blending: aka double exposure, this effect combines two or more gifs layered on top of each other ↳ color: specifically for color manipulation, an effect in which the original colors are completely different (e.g. a blue sky colored to look pink) ↳ glitch: an effect where color channels are toggled and layered over the original gif to give a flickering effect ↳ layout: multiple gifs on one canvas like a collage (e.g. hexagon layout) or poster-style templates ↳ overlay: an added element layered above a gif (excluding text) such as a shape, another gif confined to a shape, a texture, etc. ↳ transition: an effect that stylizes the passage from one scene/clip into another, such as a fade, glitch, linear wipe, or motion blur transition ↳ typography: any kind of stylized text added over a gif (does not include basic captions)

You can find examples of all these gif effects via their respective tags on our Nav!

THE SEARCH BAR

This search bar functions the same way as the search bar in the upper right corner of our main blog and the search function on Tumblr's mobile app.

Tumblr search allows you to generate results using keywords found in the body of the post or the tags. So, if you're looking for a post but can only remember it having the word "rotoscoping," you can type that in either in the directory's search or blog's search and find any post on our blog that mentions the exact keyword "rotoscoping."

THE NAV & TAGS

Tags function differently from search keywords as these relate to exact words and phrases found only in the tags, not the body of the post. Our members use tags to categorize original posts and reblogs. Some of our most frequently used tags are listed on our Navigation Page and saved in the mobile search function pictured below:

But if you ever want to quickly navigate a tag, simply add /tagged/word to the end of our url to find that tag! For example, if you want to see all the posts we've tagged as a #tutorial, just go to usergif.tumblr.com/tagged/tutorial.

BROKEN LINKS

Whether it's due to a creator frequently changing their url, the absence of an automatic blog redirect, or my own mistakes when coding the directory — you may stumble upon a broken link. Here's what to do:

If a creator has changed their username but their blog doesn't automatically redirect you to the new blog, check if they listed their new user name in the title of their old blog like I did:

In this case, simply replace the url you landed on with this new url. For example, https://sith-maul.tumblr.com/post/692130400398704640/how-to-make-an-animated-google-search-overlay-a → would become → https://cal-kestis.tumblr.com/post/692130400398704640/how-to-make-an-animated-google-search-overlay-a

However, if you can't figure out the creator's new url or in the case that I messed up the link due to human error, feel free to send us a message so I can help find the source or correct the mistake!

WHERE TO FIND THIS INFO AGAIN

If you ever need to access this guide while using the directory, simply click the "i" button here:

And that's it! We hope this revamped directory is a lot more efficient and helpful. Thank you again for all your support and for helping us reach this follower milestone!

[heybaetae]

hiii kelli! i know u might be probably busy with stuff but i was wondering if u know any tip with the blurring caption stuff? i hate giffing content when theres caption flying all around and the ones that appear moving?? i literally have no idea how to blur them so i just blur them separately and it takes me like 5 hours to do so %$^%$% so i was wondering if u have any tip? or tutorial?

hi anon, sorry for the late reply! i wish there were a faster and more efficient way to blur animated captions, but i also tend to blur them frame by frame in timeline mode if they have a lot of movement. of course, you could just make a large selection around the whole caption at its largest point (like when the letters stretch/enlarge in the middle, you know what i'm taking about lol) or from where it starts panning to where it stops, but then you might end up with a lot of excess space of the gif blurred that doesn't need to be or a big weird looking block of gaussian blur on parts of the gif where the floating caption was at the beginning, but moved somewhere else by the end.

example with a very animated caption appearing gradually:

that is FINE and definitely the quickest and less nit-picky way to go, i personally just don't like frames of my gif blurred unnecessarily like on his clothes or his arm because the lettering appeared so large at certain points. i prefer to keep my blurring as tightly around the caption across every frame as i can, so i just power through it and get it done.

so like this:

to do this, instead of making a selection around the whole caption, i duplicated my base layer, applied my blur settings, added a layer mask on the layer, then used the paint bucket tool to make the layer mask black. then using my arrow keys, i made a cut on the timeline (on the duplicated layer) after the first frame with the little scissors button and painted white on the layer mask around the part of the caption that appeared on that specific frame. then i basically continued that process until the end of the caption's movement, making cuts after each frame and painting white on the corresponding layer mask wherever i wanted the blur to be and painting black wherever the letters reduced in size and left extra blurring around it. this way the blurring stays around the letters only as it appears in each frame. YES it's tedious and it's likely nobody even looks at it that closely, but this is just a personal preference of mine. you'd do this same method with captions that float around a lot.

my timeline ends up looking like this by the end: