1. Design & Illustration
  2. Animation

Create an Animated Interface GIF in Adobe Photoshop

Read Time:11 minsLanguages:
This post is part of a series called Animation in Adobe Photoshop.
Make an Animated Pumpkin Icon Using Pixel Art in Adobe Photoshop
Create a Run Cycle Animation From Scratch in Adobe Photoshop
Final product imageFinal product imageFinal product image
What You'll Be Creating

Ever wanted to turn an app interface PSD into a fully animated demo for your clients or site? Turns out, you can use Photoshop for that, too.

In this tutorial, we will design a simple news iPhone app, and then animate it for client presentation and export it as a GIF file. You'll learn everything you need to go from idea to animated demo, all inside any recent version of Photoshop.

Tutorial Assets

We've used Photoshop CC in this tutorial, but CS5 or 6 would work as well to follow along. You will also need the following stock photo to complete this tutorial. Please download them before you begin, or substitute with a similar picture and adjust the steps accordingly:

1. Design an iPhone App GUI

Step 1

First, we will start designing the app's interface. Make a new file (Control-N) with canvas size 640 px by 1136 px, then click OK.

If instead you already have an app interface designed, you can open it in Photoshop and then jump to the Tap section of this tutorial.

new docnew docnew doc

Step 2

Click View > New Guide to make new guide, which will help us in placing GUI elements accurately. Set it to Vertical with position 15 px.

guide in placeguide in placeguide in place

Step 3

Add another vertical guide at each side of the canvas with 15 px distance between each guide.

15px guides15px guides15px guides

Step 4

Draw another guide, this time horizontally at 40 px, 128 px, and 220 px.

horizontal guideshorizontal guideshorizontal guides
all guides in placeall guides in placeall guides in place

Step 5

Add a status bar on the upper most section of your canvas. If you need detailed directions on that, check out the status bar section of our earlier tutorial How to Design an iOS 7 Email App in Photoshop.

Then, make a new layer and then select second section and then fill it a gray color, #2c3137.

status barstatus barstatus bar

Step 6

Add the app's title text on the top part of the interface.


Step 7

Add a logo to the title. I just drew some simple rectangles for the logo, but if you have an existing app icon, you can just import it into a new layer.


Step 8

Draw a magnifier icon using a combination of two circle shapes and a rounded rectangle, using the same color as the app logo. Place it on the right side of the app.

search iconsearch iconsearch icon

Step 9

On the other side, draw four rounded rectangles for the option icon.


Step 10

Make a new layer with a rectangle section that fits under the titlebar. Fill the next section with a gray color, just as the previous section.

next barnext barnext bar

Step 11

Add a layer mask onto the layer, and then add a black to white gradient until the bottom is faded.


Step 12

Add a menu using the Type Tool, containing the news categories. Set the first menu—in this case, the All option—to be bold, to indicate that the category is active. Duplicate it (Control-J) and then set other menu—in this case, Sport—to be bold, once again to indicate which category is selected.

Now, from the Layers panel, set the Sport menu Opacity to 0% to hide it, as we want the All category to be bold first.


Step 13

Add a thin arrow for menu navigation, made of rounded rectangles.

nav arrownav arrownav arrow

Step 14

Add another arrow onto the other side.

matching nav arrowmatching nav arrowmatching nav arrow

Step 15

Fill the rest of the interface with the gray color. Make sure to put this background underneath all the GUI elements.


Step 16

Draw a light gray rectangle for the individual news section background. 

lighter backgroundlighter backgroundlighter background

Step 17

Apply Stroke, Inner Glow, and Outer Glow to add more contrast to the news area. Double click the layer and then use the following settings from the screenshots below:

inner glowinner glowinner glow
outer glowouter glowouter glow

Step 18

Draw a white rounded rectangle on the top part of the previous shape. We will put news image here.

news elementnews elementnews element

Step 19

Apply Inner Glow into the white shape with the following settings:

news entry glownews entry glownews entry glow

Step 20

Select a photo from the Tuts+ Stock Photo set you previously downloaded, or any other photos you'd like to use, and place it covering the white rounded rectangle shape.

photo in newsphoto in newsphoto in news

Step 21

Hit Control-Alt-G to convert selected photo layer into a Clipping Mask. The photo will automatically go inside layer behind it. And, here's what you see:A perfectly placed photo on top of the individual news area.

photo placementphoto placementphoto placement

Step 22

Add text for the news content. Make sure to add contrast to the news text for a better reading experience by varying font type, color, and size.

styled textstyled textstyled text

Step 23

Let's add icons into the news element design. Draw two small rounded rectangles without Fill and 1 pt white stroke. 


Step 24

Double click the layer and then add layer style Color Overlay. Use #708196 for its color.

add color overlayadd color overlayadd color overlay

Step 25

Repeat previous process, but this time uses a combination of a rounded rectangle and a rectangle.

another iconanother iconanother icon

Step 26

Add a small circle shape. Now, we have a tag icon. Sweet!

tag and link iconstag and link iconstag and link icons

So far, this is our app design at 100% magnification.

100 magnified app UI100 magnified app UI100 magnified app UI

Step 27

Add other individual news articles into the app by duplicating the news element layers, customizing them appropriately.

filled articlesfilled articlesfilled articles

Step 28

Add bigger news area. This will be shown when an individual news is selected.

larger news arealarger news arealarger news area

Step 29

Put all the individual news elements and big news stories in separate layer groups. You want to assure every layer is carefully placed into a layer group according to its element.

For example, you want each layer that made the first individual news section placed together in a layer group, and the elements for full-screen news articles in other groups. This will help you to work easier while making the animation.

layer groupslayer groupslayer groups

For now, we will not use this big news section. So, set its Opacity to 0%.

2. Tap Indicator

Step 1

We now need to design the tap indicator. Make a new layer group and name it tap. Next, draw a white circle shape. Set its Opacity to 50%.

tap sectortap sectortap sector

Step 2

Duplicate the circle shape by pressing Control-J. Make it larger, set stroke to 3 pt with a white color, and remove the Fill color.

tap bordertap bordertap border

Step 3

Add another circle shape, this time thinner. Set its stroke size to 2 pt.

thinner circlethinner circlethinner circle

Hide all the layers inside tap layer group we have just made, as you won't want the taps to show up when the UI is first loaded, but instead will only display them when the animation is fixing to transition to a selected element.

3. Scroll App

Step 1

Now, we're finally ready to start building our UI animation. Open the Timeline panel and then make a new frame.


Step 2

Make another new frame.

another new frameanother new frameanother new frame

Step 3

Now it's time to reveal the tap layer group. When showing a scrolling scene, hide the two stroked circles, and we are going to use this condition to indicate scroll gesture. It will appear more as a continuous stroke, whereas the outer stroked circles give a ripple appearance more consistent with a single tap to select an item.

scrolling circlescrolling circlescrolling circle

Step 4

Change the duration to 1 second for first frame and 0.2 seconds for second frame.


Step 5

Add another frame. 

another new frameanother new frameanother new frame

Step 6

Activate the Tap layer group and all the news grid layers. Use Move Tool to move them up in your list of layers.

move layer groupsmove layer groupsmove layer groups

Step 7

To automatically make a smooth animation between current and previous frame, click Tween from Timeline panel menu.


Step 8

Set the tween to 5 for the added frame.

tween of 5tween of 5tween of 5

Now, we have an animation of the news grid moving upward on each frame.

auto-generated news grid animationauto-generated news grid animationauto-generated news grid animation
news grid animation 2news grid animation 2news grid animation 2

Step 9

If you think that the animation is too fast, you can make it slower by selecting all the frames and setting the duration to 0.2 seconds.

slower animationslower animationslower animation

Test the animation by clicking the play icon in the Timeline panel. Don't forget to set the animation to Forever; this way the animation is looped.


Step 10

Our current animation contains the news grid moving upward. In next frame, we need to put it back to previous condition so it will continue seamlessly with the first frame. To do this, copy the second frame and then paste it at the last position by choosing Paste After Selection in the dialogue box.

copy framecopy framecopy frame
paste framepaste framepaste frame
paste after selectionpaste after selectionpaste after selection

Step 11

Apply the Tween command again to make a new animation between last and next-to-last frames.

tween againtween againtween again
5 frame tween5 frame tween5 frame tween

Add a new frame and hide the tap indicator.

hidden taphidden taphidden tap

So far, this is the animation we get, which gives us a basic scrolling UI.

animated UI scroll

4. Tap Link

Step 1

Now it's time to animate the selection of a link in the menu. First, make a new frame. In this frame, set the Opacity text menu with the selected bold variant of All from the menu set to 0% and Sport's selected variant's transparency set to 100%.

bold sportbold sportbold sport

Step 2

Activate the Tap layer group and reveal all its layers. Change frame duration to 0.2 seconds.

add a tapadd a tapadd a tap

Step 3

Make a new frame with a duration of 0.1 seconds. This time hides the thinnest stroked circle.

hide outer circlehide outer circlehide outer circle

Step 4

Add another frame and hide next stroked circle.

hide next circlehide next circlehide next circle

Step 5

Add a new frame and hide the tap layer group.

hide taphide taphide tap

Step 6

Make a new frame and then set the Opacity of every news story in the grid without the sport tag to 0%.

hide non-sport storieshide non-sport storieshide non-sport stories

Step 7

Still in this frame, drag the individual sports news stories upward in the grid, filling empty spaces above them.

filled sport story sectionsfilled sport story sectionsfilled sport story sections

Step 8

Tween between current frame and the previous. For faster animation, set added frames to 3.

animate changeanimate changeanimate change

Step 9

Set duration in the last frame to 2 seconds.

2 second last frame2 second last frame2 second last frame

For this tap, this is the animation we have.

sport animation

6. Tap News

Step 1

Next, we are going to select one of the news articles and reveal it in full screen. First, make new frame with duration 0.2 seconds and then reveal all layers inside the Tap layer group.

tap news starttap news starttap news start

Step 2

Add new frame and then set its duration to 0.1 seconds. Hide thinnest circle stroke.

hide thin circle againhide thin circle againhide thin circle again

Step 3

Add another frame and then hide next stroked circle.

hide second circle againhide second circle againhide second circle again

Step 4

Add another frame with duration 0.1 seconds. Hide the Tap layer group, and make a new frame. Reveal the big news section we made earlier in Section 1 Step 28 by setting its Opacity to 100%. Hide the small news grid by setting its Opacity to 0%.

show large storyshow large storyshow large story

Step 5

Add tween animation between the current frame and the previous ones.

tween news storytween news storytween news story
finished full news storyfinished full news storyfinished full news story

This is what we have for this animation.

finished news animation

7. Convert Layers Animation to Frames

Step 1

From Timeline panel, click Flatten Frames Into Layers.

flatten layers into framesflatten layers into framesflatten layers into frames

Each frame will be converted into a flat layer. If you have 33 frames, you will also get 33 flat layers: layer Frame 1 taken from content of frame 1, layer Frame 2 taken from frame 2, and so on.

new framesnew framesnew frames

Step 2

Select all frame layers in Layers panel.

select allselect allselect all

Step 3

Drag the layers onto the iPhone photo that you downloaded previously.

iphone piciphone piciphone pic

Step 4

In Timeline panel, select Create Frame Animation and then click New Frame button.

create frame animationcreate frame animationcreate frame animation

Step 5

Make sure all layers are still selected. Hit Control-T to perform a transformation. Hold Control and then drag each corner and place them onto the screen corner.

place news animation into iPhone screenplace news animation into iPhone screenplace news animation into iPhone screen
fit edgesfit edgesfit edges
and againand againand again
and yet againand yet againand yet again
and now its goodand now its goodand now its good

Step 6

Make a new frame for each layer. Put layer Frame 1 in the first frame, layer Frame 2 in second frame, layer Frame 3 in third frame, and so on. You also want to match the duration for each of the frame. Make sure to set the loop to Forever, so the animation will keep on looping.

animate everythinganimate everythinganimate everything

Look at picture below for an example. Layer Frame 23 is revealed on frame 23. Layer Frame 25 is revealed on frame 25, and so on. Continue this for each frame.

keep animatingkeep animatingkeep animating

Step 7

It's time to export the result as animated GIF file. Select Save for Web in the File menu, and select GIF as file type. Play around with available settings to get the optimum file size. Test the animation result by clicking on the play button. Make sure to set its Looping Options to Forever.

save as gifsave as gifsave as gif

And that's it: you've designed a demo app UI, animated it, and put the animation inside an iPhone picture to make the animation look like it's running on a real device. You can easily make this animation optimized for the web by reading through this tutorial:


I hope you found this tutorial helpful. You can tweak the steps included to work with any type of app you'd like to demo, and can use a different device image to showcase, say, a tablet app or website. You can also try other types of multi-touch interaction in the final presentation, such as tilt-scrolling or pinch-to-zoom, if you modify the animations.

If you make your own app demo animations using this tutorial, we'd love to see them in the comments below!

One subscription.
Unlimited Downloads.
Get unlimited downloads