[入门PS教程]用Photoshop(PS)绘制一个“加载中”GIF

时间:2024-02-15 11:22:01

我回来啦!我这尘封多年的博客呀!自从大四以后就没有管这博客了,随着年龄的增长,自己对开发的新技术也渐渐失去了热情。

闲着无聊,就把多年前的知识共享出来吧,这也是相当实用的技巧哦,如果你是初学PS的话,对你入门PS也相当有帮助的。

废话不多说啦,马上开始我们这次的课程吧!

 

根据你想要设计的大小新建一个新文件(CTRL + N)。这里我把新文件的长宽设置为 200 x 200 像素。

创建图标

1. 新建一个图层 (SHIFT + CTRL + N).

2. 点击“选框工具(M)”.

3. 在你创建的新图层的上中位置,建立一个如下图所示的长方形选择区域。

4. 平滑选择区域5像素 (选择 〉 修改 〉 平滑…。在弹出窗口中输入5).

5. 填充选中区域为黑色(或者你你想要的颜色) (SHIFT + F5).

6. 取消选择你选中的区域 (CTRL + D).

7. 点击“移动工具 (V)”.

8. 按住ALT键,点击并拖动你刚刚在绘制的小黑线到图层的下*。

这样你就可以创建一个相同的小黑线在图层的下*。

9. 合并两条小黑线为一个图层。
按住CTRL键你就可以在“图层”窗口选择多个图层了。选中以上步骤创建的两个小图层之后,右击其中一个图层并在弹出快捷菜单中点击“合并图层”。

10. 复制刚刚合并的图层 (CTRL + J).

11. 选中复制的图层,按下CTRL + T 进入“*变换”模式.

12. 按住SHIFT键,将图层旋转至水平方向如下图所示:

13. 旋转完之后,按下回车(ENTER)键。

14. 重复9到13步,直至到如下图形:

15. 合并所有有条形图形的图层为一个图层。

制造渐变效果

1. 将你的前景色和背景色变更为默认颜色(按下D键)。

2. 切换前景色和背景色(按下X键)。

3. 点击“图层 〉 新填充图层 〉 渐变… ”

4. 点击确定按钮。

5. 在颜色工具条上双击以编辑渐变:

6. 选择第二个预设值

7. 将左侧侧的不透明度和颜色的位置更改为 12%.

8. 将渐变设置更改为如下所示:

9. 点击确定按钮。Click OK button.
通过创建渐变填充图层,我们可以很容易地修改我们的渐变效果。当我们建立动画帧时,我们只需要做的是更改渐变的旋转角度。

创建动画帧

1. 新建一个文件 (CTRL + N)。新文件的大小和我们前面的图形一样。

2. 我们将要使用前面绘制的图形来建立每一帧动画。这样一来,我们就很容易的编排每一帧动画了。

3. 从前一个文件里,按住CTRL选中渐变填充图层和图标图层,右击其中一个图层,然后再快捷菜单中点击“合并图层”,将两个图层合并。

4. 全选 (CTRL + A),然后从上一个文件中的内容复制(在旧文件中按CTRL+C)粘贴(在新文件中按CTRL+V)到新文件中。

5. 回到上一个文件中,并找到“历史”面板。如果你找不到,你可以在菜单栏点击(窗口 〉 历史)打开。

6. 在“历史”面板中,在“合并图层”上右击,并点击“删除”。

7. 在图层面板里,如下图位置双击渐变填充图层:

8. 将“角度”更改为16

9. 重复以上3到8步直到在你的新文件里建立8个图层,如下图所示:

生成动画

现在我们已经把我们动画元素做好了,是时候生成动画了。

1. 选择上面建立的新文件,在工具栏点击“在 ImageReady 中编辑(CTRL + SHIFT + M)”。

2. 在  ImageReady 里,打开“动画”面板(窗口 〉 动画)。

3. 在“图层”面板中,除了“背景”图层和“图层1”其他图层都隐藏。

4. 在“动画”面板中,更改“帧延时时间”为0.2秒。

5. 点击“复制当前帧”按钮。

6. 回到“图层”面板,取消隐藏“图层2”。

7. 重复5、6步,直到“动画”面板中有8帧动画。

8. 在菜单栏点击“文件 〉 将优化结果存储为… (ALT + CTRL + SHIFT + S)”

英文原文:Loading GIF Animation

译文地址:手把手教你用Photoshop(PS)绘制一个“加载中”GIF

[入门PS教程]用Photoshop(PS)绘制一个“加载中”GIF