{"id":2637,"date":"2020-02-04T17:43:20","date_gmt":"2020-02-04T17:43:20","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=2637"},"modified":"2021-06-17T20:32:59","modified_gmt":"2021-06-17T20:32:59","slug":"create-your-own-animated-gif","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2020\/02\/04\/create-your-own-animated-gif\/","title":{"rendered":"Animation | Create Your Own 8-Bit Style Animated Gif"},"content":{"rendered":"<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3515\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/06\/Basic-Training-Tag-V3.png\" alt=\"\" width=\"110\" height=\"25\" \/><\/h3>\n<h3><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/banner-gif.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2898 aligncenter\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/banner-gif.gif\" alt=\"\" width=\"3000\" height=\"1056\" \/><\/a><\/h3>\n<p>In this training, you&#8217;ll learn how to create your own miniature, infinitely-looping animated gif using the timeline tool in Photoshop. You will create between 5 and 10 Photoshop layers which will be converted into frames for your animation. Your design should mimic 8-bit style graphics (pixel art) and be composed of solid black pixels on a transparent background. The end product will be a small, black-and-white-style gif, although there shouldn&#8217;t be any white in your final design.<\/p>\n<p>The examples below were created by former STAs. You can download any of them and open them in Photoshop to see the layers that were used to create them:<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/pikachu.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2884\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/pikachu.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/olivia_happypup_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2885\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/olivia_happypup_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/practicegif.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2641\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/practicegif.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/olivia_fire_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2886\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/olivia_fire_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/valerie.L_ninja_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2638\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/valerie.L_ninja_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/maddy_cat_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2639\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/maddy_cat_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/reese_heart_monitor_8bit-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3268\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/reese_heart_monitor_8bit-1.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/miles_radio_8bit-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3267\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/miles_radio_8bit-1.gif\" alt=\"\" width=\"40\" height=\"71\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/nik_bla-bla-8bit-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3269\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/nik_bla-bla-8bit-1.gif\" alt=\"\" width=\"40\" height=\"71\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/rory_tetris-8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3077\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/rory_tetris-8bit.gif\" alt=\"\" width=\"55\" height=\"55\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3270\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/chuwei_robot_8bit-1.gif\" alt=\"\" width=\"40\" height=\"71\" \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/yves_robot_8bit-2-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3272\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/yves_robot_8bit-2-1.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/mygif.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/mygif.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/natalie_panda-8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3075\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/natalie_panda-8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/tuan_sea_sky_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3076\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/tuan_sea_sky_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif_sheryl.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2887\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif_sheryl.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/shannon_witch_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3074\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/shannon_witch_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/emily_greenbelt_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2640\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/emily_greenbelt_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/valerie_peekaboo_8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3259\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/valerie_peekaboo_8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8bit-honky-tonk.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3260\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8bit-honky-tonk.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8bit-honky-tonk_RED.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3261\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8bit-honky-tonk_RED.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/bridget_cactusflower_8bit-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3262\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/bridget_cactusflower_8bit-1.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/chloe_plantbaby-8bit.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3263\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/chloe_plantbaby-8bit.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/strawberryGIF.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3264\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/strawberryGIF.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/poonum-catinbox-8bitgraphic.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4426\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/poonum-catinbox-8bitgraphic.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4428\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/ingrid-moonlightv2-8bitgraphic.gif\" alt=\"\" width=\"80\" height=\"80\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Blinking-Eye.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4429 alignnone\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Blinking-Eye.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4435\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/jake_engelberg_gif.gif\" alt=\"\" width=\"80\" height=\"80\" \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/AngieHuang-BunnyTea-8bitgraphic-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4536\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/AngieHuang-BunnyTea-8bitgraphic-1.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<h2><strong>Step 1: Create Layers for Your Gif\u00a0<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2668\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2669\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif2.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2670\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif3.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2671\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif4.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2672\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif5.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2671\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif4.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2670\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif3.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2917\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/1-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/2-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2920\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/2-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/3-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2921\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/3-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/4-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2922\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/4-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/5-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2923\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/5-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a>\u00a0<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/6-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3009\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/6-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3007\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/7.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2669\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/gif2.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/mygif.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/mygif.gif\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3008\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/8.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/F-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2924\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/F-1.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/a><\/p>\n<p>First, you&#8217;ll need to come up with a concept for your animation. Start to visualize the frames that will make up the animation; if you want you can sketch them out on paper first.<\/p>\n<p>Then open a new 80 x 80 px document in Photoshop to start creating layers for each frame of your animation. A frame can represent a single layer or a configuration of layers.<\/p>\n<p>The background layer cannot be animated, so make sure to start on a new layer or convert the background layer into a regular layer.<\/p>\n<p><strong>Follow these specs when you&#8217;re creating layers your gif:<\/strong><\/p>\n<ul>\n<li><strong>80 x 80 px document<\/strong><\/li>\n<li><strong>5-10 layers total<\/strong><\/li>\n<li><strong>Only use opaque black (#000000)\u00a0<\/strong><\/li>\n<li><strong>8 bit, pixel style<\/strong><\/li>\n<li><strong>Transparent background<\/strong><\/li>\n<\/ul>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3025\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-3.png\" alt=\"\" width=\"420\" height=\"504\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-3.png 420w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-3-250x300.png 250w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<p>Make sure you&#8217;re editing your design on the pixel level. A good way to do this is to zoom in on your design in Photoshop and select the pencil tool. Resize the pencil to 1 px and select black as your color. This will allow you to fill in one pixel at a time.<\/p>\n<p>There should be no gray or white in your final design, only black pixels.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3327\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1.png\" alt=\"\" width=\"1260\" height=\"1023\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1.png 1260w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1-300x244.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1-768x624.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-1-1024x831.png 1024w\" sizes=\"auto, (max-width: 1260px) 100vw, 1260px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 2: Open the Timeline Window<\/strong><\/h2>\n<p>When you&#8217;re ready to start animating, you can open the timeline window.<\/p>\n<p>Click on <strong>Window<\/strong>\u00a0and make sure both the layers panel and the timeline window are selected.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/windows.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3013\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/windows.png\" alt=\"\" width=\"282\" height=\"891\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/windows.png 282w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/windows-95x300.png 95w\" sizes=\"auto, (max-width: 282px) 100vw, 282px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 3: Click &#8216;Create Frame Animation&#8217;<\/strong><\/h2>\n<p>From the dropdown menu that appears in the timeline window, click on the button to create a frame animation.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2653 size-full\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM.png\" alt=\"\" width=\"1638\" height=\"398\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM.png 1638w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM-300x73.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM-768x187.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-10.28.10-AM-1024x249.png 1024w\" sizes=\"auto, (max-width: 1638px) 100vw, 1638px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 4: Make Frames From Layers<\/strong><\/h2>\n<p>Then convert all your layers into frames.<\/p>\n<p>1) Click on the menu button in the timeline panel.<\/p>\n<p>2) Click on\u00a0<strong>Make Frames From Layers.<\/strong><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.11.33-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2656\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.11.33-AM.png\" alt=\"\" width=\"698\" height=\"1024\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.11.33-AM.png 698w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.11.33-AM-204x300.png 204w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 5: Create a New Layer for Each Frame (Optional)<\/strong><\/h2>\n<p>Now all your layers have been converted into frames. To add new frames at this point, you can either 1) Create new a new layer for each new frame or 2) Edit a single layer across multiple frames. (To do the latter, skip the step 6.)<\/p>\n<p>1) First, select all of your layers (go to <strong>Select &gt; All layers<\/strong> or press <strong>alt + command + a <\/strong>on a Mac)<\/p>\n<p>2) Then click on the menu button in the timeline panel (horizontal bars in the top-right corner)<\/p>\n<p>3) Select <strong>Create New Layer for Each New Frame.\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.05.55-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2654 size-full\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.05.55-AM.png\" alt=\"\" width=\"740\" height=\"1064\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.05.55-AM.png 740w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.05.55-AM-209x300.png 209w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.05.55-AM-712x1024.png 712w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 6: Unify a Single Layer Over Multiple Frames<\/strong><\/h2>\n<p>If you want to use a single layer across multiple frames, you can use to unify tools in the layers panel. When you check one of the unify buttons, any change in position, visibility or style will be applied to all the frames within an active layer.<\/p>\n<ul>\n<li><strong>Unify Layer Position<\/strong><\/li>\n<li><strong>Unify Layer Visibility<\/strong><\/li>\n<li><strong>Unify Layer Style<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3627 aligncenter\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/unify-1.png\" alt=\"\" width=\"261\" height=\"518\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/unify-1.png 261w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/unify-1-151x300.png 151w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 7: Add, Delete, and Edit Frames<\/strong><\/h2>\n<p>Preview your animation by clicking on the play button in the timeline window. You can keep tweaking your animation; if you want to add new frames or delete frames, click on the menu button.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3026\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-2.png\" alt=\"\" width=\"726\" height=\"570\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-2.png 726w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-2-300x236.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/a><\/p>\n<p>You can reuse frames by pressing the duplicate button:<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3030\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-4.png\" alt=\"\" width=\"483\" height=\"180\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-4.png 483w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-4-300x112.png 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/a><\/p>\n<p>You can also use the tweening feature, which allows you to create intermediate frames between selected frames. This is really useful for creating a fade in or out, or moving an object across a frame.<\/p>\n<p>Select the layer(s) you want (use\u00a0<strong>shift + left-click<\/strong>), then click on the tweening button. If you select more than one layer, the new frames will be added in between the selected layers.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3029\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-6.png\" alt=\"\" width=\"483\" height=\"183\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-6.png 483w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-6-300x114.png 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/a><\/p>\n<p>Then choose the number of new frames and the properties you want the modify (position, opacity, effects).<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3031\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-7.png\" alt=\"\" width=\"333\" height=\"315\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-7.png 333w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Untitled-7-300x284.png 300w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/a><\/p>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 8: Set the Frame Delay and the Looping Frequency<\/strong><\/h2>\n<p>1) Highlight all your frames to edit them at one time.<\/p>\n<p>2) Select the amount of delay you want between your frames (depending on how fast you want your gif to be)<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.37-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2660 size-full\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.37-AM.png\" alt=\"\" width=\"626\" height=\"438\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.37-AM.png 626w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.37-AM-300x210.png 300w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/>r<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>3) Then make sure the looping frequency is set to forever.<\/p>\n<h2><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.57-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2663\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.57-AM.png\" alt=\"\" width=\"658\" height=\"312\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.57-AM.png 658w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-17-at-11.46.57-AM-300x142.png 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/a><\/h2>\n<hr \/>\n<h2><\/h2>\n<h2><strong>Step 9: Save and Export Your Gif<\/strong><\/h2>\n<p>1) Save your PSD so you can go back and edit it later if you want to make more changes<\/p>\n<p>2) Then export the gif by going to <strong>File &gt; Export &gt; Save for Web <\/strong> <strong>(Legacy)<\/strong><\/p>\n<p>Follow these naming conventions when you save your PSD and GIF files:<\/p>\n<p><span style=\"color: #ff0000\">[your name]-[name of your gif]-8bitgraphic.gif<\/span><\/p>\n<p>(e.g. bridget-cactusflower-8bitgraphic.gif)<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2676\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM.png\" alt=\"\" width=\"2054\" height=\"1608\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM.png 2054w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM-300x235.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM-768x601.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/02\/Screen-Shot-2020-02-18-at-8.37.19-AM-1024x802.png 1024w\" sizes=\"auto, (max-width: 2054px) 100vw, 2054px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/3.basecamp.com\/4001554\/buckets\/7892081\/todos\/1961166886\">https:\/\/3.basecamp.com\/4001554\/buckets\/7892081\/todos\/1961166886<\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3530\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png\" alt=\"\" width=\"3000\" height=\"1000\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png 3000w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-1024x341.png 1024w\" sizes=\"auto, (max-width: 3000px) 100vw, 3000px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this training, you&#8217;ll learn how to create your own miniature, infinitely-looping animated gif using the timeline tool in Photoshop. You will create between 5 and 10 Photoshop layers which will be converted into frames for your animation. Your design &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2020\/02\/04\/create-your-own-animated-gif\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":702,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711,200717],"tags":[],"class_list":["post-2637","post","type-post","status-publish","format-standard","hentry","category-basic-trainings","category-photoshop"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/702"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=2637"}],"version-history":[{"count":91,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2637\/revisions"}],"predecessor-version":[{"id":7169,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2637\/revisions\/7169"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=2637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=2637"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=2637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}