Contenu
- Véritable 3D
- 3D sans lunettes
- Ma première animation image par image
- Comment créer des GIF animés
- Éclater
- Réduire l'espace blanc
- Positionnement du contenu sur une page Web
- Position.htm
- Stéréogrammes 3D Wiggle
- Avec ou sans lunettes
- Quelques liens plus utiles
J'ai créé un programme qui crée des GIF animés à partir de photos et de vidéos. Ensuite, je l'ai utilisé pour faire des animations 3D.
Véritable 3D
Regardez votre ordinateur ou votre téléphone et chaque œil voit sous un angle différent. Deux images sont combinées pour former une image en trois dimensions. Les images 3D réelles sont des images stéréoscopiques. Une image gauche et droite sont fusionnées. En portant un casque ou une paire de lunettes, chaque œil voit une image différente. J'ai acheté une paire de lunettes anaglyphes tridimensionnelles et j'ai commencé à faire des images qui sortaient de l'écran.
Les vraies images stéréoscopiques peuvent avoir fière allure. L'image peut paraître plus intéressante que la réalité. J'ai pris une photo de ma tasse de café et c'est devenu l'une de mes photos les plus populaires. C'est intéressant car la poignée semble sortir de l'écran. Le problème est que la plupart des gens ne peuvent pas voir l'effet. Certaines personnes ne peuvent pas voir en stéréo et la plupart des gens n'ont pas de lunettes spéciales. Un autre problème est qu'ils n'ont pas l'air bien lorsqu'ils sont vus sans lunettes 3D.
Gardez à l'esprit
Une paire de lunettes 3D de haute qualité coûte environ 8 $.
3D sans lunettes
GIF de profondeur de division sont des GIF animés avec des barres. Les images semblent être contenues dans votre écran plat. Placer des barres sur une image peut donner l'impression que les barres sont devant tout le reste. Retirer une partie d'une barre peut donner l'impression que les barres sont derrière quelque chose. Lorsque le sujet n'est plus obstrué par les barres, il semble être devant elles. Les bars étaient tout en avant. Puis une image l'a dépassée. Il semble donc être devant l'écran. C'est un effet de rupture tridimensionnel.
Stéréoscopie Wiggle est créé en alternant rapidement entre des images similaires. Prenez deux photos du même sujet sous deux angles différents. Créez ensuite un GIF ou une vidéo animée. Passer rapidement d'une perspective à une autre peut ajouter une apparence de profondeur. Les deux yeux voient les deux images donc ce n'est pas une vraie stéréoscopie.
Le principal avantage des animations de profondeur fractionnée et de la stéréoscopie ondulée par rapport aux images stéréoscopiques est qu'elles peuvent fournir un effet tridimensionnel sans lunettes. Vous pouvez obtenir des images intéressantes et il est facile de les partager. Les principaux inconvénients sont que l'effet est limité et qu'ils peuvent être plus difficiles à réaliser. De vraies images 3D peuvent fournir plus de profondeur et elles peuvent être réalisées en 30 secondes.
Ma première animation image par image
Comment créer des GIF animés
Les GIF animés sont créés à l'aide d'une série d'images. Prenez 2 photos ou plus ou une courte vidéo. Enregistrez ensuite les images sous forme de GIF animé. Ils sont généralement petits et courts. La plupart répètent sans cesse. Pour une transition en douceur, les images de début et de fin doivent être similaires ou identiques. Dans l'animation ci-dessus, j'ai ajouté les images dans l'ordre. Ensuite, j'ai ajouté les mêmes images dans l'ordre inverse. Cela se termine au début.
Ils sont populaires en ligne, mais les visualiser et travailler avec eux hors ligne peut être difficile. Souvent, vous n'obtenez que la première image. Je ne pouvais afficher les GIF que sur des pages Web, dans des e-mails ou en ouvrant les images avec un navigateur. Cliquez avec le bouton droit de la souris et sélectionnez «Ouvrir avec» votre navigateur préféré.Les animations qui semblent bonnes sur votre ordinateur ou votre site Web peuvent être bloquées sur les sites de médias sociaux si les dimensions sont trop grandes.
Pour enregistrer une vidéo ou une série d'images sous forme de GIF animé, vous devrez trouver un programme ou créer le vôtre. Les fabricants de GIF en ligne sont faciles à trouver. Vous pouvez également utiliser un programme de peinture comme Photoshop. Toutes mes animations ont été réalisées à l'aide d'un créateur de GIF 3D que j'ai créé pendant que j'apprenais à créer des images en trois dimensions qui ne nécessitaient pas de lunettes spéciales.
Les GIF ont moins de couleurs. Cela réduit donc la qualité des images. Vous voudrez peut-être faire les animations sous forme de vidéos, de fichiers WebP ou d'APNG. Un APNG utilise des images PNG pour l'animation au lieu de GIF. Avec ces alternatives, vous obtenez une meilleure qualité et une taille de fichier plus petite. L'inconvénient est qu'il est moins susceptible de jouer. Une fois joint à un e-mail, je devais enregistrer le fichier PNG et l'ouvrir dans un navigateur Web pour afficher l'animation.
J'ai utilisé TinyPNG pour réduire la taille de mon animation Star Wars de 70%. Pour la plus petite taille possible, je recommande WebP ou vidéo. Il est facile de faire en sorte qu'une courte vidéo se comporte comme un GIF animé sur une page Web. L'élément vidéo dans le code ci-dessous lit la première vidéo qui fonctionne avec le navigateur de l'utilisateur. L'élément image affiche la première image qui fonctionne.
boucle de lecture automatique de la vidéo coupée en ligne title = "Animation 3D"> source src = "3DVid.webm" type = "video / webm"> source src = "3DVid.mp4" type = "video / mp4"> / video> image> source srcset = "3DAnimation.webp" type = "image / webp"> img src = "3DAnimation.gif"> / image> Un autre truc Créez des barrières et des frontières. Puis percez-les.
Éclater
L'effet de rupture de l'écran fonctionne mieux lorsque les objets se rapprochent de la caméra. En se rapprochant, il devient un peu plus gros. L'ajout de barres n'est pas le seul moyen de donner à une image un aspect 3D. Vous créez une illusion d'optique. Essayez de tromper le spectateur en lui faisant faire de fausses hypothèses en créant de fausses frontières.
Pour l'animation du réservoir, j'ai pu utiliser un filtre pour effacer la couleur de fond. Le plus difficile n'est pas d'effacer accidentellement l'objet en mouvement pendant que vous supprimez les couleurs d'arrière-plan. Dans la deuxième animation, j'ai utilisé une image fantôme transparente du domaine public. Tout ce que j'avais à faire était de changer la taille du fantôme 50 fois et j'ai demandé à mon programme de le faire pour moi.
La photo ci-dessus semble avoir beaucoup d'espace blanc en dessous. Étant donné que la photo est censée paraître plus petite qu'elle ne l'est, la distance entre elle et l'autre contenu de la page doit être minimisée. L'espace blanc peut être réduit en ajoutant du texte ou des images à l'arrière-plan de l'image ou en les plaçant sous l'image. J'ai ajouté du texte à l'image mais j'aurais pu en faire plus. Si l'image ci-dessus avait un fond transparent, je pourrais la mettre sur une page Web avec du texte en dessous sous l'image d'arrière-plan. L'animation serait au-dessus d'un autre contenu, mais le texte serait visible jusqu'à ce que le fantôme soit au-dessus. L'effet d'éclatement fonctionne mieux lorsque l'arrière-plan de la page correspond à l'image. J'ai fait les images sur cette page pour un fond blanc. Les arrière-plans transparents correspondent toujours à l'arrière-plan. Au lieu d'avoir du blanc autour de l'image d'arrière-plan, il peut s'agir de la même couleur que la zone qui l'entoure. Voyez si le créateur de GIF ou le programme de peinture que vous utilisez vous permet de créer un arrière-plan transparent. Les types de fichiers qui prennent en charge la transparence incluent PNG, WebP, WebM, Mov et GIF. Les images et les vidéos peuvent être transparentes. Pour voir un exemple, consultez mon animation Star Wars. Ouvrez-le dans un nouvel onglet pour le voir avec un fond noir. Je ne recommande pas de créer des GIF avec des arrière-plans transparents. Les bords lisses peuvent devenir irréguliers.
Réduire l'espace blanc
Positionnement du contenu sur une page Web
Le code ci-dessous modifie la position du texte sur la page afin qu'il soit sous l'image. GetBoundingClientRect obtient l'emplacement et les dimensions de l'image. La position lui indique que la position est définie à l'aide du code sur la page. La définition des valeurs gauche et supérieure lui indique où le texte doit apparaître. Vous pouvez copier le code et l'enregistrer dans un éditeur de texte comme NotePad dans un répertoire avec une image.
Le nom de fichier "transparent.gif" doit être remplacé par le fichier que vous souhaitez utiliser. Pour de meilleurs résultats, utilisez un GIF transparent. Le fichier s'ouvrira dans votre navigateur Web par défaut. Changer la position du contenu sur une page Web peut être très utile pour les effets spéciaux, les jeux et les éditeurs d'images en ligne.
Position.htm
! DOCTYPE html> html> head> meta charset = "utf-8"> meta id = "viewport" name = "viewport" content = "user-scalable = no, initial-scale = 1, width = device-width, height = device-height "/> title> Déplacement de texte sous une image / titre> / head> body> center> img id =" pic1 "style =" max-width: 90% ";> div id =" div0 "style = "font-size: 120%; text-align: justify; visibilité: hidden;"> Rendre une image transparente plus petite qu'elle ne l'est en plaçant du texte ou des images en dessous./div> div id = "div1" style = "position : absolu; taille de la police: 120%; marge gauche: auto; marge droite: auto; largeur: 100%; text-align: justify; zIndex: 0 "> / div> / center> script> var Pic1 = document .getElementById ("pic1"), Div0 = document.getElementById ("div0"), Div1 = document.getElementById ("div1"); function onload () // prêt {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.hauteur *. 85) + "px"; Div0.style.display = "aucun"; } Pic1.src = "transparent.gif"; }; window.onload = onload (); Div1.style.zIndex = "-1"; / script> / body> / html>
Images 3D-ish
Les GIF à profondeur divisée sont presque en 3D.
Stéréogrammes 3D Wiggle
Les stéréogrammes sont des images qui combinent une perspective gauche et droite. Les différents angles leur permettent d'être vus en 3D. Les images Wiggle sont censées pouvoir fournir un véritable effet 3D sans lunettes. Ils peuvent ajouter de la profondeur, mais ils ne semblent entrer que dans ou derrière l'écran. Pour les réaliser, il vous suffit de deux ou trois images. Une photo de transition gauche, droite et optionnelle prise entre la gauche et la droite. La photo du milieu serait utilisée deux fois.
Créer des GIF qui bougent est vraiment facile, mais il peut être difficile d'en créer que les gens aiment regarder. Limitez la quantité de secousses. Habituellement, vous voulez que les deux images soient mises au point sur le sujet principal afin que le sujet de l'image bouge à peine. Il ne devrait pas donner l'impression que vous enregistrez un tremblement de terre.
Images partiellement 3D Les stéréogrammes Wiggle sont vus par les deux yeux afin que vous n'obteniez pas le plein effet.
Avec ou sans lunettes
La stéréoscopie Wiggle est comme une imitation bon marché de vraies images stéréoscopiques. Les images sont tremblantes et elles ne ressortent pas suffisamment de l'écran. Les vraies images 3D ont tendance à avoir une meilleure apparence, mais elles nécessitent des lunettes spéciales. Utilisez la stéréoscopie wiggle si vous voulez que plus de gens voient l'effet. Utilisez de la vraie 3D pour de meilleurs résultats. Vous pouvez utiliser les mêmes images pour faire les deux.
Les GIF animés en profondeur divisée ne fournissent pas un véritable effet 3D et nécessitent plus de temps et d'efforts. Ils ont tendance à être plus intéressants à regarder que les images stéréoscopiques ondulées. Je pense donc qu'ils valent l'effort supplémentaire. J'ai aimé les résultats que j'ai obtenus lorsque j'ai ajouté des barres, mais mes préférées semblent quitter l'image.
Si vous souhaitez créer des images en trois dimensions, je vous recommande de vous procurer une paire de lunettes en trois dimensions pour que vous puissiez faire de vraies animations en 3D, en 3D et en profondeur divisée. Créez des images qui ont l'air bien avec les lunettes et celles qui ont l'air bien sans elles. Les images sur cette page sont quelques-unes des premières animations que j'ai faites. J'apprenais encore à les fabriquer et je n'avais pas beaucoup de pratique. Utilisez-les comme exemples, mais essayez de faire mieux.
Quelques liens plus utiles
- Comment créer des images et des vidéos 3D sans trois dimensions ...
Apprenez à convertir 2D en 3D. Faire des photos en trois dimensions peut être simple et rapide. Je peux faire une bonne image tridimensionnelle en 30 secondes. Pourquoi se contenter d'images plates quand on peut ajouter l'illusion de profondeur. Cela nécessite des lunettes spéciales mais elles - Comment devenir invisible sur une caméra à l'aide d'effets vidéo d'invisibilité - Résultats d'experts
Aimeriez-vous devenir invisible? J'ai expérimenté pour voir si je pouvais voir à travers les objets sur ma webcam en rendant les couleurs transparentes. Découvrez comment fonctionne l'invisibilité et comment devenir facilement invisible à l'aide d'un effet d'invisibilité.
