Hack Forums
[TUT] Create high quality .gifs using Photoshop - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=156)
+---- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=6)
+---- Thread: [TUT] Create high quality .gifs using Photoshop (/showthread.php?tid=4102023)

[TUT] Create high quality .gifs using Photoshop - The Wizard of Dos - Mar 7, 2014

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 🤝

* - kazzZZY - Mar 7, 2014

cool thank you for this tutorial! <3 would give u +rep if i had leet

* - The Wizard of Dos - Mar 7, 2014

(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 🙂

* - byrle - Mar 8, 2014

Thanks for share. I like it. It's good

* - Krew - Mar 8, 2014

Great tutorial and awesome comments ;)

Well done, mate!

* - Botcat - Mar 8, 2014

Thank you for this awesome TUT!

helped me a lot with photoshop :)

* - K.ing - Mar 19, 2014

Hey man,

thanks for this tutorial.

very HQ

* - Auxil - Mar 20, 2014

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.

* - The Wizard of Dos - Mar 20, 2014

(Mar 20, 2014 02:29 AM)Ad☮be 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.

* - iJacob - Mar 29, 2014

Thanks man, This will help alot! -Jacob x

* - Vexane - Mar 29, 2014

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.

* - Clipper™ - May 30, 2014

(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.