{"id":3542,"date":"2017-08-18T01:43:19","date_gmt":"2017-08-18T05:43:19","guid":{"rendered":"https:\/\/www.searchenginegenie.com\/web-design-blog\/?p=3542"},"modified":"2017-08-18T01:43:19","modified_gmt":"2017-08-18T05:43:19","slug":"create-an-animated-interface-gif-photoshop","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/create-an-animated-interface-gif-photoshop\/","title":{"rendered":"Create an Animated Interface GIF &#8211; Photoshop"},"content":{"rendered":"<p>&nbsp;<\/p>\n<div style=\"width: 400px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3542-1\" width=\"400\" height=\"300\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/animated-interface-gif.mp4?_=1\" \/><a href=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/animated-interface-gif.mp4\">https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/animated-interface-gif.mp4<\/a><\/video><\/div>\n<p>Step:1<\/p>\n<p>Open a document of width 640 pixels and height 1136 pixels.Create a phone UI according to our needs. Draw a Circle with stroke 3pt. Open the timeline panel and make a new frame.<\/p>\n<figure id=\"attachment_3543\" aria-describedby=\"caption-attachment-3543\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3543\"><div class=\"lb-album\"><a href=\"#image-3543\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/1-1-300x141.png\" alt=\"animated gif\" class=\"size-medium wp-image-3543\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3543\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3543\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/1-1.png\" alt=\"image-3543\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3543\" class=\"wp-caption-text\">Mobile UI<\/figcaption><\/figure>\n<p>Step:2<\/p>\n<p>Create a rectangle shaped image and fill with color and add text to it.Create another rectangle and fill with color.Add a frame to it.<\/p>\n<figure id=\"attachment_3544\" aria-describedby=\"caption-attachment-3544\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3544\"><div class=\"lb-album\"><a href=\"#image-3544\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/2-300x146.jpg\" alt=\"image \" class=\"size-medium wp-image-3544\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3544\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3544\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/2.jpg\" alt=\"image-3544\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3544\" class=\"wp-caption-text\">Timeline panel<\/figcaption><\/figure>\n<p>Step:3<\/p>\n<p>Make 0.1 seconds time for the first frame.Create next frame by creating different gadgets. Apply the tween command between last and first frames.<\/p>\n<figure id=\"attachment_3545\" aria-describedby=\"caption-attachment-3545\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3545\"><div class=\"lb-album\"><a href=\"#image-3545\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/4-300x146.jpg\" alt=\"Mobile UI\" class=\"size-medium wp-image-3545\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3545\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3545\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/4.jpg\" alt=\"image-3545\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3545\" class=\"wp-caption-text\">Mobile Gadgets<\/figcaption><\/figure>\n<p>Step:4<\/p>\n<p>Add a new frame by creating a gadget. Insert a nature focused image in to a rectangle.Set its duration to 0.1 second. Create two\u00a0 more frames by creating different gadgets.<\/p>\n<figure id=\"attachment_3546\" aria-describedby=\"caption-attachment-3546\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3546\"><div class=\"lb-album\"><a href=\"#image-3546\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/7-300x149.jpg\" alt=\"frame\" class=\"size-medium wp-image-3546\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3546\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3546\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/7.jpg\" alt=\"image-3546\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3546\" class=\"wp-caption-text\">Animation frame<\/figcaption><\/figure>\n<p>Step:5<\/p>\n<p>From timeline panel, click Flatten frames into layers. Every Frame will be converted in to flat layer. For example, if you have 10 frames you will also get 10 flat layers.<\/p>\n<figure id=\"attachment_3547\" aria-describedby=\"caption-attachment-3547\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3547\"><div class=\"lb-album\"><a href=\"#image-3547\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/8-300x140.jpg\" alt=\"frames\" class=\"size-medium wp-image-3547\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3547\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3547\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/8.jpg\" alt=\"image-3547\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3547\" class=\"wp-caption-text\">Flatten frames<\/figcaption><\/figure>\n<p>Step:6<\/p>\n<p>According to the frame set the time duration as 0.1 second. Arrange the frames according to our needs. If you think the animation is too slow, you can make it faster by selecting all the frames and set the duration to 0.2 seconds.<\/p>\n<figure id=\"attachment_3548\" aria-describedby=\"caption-attachment-3548\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3548\"><div class=\"lb-album\"><a href=\"#image-3548\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/10-300x146.png\" alt=\"time\" class=\"size-medium wp-image-3548\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3548\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3548\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/10.png\" alt=\"image-3548\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3548\" class=\"wp-caption-text\">Duration setting<\/figcaption><\/figure>\n<p>Step:7<\/p>\n<p>Apply the tween command again to make a new animation between first and last frame.So this is the far animation we get,Which gives a best scrolling UI.Save the file in a GIF Format.<\/p>\n<figure id=\"attachment_3566\" aria-describedby=\"caption-attachment-3566\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a name=\"imageclose-3549\"><div class=\"lb-album\"><a href=\"#image-3549\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/11-300x150.png\" alt=\"gif\" class=\"size-medium wp-image-3566\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3549\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3549\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2017\/08\/11.png\" alt=\"image-3549\">\r\n                   <\/div><\/a><figcaption id=\"caption-attachment-3566\" class=\"wp-caption-text\">Animated gif<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Step:1 Open a document of width 640 pixels and height 1136 pixels.Create a phone UI according to our needs. Draw a Circle with stroke 3pt. Open the timeline panel and make a new frame. Step:2 Create a rectangle shaped image and fill with color and add text to it.Create another rectangle and fill with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7,6,5,1],"tags":[163,180],"class_list":["post-3542","post","type-post","status-publish","format-standard","hentry","category-photoshop","category-photoshop-tips","category-web-design","category-web-design-tips","category-whats-trending-web-design","tag-photoshop","tag-webdesign-tutorials"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=3542"}],"version-history":[{"count":27,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3542\/revisions"}],"predecessor-version":[{"id":3582,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3542\/revisions\/3582"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=3542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=3542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=3542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}