#gif pack tutorial

Okay for this tutorial I’m going to be using @oliviaholt​ ‘s action that you can find here. It is truly a godsend.

Since the anon asked on how to blur, I’m going to assume you already know the basics of making a gif, right? Great! So I’ve already turned my frames into layers and I’m ready to sharpen using the action. 

For this, I use the DICOM imports option, just select it and hit play.

This will sharpen your gif as god (and oliviaholt) intended. Now here’s the petty part. You’re going to go into your history window (if it’s not already open, go to Window > History) and go back to the step that says Master Opacity Change.

This is the part of the sharpening action that duplicates the smart object that has been sharpened, then adds a gaussian blur and lowers the opacity to make it softer. If you don’t use an action (or use a different action) this is the step where we make our gif blurry on the person we don’t want to appear. So, duplicate the top layer (Group 1 Copy) and place it above. 

Set the layer at 100%

Now add a layer mask to the smart object (NOT the existing layer mask on the smart filters!!) 

Erase the person that you want to be more visible (rip Kola I’m sorry) using the eraser tool on the layer mask using a soft brush.

Use the video timeline to make sure that you erase more if the person moves around in the frame

Now if you REALLY want that person blurred out, double click on the Gaussian Blur applied to this layer

And make the radius of the blur higher. You can make it as blurry as you want, but try to stick under 3.5 

And now you have a blurred out gif! Almost. Now we need to finish the rest of the action. Open up your action panel and see where we left off. You’re going to want to click Flatten Frames into Clips and then hit play on the action. 

If your timeline has a blank frame at the beginning or end, just delete it and save your gif as normal! 

And there you go! A fully blurred out petty ass gif. (Again, I’m sorry Kola)

NOTE: This tutorial is also available as a Google Doc (the recommended platform for reading this tutorial) with full size images that might be easier to see, however I know some users don’t like going outside of Tumblr to view tutorials, so it’s available on both platforms. To read the Google Doc version, please CLICK HERE.

Setting Up Your Gifs

Load all of your gifs as you usually would into a new post. I usually wait until I have around 20 gifs, then I get ready to move them. Moving them over periodically usually helps it feel like less of a strain waiting for a million gifs to load all at once. Make sure all of your gifs are under a READ MORE! This will prevent them from turning into the gifv format!

Once you’ve uploaded all your gifs, make sure to SAVE AS A DRAFT.

Next, you’re going to want to hit edit on the draft, again, this has to be SAVED before you can do the next step.

This is where all the magic happens. What we’re going to do is strip our gifs of any unnecessary code in a few simple steps. First, hit the gear icon at the top of your post and change the Text Editor from Rich Text to Markdown.

Next, you’re going to change it from Markdown, to HTML

Now, you’re going to want to keep this tab open, and set up your sidepage!

NOTE: If you are using the beta editor, you may require some extra steps to clean up your code! Read more here.

Setting Up Your Sidepage

Now you can create your new page. You can do so by going to Customize and then clicking Add a page (I recommend using a sideblog for this as it can heavily clog your main blog, and if you ever change your main url, you can keep the url of your gif pages the same). 

After creating your new page, make sure to change it from a standard layout to a custom layout using the dropdown menu, then give the page a url. You cannot save the page until you add a url.

Okay, now for the next step, you can use any gif page code you’d like! I have a tag here with codes made by many different theme makers to choose from! If you’d like to use one of mine, you can find them here. Today I’ll be using my newest theme as an example. From the post, download the code and paste it into the page. It should look something like this.

Now you’re going to want to find the section to add your gifs. In my older codes, you would be able to find it looking something like this:

For this theme, however, I used placeholders because of the trigger warning feature. To figure out more on how to use that feature of the theme, please read the tutorial here. For the sake of this tutorial, however, you can DELETE THESE PLACEHOLDERS (highlighted by the blue box, make sure you keep the <p> and </p> tags).

Once those are deleted, you’re going to go back to your tab with your gifs and select everything after [ [ MORE ] ] , but before the </p> tag, then copy it.

Now, paste your code in between the <p> and </p> tags. Hit Update Preview to make sure it’s loading correctly. Every time you add gifs, make sure there are NO SPACES between the img links. (aka make sure those < ... alt=”image”><img src=”...> are back to back instead of < ... alt=”image”>    <img src=”...> leaving a space in between).

And that’s all! Make sure to change the other parts of the theme necessary (titles, fc info etc) and you’re good to go! Always make sure to hit save before you navigate away!!

Resources

My Gif Pack Page Codes

Recommended Gif Pack Page Codes (tag)

Previous Tutorial (How to upload to a Standard Sidepage)

READ THE UPDATED TUTORIAL HERE

STEP ONE: 

Load all of your gifs into a post as you usually would (I keep a few packs in my drafts when they’re in progress). I usually wait until I have around 50 gifs, then I get ready to move them. Today we’ll be working with my Michael B. Jordan pack. MAKE SURE YOU SAVE THE DRAFT

STEP TWO:

Hit the gear button on the top of your page and change the Text Editor from Rich Text to Markdown

Next, change the editor from Markdown to HTML (this step is necessary because it removes the <image> tags that made the images appear in a line. removing this allows the gifs to load side by side)

STEP THREE:

Now you’re going to copy/paste your HTML. Make sure to only copy the code for the images, not any text or the read more (I use a read more to keep my drafts neat and so that it’s easier to work with).

STEP FOUR: 

Now you can create your new page. You can do so by going to Customize and then clicking “Add a page” (I have a separate blog for this @fakegifs because I make like... a lot of packs and this would have clogged up my rph)

STEP FIVE:

Now the moment we’ve all been waiting for! Click the HTML button (this is very important! If you accidentally paste your code into the regular text editor, only the urls will show up on the page instead of the images) and paste your code into the box below.

To make sure you’ve done it correctly, click the HTML button again and the images should appear.

Now that everything looks okay, add a url and hit save. (I usually go with the initials of the FC and then the acronym of the show or movie, so eventually this will be found at /mbj/tam when the pack is complete)

ALL DONE!

Now you just go to the page that you made and add /mobile to the end of the url, this will load the page as if you were on mobile, this removes all the other code on your blog and allows the gifs to be loaded more quickly and downloaded easier as well.

9/18/18 EDIT: 

Hey there! So I didn’t like how plain sidepages forced people to go to /mobile so instead I’ve started making the pages on custom pages rather than the regular sidepages. You do this by going to the drop down menu and selecting Custom Layout instead of Standard Layout.

After that I added some basic HTML that allowed me to change the size and font of the title, but that’s it because the point of the page is to allow the gifs to load quickly and bogging it down with fancy HTML to make it pretty defeats that purpose (to me, at least). It’s literally the shortest most useless code ever lmao but it’s here if you want it.

OTHER TIPS: 

UPLOADING WITHOUT TAKING FIVE YEARS: So I usually upload my gifs as I make them, not when I’m done with the pack. I will usually make about five or ten gifs, then open up my drafts, save them in a post, and go make more gifs. I keep adding to the post until I have around 50 gifs or have finished an episode/clip/etc. before I move them to the page. By doing so, I keep the page code light so it doesn’t constantly have to load hundreds of gifs every time I add to the post. This also ensures that I don’t accidentally skip any gifs or have the gifs load out of order (which is a pet peeve of mine but not necessarily a necessity).

HOW TO MAKE GIFS SAVE SIDE BY SIDE IN A POST: If you just want to make your gifs load side by side without having to make a side page, then just complete steps One and Two. After changing your editor to Markdown, change it back to Rich Text. From here, you can add your little blurb above the gifs and add in a Read More. 

First of all, I always create the gif pack page on tumblr, it's easier to see the code there, it's easier for me to change things, because there is more space. And there I can see if everything is okay. However, it is important that there is a few code that works here, but not on the google site. When I find everything in perfect, I copy the code of the gif page and paste it to the google site page.

So I always open the google site page (You must log in with your gmail account to be able to use it.) : https://sites.google.com

When you open it, it will be a blank page, but there will be that colored plus sign at the bottom right. You can create a new page with it. I already have several, I tried to organize things there.

4. If you click on the plus sign, it brings up this, I don't usually change anything here. In the right-hand bar, there is "pages" (marked in green in the picture), you have to select it.

5. If you have selected the pages menu, you will see a plus sign again in the lower right corner. Click on it and select "full page embed". (I circled it in red in the second picture)

6. If you selected this, it will ask you to name the page. Enter the name you want. I usually include the name of the actor/actress + the name of the series and the episode in various formats. (Since I create the page both here and on the tumblr page, sometimes I copy the name given on the tumblr page.) When you press done, you will see what is in the second picture.

7. If you move the mouse over the part marked in green, i.e. on the name of the created page, 3 small dots will appear on the far right. Click on it and select "hide from navigation". If this was the case, then the small sign will be crossed out in front of the page name in the right side bar and there will be no menu bar at the top of the displayed page. After that, all that's left is to paste the code of the gif page, i.e. the gifs. You have to click on the "Add Embed" , which is in the middle and can be clearly seen in the picture. And choose "Embed code" and copy the cod / gif link here. [second picture]

8. I have marked on the picture where you can find after this, the edit button [in red], if you want to delete the page [in blue], or if you would like to preview it. [with purple color in the picture]

9. If you find everything OK, then all that's left is to press the "publish" button in the upper right corner. The previous picture shows where you can find it. Then it will ask you to enter a name for your web adress. Name it whatever you want, think of it as the name of a main tumblr page where you can always create gif packs. This only needs to be entered once, unless you want several main pages, as I have several (as can be seen in the very first picture). Eg: I named the current one gifsbymel2024.

10. I marked the paper clip / chain (?) icon in green on the picture, you have to click on it and then the link of the created page will pop up and you can share it with whoever you want.