Photoshop to make a Web page load animation tutorial

As a network of it people, if you want to understand all aspects of the word, then design gif animation is also a good learning direction oh.

The following step is to teach you how to design a loading.gif loading animation diagram:

First look at the Photoshop Tutorial Effect chart:

1, create a layer 100x100 PX, background color #2d2d2d

2, in the background file with a line tool to draw a 1px white longitudinal line:

Note that the line is centered horizontally, as follows:

Both of the floating layers are selected:

Click on the ' Align Center ' icon in the Arrange mode:

3, select the line layer, with the command line control+ T to the straight line rotation 45°

4, select the transformed linear floating layer, with the shortcut key control + Alt + Shift + t copy rotate the line to the following effect:

5. Create a rounded rectangle with a 1px radius, as shown in the following illustration, where you can add a guide to better align the rounded rectangle to the straight line.

6, the rounded rectangle is deformed, as shown below:

Here the method of deformation is to the rounded rectangle control + T, to the deformation of the state, and then click the right mouse button, the following image shows the menu, and then select the ' chamfered ' attribute,

You can transform the lower left and right two points

category :

• PS Getting Started tutorial