Heim Web-Frontend PS-Tutorial 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动画的初步制作原理后,以后为我们制作逐帧动画也奠定了一定基础!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop? Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop? Mar 14, 2024 pm 05:22 PM

Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop? Viele unserer Benutzer möchten häufig verwendete Webseiten als Verknüpfungen auf dem Desktop anzeigen, um Zugriffsseiten bequemer öffnen zu können, wissen jedoch nicht, wie das geht. Als Reaktion auf dieses Problem wird der Herausgeber dieser Ausgabe dies mitteilen Werfen wir einen Blick auf den Inhalt des heutigen Software-Tutorials. Die Verknüpfungsmethode zum Senden von Webseiten an den Desktop im Edge-Browser: 1. Öffnen Sie die Software und klicken Sie auf der Seite auf die Schaltfläche „…“. 2. Wählen Sie in der Dropdown-Menüoption „Diese Site als Anwendung installieren“ unter „Anwendung“ aus. 3. Klicken Sie abschließend im Popup-Fenster darauf

CSS-Animation: So erzielen Sie den Flash-Effekt von Elementen CSS-Animation: So erzielen Sie den Flash-Effekt von Elementen Nov 21, 2023 am 10:56 AM

CSS-Animation: Um den Flash-Effekt von Elementen zu erzielen, sind bestimmte Codebeispiele erforderlich. Im Webdesign können Animationseffekte manchmal eine gute Benutzererfahrung auf die Seite bringen. Der Glitzereffekt ist ein gängiger Animationseffekt, der Elemente auffälliger machen kann. Im Folgenden wird erläutert, wie Sie mithilfe von CSS den Flash-Effekt von Elementen erzielen. 1. Grundlegende Implementierung von Flash Zuerst müssen wir die Animationseigenschaft von CSS verwenden, um den Flash-Effekt zu erzielen. Der Wert des Animationsattributs muss den Animationsnamen, die Ausführungszeit der Animation und die Verzögerungszeit der Animation angeben

Mögliche Gründe, warum die Netzwerkverbindung normal ist, der Browser jedoch nicht auf die Webseite zugreifen kann Mögliche Gründe, warum die Netzwerkverbindung normal ist, der Browser jedoch nicht auf die Webseite zugreifen kann Feb 19, 2024 pm 03:45 PM

Der Browser kann die Webseite nicht öffnen, aber das Netzwerk ist normal. Dafür gibt es viele mögliche Gründe. Wenn dieses Problem auftritt, müssen wir es Schritt für Schritt untersuchen, um die spezifische Ursache zu ermitteln und das Problem zu lösen. Stellen Sie zunächst fest, ob die Webseite nicht geöffnet werden kann, auf einen bestimmten Browser beschränkt ist oder ob alle Browser die Webseite nicht öffnen können. Wenn nur ein Browser die Webseite nicht öffnen kann, können Sie es zum Testen mit anderen Browsern wie Google Chrome, Firefox usw. versuchen. Wenn andere Browser die Seite korrekt öffnen können, liegt das Problem möglicherweise höchstwahrscheinlich bei diesem bestimmten Browser

Animation funktioniert in PowerPoint nicht [Behoben] Animation funktioniert in PowerPoint nicht [Behoben] Feb 19, 2024 am 11:12 AM

Versuchen Sie, eine Präsentation zu erstellen, können aber keine Animation hinzufügen? Wenn Animationen in PowerPoint auf Ihrem Windows-PC nicht funktionieren, hilft Ihnen dieser Artikel weiter. Dies ist ein häufiges Problem, über das sich viele Menschen beschweren. Beispielsweise kann es sein, dass Animationen bei Präsentationen in Microsoft Teams oder bei Bildschirmaufzeichnungen nicht mehr funktionieren. In diesem Leitfaden werden wir verschiedene Fehlerbehebungstechniken untersuchen, die Ihnen dabei helfen, Animationen zu beheben, die in PowerPoint unter Windows nicht funktionieren. Warum funktionieren meine PowerPoint-Animationen nicht? Wir haben festgestellt, dass einige mögliche Gründe dafür, dass die Animation in PowerPoint unter Windows nicht funktioniert, folgende sein können: Aus persönlichen Gründen

So richten Sie die automatische Aktualisierung einer Webseite ein So richten Sie die automatische Aktualisierung einer Webseite ein Oct 26, 2023 am 10:52 AM

Um die automatische Aktualisierung einer Webseite festzulegen, können Sie das HTML-Tag „meta“, die JavaScript-Funktion „setTimeout“, die Funktion „setInterval“ oder den HTTP-Header „Refresh“ verwenden. Detaillierte Einführung: 1. Verwenden Sie das „meta“-Tag des HTML-Dokuments, um die automatische Aktualisierung der Webseite festzulegen "Funktion von JavaScript usw.

Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen Mar 15, 2024 am 10:30 AM

Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim Öffnen der Browser-Webseite längere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs Lösungen für das Problem vor, dass Webseitenbilder nicht geladen werden können. Webseitenbilder können nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer geöffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ groß Möglicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden können, liegt das möglicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.

Was tun, wenn die Webseite nicht geöffnet werden kann? Was tun, wenn die Webseite nicht geöffnet werden kann? Feb 21, 2024 am 10:24 AM

So lösen Sie das Problem, dass Webseiten nicht geöffnet werden. Mit der rasanten Entwicklung des Internets verlassen sich die Menschen zunehmend auf das Internet, um Informationen zu erhalten, zu kommunizieren und sich zu unterhalten. Manchmal stoßen wir jedoch auf das Problem, dass die Webseite nicht geöffnet werden kann, was uns große Probleme bereitet. In diesem Artikel werden einige gängige Methoden vorgestellt, mit denen Sie das Problem lösen können, dass Webseiten nicht geöffnet werden. Zuerst müssen wir feststellen, warum die Webseite nicht geöffnet werden kann. Mögliche Gründe sind Netzwerkprobleme, Serverprobleme, Probleme mit den Browsereinstellungen usw. Hier sind einige Lösungen: Überprüfen Sie die Netzwerkverbindung: Zuerst benötigen wir

So richten Sie die PPT-Animation so ein, dass sie zuerst aufgerufen und dann beendet wird So richten Sie die PPT-Animation so ein, dass sie zuerst aufgerufen und dann beendet wird Mar 20, 2024 am 09:30 AM

Wir verwenden ppt häufig in unserer täglichen Arbeit. Sind Sie also mit allen Bedienfunktionen in ppt vertraut? Zum Beispiel: Wie werden Animationseffekte in ppt festgelegt, wie werden Umschalteffekte festgelegt und wie lang ist die Effektdauer jeder Animation? Kann jede Folie automatisch abgespielt werden, die PPT-Animation aufrufen und dann verlassen usw. In der heutigen Ausgabe werde ich Ihnen die spezifischen Schritte zum Aufrufen und Verlassen der PPT-Animation mitteilen. Schauen Sie sich diese an. 1. Zuerst öffnen wir ppt auf dem Computer und klicken außerhalb des Textfelds, um das Textfeld auszuwählen (wie im roten Kreis in der Abbildung unten dargestellt). 2. Klicken Sie dann in der Menüleiste auf [Animation] und wählen Sie den Effekt [Löschen] (wie im roten Kreis in der Abbildung dargestellt). 3. Klicken Sie anschließend auf [

See all articles