hi, this is really old but i still wanted to answer. it’s very easy, i’m using one of my older psds for examples because it’s the most troublesome one to put on larger images, the others have way less steps. but anyway. you have to open both your image and the psd that you want to use, then select the groups with adjustment layers (with my psds, there are always two groups: the psd and the extra adjustments). then left click on one of the selected groups and drag them to the image you’ll be using it on.
because this is a psd with a round border, things get kind of messy and slightly more complicated and i’ll explain under the read more. with a normal psd without transparent backgrounds, after this step, all you have to do is fix your adjustment layers until you get something decent like this (tho let’s all agree that psd 003 just wasn’t a good psd but that’s okay cuz it’s old):
but it’s still better than this:
so how do you fix that? you delete the border layer, first and foremost. then you press down shift and left click all of the masks on the layers. (you could also delete them but this is faster imo)
it’ll look like this, so you just have to use the extras in the other group in a way that better fits your image.
in this case, i made it darker and more saturated.
As requested ever so kindly, I will explain to you both my gif processes for the Kristine Frøseth gif packs I’ve made recently. My process probably doesn’t differ that much (or at all) from other tutorials out there but this is mostly a way to explain the specifics of these particular gif packs and a chance for me to give credit where credit is due as well: to the wonderful @insomniacgifs for their help with sharpening and gif colouring and the equally talented @jojorphs whose gif icon colouring psd I used for the Kristine gif icons.
REQUIREMENTS:
- Photoshop CC (other versions probably work as well!)
- My used gifmaking action: here (original here)
- My used gif icon psd: here (original here)
- My used small gifs psd: here (original here)
Downloading the footage: I use torrent sites for this and the program Bitlord to download them with - you’ll have to message me privately if you want me to share the websites themselves because this is, in fact, an illegal way of obtaining footage. Especially the Americans or others who have strict regulations about this in their countries, beware and I advise you to use a VPN.
Tip: Try to find the best high-quality version - I always opt for 1080 or more, especially when making small gifs.
Cutting the footage into pieces: To make my life easier, I cut movies and tv shows and anything longer than 5 minutes basically, into smaller scenes via a program like Windows Movie Maker ( there are probably better options out there but it works for me ). It may seem time-consuming but it saves you a lot of hassle later when selecting and importing scenes into photoshop (3).
Tip: you don’t have to do it all at once, you can easily save it as a draft and get back to it later when you use movie maker. You can recognize a movie maker project by .wlmp as a file extension.
As soon as only my wanted scenes are left in the project, I start saving them one by one by selecting all the scenes (Ctrl+A), clicking on those scenes that I want to save (so that they are unselected) and clicking delete so only those scenes are left. (don’t worry we’re going to get them back after saving the scenes by using the ‘step back’ function (Ctrl+Z))
Tip: Always save them with the highest definition possible.
After saving, you click Ctrl+Z, then delete the scene(s) you just saved and do it all over again until you’ve saved all scenes. (Again, there may be a video editing program out there who can save them all separately at once. I don’t know!)
Importing into Photoshop: I use the import frames to layers option. Click on File > Import (near the bottom) > Video Frames to Layers. You choose the video you want to gif and then select the exact scene with the pop-up window that comes up. Make sure the ‘Make Frame Animation” box is selected!! Then click OK.
Tip: I always select a bit of scene before and after my selected scene if possible - then I can just delete the unnecessary frames and be sure I have the whole scene but again, that’s just extra time-consuming.
This is where the process becomes just a tiny bit different:
Gif icons
(Deleting frames you don’t need): By going into your timeline, you can delete any frames at the start and end that you don’t want.
Tip: Don’t use the delete shortcut on your keyboard! It will delete your layers instead of your frames. Rather select them and drag them to the bin at the right bottom or right-click and delete them.
Cropping: First off, I cropped the gifs by choosing a square ratio (1:1) and selecting as best as I could to make sure Kristine was completely visible in every frame.
(Loading an action:) Open the action window by clicking Window > Actions (or Alt+9). Click the menu-button in the top corner (three horizontal lines) > Load actions > choose the action you’ve downloaded and you won’t really get notified but you’ll see the folder amongst the rest of your action folders. That’s it!
Applying gifmaking action: To make things easier for myself, I put together an action that takes care of everything (mostly based off of @insomniacgifs their action!!) - including resizing. All you need to do is click on it and press play. The process is done when all that’s left is a folder labelled ‘gif’.
You can download it HERE if you haven’t already.
➝ If you’d like to resize by hand, my settings are: bicubic (smooth gradients)
➝ If you’d like to use a different size but still use the action: just click within the action tab, (open the folder and the action labeled “sharpen + blur”), the first step is called Image Size - double click on it and it’ll give you the resize pop-up display, allowing you to change the size to your preference.
NOTE: Make sure you’ve got the first frame selected on your frame-timeline before you click play on the action - otherwise you’ll end up deleting frames and have blank frames when the action’s finished.
Colouring: I used @jojorphs gif icon psd as a base. You can download mine HERE if you haven’t already but it’s basically their psd so please show your support to them!!
➝ The orange layers represent those I added.
➝ The blue layers represent those I toggled depending on the scene.
Tip: For really dark scenes ➝ Add an exposure layer instead at the bottom and adjust the opacity of the brightness layer at the bottom and/or the levels and selective colour layer.
Tip: For scenes that weren’t dark but rather had a lot of natural shadows ➝ adjust the selective colour layer.
Small gifs
Cropping until gifmaking action is the same as explained above. Just the cropping ratio is 268x150 + the action is different which you can find HERE.
Colouring: I used @insomniacgifs gif psd. You can download the different adjustments I made for some scenes HERE if you haven’t already but it’s basically their psd so please show your support to them!!
➝ I mainly changed the blue layers - both brightness/contrast layers
Saving
Click on file > export > save for web or use the shortcut Ctrl+Shift+S
These are my general settings (though you can play around with selective/adaptive and pattern/diffusion in my opinion, depending on the gif):
❊⚹* how to download tumblr video &. audio posts *⚹❊
WHAT YOU NEED: A webbrowser, internet connection and a Tumblr video or audio post you want to download. ( you don’t even need a Tumblr account )
HOW LONG DOES THIS TAKE: A few minutes tops?
DIFFICULTY LEVEL: there really is none. But if you still have any questions, feel free to hit me up.
In this short tutorial, I'll demonstrate how to download Tumblr video and audio posts.
Go to the permalink page.
Right click on pause button of video or audio post and click "View source".
Search the direct link in the code. (Tip: use Ctrl+F to find "video_file" or extensions such as "mp3")
Open the direct link (you're on the right track if it opens a page with a single video/audio player and when the URL of that page ends in a file extension such as "mp3".
Click on the three dots; Ctrl+S or right click on the video/audio player and choose "Save video as..." to download.
That's all!
Disclaimer: Downloading uploaded material might be in conflict with the law and must happen at your own risk. Also, I am strongly against the redistribution of originally created content so be sure to ask permission and/or give credit to the original creator(s)!
CREDITS//
video post: HERE by @thestoryischanging
audio post: HERE by @harrysdimples
hi!! I was wondering if you would mind making a tutorial on how use make icons with your psd_20 bc I'm such a phot shop noob tbh I cant figure out how to make it work for the life of me
hi, i’m really bad at explaining stuff but i’ll try and it’s the same for every icon psd in my page: you open the psd file first. then you paste your image into it (you can ctrl c + ctrl v it, or drag it from the folder into photoshop, or however you usually copy and paste images idk) and make sure the layer is positioned after the border, psd, and adjustment layers. and you can either delete the example pictures or put your image before them, either way it works.
we wanna make it look like this:
but if it looks like this, don’t panic!
you gotta fuck around with the adjustment layers to make your image work better with the psd. in this case, my pic is too cyan and cool to work, so i’ll use the blue scenes adjustment group messing with the opacity.
since it’s still a little bright i’ll use the light scenes group and do the same.
and that’s it ksdj you gotta do what works best for your picture but yeah. flatten your image and save it, and that’s it. i hope this helps in some way, if not just hit me up cause this was kinda vague and idk if i answered what you wanted or not lmao.
What is this tutorial about ? How to create and style a pop-up window that opens when you load the webpage and can be closed again.
Difficulty level ? If you have a basic understanding of HTML and CSS, this will definitely be a piece of cake. But even without this knowledge, all code will be handed to you in this tutorial so you can tweak it and my inbox is always open for questions !
Supported browsers ? All as far as I’m aware ( this includes Google Chrome, Internet Explorer, and Safari )
Intro
Hey lovelies ! Very soon I’ll be leaving for a while to focus on my exams and studying. I know that afterwards a lot of requests will be done, don’t worry ! I just feel guilty whenever I work on them right now instead of studying.
If you open up my blog during my hiatus ( till 31st of January ) you’ll get to see a pop-up window that informs everyone of my hiatus !
HTML
The below code should be pasted after your <body> tag and before your </body> tag ! It does not matter if this is place in the beginning or at the end. All instructions are between <!-- --> indicators !
NOTE: the id (e.g. id=“CUSTOMNAME”) and class names are free to be chosen by you ! id means you style this item with a # in front of the name and you can only use this style once/for one element! class means you style this item with a . in front of the name and you can use this same style for multiple elements.
<div id="popup_bg"> <!-- This is the black transparent background. If you want to close by clicking on this as well, add: onclick="closePopupMenu()" between the triangle brackets--> <div id="popup_main_div"> <!--This is your actual popup. Everything you want in there, goes in this div--> <div id="close_popup_div" title="close!" onclick="closePopupMenu()"><!-- This is the button to close your popup window. If you click it, it'll close because it has onclick="closePopupMenu()" added to it between brackets--> <img src="https://i.imgur.com/3wEkbAo.png"><!--Replace this image link to have another button to close your window OR type an X and style it yourself by adding a class to your CSS code and adding the same class within paragraph brackets: e.g. <p class="closer">X</p>--> </div><!-- end of closer--> <!--Content goes here--> <div> <img src="https://i.imgur.com/Beax9DQ.jpg" class="popup_image"><!-- Whatever you put in here can be styled separately by making a class in your CSS code and adding the same one to your div (recommended in case of text) and/or to your img (recommended in case of image)--> </div> </div><!-- end of popup_main--> </div><!-- end of popup_bg-->
CSS
Here you can style your pop-up window however you'd like ! See my example below:
This is the most important part ! This part will make sure your pop-up window opens when you load the page and closes when you click on the close button. Below code will be placed under your <body> tag but before your </body> tag and will be placed within <script type=‘text/javascript’>CODE HERE</script> tags !
NOTE: if there is no Javascript in your theme yet. Make sure to add a script tag before your code that links you to a js library. (You can find these via Google or use this one, it’s the latest version)
var popupDiv = document.getElementById("popup_bg"); function openPopupMenu(){ popupDiv.style.display="block"; }
The name of your function is here openPopupMenu. This function should be added to your body tag to open on load of your web page. e.g.
function closePopupMenu(){ popupDiv.style.display="none"; }
The name of your function is here closePopupMenu. This function should be added to the elements you wish to click on to close the window, in my case the image of the little cross e.g.
So now all you have to do is add the names of your two functions, in the tags of the element you want ( I already did this in my html code ). You add onclick=“NAMEOFFUNCTION”
NOTE: if you want to open your window by clicking on a button instead of when loading the page, replace the onload=“NAMEOFFUNCTION” by onclick=“NAMEOFFUNCTION” in the element you want (e.g. a button you made). You can also do both in case you want it to load but later be able to click it open again somewhere.
That’s it ! For any questions, hit me up ! Below you can find my example.
Hi! I was wondering if it's possible for you to do a tutorial on how you made the 'my dear watson' promo banner? Especially how did you do the images fit like that. I see in the psd there is an extra layer with a green image and I was wondering what was that about! Thank you very much and I'm sorry if this is something I'm not supposed to ask.
no , that’s totally fine ! i don’t mind you asking , i sometimes forget not everybody is familiarized with p/hotoshop’s tools . you can do it two ways , really . i’ll put it under a read more for unnecessary screenshots that may or may not be helpful bc i’m Extra like that . it’s valid to all of my templates tbh , borders and all that too , it’s all the same method .
the easiest one for me is to just paste your image on the template and drag it into the group you plan on using it on , right before the green template that’s in the group as well . then right click it and select ‘Create Clipping Mask’ and boom . ( and u can totally delete the example picture i just forgot but doesn’t make any difference if u don’t as long as u put ur image in front of the example u feel me? )
or you can take a longer way that i’ll point out just cuz maybe it’s easier for u or u wanna be daring n try something different n it might be useful i don’t fucking know i just love making tutorials ok .
you can use the magic wand tool , depicted above , and after positioning the image how you want it , select the green template by clicking on it’s layer n then clicking on it , so it’ll select the green part . then right click inside the dotted line of the selection and pick ‘Select Inverse’ .
it’ll then uh select the inverse lmao aka the part you don’t need of your picture so just press that delete key on ur keyboard or ctrl + x it out and boom . or you can not select inverse and just ctrl + c the part of the picture u want and then ctrl + v it and replace it . idk man there are probably other ways but i can only go so far , i hope it was helpful tho .
