{"id":532,"date":"2017-03-30T16:25:06","date_gmt":"2017-03-30T16:25:06","guid":{"rendered":"http:\/\/www.revolutionsincommunication.com\/viscomm\/?page_id=532"},"modified":"2024-11-12T14:21:06","modified_gmt":"2024-11-12T14:21:06","slug":"animation-in-photoshop","status":"publish","type":"page","link":"https:\/\/revolutionsincommunication.com\/viscomm\/animation-in-photoshop\/","title":{"rendered":"Animation"},"content":{"rendered":"<h3><span style=\"color: #993300;\"><strong>Assignment 7.1 Animation\u00a0<\/strong><\/span><\/h3>\n<p>There are several ways to create a small, simple animation.<\/p>\n<p>For now, let&#8217;s use Gimp and then Photoshop.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/4L9xGENu_VM\" width=\"480\" height=\"315\" frameborder=\"0\" align=\"right\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>One great Gimp animation tutorial is by <a href=\"https:\/\/www.youtube.com\/watch?v=4L9xGENu_VM\">Michelle at Tutorial Time<\/a><\/p>\n<p>The technique is to make an object move across multiple layers, then go to Filters \/ animation \/ playback to test your animation.\u00a0 Then from Gimp, export as a .gif and upload into your wordpress site.<\/p>\n<p>Here&#8217;s another <a href=\"https:\/\/www.youtube.com\/watch?v=bTKExaNqSyI\">Gimp animation tutorial<\/a>.<\/p>\n<p><strong>Photoshop<\/strong> has a more complicated animation function.\u00a0\u00a0In this exercise, we are going to create a simple frame animation in Photoshop\u00a0with a .gif file as the end product.<\/p>\n<p>We&#8217;re using one of the I<a href=\"https:\/\/www.iab.com\/wp-content\/uploads\/2019\/04\/IABNewAdPortfolio_LW_FixedSizeSpec.pdf\">nternet Advertising Bureau\u00a0 standard formats<\/a>. \u00a0\u00a0 Be sure to regularly save your work as a .psd file as you go along. In the end, we will have two files &#8212; \u00a0your original .psd Photoshop file with all the layers and the .gif file. \u00a0It&#8217;s important to realize that the .gif file can&#8217;t be changed, so we also hang on to the .psd file in case we need to go back and change something.<\/p>\n<p><span style=\"color: #008000;\"><em><strong>So here you go:<\/strong><\/em><\/span><\/p>\n<ol>\n<li><strong>Create a new file<\/strong>, in Photoshop. \u00a0We&#8217;ll use an Internet Advertising Bureau standard\u00a0 header dimension of \u00a08&#215;1. (So 800 by 100 pixels), with 72 pixels per inch Resolution. \u00a0 (Caution: make sure you are using <strong><span style=\"color: #ff0000;\">pixels<\/span><\/strong>, not <span style=\"color: #ff0000;\">inches<\/span>. \u00a0800 inches width creates a one gigabyte file, which is way too big).<\/li>\n<\/ol>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx1.NewFile.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-534 alignnone\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx1.NewFile-300x205.png\" alt=\"\" width=\"298\" height=\"204\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx1.NewFile-300x205.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx1.NewFile.png 587w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/p>\n<p style=\"padding-left: 60px;\"><strong>\u00a02 . Open Window<\/strong> (top menu) \/ <strong>Timeline.<\/strong>\u00a0 \u00a0\u00a0You will see a button with either &#8220;Create Frame Animation&#8221; which<strong> is<\/strong> what you want, or &#8220;Create Video Animation,&#8221; which <strong>is not<\/strong> what you want in this exercise. \u00a0Pull down on the side tab to change between the two animation types. \u00a0When you have &#8220;Create Frame Animation,&#8221; click on the button.<\/p>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-537 alignnone\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2-300x71.png\" alt=\"\" width=\"325\" height=\"77\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2-300x71.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2-768x181.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2-800x188.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx2.png 825w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<p style=\"padding-left: 60px;\"><strong>3. Layers pallet<\/strong> should also be open now. Your\u00a0Photoshop working space should look more or less like this now:<\/p>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-539 alignnone\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers-300x210.png\" alt=\"\" width=\"323\" height=\"226\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers-300x210.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers-768x539.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers-800x561.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx4.Timeline.Layers.png 877w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><\/a><\/p>\n<p style=\"padding-left: 60px;\"><strong>4. Draw a circle and place it in frame 1. Also write some text in Frame 1. <\/strong>These should show up as\u00a0two different layers in the Layers pallet.<\/p>\n<p style=\"padding-left: 120px;\">\u00a0 \u00a0<a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-544\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup-300x214.png\" alt=\"\" width=\"300\" height=\"214\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup-300x214.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup-768x547.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup-800x570.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.ReadytoDup.png 882w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"padding-left: 60px;\"><strong>5. Duplicate frame 1<\/strong> using the &#8220;duplicate frame&#8217; \u00a0button with the thin red circle above. Now you should have two frames.<\/p>\n<p style=\"padding-left: 60px;\"><strong>6. \u00a0Move the ball<\/strong> in frame 2 to the right side using the move tool. You&#8217;ll need to be sure that you highlight the layer you&#8217;re changing. Now, also in frame 2, switch to the text layer. \u00a0In the layers pallet area with the thin red circle, below, you can see that we&#8217;ve \u00a0decreased the opacity from 100% to \u00a03% or less. Also, in the thin\u00a0red circle area, \u00a0sure that the checkoff box &#8220;Propagate Frame&#8221; is <strong>not<\/strong> checked.<\/p>\n<p style=\"padding-left: 150px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-546\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady-300x169.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady-768x433.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady-800x451.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.TweenReady.png 882w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"padding-left: 60px;\"><strong>7. Now click on the &#8220;Tween&#8221; button<\/strong> on the Timeline (3rd over from the trash can). \u00a0 You&#8217;ll get a dialogue box that looks like this. \u00a0Add 10 frames for this exercise.<\/p>\n<p style=\"padding-left: 150px;\">\u00a0<a href=\"https:\/\/revolutionsincommunication.com\/viscommwp-content\/uploads\/2017\/03\/AniEx9.TweenBox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-549\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx9.TweenBox-300x265.png\" alt=\"\" width=\"300\" height=\"265\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx9.TweenBox-300x265.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx9.TweenBox.png 314w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"padding-left: 90px;\"><strong>8. The\u00a0final timeline<\/strong> should look like this:<\/p>\n<p style=\"padding-left: 150px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-550\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline-300x57.png\" alt=\"\" width=\"454\" height=\"87\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline-300x57.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline-768x147.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline-800x153.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/FinalTimeline.png 854w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/a><\/p>\n<p style=\"padding-left: 90px;\"><strong>Notice<\/strong> that we have selected all Timeline frames (Use the pull-down menu on the upper right side of the Timeline). \u00a0With all selected, we can use any frame&#8217;s pull down menu to change the duration of all \u00a0frames \u00a0&#8212; In this case, from &#8220;no delay&#8221; to 0.1 seconds delay. \u00a0We have also changed the &#8220;loop&#8221; from &#8220;Once&#8221; to &#8220;Forever.&#8221;<\/p>\n<p style=\"padding-left: 90px;\"><strong>9. Save your .psd file <\/strong><\/p>\n<p style=\"padding-left: 90px;\"><strong>10. &#8220;Save As&#8221; your .gif file<\/strong>\u00a0 \u00a0 This is under File\/ Export\/ Save for Web (Legacy). \u00a0Here&#8217;s the dialogue box you want:<\/p>\n<p style=\"padding-left: 180px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-552\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif-300x225.png\" alt=\"\" width=\"300\" height=\"225\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif-300x225.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif-768x577.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif-800x601.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.SaveGif.png 986w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"padding-left: 90px;\"><strong>Notice<\/strong> the &#8220;GIF&#8221; format tab in the upper right, and also the video player buttons in the lower right. The animation should be working at this point. \u00a0Be sure you have the .gif suffix on your file name as you save it. \u00a0When you upload it, the animation should look something like this:<\/p>\n<p style=\"padding-left: 180px;\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.Final_.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-554 size-medium\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.Final_-300x75.gif\" alt=\"\" width=\"300\" height=\"75\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.Final_-300x75.gif 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.Final_-768x192.gif 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2017\/03\/AniEx.Final_-800x200.gif 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Assignment 7.1 Animation\u00a0 There are several ways to create a small, simple animation. For now, let&#8217;s use Gimp and then Photoshop. \ufeffOne great Gimp animation tutorial is by Michelle at Tutorial Time The technique is to make an object move &hellip; <a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/animation-in-photoshop\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width-page.php","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-532","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":6,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/532\/revisions"}],"predecessor-version":[{"id":3855,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/532\/revisions\/3855"}],"wp:attachment":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/media?parent=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}