-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
GIF NeoTutorial
- Thread starter alr1ght
- Start date
- Status
Mechanical Snowman
Member
Oh wow that water...DennisK4 said:
And nice tutorial OP.
Deeper than Photoshop?Plywood said:
LethaL ImpuLse
Member
Saw this film last week, amazing movie. I'm guessing people were freaked out from the eyes?Angelus Errare said:
Angelus Errare
Banned
LethaL ImpuLse said:
Nah, I made of Gif of Princess Aurora (the Korean film) in the beginning where a lady gets killed for abusing her boyfriend's daughter.
GhostWriter24
Member
Dude that Pacman guy has some serious fucking moves. Wish I had a tenth of that dude's swag.
Live Free or Die
Banned
Thanks for posting this!
Maklershed
Member
Uno Venova
Banned
Thanks for posting.
CruxisMana
Member
I've wanted to know how to make .gifs for year!
I could have cropped it but it would have been an awkward size. For a first attempt I'm pleased!
I could have cropped it but it would have been an awkward size. For a first attempt I'm pleased!
Mechanical Snowman
Member
Photoshop, but get CS5 if you can.Ken said:
I can't think of anything I wouldn't be able to do in Photoshop when it comes to .gifs.
Meus Renaissance
Member
I have 100 small jpegs I want to animate. Each of them is 10KB. And yet the animated gif is around 5MB. What am I doing wrong?
Maklershed
Member
Snuggler said:
UltimaPooh
Member
Um does the animation program have a mac flavor?
Taco_Human
Member
Thanks for the tutorial. I always wanted to make my own.
You're not doing anything wrong - .jpegs have more compression than .gifs. The .gif editor stores each frame as a bitmap, undoing the .jpeg compression, then compresses them using the .gif compression. This means your final filesize will probably be larger than the total initial filesize.Meus Renaissance said:
Youtube to .GIF Tutorial using Photoshop CS4/CS5
First, before I start, this is only for CS4 and CS5. I don't use any other version so I'm not sure if this will work with CS3/CS4/etc. Also, I've tried using different extensions for downloading videos, but.. I've found that keepvid.com has given me the best results in terms of download speed and quality of the videos.
Step 1 - Downloading the Youtube Video
-Visit www.KeepVid.com and download the video of your choice.
-For this example, I'll be using this (click on this) video, specifically the part at 0:27-0:28 of Dave dancing. Quick and simple.
-You'll be given a list of downloads when you click the "Download" button after pasting the Youtube URL. In this case, I'll download the one that says " Download MP4 - 720p"
Step 2 - Opening the Video in Photoshop
-Open Photoshop and then click "File" and then navigate to "Import" and then click "Video Frames to Layers"
-Navigate to the video and open it (MP4's are the best to use, at least from my experience) (in CS4 you will have to type in "*" and press enter in the file name window to display all files since you can't select all files in type selection and mp4s won't show up on the list)
Step 3 - Selecting Which Scene to Animate
-You'll be shown a new window for importing a video, shown below:
-Since I'll be animating just a couple seconds of the video, I want to click on "Selected Range Only" bullet
-Next, I'll want to play the video and navigate to the part of the video where Dave is dancing (0:27-0:28)
-Then, I'll find a part of the video right before the scene I want to gif and then pause it at that position. Once the video is paused and the slider is stuck in 1 place, you'll want to hold the Shift key and click-and-drag to the right until barely after the scene you want to gif (You can also hold shift while clicking the left or right arrows on the video). Example below:
-After you're done selecting which scene you'd like, be sure to check that the Animation window is active. To do this, click "Window" at the top of Photoshop's main window and then click "Animation"
Step 4 - Editing the Animation
-When you click Ok after selecting your scene, you'll see tons of layers in the Layer window (these you don't have to worry about, unless you want to add text or your own animations). You'll also see lots of frames/layers in the Animation window at the bottom, this is what we want to use mainly for making GIFs.
-Our main focus is now on the animation window. First, you'll want to find which frames don't belong. The reason we selected areas before and after the scene is because you want to make sure you get the entire portion of the video that you want to GIF.
-As you can see, the first 5 frames are necessary, so, you can delete them by clicking on the first Frame. Then, hold Shift and click on the 5th Frame.
-Next, with the frames selected, click on the Trash Can icon below the frames to delete the selected frames.
-Then, you'll want to navigate to the end of the animation and do the same thing you did for the first section. You'll want to delete the last frames which are unnecessary for this specific GIF.
-Now that you are left with the scene you want to animate, it's time to crop and resize.
-For this specific GIF, I just want the scene of Dave dancing. So, I'll select the Crop tool and select the area I want
-You'll then want to press the Enter key when you're done making you're selection. You'll be left with something like this (sorry, the quality is terrible, it'll look better in motion):
-As you can see, all of your frames will now be cropped to the area you chose.
-Now, I'll want to resize it to about half the size because the video I downloaded is 720p and the size of the GIF would be quite large. 360p/480p videos won't always require resizing.
-Click on "Image" at the top and then click on "Image Size"
-The easiest way to change the size while keeping the same proportions would be to set the "Pixel Dimensions" properties to "percent" instead of "pixel". In this case, I'll be resizing it to 50%, half the size.
-The new frames should be much smaller than before and now it's time to Save the GIF.
-Also, you can click the play button at the bottom of the animation window to see how your GIF will animate. (The speed will not be the same, this is mainly just for testing)
Step 5 - Saving the GIF
-Now that your GIF is nearly complete, you'll want to click "File" at the top left and then click "Save for Web & Devices"
-As you can see, there are lots of different settings but.. don't worry, most of it you won't have to worry about.
-Normally, for longer GIFs, you'll want to adjust the amount of colors that will be in the GIF. This will dramatically reduce the size of the GIF when you are finished. But, since we're using a small portion of a video, we don't need to mess with that. So, we can leave the "Colors" option at the top right of the window to "128". Setting it to a lower number = loss in quality but lower file size.
-This is where the "Play" button will show the actual speed of the animation. Click the play button at the bottom right of the window to see how your gif will animate. In this case, 0.04 is a perfect speed so you won't need to make any adjustments to the speed of the GIF.
-Now click Save and you're all done!
-I usually upload my GIF's to www.Imgur.com - But, since Imgur only accepts GIFs under 2.5mb, you can also upload to www.min.us
-Here is my final result:
Yes, I know, it's not a perfect gif but, not much editing was done. This is just a basic tutorial on how to GIF a specific part of a video. I can write up another tutorial on how to delete specific frames while duplicating your current ones and reversing them to create a "looping" GIF. But, I'll do that some other day. Any questions, just let me know.
First, before I start, this is only for CS4 and CS5. I don't use any other version so I'm not sure if this will work with CS3/CS4/etc. Also, I've tried using different extensions for downloading videos, but.. I've found that keepvid.com has given me the best results in terms of download speed and quality of the videos.
Step 1 - Downloading the Youtube Video
-Visit www.KeepVid.com and download the video of your choice.
-For this example, I'll be using this (click on this) video, specifically the part at 0:27-0:28 of Dave dancing. Quick and simple.
-You'll be given a list of downloads when you click the "Download" button after pasting the Youtube URL. In this case, I'll download the one that says " Download MP4 - 720p"
Step 2 - Opening the Video in Photoshop
-Open Photoshop and then click "File" and then navigate to "Import" and then click "Video Frames to Layers"
-Navigate to the video and open it (MP4's are the best to use, at least from my experience) (in CS4 you will have to type in "*" and press enter in the file name window to display all files since you can't select all files in type selection and mp4s won't show up on the list)
Step 3 - Selecting Which Scene to Animate
-You'll be shown a new window for importing a video, shown below:
-Since I'll be animating just a couple seconds of the video, I want to click on "Selected Range Only" bullet
-Next, I'll want to play the video and navigate to the part of the video where Dave is dancing (0:27-0:28)
-Then, I'll find a part of the video right before the scene I want to gif and then pause it at that position. Once the video is paused and the slider is stuck in 1 place, you'll want to hold the Shift key and click-and-drag to the right until barely after the scene you want to gif (You can also hold shift while clicking the left or right arrows on the video). Example below:
-After you're done selecting which scene you'd like, be sure to check that the Animation window is active. To do this, click "Window" at the top of Photoshop's main window and then click "Animation"
Step 4 - Editing the Animation
-When you click Ok after selecting your scene, you'll see tons of layers in the Layer window (these you don't have to worry about, unless you want to add text or your own animations). You'll also see lots of frames/layers in the Animation window at the bottom, this is what we want to use mainly for making GIFs.
-Our main focus is now on the animation window. First, you'll want to find which frames don't belong. The reason we selected areas before and after the scene is because you want to make sure you get the entire portion of the video that you want to GIF.
-As you can see, the first 5 frames are necessary, so, you can delete them by clicking on the first Frame. Then, hold Shift and click on the 5th Frame.
-Next, with the frames selected, click on the Trash Can icon below the frames to delete the selected frames.
-Then, you'll want to navigate to the end of the animation and do the same thing you did for the first section. You'll want to delete the last frames which are unnecessary for this specific GIF.
-Now that you are left with the scene you want to animate, it's time to crop and resize.
-For this specific GIF, I just want the scene of Dave dancing. So, I'll select the Crop tool and select the area I want
-You'll then want to press the Enter key when you're done making you're selection. You'll be left with something like this (sorry, the quality is terrible, it'll look better in motion):
-As you can see, all of your frames will now be cropped to the area you chose.
-Now, I'll want to resize it to about half the size because the video I downloaded is 720p and the size of the GIF would be quite large. 360p/480p videos won't always require resizing.
-Click on "Image" at the top and then click on "Image Size"
-The easiest way to change the size while keeping the same proportions would be to set the "Pixel Dimensions" properties to "percent" instead of "pixel". In this case, I'll be resizing it to 50%, half the size.
-The new frames should be much smaller than before and now it's time to Save the GIF.
-Also, you can click the play button at the bottom of the animation window to see how your GIF will animate. (The speed will not be the same, this is mainly just for testing)
Step 5 - Saving the GIF
-Now that your GIF is nearly complete, you'll want to click "File" at the top left and then click "Save for Web & Devices"
-As you can see, there are lots of different settings but.. don't worry, most of it you won't have to worry about.
-Normally, for longer GIFs, you'll want to adjust the amount of colors that will be in the GIF. This will dramatically reduce the size of the GIF when you are finished. But, since we're using a small portion of a video, we don't need to mess with that. So, we can leave the "Colors" option at the top right of the window to "128". Setting it to a lower number = loss in quality but lower file size.
-This is where the "Play" button will show the actual speed of the animation. Click the play button at the bottom right of the window to see how your gif will animate. In this case, 0.04 is a perfect speed so you won't need to make any adjustments to the speed of the GIF.
-Now click Save and you're all done!
-I usually upload my GIF's to www.Imgur.com - But, since Imgur only accepts GIFs under 2.5mb, you can also upload to www.min.us
-Here is my final result:
Yes, I know, it's not a perfect gif but, not much editing was done. This is just a basic tutorial on how to GIF a specific part of a video. I can write up another tutorial on how to delete specific frames while duplicating your current ones and reversing them to create a "looping" GIF. But, I'll do that some other day. Any questions, just let me know.
planar1280
Banned
that crysis gif just destroyed my ram useage on chrome!
XiaNaphryz
LATIN, MATRIPEDICABUS, DO YOU SPEAK IT
Not sure about CS5, but I know in CS4 if you have a bunch of image files already as a source instead of a video, you can use Load Files Into Stack in File -> Scripts to get all your images loaded as separate layers. You can then load the layers into frames.orangecaramel said:
runningjoke
Member
orangecaramel said:
You can leave Transparency unchecked on this dialog, gives you one whole colour more!
Zeouterlimits
Member
Yay!
Would like to add text though..
Would like to add text though..
Nard Bagman
Member
I'm dumb. I have chrome but I have no idea how to download videos from youtube or anywhere else. I have everything else but the means to download the video like Download Helper does with firefox.
Edit: I'm REALLY dumb. yousabletubefix works, I just didn't download the right thing I think.
Edit: I'm REALLY dumb. yousabletubefix works, I just didn't download the right thing I think.
Nard Bagman
Member
Done with number one. This thread is a godsend.
Edit: number two, just seeing how this one turns out.
Edit: number two, just seeing how this one turns out.
MiniBossBattle
Member
Subscribed.
toxicgonzo
Taxes?! Isn't this the line for Metallica?
At first I was like :| but then I was like
Takes a while to load since it is kinda big, but that was a fun tutorial to try out
- Status