1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: Grafik / Animierte GIF-Grafiken</title>
<link rel="stylesheet" type="text/css" href="../src/selfhtml.css">
<meta name="description" content="Welche Grafikformate fr Web-Seiten besonders geeignet sind.">
<meta name="keywords" content="SELFHTML, Grafik, Pixelgrafik, Vektorgrafik, JPEG, JPG, GIF, PNG, LuraWave, SVG">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/grafik/formate.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../src/favicon.ico">
<link rel="author" title="Impressum" href="../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../index.htm">
<link rel="up" title="Grafik" href="index.htm">
<link rel="next" title="Web-Projekte planen" href="../projekt/planen.htm">
<link rel="prev" title="Techniken und Begriffe der Bildbearbeitung" href="techniken.htm">
<link rel="first" title="Grafikformate fr Web-Seiten" href="formate.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../index.htm">SELFHTML</a>/<a href="../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Grafik</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../index.htm"><img src="../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Animierte GIF-Grafiken</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#allgemeines">Allgemeines zu animierten GIF-Grafiken</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#diashow">Dia-Show-Effekte durch animierte GIF-Grafiken</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#daumenkino">Daumenkino-Effekte durch animierte GIF-Grafiken</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#vorgehensweise">Vorgehensweise beim Erstellen animierter GIF-Grafiken</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="allgemeines">Allgemeines zu animierten GIF-Grafiken</a></h2>
<p>Das <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="formate.htm#gif">GIF-Format</a> untersttzt in der neueren, 89er Version die Mglichkeit, mehrere Grafiken in ein und derselben Grafikdatei zusammenzufassen. Die Einzelgrafiken der Datei werden nacheinander "abgespult" und angezeigt. Dabei ist es auch mglich, Kontroll-Befehle mit abzuspeichern, z.B. Verzgerungszeiten zwischen den einzelnen Bildern. Dieses Feature bietet Ihnen zwei interessante Einsatzmglichkeiten:</p>
<ul>
<li>Sie knnen eine automatisch ablaufende "Dia-Show" mehrerer verschiedener Bilder programmieren.</li>
<li>Sie knnen eine Sequenz hnlicher und aufeinander aufbauender Bilder in einer GIF-Datei speichern. Dadurch ergibt sich ein "Daumenkino-Effekt", d.h. eine einfache Video-Animation.</li>
</ul>
<p>Mit Hilfe von animierten GIF-Grafiken knnen Sie also bewegte Elemente auf Ihre Web-Seiten bringen, ohne in Programmiersprachen wie Java einsteigen zu mssen.</p>
<p>Beachten Sie aber auch, dass animierte GIF-Grafiken schnell eine kritische Gre erreichen. Denn mehrere Einzelgrafiken in einer Grafikdatei bentigen zwangslufig mehr Speicher. Animationen sollten Sie daher nur aus kleinen Grafiken erzeugen. Ferner ist im Hinblick aufs Web-Design darauf hinzuweisen, dass animierte Elemente unwillkrlich die Aufmerksamkeit des Betrachters auf sich lenken und dadurch aber von vielleicht wichtigeren Inhalten einer Seite, wie Navigation oder Information, ablenken. Setzen Sie animierte GIFs daher vorsichtig und mit Bedacht ein. Das sprichwrtliche Gezappel auf manchen Web-Seiten fr berflssiges Gimmicks ist mittlerweile verpnt und gilt als stmperhaft.</p>
<p>Das Erstellen animierter GIF-Grafiken wird von vielen professionellen Grafikprogrammen untersttzt. Daneben gibt es Spezialprogramme, mit deren Hilfe Sie bereits vorhandene Grafiken zu animierten Grafiken zusammenstellen knnen.</p>
<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><a class="an" name="diashow">Dia-Show-Effekte durch animierte GIF-Grafiken</a></h2>
<p>Dia-Show-Effekte knnen Sie z.B. verwenden, um in schneller Abfolge die typischen Produkte Ihrer Firma anzuzeigen, oder um in einem interaktiven Lernprojekt zum Erlernen einer Fremdsprache neue Vokabeln kurz einzublenden ("unterbewusst lernen"). Sie knnen auch mehrere mit einer Gesamtbedeutung assoziierten Bilder in Reihe schalten und auf diese Weise animierte Symbole oder animierte Cliparts prsentieren. Wichtig ist, dass die Einzelbilder fr den Anwender einen nachvollziehbaren Zusammenhang ergeben. Die Anzeigedauer der Einzelbilder knnen Sie frei einstellen.</p>
<h3>Typische Dia-Show-Effekte:</h3>
<table class="reftable" cellpadding="8" cellspacing="0" border="1">
<tr>
<td valign="middle">
<img src="anim_gif1.gif" width="150" height="50" alt="animiertes GIF mit Dia-Show-Effekt 1">
</td>
<td valign="middle">
<img src="anim_gif2.gif" width="150" height="150" alt="animiertes GIF mit Dia-Show-Effekt 2">
</td>
</tr></table><br>
<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><a class="an" name="daumenkino">Daumenkino-Effekte durch animierte GIF-Grafiken</a></h2>
<p>Daumenkino-Effekte knnen Sie z.B. verwenden, um Cliparts zu einfachen Trickfilmsequenzen zu erweitern, um wissenschaftliche Ablaufprozesse zu visualisieren, oder um in der technischen Dokumentation Handgriffe und andere zeitliche Ablufe zu verdeutlichen. Die Geschwindigkeit der Bildsequenzen und damit die Ablaufgeschwindigkeit knnen Sie frei einstellen.</p>
<h3>Typische Daumenkino-Effekte:</h3>
<table class="reftable" cellpadding="8" cellspacing="0" border="1">
<tr>
<td valign="middle">
<img src="anim_gif3.gif" width="64" height="64" alt="animiertes GIF mit Daumenkino-Effekt 1">
</td>
<td valign="middle">
<img src="anim_gif4.gif" width="40" height="40" alt="animiertes GIF mit Daumenkino-Effekt 2">
</td>
</tr></table><br>
<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><a class="an" name="vorgehensweise">Vorgehensweise beim Erstellen animierter GIF-Grafiken</a></h2>
<p>Bevor Sie eine animierte Grafik erstellen knnen, mssen Sie folgende Vorbereitungen treffen:</p>
<ul>
<li>Sie mssen die Einzelbilder mit Hilfe eines geeigneten Grafikprogramms erstellen bzw. auswhlen.</li>
<li>Sie sollten alle Bilder in neue Grafikdateien mit einheitlicher <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="techniken.htm#bildgroesse">Bildgre</a> und einheitlicher <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="techniken.htm#farbpaletten">Farbpalette</a> kopieren.</li>
<li>Speichern Sie alle auf diese Weise erzeugten Bilder als GIF-Grafiken ab. Vergeben Sie dabei am besten durchnummerierte Dateinamen wie "bild1.gif", "bild2.gif" usw., und zwar in der Reihenfolge, in der Sie die Bilder spter als Einzelbilder in der animierten Grafik ablegen wollen.</li>
</ul>
<p>Nachdem Sie diese Vorbereitungen getroffen haben, knnen Sie die Software zum Erstellen der animierten GIF-Grafik aufrufen. Da die Bedienung solcher Programme sehr unterschiedlich ist, wird hier nicht nher auf einzelne Bedienschritte eingegangen. In jedem Fall stehen Ihnen folgende Mglichkeiten zur Verfgung:</p>
<ul>
<li><b>Bild (image):</b> Indem Sie eine GIF-Grafik einfgen, wird diese Grafik als Einzelbild in die animierte Grafik bernommen.</li>
<li><b>Schleife (loop):</b> Indem Sie eine Schleife einfgen, knnen Sie bestimmen, wie oft die gesamte Bildsequenz wiederholt werden soll. Sie knnen einen Zahlenwert editieren, der die Anzahl der Abspielwiederholungen angibt.</li>
<li><b>Kontrollelement (control):</b> Indem Sie ein Kontrollelement einfgen, knnen Sie den Ablauf zwischen zwei Einzelbildern kontrollieren. Sie knnen z.B. die Verzgerung bis zur Anzeige des nchsten Einzelbilds einstellen. Ferner knnen Sie Angaben zum <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="techniken.htm#transparenz">transparenten Hintergrund</a> der Einzelbilder machen.</li>
<li><b>Text (plain text):</b> Indem Sie Text einfgen, knnen Sie den Ablauf der animierten Grafik zustzlich durch eingeblendete Textteile ergnzen. Dabei knnen Sie den Text formatieren.</li>
<li><b>Kommentare (comments):</b> Indem Sie Kommentare einfgen, knnen Sie Ihre Arbeiten intern auskommentieren. Solche Kommentare werden nicht mit angezeigt.</li>
</ul>
<p>Um das fertige Ergebnis zu betrachten, brauchen Sie natrlich ein geeignetes Anzeigeprogramm. Einige Editierprogramme fr animierte GIF-Grafiken bieten selbst die Mglichkeit des Betrachtens an. Wenn nicht, knnen Sie die Grafik auch mit Ihrem Web-Browser lokal ffnen und betrachten.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="../projekt/planen.htm"><img src="../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../projekt/planen.htm">Web-Projekte planen</a>
</td></tr>
<tr>
<td class="doc"><a href="techniken.htm"><img src="../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="techniken.htm">Techniken und Begriffe der Bildbearbeitung</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../index.htm">SELFHTML</a>/<a href="../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Grafik</a></td>
</tr>
</table>
<p>© 2007 <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
