2.22.16 19

如何制作GIF

谁不’t love a good GIF?! 这个这个 可能是我在互联网上最喜欢的两个。

除了在与您的朋友交谈中使用相关的GIF之外,GIF还可为您的博客,Twitter提要,电子邮件新闻稿或网站增加很多动感。一世’曾经在“深青色”中将它们合并到这里,这真的很有趣,所以今天我想我’d向您展示我为博客制作GIF的两种方法。

///

 首先-更容易!-我制作GIF的方法是通过 gifmaker.me

如何制作gif

这个GIF生成器站点非常适合那些我不需要透明背景或需要将最终GIF的部分分层到单个背景的情况。它本质上是在创建图像的数字翻转书,因此最适合将照片彼此叠加,例如上方的行走GIF或 在这篇文章中大雪扔GIF.

为了使用gifmaker.me达到最佳效果,在上传之前编辑图片是关键。通常,我会进行所需的任何色彩校正,然后进行裁剪以使每张照片的背景和角度都相同。这有助于在每个图像之间创建无缝过渡,从而使您的运动’重新尝试以GIF突出显示确实很突出。

如何制作gif

选择并编辑了要组成GIF动画的图像后,您只需将其上传到网站上,然后将其拖动到所需的顺序即可。然后,在右侧的“Control Panel,”您可以选择速度,GIF输出大小以及GIF是否连续循环(我的总是这样做)。

最后选择“Create GIF,”然后会出现一个新的选项面板。您可以查看GIF以确保输出是您想要的。确保对输出满意后,我下载了GIF并将其像其他任何媒体一样上传到我的博客中。简单吧?

///

第二个-有点难,但是 更灵活—我制作GIF的方式在Photoshop中。

由于gifmaker.me无法识别PNG文件提供的透明背景,因此,如果您将PNG上传到网站,它将把透明背景变成白色背景。这意味着您无法使用生成器将对象彼此叠加,就像今天的第一张图片一样’s post or the 这篇文章中的书。在这些情况下,Photoshop成为我制作GIF的首选。

由于这有点复杂,我’我将逐步指导您在Photoshop中的工作。请注意,我使用的是Adobe Creative Cloud,因此,如果您’关于CS4,CS5或CS6,您的步骤可能会略有不同:

1.收集你的图像’重新使用并将其保存在单个文件夹中。

(注意:通常,我要确保要在底部/背景层上分层的图像是PNG并具有透明背景。这可能需要您从某些图像中裁剪出背景。我将对此做一个教程不久!)

2.打开Photoshop。然后选择 文件> Scripts >将文件加载到堆栈中。 

如何制作gif

3.选择 浏览 并导航到要包含在GIF中的图像。然后点击 .

如何制作gif

4.将图像加载到Photoshop后,将每个图像都放在单独的图层上,选择 窗口> Timeline. 

如何制作gif

5.时间线窗口将出现在屏幕底部。 选择 创建框架动画 从下拉菜单中-它可能隐藏在创建视频动画下。选择之后 单击创建框架动画的中心 纽扣 您的时间轴窗口将类似于下面的第二个屏幕截图。

如何创建gif动画

如何制作gif

6.在 时间轴飞出菜单 在时间轴窗口的右上角,选择 从图层制作框架。 (已经选择了我的。)完成后,每个图像都将在框架中显示在时间轴窗口中。

如何制作gif

7.现在,真正的乐趣开始了!我也认为这很棘手。从概念上讲,我认为每个框架都是Photoshop中的不同文档。

在第一帧中,我不’不需要任何动画,所以我只打开背景图像的眼球。 在“图层”面板中,我还 确保将我的背景图像移到最底层,这样我就可以在其上方分层放置PNG。 如果背景图片位于顶部,则背景图片将覆盖其下方的所有内容,因为它没有透明属性。

如何制作gif

8. 然后,逐帧显示并打开要在下一个显示的图层。 例如,在第二帧中,我选择了另外一个图层来打开。在第三帧中,我选择了另外两个图层来打开,依此类推,直到完成每个帧为止。

在此过程中,我还更改了任何图像的大小(控制/命令+ T允许您转换图像,只需确保选择了要更改的图层),然后将它们拖动到我想要的位置即可。背景(也可以通过使用Control / Command + T,然后将图像拖动到新位置)。

如何制作gif

如何制作gif

如何制作gif

如何制作gif

9.有了所需的图像后,可以按  按钮进行测试,并确保顺序正确。然后,在每一帧下 选择您希望每帧显示多长时间。 It’根据个人喜好设置,但我希望背景图片的分辨率最高为0.2″一切都涨了0.5″. Be sure to select 永远 GIF循环的次数。按 玩 确认您的GIF完全符合您的要求。

如何制作gif

10.您的GIF可以使用了!去 文件> Export > Save for Web。一个带有很多选项的菜单将会出现。我保持简单,只需单击 保存。 然后恭喜你’re done!

如何制作gif

///

如有任何疑问,请不要’请让我知道!

发表评论

19条留言

  1. 哇!我绝对必须尝试这个!您总是有最好的博客技巧和窍门!与我们分享这些爱时,Katie!

    塔夫绸& Tulips

    出版的2.22.16
    回复
    • 凯蒂 写道:

      很高兴您喜欢它,凯特!我喜欢与他人分享我的知识,很高兴将这些知识汇总在一起!

      出版的2.23.16
      回复
  2. 啊,你打败我发布了!伟大的托里亚,Photoshop绝对是必经之路!

    Xx泰勒
    http://lightscameracatwalk.com

    出版的2.22.16
    回复
    • 凯蒂 写道:

      谢谢女士!一世’确保您会坚如磐石,毕竟您可以使用SCAD!

      出版的2.23.16
      回复
  3. 我对gif着迷并且喜欢gif键盘应用程序!一世’我从来没有做过,但现在完全想尝试!

    出版的2.22.16
    回复
    • 凯蒂 写道:

      我啊’我从未尝试过键盘,但是我的同事喜欢它!绝对给它一个旋转。

      出版的2.23.16
      回复
  4. 凯尔西 写道:

    很高兴您分享了这个!我一直听说GIF舞台’太难以创建…话虽如此,我感觉很喜欢’到现在为止谢谢谢谢分享您的秘密! o

    凯尔西| http://www.abalancingpeach.com

    出版的2.22.16
    回复
    • 凯蒂 写道:

      似乎不止如此,因为屏幕截图太多了!绝对可以尝试一下,如果您有任何疑问,可以随时向我发送电子邮件:]

      出版的2.23.16
      回复
  5. 撒哈拉 写道:

    如此出色的教程! GIF非常有趣:

    XO 撒哈拉
    Que Sera 撒哈拉

    出版的2.22.16
    回复
    • 凯蒂 写道:

      很高兴这很有帮助! xx

      出版的2.23.16
      回复
  6. 这是非常有用的!非常感谢您的分享!

    出版的2.22.16
    回复
    • 凯蒂 写道:

      I’我很高兴这很有帮助,安妮!

      出版的2.23.16
      回复
  7. 珍妮 写道:

    凯蒂,很棒的秘诀!
    我以前从未想过要自己制作GIF,但是您’ve made it so easy.

    珍妮

    出版的2.22.16
    回复
    • 凯蒂 写道:

      绝对可以,J! xx

      出版的2.23.16
      回复
  8. 瑞秋 写道:

    这很有帮助!我喜欢看GIF,但我’我从来没有自己做过。现在我想我’我得试试看!

    出版的2.22.16
    回复
    • 凯蒂 写道:

      如有任何疑问,请给我发送电子邮件:]

      出版的2.23.16
      回复
  9. 莎拉 写道:

    我通过ImpactHer Collective看到了您的博客,我很高兴自己做到了!我喜欢蓝绿色,因此显然我不得不点击您的博客。我可以’等着看更多博客文章,凯蒂!

    XO,莎拉| http://www.thebellainsider.com/

    出版的2.23.16
    回复
    • 凯蒂 写道:

      噢,谢谢莎拉,你’re so sweet! xx

      出版的2.23.16
      回复
  10. 实际上,这对我真的很有帮助,因为GIF会使我感到困惑。感谢您的详细帖子!

    发布了2.24.16
    回复