ps加載動(dòng)畫(huà)圖片

2022-12-25 11:13:26 來(lái)源/作者: / 己有:41人學(xué)習(xí)過(guò)

作為一個(gè)混跡互聯(lián)網(wǎng)的IT人士,如果想各方面都了解點(diǎn)得話(huà),那么設(shè)計(jì)gif動(dòng)畫(huà)也是個(gè)不錯(cuò)的學(xué)習(xí)方向哦。

下面就step by step 教大家如何設(shè)計(jì)一個(gè)loading.gif的加載動(dòng)畫(huà)圖:

先看效果圖:

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

1、創(chuàng)建一個(gè)圖層100×100 PX,背景顏色#2d2d2d

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

2 、在背景文件上用直線(xiàn)工具繪制一條1px的白色縱線(xiàn):

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

注意,這條直線(xiàn)要水平居中對(duì)齊,具體方法如下:

同時(shí)選中這兩個(gè)浮層:

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

點(diǎn)擊排列方式中的‘水平居中對(duì)齊‘圖標(biāo):

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

3、選擇直線(xiàn)圖層,用命令行Control+ T對(duì)直線(xiàn)旋轉(zhuǎn)45°

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

4 、選中變換后的直線(xiàn)浮層,用快捷鍵Control + Alt + Shift + T復(fù)制旋轉(zhuǎn)該直線(xiàn)到如下效果:

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)

5 、創(chuàng)建一個(gè)1px半徑的圓角矩形,如下圖所示,這里加上參考線(xiàn)是為了更好的讓圓角矩形與直線(xiàn)都水平居中

Photoshop制作網(wǎng)頁(yè)加載動(dòng)畫(huà)教程,PS教程,16xx8.com教程網(wǎng)