搜尋
首頁web前端PS教程Photoshop设计制作网页加载动画教程

Photoshop设计制作网页加载动画教程

Jun 01, 2016 pm 02:32 PM
載入動畫動畫網頁

本教程主要使用Photoshop制作网页加载动画教程,作为一个混迹互联网的IT人士,如果想各方面都了解点得话,那么设计gif动画也是个不错的学习方向哦。 作为一个混迹互联网的IT人士,如果想各方面都了解点得话,那么设计gif动画也是个不错的学习方向哦。
下面就step by step 教大家如何设计一个loading.gif的加载动画图:
先看效果图:
Photoshop设计制作网页加载动画教程
1、创建一个图层100×100 PX,背景颜色#2d2d2d
Photoshop设计制作网页加载动画教程
2 、在背景文件上用直线工具绘制一条1px的白色纵线:
Photoshop设计制作网页加载动画教程
注意,这条直线要水平居中对齐,具体方法如下:
同时选中这两个浮层:
Photoshop设计制作网页加载动画教程
点击排列方式中的‘水平居中对齐‘图标:
Photoshop设计制作网页加载动画教程
3、选择直线图层,用命令行Control+ T对直线旋转45°
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程
4 、选中变换后的直线浮层,用快捷键Control + Alt + Shift + T复制旋转该直线到如下效果:
Photoshop设计制作网页加载动画教程
5 、创建一个1px半径的圆角矩形,如下图所示,这里加上参考线是为了更好的让圆角矩形与直线都水平居中
Photoshop设计制作网页加载动画教程
6、对圆角矩形进行变形,如下所示:
Photoshop设计制作网页加载动画教程
这里变形方法是先对圆角矩形Control + T,到变形状态后,然后点击鼠标右键,出现下图所示的菜单,然后选择’斜切’属性,
即可变换左下和右下两个点
Photoshop设计制作网页加载动画教程
7、移动中心点,具体如下:
把中心点移到如下位置
Photoshop设计制作网页加载动画教程


如果中心点直接移不动,试试这样把中间的小黑点
Photoshop设计制作网页加载动画教程
移动到
Photoshop设计制作网页加载动画教程
下面,那么中心点就可以随意移动了
8、选中7步变形后的圆角矩形用快捷键,Control + Alt + Shift + T,使其形式如下:
Photoshop设计制作网页加载动画教程
目前整个图层的布局形式如下:
Photoshop设计制作网页加载动画教程
9、给‘形状2’增加一些样式,打开图层——图层样式:
这里的颜色值是:#242424
Photoshop设计制作网页加载动画教程
最后的效果要如下:
Photoshop设计制作网页加载动画教程
10、 复制上图,然后删除一些叶片,使其如下所示:
Photoshop设计制作网页加载动画教程
删除叶片的方法:
Photoshop设计制作网页加载动画教程
用删除苗点工具
11、给shape浮层加如下所示样式
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程


注:其中投影的样式是默认的样式,无需修改
12、 给shape1图层添加的样式属性和shape图层完全相同的样式,但是外发光样式除外(这里shape1图层不需要添加外发光样式)
13、对图层shape2的修改如下:
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程
14、对shape3的修改如下:
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程
15、最后结果如下
Photoshop设计制作网页加载动画教程
,这里样式可以自由发挥,仅供参考
16、按照以下左图把下面5个图层合成组(ctrl+G),然后复制整个组再按ctrl+T让其旋转45°,后面复制同理(注意,tirck3是在复制 tirck2的基础上再旋转的45°,以此类推)
Photoshop设计制作网页加载动画教程
Photoshop设计制作网页加载动画教程
17、最后做成动画,步骤如下:
1> 选择动画属性:
Photoshop设计制作网页加载动画教程
2> 创建新图层:
Photoshop设计制作网页加载动画教程
,这里每帧对应需显示的组,其它组则需隐藏。
例如下图所示:第2帧对应下面显示了trik2的组,但是其它组都需要隐藏,以此类推
Photoshop设计制作网页加载动画教程
18、最后保存:文件——
Photoshop设计制作网页加载动画教程
最终结果如下所示
Photoshop设计制作网页加载动画教程
总结:知道gif动画的初步制作原理后,以后为我们制作逐帧动画也奠定了一定基础!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Photoshop最有用的是:常見任務和項目Photoshop最有用的是:常見任務和項目Apr 23, 2025 am 12:06 AM

Photoshop擅長圖像編輯、圖層和蒙版、數字繪畫及多種設計應用。 1)圖像編輯與修復:去除瑕疵,調整色彩和亮度。 2)圖層與蒙版:非破壞性編輯和創作。 3)數字繪畫與插圖:創作藝術作品。 4)實際應用:平面設計、網頁設計和數字藝術創作。

使用Photoshop:創意可能性和實際用途使用Photoshop:創意可能性和實際用途Apr 22, 2025 am 12:09 AM

Photoshop在實際應用中非常實用且具有創造性。 1)它提供基本編輯、修復和合成功能,適合初學者和專業人士。 2)高級功能如內容識別填充和圖層樣式可提升圖像效果。 3)掌握快捷鍵和優化圖層結構能提高工作效率。

Photoshop:高級技術和工具Photoshop:高級技術和工具Apr 21, 2025 am 12:08 AM

AdobePhotoshop的高級功能包括高級選擇工具、圖層混合模式和動作與腳本。 1)高級選擇工具如快速選擇工具和色彩範圍選擇工具可精確選擇圖像區域。 2)圖層混合模式如“疊加”模式能創造獨特視覺效果。 3)動作和腳本能自動化重複任務,提高工作效率。

Photoshop的主要功能:修飾和增強Photoshop的主要功能:修飾和增強Apr 20, 2025 am 12:07 AM

Photoshop在修圖和增強方面的強大功能包括:1.使用“修復畫筆工具”去除痘痘,2.使用“液化工具”瘦臉,3.使用“頻率分離”技術進行精確修圖,這些功能通過算法和圖像處理技術實現,優化圖像處理效果。

Photoshop的主要特徵:深度潛水Photoshop的主要特徵:深度潛水Apr 19, 2025 am 12:08 AM

Photoshop的關鍵功能包括圖層與蒙版、調整工具、濾鏡與效果。 1.圖層與蒙版允許獨立編輯圖像部分。 2.調整工具如亮度/對比度可修改圖像色調和亮度。 3.濾鏡與效果可快速添加視覺效果。掌握這些功能可以幫助創意專業人士實現創意願景。

Photoshop和數字藝術:繪畫,插圖和合成Photoshop和數字藝術:繪畫,插圖和合成Apr 18, 2025 am 12:01 AM

Photoshop在數字藝術中的應用包括繪畫、插圖和圖像合成。 1)繪畫:使用畫筆、鉛筆和混合工具,藝術家可創造逼真效果。 2)插圖:通過矢量和形狀工具,藝術家可精確繪製複雜圖形並添加效果。 3)合成:利用蒙版和圖層混合模式,藝術家可將不同圖像元素無縫融合。

高級Photoshop教程:大師修飾和合成高級Photoshop教程:大師修飾和合成Apr 17, 2025 am 12:10 AM

Photoshop的高級修圖與合成技術包括:1.使用圖層、蒙版和調整層進行基礎操作;2.通過調整圖像像素值實現修圖效果;3.利用多圖層和蒙版進行複雜合成;4.應用“液化”工具調整面部特徵;5.使用“頻率分離”技術進行細膩修圖,這些技術能提升圖像處理水平並實現專業級效果。

使用Photoshop進行圖形設計:品牌和更多使用Photoshop進行圖形設計:品牌和更多Apr 16, 2025 am 12:02 AM

使用Photoshop進行品牌設計的步驟包括:1.使用鋼筆工具繪製基本形狀,2.通過圖層樣式添加陰影和高光,3.調整顏色和細節,4.使用智能對象和動作自動生成不同版本的設計。 Photoshop通過圖層和蒙版的靈活性,幫助設計師創建和優化品牌元素,從簡單的標誌到復雜的品牌指南,確保設計的一致性和專業性。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中