Design an Animated Loading/Download Icon (GIF)

[Music] hello Gary Simon of designc course.com and today is January 20th and we are going to do two videos and the second video is going to be released a little bit later today where I announced the winner of the giveaway contest yesterday that I had um I'm also going to to to choose the winners I right on screen So today we're going to be designing a loading animation GIF that you can be used on a website when something's downloaded you can activated with Ajax uh JavaScript and HTML and CSS um but today we're just going to be working solely in Adobe Photoshop CC to do this animation uh as always check out designc course.com and put in your email it's going to be cous there in the future and check out uh the Facebook page and the other social media accounts they're linked Below in this video and the project files of course as always are available for free and the description is in the video all right so let's go ahead and get started okay let's go ahead to file new and we're going to call this loading GIF I'll make that Capital with 859 by 600 I'm just going to leave it at that and then the background contents is just transparent and and if you have any grids that show up just hit contr H you can get rid of those and I'm going to take this color which is DB DB DB for the background fill that in rename this to background all right so now what we want to do is create a rectangle so we'll take the rectangle tool we'll click once here and we will change this to 128 by 128 now when it comes to Icon sizes you know there's a kind of standard size 16 by 16 then 32 64 128 256 and 512 uh if you were to create this with the intentions of allowing other people to use it you could offer this in multiple sizes uh for our tutorial we're just going to use 128 by 128 so going to hit okay and we're going to make it slightly darker just so we can see it eventually we will we're going to delete this but uh now what we want to do is go ahead and take the rectangle tool again and we will just left click right up here and I'm going to leave the width at 128 and the height I'm going to make 32 now if you take 128 for the height and you divide that by four this is what you get so I'll explain why we're choosing one or 32 rather in a second here and I'm going to make this color right around there 36 36 36 for that color code hit okay all right so I want three of these but I don't want them stacked directly on top of each other so that's why I chose to divide the 128 by four just so we'll have space in between uh three of these servers so what I'm going to do now is just focus on designing the content of this first server here like some buttons and you don't want to make it too complex but we'll just get started here I I'm GNA go ahead and just drag out right here now when you just left click and you're not pressing any buttons this is what happens if you hold alt it kind of keeps it there on that same path and it starts it from the left so something just roughly around that size and I'm choosing 65 65 65 for that hit okay and then what we want to do is duplicate this so you can rightclick duplicate layer or set up a hotkey for that and I I just choose uh control shift d that will automatically allow you to quickly duplicate all right so now I'm going to take those three hit control T we'll just scale that in a little bit and hit apply and then over here I'm going to create some real tiny squares and you'll see what that will look like I'm going to zoom up here so we'll take the rectangle tool hold shift and just make a very tiny Square then what I want to do is duplicate that and we're going to be duplicating this quite a bit and we're going to move it down right there and then take those two first and hit contr e to merge them or right click can merge and then duplicate that so I'm just going to real quickly keep on doing this merging them and duplicating them I'll do that one more time and then we'll take those and merge them and then pull it down holding shift and just moving okay we'll hit control one to get back to 100% all right and let's take both of those layers hit contr e to merge them and when you can use your uh your arrow keys down or up to get that aligned correctly vertically all right so uh that looks pretty decent you don't want to make anything too complex so I now what I want to do is just rename these I'm just going to call this grid and let's take these we'll merge those as well control e we'll call these buttons and then we'll take this let's call This Server all right and then we'll take those three and group them so contrl G we'll call This Server all right so now we're going to Let's zoom up again real quick and we are going to duplicate the group so control shift d hit okay and then control shift d again align this to the bottom and if you go to Auto Select group with our move tool we can just automatically click to select those groups all right so now what we want to do is get rid of this because we now know this is 128x 128 because it was based on that previous layer all right so hit control one and now we basically have the icon static basically there's no animation we have it designed though so now to get to the part where we want to start designing this thing we have to go to window and we want to choose timeline then let me just drag that down quite a bit and in order to get this ready to be animated we have to hit click this button create video timeline so once you do that you'll see we have a timeline down here with a representation of all of our uh layers in our groups and so what we're going to want to do is try to create an animation that gives the appearance that something is being downloaded and we want to do it in kind of like a unique way so what we want to do is first create a new layer so we'll take the pen tool and I'm going to go to to I sorry about that view we want to show the grid make sure that's on so and then go to view and make sure snap to grid is on and so I'm going to create a triangle so I'm going to click over here it's just somewhere off the side and this is going to be a pretty big triangle so I about just hold shift and we'll select right here and then hold shift again and we'll select right there and then we will close that all right so now we want to go ahead to view we'll hide the extras or just hit contrl H now what we want to do is take take this we'll just call this down arrow and we'll right click and we'll choose create clipping mask so you can create a clipping mask that goes onto a group and so this particular group is the one on the bottom and I think I want to move this over here so we'll take this right click create clipping mask that way we're working with the top layer here all right okay so now what we want to do in order to animate this is go ahead and open up well actually we don't have to open this yet just select the down arrow layer and click this little icon there to bring up all of the properties that we can animate so basically this is the one right here you would think it's position but it's actually Vector mask position so if you click on this little timeline icon creates a key frame and if we go all the way out to say around right there and then just take I know we can't see it but it's up here if you turn off auto select group that will that won't cause any issues hold your shift button and drag this just to where you don't see it anymore actually we still see it there okay now it's completely hidden so now what happens is it creates this animation and so if we hit play all right that's actually pretty slow so I'm going to drag this in probably about half the time so now let's hit play here we can see the actual speed and you really could uh speed that up a little bit more take it here to the beginning I think I'm going to choose like somewhere in between there and there okay so now what we want to do is go ahead and I will move forward just right around there and we're going to take this and move it back up oops sorry about that I'm G to edit undo that just move it back up while holding shift all right so now if we play that we can see what that looks like okay so now what we want to do we want to repeat that process for the other two servers so I'm going to take this with that layer selected control shift d to duplicate that move it above here to server copy and right click and we will create clipping mask now we're going to have to redo these because they're in a different location so I'm just going to take all these three and delete those all right so oops I think I may have deleted for both of those because we have both of them selected make sure you only have this up here selected there we go and let's go back here to the beginning now we want it to be just above so right now it's up there now if you just drag it down we see it's right there so right there as we want our first key frame and then we want these to all match up just for the time being and so then I'm going to go ahead and drag this down just to right around there and then make sure this matches up and then we'll drag it back up all right and then one more time we'll duplicate that right click create clipping mask and come down here we'll delete those real quick come back to the beginning drag this down right around there oh no I think I deleted those other two let me back up a little bit so if you hit control Z Control Alt Z you can go back a few times okay there they are I'm going to make sure nothing else is selected all right so let me just delete those H see that's what happened there we go when you make that selection you're dragging if you go too far Actually I don't even know why it did that oh well they're both there still so that's good okay so let's go ahead and create the first uh key frame there we'll position it correctly I think it's right around here we will move it down just to here and down a little bit further and then come back up and then pull it up right there all right so what we can do so that we can see this looping first of all we'll come over here this allows us to uh basically focus in on wherever we're at here in the timeline so just make sure you can see this area you can pull this here to the left and that's going to be the length of the GIF now to make sure that it keeps on looping you click on this little Cog right there you can specify Loop playback so let's just watch this oops let me uh get that better in view all right so I mean it looks okay it's a little bit fast uh what we want to do is play around with the position of the layers so that these aren't all aligning the same so I'm going to extend this just a little bit and now we have all three of our uh basically our key frames in view so what I want to happen is I want this bottom one which I believe is this layer right here no the top one yeah this one right here I want this one to start first this Arrow so what we would do is take the other other two and we would move the animations forward so this down arrow for the top one yeah for the middle one rather and these two we're going to select both of those layers hold control and move them forward maybe right around there just a couple frames and then then take only the bottom one or rather the top and move that forward forward as well and so they're an even distance so now we can hit play all right and that looks pretty cool so we could play around with it a little bit more even so we could take this uh key frame here and this is where the arrows goes back up and let's see here this is the bottom one so I'll extend this just a little bit we'll leave this one here and then this one we'll drag in real close and we'll see what that does to the animation so as you can see we can play around quite a bit with these key frames to create different types of animations basically so it can really affect quite a bit the outcome of the animation so let me go ahead and stop this I don't quite like that this one is still visible and this one's not so let me go ahead hit stop there see this one in the middle ends pretty quick all right I think that's better hit play Perfect all right so I'm also going to drag in this just a little bit more all right cool all right so now we're going to consider the animation complete now here's one thing to note if you wanted to move the the the actual layers around that would throw the uh the positions of these off these arrows in the animation so to get around that once you're certain you know this is what you want and I would also save this and save a backup copy of this just in case in the future you wanted to actually edit the animation because once we go over here on this little icon in the bottom and click on it we'll see this will convert the timeline to a frame animation so the timeline key frames will be emulated in the frame but it will not be preserved so basically this is a destructive way we won't be able to reanimate these things again so just hit continue and now we have all of these key frames Or Not Key frames but frames rather uh and if we hit play it'll go through them kind of slowly uh but to see it real time we can go to file sa for web and go to GIF right here and if you hit play you'll see how it goes through take off transparency oops real quickly I wanted to show I wanted to kind of zoom out here I I wanted to show what this looks like I perhaps like on a web form or or how it would be used on a web page so to design that we could go ahead real quick select on the background layer take on on yeah we're going to leave it on the rectangle tool and I will create yeah maybe a little bit taller right around here I'm going to take the background actually and change that come over here can't see it because it is beneath and it needs to change here make this a little stand out a little bit more and I want to take all of these frames holding shift and oops we'll select all of these this the basically all the server layers and we'll position them right here we'll take downloading right here I may want to move these down just a tad bit more and real quick for the rectangle one layer I'll just do a outer glow change this real quick all right hit okay all right so now if we go ahead and view this basically I did a shortcut for file save for web go to GIF and let's hit forever for the looping options now we can see oh it looks like we have an issue in one of the frames let me find where that's at can so basically we have to find the frame in which this right there for me it's frame 46 uh unfortunately that got screwed up I'm just to take it and throw it away so now if we just go to safer web forever and now you can't even tell so obviously you wouldn't really save this this is just for kind of presentation what you would do if you really wanted to use it as a loading icon what I would do is go to file save this and then save another copy so I'm going to save it over here and then what you would do is go ahead and take go to image canvas size change this to pixels back to 128 to 128 hit okay and proceed then I would take all of my frames here along with the layers over here move these into position all right that looks good and then go ahead to file save for web change this to GI if and then save it out and we see it is 20 KB and you can mess around with the options here to uh make that a little bit less in file size and that is basically it all right so hopefully you enjoyed the the tutorial uh as always check out designcourse decom going to have courses there very soon if they're not already up and check us out on Facebook as always all the links to the social accounts are in the description below this video all right so I'm Gary Simon I'll see you tomorrow [Music]