ps制作gif动画(photoshopgif动画制作)
.jpg)
本文主要介绍用ps制作gif动画(photoshopgif)，下面跟着东辰网详细了解一下吧。
12.3精彩示例
12.3.1网页GIF动画设计
让让我们通过一个例子来解释制作GIF动画的过程。
1.首先，我们启动ps，选择文件，创建如图1231所示。在弹出的[新建]对话框中，我们输入它的名称以及画布的宽度和高度。如图1232所示。设置完成后，让让我们点击确定。
2.接下来，我们打开一些JPG图片，如图1233所示。
3.我们把这些图片分成几层，放在新建的图像上。然后调整它们的大小。调整后的效果如图1234所示。
我们再打开两张图片，将它们合并成一张图片。此时，图层样式如图1235所示。
准备工作完成后，我们将开始创建动画效果。创建一个动画非常简单。我们选择窗口和动画，然后打开动画面板。如图1236所示。
6.因为我们现在有3层，我们可以在动画面板中创建3个动画帧。我们点击按钮。创建后的效果如图1237所示。
7.在那个时候，图像仍然赢了不要动。现在我们通过隐藏图层来增加动画效果。让首先选择开始帧，然后在图层面板中单击图层前面的小眼按钮隐藏图层1和图层2，如图1238所示。
8.然后，我们选择第二个和第三个动画帧，做同样的事情。当它结束了，我们走吧。;让我们通过点击播放来预览它，然后我们就可以创建这样一个简单的帧切换动画了。我们还可以在层间添加一些渐变效果。我们选择开始帧(注意我们要给开始帧加渐变，我们也要选择图层中开始帧对应的图)。单击过渡动画帧按钮，出现一个过度对话框，如图1239所示。
9.这里我们可以过度设置，比如:过度，过度帧数等。让让我们确定一下。这样就可以成功添加开始帧的过度动画，并且可以选择其中一帧来看过度效果，如图12310所示。
10.我们也可以对其他两个帧使用相同的操作。设置完成后，我们将新建两个图层，分别填充粉色和白色，如图12311所示。当创建一个新层时，我们还需要在动画面板中添加动画帧。如图12312所示。
11.我们复制14帧和13帧，例如如图12313所示。那么这一步的目的就是让两层不同的颜色互相切换，有闪烁的效果。
12.设置闪烁效果后，我们将第2层对应的动画帧拖动到最后一个动画结束帧。最后，我们设置动画延迟时间和播放次数，如图12314所示。我们将其设置为0.2秒，闪烁部分设置为0.1，最后一个结束帧设置为1。
13.当它完成了，我们可以预览一下。预览是正确的，我们可以进行最终输出。选择[文件]和[另存为web和设备格式]，打开如图12315所示的对话框。
14.我们设置预置，参数设置如图12316所示。
点击【保存】，选择文件保存路径，选择【保存】，网页中的GIF动画制作完成。
最终效果:
GIF动画最初显示的是图像效果，如图12317所示。
GIF动画播放到中间显示的渐变效果，如图12318所示。
GIF动画闪烁并播放到最后一幅图像中显示的效果。如图12319所示。
12.3.2制作网页中的透明GIF图片
在制作网页的过程中，总会有透明GIF图片的加入。往往网页中透明图片的添加并不像图片和动画中那样简单，所以我们在添加的时候需要使用ps来完成这项工作。
1.打开或制作一个需要制作成透明GIF图片的PSD文件，如图12320所示。
2.删除图层面板中底部的白色背景，或者删除图案图层的白色部分。让当前图像显示如图12321所示，即透明状态。
3.选择菜单栏上的图像和裁剪，打开裁剪对话框，如图12322所示。在[基于]类别中选择[透明像素]项，以便您可以根据像素所在的区域自定义剪辑。如图12323所示。
4.切割后，选择项目另存为网页和设备格式在文件。在打开的对话框中，选择优化的文件格式为GIF或PNG，然后勾选选项后的[透明度]。如图12324所示。
5.另一个我们需要注意的是GIF图片的边缘的设置。如果这张透明的GIF图像要用在背景色为蓝色或绿色的网页中，那么就需要使用杂色来很好地将图像的边缘与网页结合起来。当设置条纹时，为了使颜色更准确，您可以先获取网页中背景色的颜色值，然后将流苏的颜色值设置为与背景色的颜色值相同。如图12325所示。
6.单击保存按钮保存设置后的图片，然后在Dreamweaver中插入图片时可以看到之前设置的透明效果。
12.3精彩示例
12.3.1网页GIF动画设计
让让我们通过一个例子来解释制作GIF动画的过程。
1.首先，我们启动ps，选择文件，创建如图1231所示。在弹出的[新建]对话框中，我们输入它的名称以及画布的宽度和高度。如图1232所示。设置完成后，让让我们点击确定。
2.接下来，我们打开一些JPG图片，如图1233所示。
3.我们把这些图片分成几层，放在新建的图像上。然后调整它们的大小。调整后的效果如图1234所示。
我们再打开两张图片，将它们合并成一张图片。此时，图层样式如图1235所示。
准备工作完成后，我们将开始创建动画效果。创建一个动画非常简单。我们选择窗口和动画，然后打开动画面板。如图1236所示。
6.因为我们现在有3层，我们可以在动画面板中创建3个动画帧。我们点击按钮。创建后的效果如图1237所示。
7.在那个时候，图像仍然赢了不要动。现在我们通过隐藏图层来增加动画效果。让首先选择开始帧，然后在图层面板中单击图层前面的小眼按钮隐藏图层1和图层2，如图1238所示。
8.然后，我们选择第二个和第三个动画帧，做同样的事情。当它结束了，我们走吧。;让我们通过点击播放来预览它，然后我们就可以创建这样一个简单的帧切换动画了。我们还可以在层间添加一些渐变效果。我们选择开始帧(注意我们要给开始帧加渐变，我们也要选择图层中开始帧对应的图)。单击过渡动画帧按钮，出现一个过度对话框，如图1239所示。
9.这里我们可以过度设置，比如:过度，过度帧数等。让让我们确定一下。这样就可以成功添加开始帧的过度动画，并且可以选择其中一帧来看过度效果，如图12310所示。
10.我们也可以对其他两个帧使用相同的操作。设置完成后，我们将新建两个图层，分别填充粉色和白色，如图12311所示。新的在构建图层时，我们还需要在动画面板中添加动画帧。如图12312所示。
11.我们复制第14帧和第13帧，如图12313所示。那么这一步的目的就是让两层不同的颜色互相切换，有闪烁的效果。
12.设置闪烁效果后，我们将第2层对应的动画帧拖动到最后一个动画结束帧。最后，我们设置动画延迟时间和播放次数，如图12314所示。我们将其设置为0.2秒，闪烁部分设置为0.1，最后一个结束帧设置为1。
13.当它完成了，我们可以预览一下。预览是正确的，我们可以进行最终输出。选择[文件]和[另存为web和设备格式]，打开如图12315所示的对话框。
14.我们设置预置，参数设置如图12316所示。
点击【保存】，选择文件保存路径，选择【保存】，网页中的GIF动画制作完成。
最终效果:
GIF动画最初显示的是图像效果，如图12317所示。
GIF动画播放到中间显示的渐变效果，如图12318所示。
GIF动画闪烁并播放到最后一幅图像中显示的效果。如图12319所示。
12.3.2制作网页中的透明GIF图片
在制作网页的过程中，总会有透明GIF图片的加入。往往网页中透明图片的添加并不像图片和动画中那样简单，所以我们在添加的时候需要使用ps来完成这项工作。
1.打开或制作一个需要制作成透明GIF图片的PSD文件，如图12320所示。
2.删除图层面板中底部的白色背景，或者删除图案图层的白色部分。让当前图像显示如图12321所示，即透明状态。
3.选择菜单栏上的图像和裁剪，打开裁剪对话框，如图12322所示。在[基于]类别中选择[透明像素]项，以便您可以根据像素所在的区域自定义剪辑。如图12323所示。
4.切割后，选择项目另存为网页和设备格式在文件。在打开的对话框中，选择优化的文件格式为GIF或PNG，然后勾选选项后的[透明度]。如图12324所示。
5.另一个我们需要注意的是GIF图片的边缘的设置。如果这张透明的GIF图像要用在背景色为蓝色或绿色的网页中，那么就需要使用杂色来很好地将图像的边缘与网页结合起来。在设置流苏时，为了让颜色更准确，可以先获取网页中背景色的颜色值，然后将流苏的颜色值设置为与背景色的颜色值相同。如图12325所示。
6.单击保存按钮保存设置后的图片，然后在Dreamweaver中插入图片时可以看到之前设置的透明效果。
了解更多用ps制作gif动画(photoshopgif动)相关内容请关注东辰网。
本文由东辰网发布，不代表东辰网立场，转载联系作者并注明出处：https://www.ktwxcd.com/psjc/12661.html
