Inhalt
- Echtes 3D
- 3D ohne Brille
- Meine erste Stop-Motion-Animation
- So erstellen Sie animierte GIFs
- Ausbrechen
- Reduzierung des Leerraums
- Positionieren von Inhalten auf einer Webseite
- Position.htm
- Wackeln Sie mit 3D-Stereogrammen
- Mit oder ohne Brille
- Einige weitere hilfreiche Links
Ich habe ein Programm erstellt, das animierte GIFs aus Fotos und Videos erstellt. Dann habe ich damit 3D-Animationen gemacht.
Echtes 3D
Schauen Sie auf Ihren Computer oder Ihr Telefon und jedes Auge sieht aus einer anderen Perspektive. Zwei Bilder werden zu einem dreidimensionalen Bild kombiniert. Echte 3D-Bilder sind stereoskopische Bilder. Ein linkes und ein rechtes Bild werden zusammengeführt. Beim Tragen eines Headsets oder einer Brille sieht jedes Auge ein anderes Bild. Ich kaufte eine dreidimensionale Anaglyphenbrille und fing an, Bilder zu machen, die vom Bildschirm kamen.
Echte stereoskopische Bilder können großartig aussehen. Das Bild kann interessanter aussehen als das Original. Ich machte ein Foto von meiner Kaffeetasse und es wurde eines meiner beliebtesten Fotos. Es ist interessant, weil der Griff aus dem Bildschirm zu kommen scheint. Das Problem ist, dass die meisten Menschen den Effekt nicht sehen können. Einige Leute können nicht in Stereo sehen und die meisten Leute haben keine spezielle Brille. Ein weiteres Problem ist, dass sie ohne 3D-Brille nicht gut aussehen.
Merken Sie sich
Eine hochwertige 3D-Brille kostet etwa 8 US-Dollar.
3D ohne Brille
GIFs mit geteilter Tiefe sind animierte GIFs mit Balken. Bilder scheinen in Ihrem Flachbildschirm enthalten zu sein. Durch das Platzieren von Balken auf einem Bild kann es so aussehen, als ob sich die Balken vor allem anderen befinden. Durch Entfernen eines Teils eines Balkens kann es so aussehen, als ob sich die Balken hinter etwas befinden. Wenn das Motiv nicht mehr durch die Balken behindert wird, scheint es vor ihnen zu sein. Die Bars waren ganz vorne. Dann bewegte sich ein Bild daran vorbei. Es scheint also vor dem Bildschirm zu sein. Es ist ein dreidimensionaler Ausbruchseffekt.
Wackelstereoskopie wird durch schnelles Wechseln zwischen ähnlichen Bildern erstellt. Nehmen Sie zwei Bilder desselben Motivs aus zwei verschiedenen Perspektiven auf. Dann machen Sie ein animiertes GIF oder Video. Ein schneller Wechsel von einer Perspektive in eine andere kann das Erscheinungsbild von Tiefe verstärken. Beide Augen sehen beide Bilder, es handelt sich also nicht um eine echte Stereoskopie.
Der Hauptvorteil von Animationen mit geteilter Tiefe und Wackelstereoskopie gegenüber stereoskopischen Bildern besteht darin, dass sie ohne Brille einen dreidimensionalen Effekt erzielen können. Sie können einige interessante Bilder erhalten und es ist einfach, sie zu teilen. Die Hauptnachteile sind, dass der Effekt begrenzt ist und es schwieriger sein kann, sie zu erzielen. Echte 3D-Bilder können mehr Tiefe bieten und in 30 Sekunden erstellt werden.
Meine erste Stop-Motion-Animation
So erstellen Sie animierte GIFs
Animierte GIFs werden mit einer Reihe von Bildern erstellt. Nehmen Sie 2 oder mehr Fotos oder ein kurzes Video auf. Speichern Sie dann die Bilder als animiertes GIF. Sie sind normalerweise klein und kurz. Die meisten wiederholen sich immer wieder. Für einen reibungslosen Übergang sollten die Anfangs- und Endbilder ähnlich oder gleich sein. In der obigen Animation habe ich die Bilder der Reihe nach hinzugefügt. Dann habe ich die gleichen Bilder in umgekehrter Reihenfolge hinzugefügt. Es endet am Anfang.
Sie sind online beliebt, aber das Anzeigen und Arbeiten mit ihnen offline kann schwierig sein. Oft bekommt man nur das erste Bild. Ich konnte die GIFs nur auf Webseiten, in E-Mails oder durch Öffnen der Bilder mit einem Browser anzeigen. Klicken Sie mit der rechten Maustaste und wählen Sie "Öffnen mit" Ihres bevorzugten Browsers.Animationen, die auf Ihrem Computer oder Ihrer Website gut aussehen, können auf Social Media-Websites blockiert werden, wenn die Abmessungen zu groß sind.
Um ein Video oder eine Reihe von Bildern als animiertes GIF zu speichern, müssen Sie ein Programm finden oder ein eigenes erstellen. Online-GIF-Hersteller sind leicht zu finden. Sie können auch ein Malprogramm wie Photoshop verwenden. Alle meine Animationen wurden mit einem 3D-GIF-Maker erstellt, den ich erstellt habe, als ich lernte, wie man dreidimensionale Bilder erstellt, für die keine spezielle Brille erforderlich ist.
GIFs haben weniger Farben. Dadurch wird die Qualität der Bilder verringert. Möglicherweise möchten Sie die Animationen als Videos, WebP-Dateien oder APNGs ausführen. Ein APNG verwendet PNG-Bilder für die Animation anstelle von GIFs. Mit diesen Alternativen erhalten Sie eine bessere Qualität und eine kleinere Dateigröße. Der Nachteil ist, dass es weniger wahrscheinlich ist, zu spielen. Beim Anhängen an eine E-Mail musste ich die PNG-Datei speichern und in einem Webbrowser öffnen, um die Animation anzuzeigen.
Ich habe TinyPNG verwendet, um die Größe meiner Star Wars-Animation um 70% zu reduzieren. Für die kleinstmögliche Größe empfehle ich WebP oder Video. Es ist einfach, ein kurzes Video wie ein animiertes GIF auf einer Webseite zu verhalten. Das Videoelement im folgenden Code spielt das erste Video ab, das mit dem Browser des Benutzers funktioniert. Das Bildelement zeigt das erste Bild an, das funktioniert.
Video-Autoplay-Schleife stummgeschaltet inline title = "3D-Animation"> source src = "3DVid.webm" type = "video / webm"> source src = "3DVid.mp4" type = "video / mp4"> / video> picture> source srcset = "3DAnimation.webp" type = "image / webp"> img src = "3DAnimation.gif"> / picture> Ein weiterer Trick Machen Sie Barrieren und Grenzen. Dann durchbrich sie.
Ausbrechen
Das Ausbrechen des Bildschirmeffekts funktioniert besser, wenn sich Objekte der Kamera nähern. Je näher es kommt, desto größer wird es. Das Hinzufügen von Balken ist nicht die einzige Möglichkeit, ein Bild 3D-artig aussehen zu lassen. Sie erzeugen eine optische Täuschung. Versuchen Sie, den Betrachter dazu zu bringen, falsche Annahmen zu treffen, indem Sie falsche Grenzen setzen.
Für die Tankanimation konnte ich einen Filter verwenden, um die Hintergrundfarbe zu löschen. Am schwierigsten ist es, das sich bewegende Objekt nicht versehentlich zu löschen, während Sie die Hintergrundfarben entfernen. In der zweiten Animation habe ich ein transparentes gemeinfreies Geisterbild verwendet. Alles was ich tun musste, war die Größe des Geistes 50 Mal zu ändern und ich bekam mein Programm, um das für mich zu tun.
Das Foto oben scheint viel Leerraum darunter zu haben. Da das Foto kleiner erscheinen soll als es ist, sollte der Abstand zwischen ihm und dem anderen Inhalt der Seite minimiert werden. Der Leerraum kann reduziert werden, indem Text oder Bilder zum Hintergrund des Bildes hinzugefügt oder unter das Bild gelegt werden. Ich habe dem Bild Text hinzugefügt, aber ich hätte mehr tun können. Wenn das Bild oben einen transparenten Hintergrund hätte, könnte ich es auf eine Webseite mit Text darunter unter dem Hintergrundbild setzen. Die Animation würde über anderen Inhalten liegen, aber der Text würde sichtbar sein, bis der Geist darüber war. Der Breakout-Effekt funktioniert am besten, wenn der Seitenhintergrund mit dem Bild übereinstimmt. Ich habe die Bilder auf dieser Seite für einen weißen Hintergrund gemacht. Transparente Hintergründe stimmen immer mit dem Hintergrund überein. Anstatt Weiß um das Hintergrundbild zu haben, könnte es dieselbe Farbe haben wie der Bereich um das Hintergrundbild. Überprüfen Sie, ob Sie mit dem von Ihnen verwendeten GIF-Maker oder Malprogramm einen transparenten Hintergrund erstellen können. Zu den Dateitypen, die Transparenz unterstützen, gehören PNG, WebP, WebM, Mov und GIF. Bilder und Videos können durchsichtig sein. Um ein Beispiel zu sehen, schau dir meine Star Wars-Animation an. Öffnen Sie es in einem neuen Tab, um es mit einem schwarzen Hintergrund anzuzeigen. Ich empfehle nicht, GIFs mit transparentem Hintergrund zu erstellen. Glatte Kanten können gezackt werden.
Reduzierung des Leerraums
Positionieren von Inhalten auf einer Webseite
Der folgende Code ändert die Position des Textes auf der Seite so, dass er sich unter dem Bild befindet. GetBoundingClientRect ruft den Ort und die Abmessungen des Bildes ab. Position gibt an, dass die Position mithilfe des Codes auf der Seite festgelegt wird. Durch Festlegen der linken und oberen Werte wird angegeben, wo der Text angezeigt werden soll. Sie können den Code kopieren und in einem Texteditor wie NotePad in einem Verzeichnis mit einem Bild speichern.
Der Dateiname "transparent.gif" sollte in die Datei geändert werden, die Sie verwenden möchten. Verwenden Sie für optimale Ergebnisse ein transparentes GIF. Die Datei wird in Ihrem Standard-Webbrowser geöffnet. Das Ändern der Position des Inhalts auf einer Webseite kann für Spezialeffekte, Spiele und Online-Bildbearbeitungsprogramme sehr nützlich sein.
Position.htm
! DOCTYPE html> html> head> meta charset = "utf-8"> meta id = "viewport" name = "viewport" content = "benutzerskalierbar = nein, initial-scale = 1, width = gerätebreite, height = Gerätehöhe "/> Titel> Verschieben von Text unter einem Bild / Titel> / Kopf> Körper> Mitte> img id =" pic1 "style =" max-width: 90% ";> div id =" div0 "style = "Schriftgröße: 120%; Textausrichtung: Ausrichten; Sichtbarkeit: Ausgeblendet;"> Lassen Sie ein transparentes Bild kleiner erscheinen als es ist, indem Sie Text oder Bilder darunter platzieren. / div> div id = "div1" style = "position : absolut; Schriftgröße: 120%; Rand links: automatisch; Rand rechts: automatisch; Breite: 100%; Textausrichtung: ausrichten; zIndex: 0 "> / div> / center> script> var Pic1 = Dokument .getElementById ("pic1"), Div0 = document.getElementById ("div0"), Div1 = document.getElementById ("div1"); function onload () // ready {Pic1.onload = function () {Pic1.onload = ""; const rect = Pic1.getBoundingClientRect (); var LeftMargin = rect.width *. 14; Pic1.style.marginLeft = LeftMargin + "px"; Div0.style.width = rect.width + LeftMargin + "px"; Div1.style.width = Div0.style.width; const rect2 = Div0.getBoundingClientRect (); Div1.innerHTML = Div0.innerHTML; Div1.style.left = rect2.left + "px"; Div1.style.top = (rect.top + rect.height *. 85) + "px"; Div0.style.display = "keine"; } Pic1.src = "transparent.gif"; }; window.onload = onload (); Div1.style.zIndex = "-1"; / script> / body> / html>
3D-ish Bilder
GIFs mit geteilter Tiefe sind fast 3D.
Wackeln Sie mit 3D-Stereogrammen
Stereogramme sind Bilder, die eine linke und eine rechte Perspektive kombinieren. Durch die verschiedenen Winkel können sie in 3D angezeigt werden. Wackelbilder sollen in der Lage sein, einen echten 3D-Effekt ohne Brille zu erzielen. Sie können Tiefe hinzufügen, scheinen jedoch nur in oder hinter den Bildschirm zu gelangen. Um sie zu erstellen, benötigen Sie nur zwei oder drei Bilder. Ein linkes, rechtes und ein optionales Übergangsfoto zwischen links und rechts. Das mittlere Foto würde zweimal verwendet.
Das Erstellen von GIFs zum Wackeln ist wirklich einfach, aber es kann schwierig sein, solche zu erstellen, die die Leute gerne anschauen. Begrenzen Sie das Schütteln. Normalerweise möchten Sie, dass beide Bilder auf das Hauptmotiv fokussiert sind, sodass sich das Motiv des Bildes kaum bewegt. Es sollte nicht so aussehen, als würden Sie ein Erdbeben aufzeichnen.
Teilweise 3D-Bilder Wackelstereogramme werden von beiden Augen gesehen, sodass Sie nicht die volle Wirkung erzielen.
Mit oder ohne Brille
Wackelstereoskopie ist wie ein billiger Abschlag von echten stereoskopischen Bildern. Die Bilder sind wackelig und erscheinen nicht weit genug aus dem Bildschirm. Echte 3D-Bilder sehen in der Regel viel besser aus, erfordern jedoch eine spezielle Brille. Verwenden Sie die Wackelstereoskopie, wenn mehr Personen den Effekt sehen sollen. Verwenden Sie echtes 3D für bessere Ergebnisse. Sie können dieselben Bilder verwenden, um beides zu tun.
Animierte GIFs mit geteilter Tiefe bieten keinen echten 3D-Effekt und erfordern mehr Zeit und Mühe. Sie sind in der Regel interessanter anzusehen als stereoskopische Bilder zu wackeln. Ich denke, sie sind die zusätzliche Mühe wert. Ich mochte die Ergebnisse, die ich beim Hinzufügen von Balken erhalten habe, aber meine Favoriten scheinen das Bild zu verlassen.
Wenn Sie dreidimensionale Bilder machen möchten, empfehle ich eine dreidimensionale Brille, damit Sie echte 3D-, Wackel-3D- und Split-Tiefen-Animationen erstellen können. Machen Sie Bilder, die mit der Brille gut aussehen, und solche, die ohne sie gut aussehen. Die Bilder auf dieser Seite sind einige der ersten Animationen, die ich gemacht habe. Ich lernte immer noch, wie man sie macht und ich hatte nicht viel Übung. Verwenden Sie sie als Beispiele, aber versuchen Sie es besser zu machen.
Einige weitere hilfreiche Links
- So erstellen Sie 3D-Bilder und -Videos ohne dreidimensionale ...
Erfahren Sie, wie Sie 2D in 3D konvertieren. Das Erstellen dreidimensionaler Fotos kann einfach und schnell sein. Ich kann in 30 Sekunden ein gutes dreidimensionales Bild machen. Warum sollten Sie sich mit flachen Bildern zufrieden geben, wenn Sie die Illusion von Tiefe hinzufügen können? Es erfordert spezielle Brillen, aber sie a - So werden Sie mit Invisibility-Videoeffekten vor der Kamera unsichtbar - Expertenergebnisse
Möchten Sie unsichtbar werden? Ich habe experimentiert, um zu sehen, ob ich Objekte auf meiner Webcam durchschauen kann, indem ich Farben transparent mache. Erfahren Sie, wie Unsichtbarkeit funktioniert und wie Sie mithilfe eines Unsichtbarkeitseffekts leicht unsichtbar werden.
