In this adobe Photoshop Tutorial we are going to learn how to draw a loading bar like the ones used on software while it uploads into your computer. Right click on this picture and save it locally. Open it with adobe photoshop and click Edit-Define pattern and give it a name.

If you did not like the previous Pattern you can copy this one and then just change the colors to those you want. Make it smaller before you turn it into a pattern by clicking on Edit-Transform-Scale. After you did all that you can go to Edit-Define pattern and give it a name.

Start a new document 400 x 400, grab the Paint Bucket, drop down the FILL selection on the menu above and select PATTERN. Select the pattern you just saved and fill the new layer with it.

Using the Crop Tool draw a rectangle of the size you want your Bar to be. Once you have drawn your rectangle right click layer and choose Crop.

Start a new document smaller than your Loading Bar and give it a color you like. Remember that you had PATTERN selected so you need to change that to FOREGROUND before you use the Bucket Tool again. I choose Orange. Now using the Move Tool, drag the bar drawing into the new document. You will notice the bar is bigger than the new document and that is what we want.

Now to image ready. Move your Bar so that it is at the end of the Orange layer. Look at the picture for guidance. Once all is set, shoot the first frame by clicking the Icon selected.

While still in the Loading Bar layer, use the RIGHT ARROW and click it two times to move the Bar forward and take another frame.

Repeat the process until you have enough frames to create your animation. If you do it this way you can control the way it move seamlessly.

If you are more experienced you can move the bar where you want it to end up and then use the Tween Tool. In the end you can remove the not needed frames to get your seamless motion.