How to Make Animated .gifs using Photoshop
Hello, everyone! I have been commanded by the lovely profcricket to contribute to Rec Week's resource day with a fun little lesson in how to add .gifs to your entries.
This is a three step process that involves screencapping the scene you want, creating the .gif, and then upping the .gif to your entry. I'm going to leave an extended explanation of screencapping to someone else (unless anyone requests an explanation, I'd be happy to do one if needed!), but I'll explain how to make .gifs in Photoshop (CS5) and then post them, here. With a little bonus link of .gif!post in action at the bottom!
Unfortunately, I've only used Photoshop CS5 to create .gifs, but if you use another program there are lovely tutorials for creating animated .gifs in various programs all over the net. I'm pretty sure that other versions of Photoshop are going to be reasonably similar to CS5's way of making .gifs, so hopefully this should work for any Photoshop users!
1. Your first step, after you've screencapped (I use GomPlayer to make screencaps) is to make layers of every frame you want to use in your .gif. Use the first frame of your scene as your background layer, and then stack each frame after on top of it.
[first frame of the sequence as background layer; every frame stacked on top, until the last frame of your sequence is the top layer]
2. Next, you want to open your Animation panel. This is under the 'Window' drop-down list at the top of your program.
[Window -> Animation]
3. In the top right corner of your Animation panel, there is a tiny icon that looks like a downward facing triangle and three lines. Click on this, and then click on 'Make Frames from Layers.' (If you don't see this option, try making sure you have the background layer selected, instead of one of the layers above it.) This handy little tool means you won't have to manually add each frame to your .gif, and is the reason we ordered the frames the way we did.
In this same list of options, you can also choose to 'Add New Frame' or delete the frame that you have currently selected in your Animation panel.
[Make frames from your layers. Also note that 'New Frames visible in All Frames' is currently checked. If you uncheck it, you can add new layers to one frame of your animation without having it affect any of the other frames - which is handy for adding text or editing a layer.]
4. After you have set up your frames the way you want, you'll need to choose the speed of your animation. Right click + shift to select all of your frames, and then left click on the bottom of a frame (where it says '0 sec.') to choose the speed of your animation. You generally need it be atleast '0.1 seconds' for each frame or they won't show up in the animation properly/will go too fast - and you can choose different speeds for each frame or one speed for all of them, depending on the look you want the .gif to have. Underneath the frames in the Animation panel, on the lefthand side, there is a play button that you can use to preview your animation.
[Choose a speed for your frames.]
5. Now it's time to save your animation as a .gif. Go to File at the top of your program and choose 'Save for Web & Devices' from the drop-down box.
[File -> Save for Web & Devices]
6. Now it's time to save your .gif! It's important to preview your animation in this screen by using the Play button near the bottom right corner or selecting the 'Preview' option, because it's the best representation of the speeds you have chosen and will show if anything is not showing up properly. You can also choose your looping options (I suggest using using 'forever' as this will make the .gif continually play.) and various other options -- the defaults work fine, but you can always play around with all of these options. Make sure you have 'Gif' selected in the top right corner, and select 'Save' to save your .gif!
[Preview your .gif with either the play button or the Preview option; choose various settings for the final animation, and Save as a .gif file.]
7. Now, to upload your gif to a post, either upload the .gif onto livejournal's Scrapbook or an external site like Tinypic.
Your lj posts have an option in the upper right corner of either posting using Rich text or HTML. Either click on your HTML tab, and type in
(
for this example) or Insert an Image in Rich text.
And thus, you should end up with this finished result:
=D! If anyone has any questions - no matter how simple - feel free to leave them in the comments and I'll do my best to answer them!
Enjoy!
This is a three step process that involves screencapping the scene you want, creating the .gif, and then upping the .gif to your entry. I'm going to leave an extended explanation of screencapping to someone else (unless anyone requests an explanation, I'd be happy to do one if needed!), but I'll explain how to make .gifs in Photoshop (CS5) and then post them, here. With a little bonus link of .gif!post in action at the bottom!
Unfortunately, I've only used Photoshop CS5 to create .gifs, but if you use another program there are lovely tutorials for creating animated .gifs in various programs all over the net. I'm pretty sure that other versions of Photoshop are going to be reasonably similar to CS5's way of making .gifs, so hopefully this should work for any Photoshop users!
1. Your first step, after you've screencapped (I use GomPlayer to make screencaps) is to make layers of every frame you want to use in your .gif. Use the first frame of your scene as your background layer, and then stack each frame after on top of it.
[first frame of the sequence as background layer; every frame stacked on top, until the last frame of your sequence is the top layer]
2. Next, you want to open your Animation panel. This is under the 'Window' drop-down list at the top of your program.
[Window -> Animation]
3. In the top right corner of your Animation panel, there is a tiny icon that looks like a downward facing triangle and three lines. Click on this, and then click on 'Make Frames from Layers.' (If you don't see this option, try making sure you have the background layer selected, instead of one of the layers above it.) This handy little tool means you won't have to manually add each frame to your .gif, and is the reason we ordered the frames the way we did.
In this same list of options, you can also choose to 'Add New Frame' or delete the frame that you have currently selected in your Animation panel.
[Make frames from your layers. Also note that 'New Frames visible in All Frames' is currently checked. If you uncheck it, you can add new layers to one frame of your animation without having it affect any of the other frames - which is handy for adding text or editing a layer.]
4. After you have set up your frames the way you want, you'll need to choose the speed of your animation. Right click + shift to select all of your frames, and then left click on the bottom of a frame (where it says '0 sec.') to choose the speed of your animation. You generally need it be atleast '0.1 seconds' for each frame or they won't show up in the animation properly/will go too fast - and you can choose different speeds for each frame or one speed for all of them, depending on the look you want the .gif to have. Underneath the frames in the Animation panel, on the lefthand side, there is a play button that you can use to preview your animation.
[Choose a speed for your frames.]
5. Now it's time to save your animation as a .gif. Go to File at the top of your program and choose 'Save for Web & Devices' from the drop-down box.
[File -> Save for Web & Devices]
6. Now it's time to save your .gif! It's important to preview your animation in this screen by using the Play button near the bottom right corner or selecting the 'Preview' option, because it's the best representation of the speeds you have chosen and will show if anything is not showing up properly. You can also choose your looping options (I suggest using using 'forever' as this will make the .gif continually play.) and various other options -- the defaults work fine, but you can always play around with all of these options. Make sure you have 'Gif' selected in the top right corner, and select 'Save' to save your .gif!
[Preview your .gif with either the play button or the Preview option; choose various settings for the final animation, and Save as a .gif file.]
7. Now, to upload your gif to a post, either upload the .gif onto livejournal's Scrapbook or an external site like Tinypic.
Your lj posts have an option in the upper right corner of either posting using Rich text or HTML. Either click on your HTML tab, and type in
(
for this example) or Insert an Image in Rich text.
And thus, you should end up with this finished result:
=D! If anyone has any questions - no matter how simple - feel free to leave them in the comments and I'll do my best to answer them!
Enjoy!