Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

[TUT] Create high quality .gifs using Photoshop

Create high quality .gifs using Photoshop
[Image: qGyeZ3m.png]

Ever wanted to make really high quality .gifs with very little compression, just like this? Well, look no further because that's what I'm going to teach you how to do today.

What you'll need:
  • Photoshop CS5 or newer

  • A video clip in .mov format

  • Some time for uploading and processing


[Image: qGyeZ3m.png]

1. Open Photoshop
Pretty self explanatory. Open up that legitimate $1,000 copy of CS6 and get ready for .giffing.
[Image: ETtaASY.png]

2. Import the video clip
It's time to import your video clip. Navigate that little cursor of yours into File > Import > Video Frames to Layer...
[Image: nsoB933.png]

3. Find your video clip
Find the video clip you want to use. Preferably it should be a .mov file, but other file types might be supported, but I've had the best results with .mov files.
[Image: snBtykk.png]

4. Trim the video
This step is optional, you can just click OK if you want to use the whole clip, but sometimes you'll want to trim your clip a little before importing it. Just move the black markers to trim the clip and click OK.
[Image: Aa9EwgC.png]

5. Wait
Depending on the length and resolution of your clip this might take a while. You can use the waiting time to think about life and wonder why you're even wasting your time making stupid .gifs of cats, but this step is optional.
[Image: fBjyRxN.png]

6. Make the final changes
If you couldn't already, you should now see the Timeline window at the bottom of your screen. Using that you can, amongst other things, delete, edit and add frames to you .gif. Be careful when you delete frames, you might accidentally delete layers or content instead.
[Image: 5suO6XA.png]

7. Exporting your .gif
Once you're happy with your .gif, you'll have to save it (duh). But you can't just save this like any ol' image, this baby needs to be saved for teh webz!
[Image: hKFqMw2.png]

8. Export Settings
Now this window might seem a bit confusing at first, but unless you want to change the resolution, you probably don't want to mess too much around with these settings.
[Image: P5pvwQe.png]

9. Saving the .gif
Now that you're finally ready to save the .gif, go ahead and hit that Save... button. Once you've specified a place to save the .gif go back and repeat step 5. After this, you've officially made a high quality.gif. Wow!
[Image: VqJjmlq.png]

If you need to upload the .gif I recommend gfycat. It's really good for large files, but converting the .gif to a html5 video might take some time. If you for some reason don't want a html5 video, you can always use minus, which allows pretty big files. Unfortonatly minus doesn't show well on mobile. Both sites have their pros and cons, so you'll have to choose depending on what you need to use the .gif for.
[Image: qGyeZ3m.png]

And that's it! I hope you found my tutorial useful and remember, feedback and such are always appriciated, especially since this is my first ever tutorial 🤝
cool thank you for this tutorial! <3 would give u +rep if i had leet
(Mar 7, 2014 05:16 PM)kazzZZY Wrote:  cool thank you for this tutorial! <3 would give u +rep if i had leet

Aww, thanks dude. Glad you enjoyed it 🙂
Thanks for share. I like it. It's good
Great tutorial and awesome comments ;)

Well done, mate!
Thank you for this awesome TUT!

helped me a lot with photoshop :)
Hey man,

thanks for this tutorial.

very HQ
Very good. I already knew this technique, but still, very nice.
I like how your tutorial is quite funny, intricate, and lets the reader / designer really get into it.
Nice job.
(Mar 20, 2014 02:29 AM)Auxil Wrote:  Very good. I already knew this technique, but still, very nice.
I like how your tutorial is quite funny, intricate, and lets the reader / designer really get into it.
Nice job.

Thanks, I try my best to make whatever I make bearable to read, usually with a joke or two.
Thanks man, This will help alot! -Jacob x
You should really mention file size and how to cut down on it.
Gifs can be huge if you don't know how to make them smaller.
(Mar 7, 2014 05:12 PM)The Wizard of Dos Wrote:  Create high quality .gifs using Photoshop
[Image: qGyeZ3m.png]

Ever wanted to make really high quality .gifs with very little compression, just like this? Well, look no further because that's what I'm going to teach you how to do today.

What you'll need:
  • Photoshop CS5 or newer

  • A video clip in .mov format

  • Some time for uploading and processing


[Image: qGyeZ3m.png]

1. Open Photoshop
Pretty self explanatory. Open up that legitimate $1,000 copy of CS6 and get ready for .giffing.
[Image: ETtaASY.png]

2. Import the video clip
It's time to import your video clip. Navigate that little cursor of yours into File > Import > Video Frames to Layer...
[Image: nsoB933.png]

3. Find your video clip
Find the video clip you want to use. Preferably it should be a .mov file, but other file types might be supported, but I've had the best results with .mov files.
[Image: snBtykk.png]

4. Trim the video
This step is optional, you can just click OK if you want to use the whole clip, but sometimes you'll want to trim your clip a little before importing it. Just move the black markers to trim the clip and click OK.
[Image: Aa9EwgC.png]

5. Wait
Depending on the length and resolution of your clip this might take a while. You can use the waiting time to think about life and wonder why you're even wasting your time making stupid .gifs of cats, but this step is optional.
[Image: fBjyRxN.png]

6. Make the final changes
If you couldn't already, you should now see the Timeline window at the bottom of your screen. Using that you can, amongst other things, delete, edit and add frames to you .gif. Be careful when you delete frames, you might accidentally delete layers or content instead.
[Image: 5suO6XA.png]

7. Exporting your .gif
Once you're happy with your .gif, you'll have to save it (duh). But you can't just save this like any ol' image, this baby needs to be saved for teh webz!
[Image: hKFqMw2.png]

8. Export Settings
Now this window might seem a bit confusing at first, but unless you want to change the resolution, you probably don't want to mess too much around with these settings.
[Image: P5pvwQe.png]

9. Saving the .gif
Now that you're finally ready to save the .gif, go ahead and hit that Save... button. Once you've specified a place to save the .gif go back and repeat step 5. After this, you've officially made a high quality.gif. Wow!
[Image: VqJjmlq.png]

If you need to upload the .gif I recommend gfycat. It's really good for large files, but converting the .gif to a html5 video might take some time. If you for some reason don't want a html5 video, you can always use minus, which allows pretty big files. Unfortonatly minus doesn't show well on mobile. Both sites have their pros and cons, so you'll have to choose depending on what you need to use the .gif for.
[Image: qGyeZ3m.png]

And that's it! I hope you found my tutorial useful and remember, feedback and such are always appriciated, especially since this is my first ever tutorial 🤝

This is probably the best tutorial ever. The main reason being that it is so undeniably hilarious.


Possibly Related Threads...
Thread / Author Replies Views Last Post
by A10247Feb 21, 2025 11:54 AM 3 232 Feb 21, 2025 11:54 AM
Last Post: Scorpionkami
by SoronrheeyiJan 11, 2023 04:44 PM 3 203 Jan 11, 2023 04:44 PM
Last Post: Baby
by LoremIpsumAug 23, 2021 03:15 PM 18 894 Aug 23, 2021 03:15 PM
Last Post: NavTech