nothing needs to be changed in the code, everything can be changed in the customize panel!
terms:
reblog if using
do not touch the credit
all terms / faq
credits listed in the code /Â credits page
please consider tipping or supporting me ♡
blog name !! important
make sure you fill out the blog name field, this is what will show on the top of all your original posts. to clarify: your blog name is your blog’s url - for example: phantomcodes
custom title
similar to the blog name, your custom title will show on the sidebar, i recommend not making this too long
updates tab
the updates tab is toggleable, it has up to 6 updates each with an icon & text
sidebars
sidebars can be toggled left or right. the extra sidebar is optional - toggle both info & blogs off if you don't want the extra sidebar
(optional) custom description: this is can be as long as you want, it will scroll - leave this field blank if you don't want it
(optional) info section: toggle info off if you don't want this section
(optional) info stats: up to 6 - leave the info 1 field blank if you don’t want this
(optional) info text: leave the info text field blank if you don't want this
(optional) blogs section: up to 4 blogs - toggle blogs off if you don't want this section
(optional) links section: up to 10 links - toggle sidebar links off if you don't want this section
responsiveness
when the browser window gets too small the sidebar(s) will disappear and become toggleable, the sidebar button will appear on the left side of the header
reminders
remember tumblr’s customize panel is buggy, make sure to toggle all the options on/off before saving
i’m still on a sort of semi-hiatus, i’ll be around for questions but please check my faq, answered asks, etc. before asking
(live) preview | get the code | support me on ko-fi?
a tumblr theme designed especially for those without Javascript permission in custom pages. no coding experience required; everything can be tweaked in the customisation panel (except for the manual input of tags in the built-in navigation page). completely free; pretty much every feature is optional. sidebar bar image by @/tofupixel.
don’t be shy to inform me of bugs and/or ask questions about the code.
more info under the cut.
features
night/day mode;
tabs on hover: about me, socials, sideblogs (10), FAQ (that will appear on your ask page as well), links (10);
pop-up: navigation page (with unlimited links, categories and subcategories);
updates tab;
search bar + 5 suggested tags;
custom title;
custom description;
custom sidebar image (max height: 350px and max width: 260px, anything larger will be resized);
tags on click;
scroll to top button;
tracking tag highlight (with info; could be a DNI tab or anything you want);
featured posts;
mobile friendly;
HIGHLY customisable.
terms
please reblog if using;
do not remove the credit;
full credits in the code.
just wanted to share an update on my past gif actions since i no longer use that anymore. there a bunch of actions out there but if anyone is curious on my process <3
action includes:
load files fast: open with image sequence with frame rate delay of 25 (you'll need to configure this to your own folder)
6 sharpening actions
brighten: duplicates smart object sets the mode to "screen" i use these for dark scenes
frame delay: convert layers in video timeline to frame layers in frame animation and sets frame delay to 0.04
convert to video timeline: layers in frame animation are put into a smart object in video timeline
text: sets a drop shadow and stroke setting to text
download here // crop presets // psd
+small tutorial w/ video under
Load Files Fast action opens up a folder where you put your own screencaps in and loads the caps in PS and makes it into a smart object. You will need to configure this yourself since it uses my own folder. Click on Load Files Fast, select "Record" button and then choose File > Open, navigate to the folder that you use to store your screencaps, select the first cap, click on the "Image Sequence" option on the bottom right of the dialog box and then click "Open". It will then ask you to specify the frame rate, I use 25, then click OK. Then you click on the "Stop" button and your action is saved. [video on how here]
After it is put into a Smart Object, I use one of my crop presets I've made. To load them into Photoshop, click on the down arrow next to the crop bottom, click Load Tool Preset and select my preset.
Then I choose a sharpening I want to use. I'm either use 'high pass' or the 'sharper w/o grain' one.
OPTIONAL - Brighten action, brightens the scene using 'Screen' mode. I use these for really dark scenes.
After that I color the gif and add text if needed.
If I want to change the frame delay, I use the 'frame delay' action and set my delay to 0.04 and then save the gif!
If you do decided to use the frame delay action, you won't be able to change the coloring and text once its in frame animation. So you can decide to do your coloring/text after you use this action so you don't have to go back and forth if you decide you want to change your coloring or text.
Hi everyone! I got an ask from @adamusydneys about how I coloured the scene from my header.
The scene in question started with an ugly yellow filter which can be super annoying to colour correct. Luckily I still had the psd open with all my colouring layers so should be easy to go layer by layer with what I did
Tutorial below the cut as this is screenshot heavy
Full disclaimer - there is no real set method for what I do to colour my gifs, as it changes depending on the gif and my mood. In the case of this gif I used lots of selective colour layers, but I have also used channel mixer in the past to correct similar issues or have done most of the correction in curves (like in my basic gif tut). I will also add in the case of my header gif, I applied the previous colouring from my theolizzy gifset, so I'll try and recreate how I got the curves but it may not be exact.
Step 1: Start with your base gif sharpened and ready to colour
I always start any gif with a Curves layer.
I select the white eyedropper tool and select a white point on the gif to get a base to begin my colouring.
For this gif I selected the bit of confetti in the red box
This is what the result of the curves was there
As it can be seen this added some brightness but the scene is still very yellow
To start with I go into my curves layer and start by manually adjusting the RGB channels.
Normally to get rid of yellow, I would add more blue. But this will not work for this scene. This is what happens when adding more blue:
So instead of just adding more blue I go into each channel and adjust to get a better foundation for what I can colour later.
I started with the green
Then added more red in
then added a bit more blue
After that I went into the main channel and dragged the little black slider down to add some depth/contrast
This is what my final curves layer looked like
My next step is to add a Vibrance layer (which I do for all my gifs)
After that I started working in the selective colour layers. As the tint is quite strong I used a lot of layers and built upon them.
For the first selective colour I adjusted the reds and yellows
These adjustments resulted in this, which is already looking more natural but needs some more adjustment still
I went back in the reds and yellows again and adjusted further
leading to this which is a pretty good result:
The gif now is mostly colour corrected but I still want to do some minor adjustments (cos I'm a perfectionist) so I make another selective colour layer.
This time I just add some more cyan to the reds, which is a small change but neutralises a bit of the shadows which were too bright for me
Next I take out some more yellow as the tint is still there a bit
The above is pretty good, but I decided I wanted to do another curves layer on top to do a final bit of colour correction.
I manually went into each colour channel and adjusted as so:
I started by adding more blue as now I can use this to get rid of the remaining tint without it looking weird
the gif was now slightly magenta/pink so I added a bit of green to balance it out and slid the bottom slider a bit to add some depth back into the shadows
Then I added some red. I also dragged the black bar at the bottom to add a bit more depth/cyan to the shadows.
This is the final result of the basic colouring for the scene I did.
Since you also asked about the header in particular I'll expand on how I did the pink colouring for the header. tumblr is telling me this post has too many images so i'll include this info in a reblog as part 2 :)
Hi! I feel like I haven't seen an updated gif-making tutorial in a hot minute, or there are ones that I find that are how I do not make my gifs at all. LOL. I want to bring about the resurgence and renaissance of the beautiful world of Tumblr, and giffing.
This is (hopefully) going to be a helpful resource to those starting out. I don't know if I'm the greatest in the world at explaining, but I hope it's a good starting point!!
To start out, here's what you'll need:
Photoshop! (you can definitely, certainly, purchase the wonderful products that Adobe has to offer. It would be a shame if someone were to give you a link to get that product without purchasing a subscription).
Video Screencapping Software (I use KMPlayer, have always used KMPlayer, so it is what I will link for you here. There is also VLC).
An absolute love for the game. Saluting emoji, etc.
Here is the google doc to the tutorial!
If anything is confusing, or I can be helpful by rewording or explaining, please send me a message and let me know!!!
i've been wanting to share a gif-making tutorial for a long time, and since i recently hit 5000 followers i'm finally posting it!! i've collected a lot of resources and learned a lot of tricks over the years, and i'm very happy to finally share them with you all. i've included an overview of my full gifmaking process, as well as downloadable PS actions, PSDs, sharpening, and more, so hopefully this is helpful to both beginners and experienced gifmakers alike!! ✨
here is a folder of all the resources from this tutorial. all of them will also be linked individually below, along with any other websites and software that i recommend!
Video Downloaders/Resources
The first step of gif-making is to get your hands on a video file for the content you want to gif. The reality is that the most reliable way to access high quality versions of movies & tv shows is through t*rrenting, and in order to t*rrent, you need a paid VPN. I will recommend free alternatives for everything where at all possible, but a couple of investments will save you a lot of effort and give you access to waaaaay more stuff.
VPN (paid) - I use Surfshark, any paid VPN should work, find whichever has the best deal
T*rrent client - i use qBitt*rrent
Magnet link sites: Eztv, ThePirateBay, uIndex, 1337x, LimeT*rrents, T*rrentLeech
Video Guidelines: I usually use files that are 1080p quality. I used to use 2160p quality files almost exclusively, but it takes way longer, and with a good quality 1080p file, the result is basically just as good. In order to find a good file, check the file size before you download it. For a 1 hour tv show episode, you want a file around 3 or 4 GB. Anything under 1 GB won't give you a good result.
More options for downloading other kinds of videos:
Video DownloadHelper (paid) - download directly from video platforms! you get a couple downloads for free, but the paid version is worth it for me. Pros: works instantly so you dont have to wait for the t*rrent file to be posted, works on lots of sites, pay once/no subscription. Cons: no embedded subtitles.
Dropout-dl (free) - Command line downloader for Dropout.tv. Pros: free, works instantly, embedded subtitles, and always creates a separate searchable subtitle file. Cons: very technical setup. For this one, you will also need Docker.
VideoProc Converter (free version) - good for downloading YouTube, and extracting embedded subtitles from video files (5 minute limit on the subtitle thing)
Screencaps
The next step is to convert your video to screencap images.
mpv
sample mpv.conf file
I use mpv to make my screencaps because it's the most efficient, in my opinion. In order to set it up, you have to edit the settings in the "mpv.conf" file. Mine is located here: C:\Users\[username]\AppData\Roaming\mpv. I've linked a sample of the settings I use above. I recommend changing the screenshot-directory to a different folder for your screencaps. I organize my screencaps in numbered folders to keep track of them.
Image Software
I use Photoshop CS6 version, from this link:
birdyresources photoshop
more (free) photoshop links
The other software you can use is Photopea. There's lots of tutorials for that on photopeablr!
Importing Screencaps to Photoshop
In Photoshop, go to File -> Scripts -> Load Multiple DICOM Files. Then, paste the file path of one of your screencap folders into the pop-up.
Creating Gif Smart Object
First off: if your screencaps have a black border anywhere, crop it out, making sure that "Delete Cropped Pixels" is selected.
Next, there are a bunch of steps to be able to work with your screencaps in Photoshop. I have all of those steps saved as Actions.
download all my photoshop actions
how to use my actions
For a full description of how my actions work, how to use them, and a description of every action, I created a separate post just for that! It was a little too long to include here lol. It's not necessary to read the whole thing; feel free to just start using the first action and figure it out with trial and error if you want!
Coloring Layers
It's kind of hard to describe the coloring process, so I've provided several PSDs of gif colorings that you are free to use!
coloring PSD folder
Here's a list of the adjustment layers I usually use, in the order I add them: Exposure, Levels, Curves, Brightness, Vibrance, (then i make a new folder for just the coloring layers) Channel Mixer, Color Balance, Hue/Saturation x many, Selective Color x many
If you take a look at the Louis file in the PSD folder, than you can see all the layers I used to go achieve this coloring:
Add captions
Next, add captions and anything else you want on your gif. This is the font I use for captions:
Arial Rounded MT Bold
Here are the text settings I use. In order to add Layer Styles, right-click on your text layer and click 'Blending Options'.
Export and fix gif speed
Now that the gif is ready with all of the right layers, export it by going to File -> Save for Web. (This takes a while to load as photoshop is putting everything together.) These are the export settings I use:
When the window pops-up, make sure to change the looping option to forever, and then you can save your gif. I also highlighted the area where it shows the final file size of the gif. This needs to be under 10MB, or else tumblr won't allow you to upload it.
This result is good, but when you first export it, the speed of the frames is wrong.
In order to fix the speed: open the .gif file in Photoshop, select all the frames, and change the speed to 0.05 seconds. Repeat the Save for Web step, and overwrite your previous .gif file when you save it. (You can also double check that the gif loops 'Forever' at the very bottom.)
And here's our final gif!
Repeat these steps as needed for the rest of the gifs in the scene. Remember to check out my action pack to save a lot of time on repeated steps!
Here's some additional tips and tricks for giffing to make your life easier:
Tips for skin tone
I often spend a lot of time ensuring that the skin tones of the people in my gifs look natural. It's very important to represent people's skin tones accurately, and it's not acceptable to whitewash or colorwash people of color's skin tones.
Here are some tutorials I've found very helpful:
fix orange-washed characters
channel mixer tutorial
A lot of shows these days have really pale and muted palettes, so Vibrance really helps to add saturation and dimension. If the subject looks too pale/whitewashed, increase the saturation and deepness of the Yellow and Red colors using Selective Color layers.
this is the before/after impact of two layers, Vibrance and Red Selective Color:
If the subject looks too yellow or orange, neutralize these tones using Selective Color and Hue/Saturation layers:
before/after:
Tips for recoloring
I recently posted a small tutorial that goes over my recoloring process, such as in the example below of changing the background from neutral yellow to blue. It also goes over some more complicated gif effects.
coloring + moving film strip tutorial
Other tips and tutorials
For Curves layers, I don't use the eyedropper method. I just click on the line to adjust it myself, making the darks darker and lights lighter. This gives the gif a lot more dimension and contrast.
Selective Color tutorial - change the color of shadows
Text effects tutorial
Usergif tutorial directory - tutorials for basically anything you want to learn!
Every gif is different - sometimes, even two shots of the same person in the same scene can have drastically different lighting and color-grading from each other. I recommend playing around with the values in the adjustment layers a lot to fit your gifs as needed. You can also reduce the opacity of layers to lessen their effect, or duplicate layers to increase their effect. (I often reuse coloring layers and make these changes, so it's a real method!)
THANK YOU SO MUCH for reading my gif tutorial, I hope it was helpful to you!! My goal is to spread the love and resources for gifmaking far and wide, so everyone can make gifs as beautifully and easily as possible. I hope you have a nice day and don't hesitate to send me any questions you might have about any of my tutorials or resources! 🥰
TRIPLE DOG DARE is a free rp theme best suited for multi muse blogs. if you want to see more free rp themes from me, please support me by liking and reblogging this post!
terms & conditions
feel free to edit this theme as much as you want for personal use.
message me if you notice any bugs.
do not claim as your own.
do not remove or move the credits.
do not use as a base.
do not takes parts of the code and put it into other themes.
do not redistribute.
do not use for paid theme makeovers.
you may not use my resources for writing celebrities as themselves, writing with minors / writing minor characters, writing taboo themes, krp, etc. be respectful and use common sense!
theme information
large contained theme with 500px posts.
all text in this theme is 12px or larger for accessibility.
lots of fun with gradients, grids, waves & blobs.
many color options along with a dark/light mode.
a left sidebar with titles, a description, basic links, and one image (200x320px).
a navigation tab with titles, a text area, six extra links, two images (496x198px, 526x224px), and muses (65x65px).
individual muse tabs with a statistics area, a text area, four links, and two images (300x601px, 397x150px).
don't worry too much about image dimensions! all images in this theme will resize if too big.
supports old & new post styles (legacy & npf-friendly).
further instructions in the code. editing this will require some html knowledge, but feel free to message me if you get stuck.
