搜尋
首頁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
网页打不开是什么原因网页打不开是什么原因Jun 26, 2023 am 11:49 AM

网页打不开的原因有:1、电脑的本地连接被禁用;2、拨号上网帐号与密码输入不正确;3、路由器故障或路由器设置出现问题;4、由DNS错误导致的IE打不开网页;5、hosts文件被修改导致的IE打不开网页;6、IP地址设置错误或者获取失败导致IE打不开网页。

使用JavaScript开发网页投票系统使用JavaScript开发网页投票系统Aug 09, 2023 pm 01:30 PM

使用JavaScript开发网页投票系统摘要:随着互联网的飞速发展,网上投票成为了一种方便快捷的方式,用于收集公众的意见和做出决策。本文将介绍使用JavaScript开发一个简单的网页投票系统,实现了用户可以选择选项并提交投票的功能。介绍:网页投票系统是一个在网页上显示多个选项并允许用户选择的程序。它可以用于许多场景,例如选举投票、产品调查、意见收集等。本文

网页无法访问怎么办网页无法访问怎么办Sep 06, 2023 am 09:36 AM

网页无法访问的解决办法有检查网络连接、清除浏览器缓存、检查网页地址、尝试使用其他浏览器、检查服务器状态、检查域名解析、检查防火墙和安全设置和联系网站管理员等。详细介绍:1、检查网络连接,确保网络连接正常,可以尝试打开其他网页或者使用其他设备进行访问,确定是否是网络连接问题,如果其他网页可以正常访问,那么可能是该网页的问题;2、清除浏览器缓存,浏览器缓存可能导致网页无法加载等等。

网页打开慢解决方法网页打开慢解决方法Aug 17, 2023 am 10:53 AM

网页打开慢解决方法:1、检查网络连接速度,可以使用在线测速工具来测试网络,可以联系网络服务提供商解决问题;2、可以通过清理浏览器缓存来改善网页打开速度,可以在浏览器的设置中找到清除缓存的选项,并选择清除所有缓存数据;3、在浏览器的插件和扩展程序管理页面,可以尝试禁用浏览器插件和扩展程序;4、网页打开慢还可能与电脑的性能有关,关闭占用系统资源的程序或进程也可以提高网页加载速度。

拥有自我意识的AI:AutoGPT拥有自我意识的AI:AutoGPTMay 25, 2023 am 10:28 AM

1、引言ChatGPT在当下已经风靡一时,作为自然语言处理模型的佼佼者,ChatGPT的优势在于其能够生成流畅、连贯的对话,同时还能够理解上下文并根据上下文进行回答。针对不同的应用场景可以进行快速定制,例如,在客服、教育、娱乐等领域中,ChatGPT可以作为智能助手为用户提供便捷的服务和娱乐体验。从GPT-3到GPT-4,我们可以看到在高级推理,输入设置,微调行为和理解更长的上下文信息等方面,ChatGPT在不断的优化训练中已经取得了显著的进展。但是针对于这种交互式的GPT模型,我们更希望看到能

使用JavaScript实现网页自动刷新使用JavaScript实现网页自动刷新Jun 15, 2023 pm 10:34 PM

在现代的网络应用中,自动刷新是一项非常有用的功能。通过使用JavaScript编程技术,您可以轻松实现网页自动刷新,以便在应用程序或网站中提供更好的用户体验。接下来,本篇文章将介绍如何使用JavaScript来实现网页自动刷新。使用setInterval函数setInterval函数是JavaScript中最常用的定时器函数之一。该函数允许在特定时间间隔内重

win10网络被禁用了怎么打开网页win10网络被禁用了怎么打开网页Jun 29, 2023 pm 05:37 PM

win10网络被禁用了怎么打开网页?使用win10系统的时候,发现网络被禁用了,就没有办法使用电脑,这种情况应该如何解决。很多小伙伴不知道怎么操作,小编下面整理了windows10网络被禁用了恢复教程,如果你感兴趣的话,跟着小编一起往下看看吧!win10网络被禁用了怎么打开1、在状态栏右边找到网络连接图标之后,右键点击它,然后选择“打开网络和Internet设置”选项并点击2、打开之后在出现的界面右边,找到并点击打开网络和共享中心3、点击更改适配器设置这个选项,找到被禁用的网络,右键点击它4、选

如虎添翼,六个让你效率翻倍的ChatGPT插件如虎添翼,六个让你效率翻倍的ChatGPT插件May 17, 2023 pm 02:28 PM

ChatGPT是一个超强的AI应用程序,OpenAI已经发布的GPT-4引起了更广泛的关注。ChatGPT是由OpenAI开发的专门从事对话的AI聊天机器人,其主要目标是使AI系统更自然地进行互动。大家可能都已经尝试过ChatGPT,今天讲一讲与这个全新工具互动的不同方法。本文总结了6个可以使ChatGPT成为日常助手(甚至超越日常助手)的工具!1.【GoogleChromeExtension】在任何地方使用ChatGPT想在任何地方轻松地使用ChatGPT吗?那么你可以使用Chrome插件(h

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),