coding, graphics, edits, writing, etc resources blog. this blog is really just for me, but of course anyone can use. I only post/reblog free shit. if you notice something is no longer available or has gone up behind a pay wall, let me know so that I can remove it.
...Anyway, I created a Userscript for the Chrome/Firefox Stylus Extension that reverts the new dashboard to the old format. This took a lot of tweaking and it's not perfect at all, but if anyone wants it I'll be uploading it soonish now!
A fix for the new Tumblr dashboard! If you don't want the sticky header you can remove the labelled script at the top of the css below /* St
You need to have Stylus installed. So if you don't have it:
Install the Stylus Firefox Addon or the Chrome Extension
Once it's installed into Firefox/Chrome you can proceed with adding this style or any other.
To add the style, follow the instructions:
Go to this link: https://userstyles.world/style/11286/old-tumblr-dashboard-july-2023
Click on "install".
Style will open a tag with it and in the left side you'll have a button that says "install style", click there.
(Step-by-step copied from the lovely dorothyoz39 who wrote this in a reply!)
If you don't want the sticky header you can remove the labelled script at the top of the css below /* Sticky Header*/
Be sure to check for updates, I'm fixing things as I go! To update click the Manage button on Stylus and click the check for update button below! If you experience any bugs let me know - feel free to edit it yourself as well! P.S. Works just fine alongside Xkit!
Check under the cut for the changelog and known issues!
NEW UPDATE as of 16/08/23, 20:12 BST v6.5
-----
Known issues:
The activity count in the Accounts Menu is blue (it uses the same code as the header buttons notifications) for some reason, still trying to figure out how to make it match the rest of them.
The search bar moves out of place on bigger monitors when not using the sticky header. You can adjust its position yourself under "/*Moves the search bar*/" by changing the "Left" numbers. I can't think of a way around that just yet without adjusting it yourself!
Search bar doesn't appear on some pages (like viewing a post), this is because Tumblr removed the search bar on those pages completely. Unfixable!
Post button disappears on very small monitors! (1 person with this issue so far) Might be hard for me to replicate and fix without messing with regular-size monitors - My recommendation if you are having issues with smaller monitors, is to adjust the labelled numbers (Left, Right, Top: [Value]) for the issue you're having in the code!
Only two columns in Masonry view. May be unfixable, I can't figure out how to add another column in smaller screens. Even the Tampermonkey style only has two columns! Tumblr creates columns based on monitor size, if I try adding another column (because it doesn't exist) it just perpetually loads on screen.
The Account and Settings button move when the menu is open - See number 4 of Solved Issues for solution to this problem! SOLVED
Tumblr has ONCE AGAIN CHANGED THE ACCOUNTS MENU. The menus are now shorter and have less information on them. This is unfortunately permanent. I do not see any way to fix this. Unfixable.
Users' icons and who they've reblogged from disappear - This is 100% something Tumblr themselves broke and not the userstyle, hopefully they'll fix it themselves shortly!
Solved issues: (Update)
Menus need to be manually closed SOLVED! in V.4 and updated in V.5! The menu & icon WILL scroll with you if you have removed the sticky header CSS, however, clicking anywhere on screen will make the Menu disappear still.
DISCLAIMER: If you remove any of the header icons with Ublock the Account or Settings icon will disappear off screen or overlap with other icons. This is just cosmetic and the menus will still close - see option 4 for a solution to this problem!
Masonry view in searches is now fixed!
Removed Xkits new text for xkit users (update)
Added a new guide to make moving the Settings and Accounts buttons easier if you remove icons with Ublock.
Example: /*If there are none icons on the right (of the settings icon), right: 120px;*/
Now you don't have to fiddle around moving the icons yourself, you can just choose the number value that works for you! Ctrl-F Search for Accounts Icon or Settings Icon in the code to find this!
Resized Messenger Chat Box!
NEW UPDATE 16/08/23, 23:55 BST v6.5: Figured out how to reorganise the icons in the header. Let me know if you have any problems with it and make sure to update your Userstyle! Some icons are hidden with Display: Block; you can hide more icons with this method but be aware it may break other features!
If your Tumblr DOES NOT HAVE TUMBLR LIVE OR YOUR TUMBLR LIVE IS 'SNOOZED' making your header out of order, click the pencil to edit the style - it has the Tumblr Live numbers set by default - replace the numbers under 'Reorders the Icons in the header' with the ones listed below Inbox, Accounts, Settings, Domain and Ad-free e.g. */No Tumblr Live: (number)/*
For example
*/Inbox/*
ul li.g8SYn:nth-child(7)
*/No Tumblr Live: (6)/*
will become
*/Inbox/*
ul li.g8SYn:nth-child(6)
Slight Bug: If you resize the window to be very small but not small enough to revert to mobile view it may rearrange itself for no reason at all. I've decided that that is a headache for another day.
I made an HL student template for myself a few weeks ago but I thought I’d share it with all of you too !!
Made this since most of them weren’t as how I desired them to be so—
This is the blank template, have fun guys!
Do credit me upon usage tho ^^
Did it for seo as an example :
Also haha btw forgot to tag— @willowwhisk [I used law as one of his bffs!] @mavenantonia [i used Antonia as his love interest hehe] and @pearlevie [used inara as his love interest ^^]
this template includes space for a profile image, four mood/inspo pics, a media player, a banner (great for text and info, or a good quote!), and space for a color pallete/anything your heart desires. you need some basic photoshop skills in order to use this template, as it uses clipping masks and solid color layer styles. feel free to go crazy and adjust anything to your liking. you can download the template here, or by clicking the link in the source. as always, please reblog and credit me if you use this template ♡
DISCLAIMER: everyone uses different sharpen settings for their gifs, but this tutorial will follow the basic sharpen settings that creators typically like to use!
let’s get started!
you will need:
any version of photoshop will do
basic photoshop knowledge
STEP ONE:
load your gif into photoshop with your preferred method of doing so (i have a tutorial here on how i do mine). after you resize/crop your gif, you'll want to convert it to a smart object. this is basic photoshop knowledge, so i'll be skipping how to do it for the sake of time.
STEP TWO:
after your gif has been converted to a smart object, open your actions and then you'll want to create a new set. i'm naming mine "action tutorial" for the purpose of this tutorial. you can choose whatever name you want for it!
STEP THREE:
your new set should be automatically highlighted after you highlight it. do not unhighlight it. you will then want to create a new action. again, name it whatever you desire, but i will be choosing "gif sharpen action tutorial" for the sake of this tutorial.
hit the record button and photoshop will start the recording process.
STEP FOUR:
next, you want to go to filter > smart sharpen and adjust it to these settings when the window pops up:
after you hit OK, go back to filter > smart sharpen and that window will open again. you now want to change it to these settings:
hit OK again and then you can hit the stop button to stop recording because you're pretty much done at that point. since this is a basic sharpening, i won't go any further with any more settings unless someone requests it.
FINISHED PRODUCT WITH COLORING:
if you have any questions, don't hesitate to let me know! <3
as per request, I’ve coded a simple yet functional muse page with on-click pop-up boxes . thanks to the magic of jquery, you can add as many rows and icons as you’d like and have each row adjust appropriately when you click on the button underneath the icons . each box has a small section for basics, which can be as long as you like, and three links to link to a character page, a relationship page, and a face tag . you can change the title of these to your liking, of course . if you want to change the face tag to a musings tag, have at it ! have fun with it, but please like/reblog if using and feel free to approach my inbox for any and all questions !
6 filters for characters. you can add more. instructions to do so are in the code. you can also delete them if you don’t need that many.
6 built in characters but you can add more by following the instructions in the code.
150x330px image for each character.
info about each character (url, age, gender, and 2 free spots if you have something for your rp like species or affiliations).
a short quote for each character. try to keep this to three lines if you want it to match up with the photo. if not, feel free to make it as long as you want.
biography for each character.
credits
honeybee icon font by @suiomi
tumblr controls fix and filter tutorial by @cyantists
typical theme rules apply: like/reblog if you use, don’t steal, you can edit in any way as long as you don’t use it as a base, ect. if you have any questions, ask me and i’ll try and answer. as this is a page theme, you’ll need some knowledge of html/css to edit it but i’ve done my best to explain everything inside the code. lmk if there’s anything wrong in the code!
this was built for use by rp groups/individual roleplayers with multiple muses. however, you can use it for a network page or anything else that you think you could make work with this setup!
thank you for scrubs new eps Gifset!! I just love this show and I want to learn how to colour it, would you please consider sharing a colouring tutorial ✨
hi! you're so welcome, i'm glad you're enjoying them so far! below the cut, i'll walk you through how i color the new eps!
this tutorial assumes basic gifmaking knowledge, and my process entails cropping and sharpening prior to coloring. here's our base gif:
my first step when coloring is always a brightness/contrast layer set to screen without changing any of the values. here's what that looks like:
this layer brightens up the gif significantly -- in this case, so much so that i might drop the opacity down to 75%-85%. i find this step most helpful when working with really dark scenes, which is why we'd decrease the opacity on this one as it's already well-lit.
my next step is always a curves layer utilizing the black and white eyedroppers:
on the left-hand side you'll see those three eyedroppers. click the top one (black) and then click on the blackest part of the gif. then click on the third one (white) and zoom in and click the whitest pixel -- in this case, it was a highlight on one of carla's earrings. the white eyedropper didn't change things much, but the black one did and it helped to eliminate some yellow tint.
please note that you can always try multiple different points. undo is your friend here, but undoing the white eyedropper if you do it in the same order as i do will undo both eyedropper selections. as in, if you're happy with the black eyedropper but want to redo the white one, you'll actually need to redo both. photoshop 🤷♀️
next comes selective color! this first selective color layer is to adjust the blacks and neutrals (and occasionally whites in an especially tinted scene). i almost always make the blacks blacker and neutrals a little lighter, but you need to be very careful with the neutrals when giffing people of color! don't white- or color-wash!! you can find more in-depth tutorials on this on @gifmakerresource (my resource/tutorials blog)!
here are what these adjustment layers look like:
also note that some of this really just comes down to personal preference. i love cool colors (blues, greens, purples) and prefer my gifs to have a bit of a blue tint to them and sometimes that means neutralizing some of the reds and yellows in general and in the neutrals of a gif. again, please just be conscious of how this can affect skintone when giffing poc!
these three adjustment layers are the basis of every coloring i make. here's the difference between our uncolored, base gif and these adjustments:
while what we've done has brightened the scene and added contrast, we've kept judy's skintone virtually the same. the reason i point this out so much is because i've seen an uptick in colorwashing lately with all the people of color in the pitt and i would love that not to happen in more fandoms! while i don't think anyone is setting out to purposely colorwash, when it's not something you're aware of or paying much attention to, it happens very easily. just be conscious and when it doubt, don't be afraid to ask for help, look for resources, or even pull up photos of the actor or actress to get a better idea of their skintone!
from here, what i do varies depending on the scene. i would like to emphasize and make things more blue (again, personal preference) so here's how i go about that!
i'll use another selective coloring layer and select the blue and cyan dropdown menus:
what this means is we're isolating the blues and cyans in the scene and enhancing the cyans and blues within those colors. selective coloring is my absolute favorite adjustment layer and how i achieve my "unique" sets where i fuck around with colors and focus on usually two specific colors. i highly recommend playing around with these adjustments as that's the best way to understand how you can manipulate colors in a gif! like on these layers, if i were to adjust the magenta sliders, moving it to the left will add green and moving it to the right will add magenta within the blues and cyans.
anyway, now we have this:
the right half of this is the base gif. the left half is divided further in half horizontally, with the top quarter showing the blue adjustment layers and the bottom quarter before the blue adjustments. it's subtle but i <3 blue 🩵
honestly, this could be it, but i like a bit more contrast, so i'm adding a gradient map adjustment layer. i set it to black and white and to soft light and reduce the opacity to 40%
one more thing i want to do is neutralize the yellows a bit more, so with a selective color layer set to yellow, this is what i have:
btw, to change the layer colors on the eye/visibility, right click in that box and select the color you want. this helps keep the layers organized if i need to adjust something for some reason.
here's our final before & after! could i keep messing with this? absolutely, but this is what i would save as a psd to use for future scenes/episodes!
if you have any questions or need clarification on this or anything else, please let me know and i'll help as much as i can! 🩵
hi my name is long-running tv show heres where you can find me: seasons 1-3 are on netflix. seasons 3,4, and 7 are on tubi. seasons 5-6 are on poob. season 2 is on pheebo free with ads. all seasons are available on pheeboTV+ Premium with the Starz add-on... with ads. season 12 is a pheebo original. nobody has it for you.
hi everyone, adora here with sleek and simple character / skeleton psd that is highly customizable and editable for personal use. minimal photoshop knowledge is required, mainly just clipping masks and layers. the fonts used are abril fatface and playfair. feel free to edit to your liking, but if you’re using, please credit. in addition, coloring psd is NOT included. pictured is a coloring psd by @18hg ! basic rules apply; like AND reblog if using. credit required for use. don’t steal or redistribute as your own. dl in source.
revelations is a 798x563 character template. i felt inspired to use the same attributes as in disco elysium, and just wanted to try something a little different (but very obviously, it is still within my wheelhouse lol). feel free to move things around and fit it to your needs! things are easily malleable and i tried to make it so you could customize as much as you want. the fonts used were catcheye and brandon grotesque; star icons + music bars were made by me.
this is a free template, so all i ask is that you credit me, as well as like + reblog if you use it. i really like seeing what people create with my stuff, so feel free to tag me. if you like what i do and would like to support me, i have a ko-fi!
hi! i was wondering if you could share the overlay and/or explain how you made the first gif in the last set you posted? thank you very much in advance <3
Hi anon! I'd be happy to share how I created the ripped paper effect in this gifset !
You’ll need a basic knowledge of gifmaking and photoshop, and I’ll put the rest of this under the cut.
1) Creating your gifs
So to start off you're going to create your gifs in separate canvases. I work in timeline mode and I add my sharpening and colouring, and I put both gifs in groups (explained here).
Here are my gifs on separate canvases. For reference, I've called the one on the left "grocery store" and the one on the right "parents".
You'll then want to copy and paste your gif groups onto the same canvas. This is what my canvas and layers panel looks like once that's done. From here, you're ready to start the ripped paper effect.
2) Ripped paper overlay
For this step, you want to obtain your ripped paper overlay. You can find various ripped paper textures/overlays using google, but I used these overlays by @peytonsawyers !
You open up the overlay you want to use, and either copy and paste or just drag it onto your gif canvas. You can then resize and rotate the texture and orient it where you want.
I then drag the ripped paper layer so that it's placed between my two gif groups. I also hid the top group just so that I can see the overlay, but this is only temporary. Your canvas and layers panel should now look like this:
2.5) Filling in the overlay
So as you can see we have an issue because the ripped paper doesn't cover the entire area where we want our top gif to show. To fix this, I just use a white brush at 100% hardness and paint in the area that needs to be covered, making sure the ripped paper layer is selected (this doesn't have to be perfect, just make sure that the entire area is filled.
Now this is what it should look like:
3) Masking the top gif
Use the command (or ctrl) key and click on the thumbnail in the layers panel for your ripped paper layer (the square highlighted in white in that last screenshot). You should get a marching ants selection around the ripped paper like so:
Now reveal your top gif group (by clicking on the eye icon), and make sure you have the group selected in the layers panel. You should still see the selection around where your ripped paper is, like so:
Now go to the bottom of your layers panel and click on the little mask icon:
And now you should get a mask on your top group in the shape of the ripped paper, and you should be able to see both gifs simultaneously on the canvas:
If the black and white areas on your layer mask are flipped after you click on the mask icon, just click on the layer mask and use the command + i (ctrl + i) keys to switch it back so that you can see both your gifs.
4) Final touches
Now if you're happy with the result so far, you can absolutely stop here. However, I wanted to show the uneven rip (like how when you rip a piece of paper you can see some white bits on the edges).
To do this, select your move tool (shortcut: click the v key on your keyboard) and making sure your ripped paper layer (NOT the mask) is selected, use your arrow keys to move it slightly until it shows between the two gifs.
It currently looks a little too clean for my liking, so I like to move it slightly up/down as well so that it looks more uneven and natural. If your overlay is too small, just use the transform function (command + t or ctrl + t) to resize it so that it fills the canvas. This is what mine looks like after I mess around with it:
And you're done! If you want to adjust any colouring, just go into the gif group and you can edit the layers from there.
Hope this helps anon! Let me know if you have any questions!
hi, your latest edit for thgweek24 is absulutely stunning and i thought if i can ask if you can make a tutorial about the ripped gifs/paper effect? if not, that's okay! have a nice day <3
RIPPED PAPER EFFECT TUTORIAL
hi! thank u :D (thgweek set referenced)
below the cut are the steps that i took to create this effect. this tutorial is very screenshot heavy and assumes some basic knowledge of photoshop and giffing.
i do my best to try and explain my process so hopefully this is helpful! if you have any questions, please don't hesitate to ask.
STEP 1: Choose and arrange your two gifs
with this specific use of the ripped paper effect, there's one gif on the "outside" of the rip and one on the "inside." in this example, the outside is the b&w and the inside gif is the colored:
for me, the outside gif determined the positioning of the inside gif and the position/direction of the rip. as can be seen, outside gif has a lot of space on the left. therefore, i knew i was going to position the subject of the inside gif more on the right so i could create the rip without hiding too much of the b&w gif.
next, you want to arrange the inside gif on TOP of the outside gif. your layers panel should look like this:
STEP 2: Creating the ripped effect
here comes the fun part! in order to create this effect, you're going to need torn paper brushes. here and here are some packs you can download (w credit to owner).
next, create a layer mask on your inside gif. you're going to use the brush of your choosing as an ERASER. then, you can play around with the size and angle of the eraser to create the look you want. this is what the gif and the layers panel now look like:
STEP 3: Adding the paper
in order to add the paper around the edges of the inside gif (where the text goes), you now need to download a paper texture. i found mine on google by searching "paper texture png."
place the paper png IN BETWEEN your outside and your inside gif. this is what everything should look like:
now, similarly to what you did in the previous step with the inside gif, you are going to create a layer mask on the paper layer. using an torn paper brush as an eraser, you will erase the paper, creating the shape you want.
be sure to leave enough room for whatever text you want to be on the paper. also, i suggest making the rips of the paper different from the rips of the inside gif so it looks more organic.
here is what my gif looks like after erasing the paper:
optional: add a drop shadow on the paper layer (right click -> blending options... -> drop shadow)
STEP 4: Adding the text
first, you want to identify the space where you will have room to place your full quote within the paper. if there are no spaces, you can always use your brush/eraser to modify the layer masks.
next, add a layer on top of the paper layer (and below the inside gif). select the text tool and start typing your repeated text!
because you can see which text is hidden by the inside gif and what is on top of the paper, a shortcut i use is the "tab" button and only type words that will be seen.
type the repeated words around the quote you want highlighted:
now, in order to contain the text within the paper, convert the text layers into smart objects. then, create a clipping mask on both layers (right click –> create clipping mask). this is what your layer panels should look like:
with that, your gif should now look something like this, with the text contained inside the paper:
STEP 5: Highlighting the quote
as you can see, it just looked like a bunch of words. so, in order to highlight the quote you carved out in the previous step, add a new layer below the layer of the quote you want highlighted:
now, use a round brush (softness around 10-15% and opacity at 70-80%) with the color of your choice to highlight the words you want.
and there you have it!
i hope that this made sense and was helpful! if you have any questions or clarifications, please don't hesitate to ask :)
⋆*.⋆♡ part 2! here are some overlays / gifs i conjured for headers, graphics, etc etc and never used! maybe someone will use them. idk and idc. happy new years! like and reblog if you found useful. or don't, i'm not your mom. + credit not necessary.
