i’ve updated my giffing process (tutorial coming soon i promise lol) so i’ve also updated my previous action pack to reflect those changes! quick shoutout to @redbelles for literally changing my life love u meg you giffing queen
this pack includes two actions for that will take you all the way through sharpening after you’ve cropped and resized and a save action 💜
If you download, please like or reblog. Explanations for each action are under the cut, and as always if you have any questions please let me know!
do not re-upload/claim as your own.
action pack
note: the two sharpen actions operate under the assumption you are cropping with ‘delete cropped pixels’ UNCHECKED and have cropped and resized your file before using them
if this does not apply to you, see my other pack which contains the same sharpen settings but gives you the additional scripts action
i. sharp & sharper: both of these actions are meant to be used directly after you have cropped/resized your image. it converts your frames to a smart object & sharpens them.
iii. save: this action is meant to be used directly after you have finished coloring. it converts all visible layers to a smart object, converts back to frames and then sets timing to 0.05 so that all you have to do is then export the gif.
BRINGMOREKNIVES’ PSD 01 - P I C K Y O U R P O I S O N
so i’m getting more confident with photoshop and i thought i might try releasing my first psd! it’s technically not my first but the first one really doesn’t count because it was awful haha. this one is meant specifically for coloring live performance photos but it works fairly well for many different kinds of photos!
specifics:
see more examples here
paper texture from here
optional additional saturation layer if you find it washes the colors out too much
feel free to edit the layers as you see fit for your own use, but do not use as a base for your own psds, and do not edit/redistribute
please like/reblog if you’re thinking of using it and tag me in what you make, i’d love to see it!
EAxis established a pretty decent color palette in the base game, but they don’t always use it consistently. So I wrangled a bunch of the colors together and made some actions for easier recoloring.
These are the same colors I used for my Parenthood kitchen recolors with a few minor tweaks here and there. I also threw together a second set with colors from a few Parenthood objects.
Also, while making sure everything worked right I recolored the Parenthood medicine cabinet and dresser in the base game colors. So take those too.
Download includes the above swatch, a text file with all the hex codes for easy copy/pasting, and another text file with installation/usage instructions.
Parenthood Game Pack required for the cabinet and dresser.
Alright y’all, today is the day that I’ve finally managed to make a tutorial! I’m going to be showing how I created the effect in my lotr and the witcher sets!
For this tutorial you need to know how to make gifs and have a lot of time on your hands!
this is really long and really image heavy oops
I’m breaking this down into two parts: 1. Setting up and creating your gifs and 2. creating the actual transition part.
1. Guide to this tutorial
We’re going to be working with multiple smart objects and documents at once so I want to create a little keyword guide.
“small” gifs refer to your smaller gifs
“big” gifs refer to your bigger gifs
panel/document/canvas I use somewhat interchangeably here but they refer to the document where you will be placing both your small and big gifs
click on any images that are blurry so that you can view the HQ version!
1.1 Setting yourself up
The first thing to do is decide how many gifs you want to do. Standard gif width sizes for tumblr are 540px for one gif, 268px for two gifs and 177/178/177px for 3 gifs. You can do more than this, but make sure that you’re calculating in the gutter between gifs (4 px).
Height is completely up to you, but take into consideration that the upload limit is 10mb!
For my ROTK set, I did 177/178/177 x 150 which gave me a canvas size of 540x458. For my Sam set, I chose a different layout where I had four gifs of 268x150 and 3 gifs of 177/178/177 giving me the same canvas size.
(150 x three rows = 450 + 4 px for gutter x 3 = 458)
Now that you have your sizes, you’ll know how many gifs you want to do depending on how many panels. For my ROTK set I wanted to do five panels so I needed 45 small gifs and five big gifs.
The last thing I do before I start creating the gifs is to set up a new document for each panel with the larger dimension.
File -> New -> this dialog (click on image for HQ)
1.2 Creating your smaller gifs
This is the most time intensive part as you will be creating individual gifs for each panel. You need to make sure that each of these gifs is the exact same amount of frames. I usually do between 30-40 frames.
Load your screencaps/movie and crop, resize and sharpen it. (shameless plug for my action pack here) and convert to smart object if it’s not already!!
I also like to name my gifs as either side (177 px) or middle (178 px)
If you prefer you can also color your gif now. For color sets I like to color them once I have them all on the same canvas but that’s really just a personal preference there is no right or wrong way.
!! YOUR GIFS NEED TO BE IN SMART OBJECT FORMAT FOR THE NEXT STEP !!
We’re now going to drag the gif onto the corresponding panel document (still in smart object form)
Once the gif is on the document I like to go ahead and create timeline and delete the base layer.
1.3 Aligning your gifs
Move the gif to the part of the canvas you want it be by selecting command + a and then command + v. This allows you to accurately place your gif using these buttons:
Now repeat this process until each of your panels are filled: (for the sake of time I just used 3 gifs that aren’t colored yet hp set coming soon tho ayeee)
If you didn’t color your gifs earlier, color them now and then select each of your gifs and create one smart object by selecting all layers -> right click -> convert to smart object and name this layer “small” or something along those lines
I HIGHLY RECOMMEND SAVING AFTER YOU’VE COLORED AND BEFORE IT’S A SMART OBJECT just in case
1.4 Creating your bigger gifs
Load the screencaps for your bigger gif. Make sure that it is the exact same amount of frames as the smaller gifs.
You’re going to crop it to the size of your documents so 540 x the height you’ve chosen. DO NOT RESIZE IT.
Click on VIEW -> NEW GUIDE LAYOUT
This dialog set is going to pop up - enter in how many rows and how many columns you want as well as the gutter size you’ve decided on (the image has 2 px on it but 4 px is the standard tumblr size)
A layout guide will appear that demarcates where you need to crop.
Remember to change your cropping size if you’re doing 177/178 for the middle column.
Now crop out each section then resize it to the correct size, sharpen it and create a smart object.
Drag this gif to the panel you want and position it in the correct place using command + a and command + v.
Go back to larger gif document and reverse your steps until you have the guide layout.
Crop the next part of the gif and repeat the above steps until your panel now has all of the larger gif on it.
For coloring the larger panel, I like to resize it into the correct size on the original and color it separately and then drag the coloring group onto the panel with the smaller and larger gifs.
Once all of the pieces of the larger gif are in the correct place and your coloring group is there, select the them and create a smart object.
You should now have two smart objects, one of the smaller gifs and one of the larger gif.
2. Fade transition
Now for the transition!
Duplicate your “big” layer so that you have a “big”, a “big copy” and a “small”
You’re going to drag your “small” layer onto the same line as your “big” layer, creating a video group.
Then drag your “big copy” layer onto the same line but behind your “small” layer.
Your layers panel should look like this:
Click on this button in timeline here, and select cross fade. The amount of seconds you want to choose is up to you.
I did .3 seconds for my ROTK set which created 6 transition layers which I quite liked but it is really up to personal preference here!
Now drag the cross fade onto both the start and the end of the “small” layer.
I find this is a good time to check my gif and make sure that everything looks the way I want it to and that the fade transition is smooth.
The next few steps are crucial to getting the fade to actually stay in your gif so although it’s waaaay different than how I usually export gifs so stay with me.
Instead of converting back to frames and setting your timing you’re going to go directly to export for web and make sure you have the transparency boxes checked (CLICK ON IMAGE FOR HQ):
note: it might take a long long long time for the save for web dialog box to pop up so don’t worry it’s not you
!!!note 2: as of may 1st due to the new update make sure to uncheck "interlaced"!!!!
Save and then open that gif file you just created. Play it just to make sure that the fade transition is the way that you want it to be.
The key to creating the smooth transition effect is that we will actually be deleting some of the big gif so that the actual “beginning” of the big gif starts after the smaller gifs, even though that’s not the beginning of the actual file.
(this is kinda hard to explain I’m sorry!!!)
What you’re going to do is delete the first 10-20 frames of the first “big” gif and then delete the frames that you left in the first “big” gif from the back of the second “big” gif.
So for this set I’m deleting the first 20 frames:
and now I need to delete the remaining frames between the “start” of the big gif and the first transition. The easiest way to do this is go find the first transition frame of the second transition - where the small gifs transition back into the big gif. Click through the frames until the you see where they start to fade.
Once you’ve found that frame, count forward the amount of frames you deleted in the beginning. COUNT INCLUDING THE FIRST TRANSITION FRAME.
Now delete the frames that come after your counted ones. The reason I count out 20 instead of 19 (or whatever you number is) is so that I can double check myself. My 20th frame (so frame 63) should be the exact same as frame 1 (the first frame in the whole gif).
This creates the effect that the gif never actually ends!
a colored version:
Make sure that you then flatten your frames to layers and delete your excess layers and set the timing to 0.05!
Finally (I promise) your gif is ready to be exported and uploaded to tumblr!
note: because you deleted a decent amount of frames your gif should be under 10 mb. If you’re struggling with the size limit, either cut down the original amount of frames or cut down the duration of the fade.
(now repeat this process for each of your panels)
I really hope this was somewhat easy to follow and please message me if you have any questions or run in to any problems!
omg do u have the psd for the rhaenyra gif where she's saying 'if you wish me to bear it, defend me' the lighting was so bad in the scene but you made it look gorgeous!
so fair warning on this coloring, it's probably gonna take some work to make look good on other shots in this scene - i didn't check it on any parts but this and it's a fairly heavy coloring that draws a lot of artifact areas because you have to add a lot of color in to set off the grey 💜
I’m still procrastinating on making a color tutorial so here is a pack of gif actions! Includes an action for scripts, two sharpens and a timing/save/export action! I use all of these every time I gif & they will save you serious time 💜 If you download, please like or reblog. Explanations for each action are under the cut, and as always if you have any questions please let me know!
do not re-upload/claim as your own.
action pack
i. scripts: this action is meant to be used directly after you import your screencaps. It creates frames and reverses them.
ii. sharp & sharper: both of these actions are meant to be used directly after you have cropped/resized your image and deleted unwanted frames. it converts your frames to a smart object & sharpens them.
iii. save: this action is meant to be used directly after you have finished coloring. it converts all visible layers to a smart object, converts back to frames and then sets timing to 0.05 so that all you have to do is then export the gif.
Hey! I love your blog. Quick question: I like that you have the tag you are tracking on your description as well as the link to your gifs, may I ask how you did that? I have tried a couple times but the link never works when I add it to the description of my blog.
of course! a very brief tutorial below the cut + a bonus tutorial on gradient text for captions & html text formatting:
adding links to description:
first go to account -> blog setting -> edit theme
then, once your blog website opens up we're just going to add our links through basic html code:
text version to copy here: <a href ="http://url">word</a>
note: if you're linking to another page on your blog you can leave out the "http:// and just put "/url of page" instead
example of my description:
where the purple highlighted text is the url and the yellow highlighted text is the word that carries the link
i also have <b> which bolds the text and </b> which ends the text bolding (more on that below)
some troubleshooting:
make sure you're adding them to your description through edit theme under website theme in your settings! i don't think you can add them directly through mobile!
if it's still not working for you make sure you're putting in your description under appearance options and not under description in open graph options
once you get it working i would go ahead and copy the whole text and keep it somewhere because whenever you change your icon or header tumblr wipes the links out and just keeps the text so you'll want to go back in and repaste it in each time you do that
HTML text formatting & gradient text:
here is a fantastic list of html text formatting for your blog or captions!
and here is the resource i use for gradient text
you will need to copy and paste the text from the HTML CODE FOR THIS TEXT box into another document ( i use my notes app) and use find and replace for the following things:
find & replace ' with "
find & replace ; with a space (so just delete it)
then; in tumblr you need to click the little gear icon on your new post and select html from the drop down menu (rich text is the default)
then you can copy and paste in your gradient text code or add in html formatting elements!
let me know if it's still not working or if you have any other questions 💜💜💜
