İçerik
- Gerçek 3D
- Gözlüksüz 3D
- İlk Durak Hareket Animasyonum
- Animasyonlu GIF'ler Nasıl Yapılır
- Dışarı kırarak
- Beyaz Boşluğu Azaltma
- İçeriği Bir Web Sayfasına Konumlandırma
- Position.htm
- Wiggle 3D Stereogramları
- Gözlüklü veya Gözlüksüz
- Bazı Daha Faydalı Bağlantılar
Fotoğraflardan ve videolardan animasyonlu GIF'ler oluşturan bir program oluşturdum. Sonra bunu 3 boyutlu animasyonlar yapmak için kullandım.
Gerçek 3D
Bilgisayarınıza veya telefonunuza bakın ve her göz farklı bir açıdan görür. Üç boyutlu bir görüntü oluşturmak için iki resim bir araya getirilir. Gerçek 3D görüntüler stereoskopik görüntülerdir. Sol ve sağ görüntü birleştirilir. Kulaklık veya gözlük takarken her göz farklı bir görüntü görür. Bir çift üç boyutlu anaglif gözlük aldım ve ekrandan çıkan görüntüleri yapmaya başladım.
Gerçek stereoskopik görüntüler harika görünebilir. Görüntü, gerçek olandan daha ilginç görünebilir. Kahve kupamın fotoğrafını çektim ve en popüler fotoğraflarımdan biri oldu. Bu ilginç çünkü tutamaç ekrandan çıkıyor gibi görünüyor. Sorun, çoğu insanın etkisini görememesidir. Bazı kişiler stereoda göremez ve çoğu kişinin özel gözlükleri yoktur. Diğer bir sorun da 3D gözlük olmadan bakıldığında güzel görünmemeleridir.
Aklında tut
Yüksek kaliteli bir çift 3D gözlük yaklaşık 8 dolardır.
Gözlüksüz 3D
Bölünme derinliği GIF'leri çubuklu animasyonlu GIF'lerdir. Görüntüler düz ekranınızda yer alıyor gibi görünüyor. Bir resmin üzerine çubuklar yerleştirmek, çubukların her şeyin önünde gibi görünmesini sağlayabilir. Bir çubuğun bir kısmını çıkarmak, parmaklıkların bir şeyin arkasındaymış gibi görünmesini sağlayabilir. Konu artık çubuklarla engellenmediğinde, önlerinde gibi görünür. Barlar en öndeydi. Sonra bir görüntü geçti. Yani ekranın önünde görünüyor. Üç boyutlu bir kırılma etkisidir.
Wiggle stereoskopi benzer görüntüler arasında hızla geçiş yapılarak oluşturulur. Aynı konunun iki farklı perspektiften iki fotoğrafını çekin. Ardından animasyonlu bir GIF veya video yapın. Bir perspektiften diğerine hızla geçiş yapmak derinlik görünümünü ekleyebilir. Her iki göz de her iki görüntüyü de görür, bu yüzden gerçek stereoskopi değildir.
Bölünmüş derinlikli animasyonların ve kıpır kıpır stereoskopinin stereoskopik görüntülere göre temel avantajı, gözlüksüz üç boyutlu bir etki sağlayabilmeleridir. Bazı ilginç fotoğraflar elde edebilirsiniz ve bunları paylaşmak kolaydır. Ana dezavantajlar, etkinin sınırlı olması ve yapılmasının daha zor olabilmesidir. Gerçek 3 boyutlu görüntüler daha fazla derinlik sağlayabilir ve 30 saniyede yapılabilir.
İlk Durak Hareket Animasyonum
Animasyonlu GIF'ler Nasıl Yapılır
Animasyonlu GIF'ler bir dizi resim kullanılarak oluşturulur. 2 veya daha fazla fotoğraf veya kısa bir video çekin. Ardından görüntüleri animasyonlu GIF olarak kaydedin. Genellikle küçük ve kısadırlar. Çoğu tekrar etmeye devam ediyor. Sorunsuz bir geçiş için, başlangıç ve bitiş resimleri benzer veya aynı olmalıdır. Yukarıdaki animasyonda görüntüleri sırayla ekledim. Sonra aynı görselleri ters sırada ekledim. Başlangıçta biter.
Çevrimiçi ortamda popülerdirler ancak bunları çevrimdışı olarak görüntülemek ve onlarla çalışmak zor olabilir. Çoğunlukla sadece ilk resmi alırsınız. GIF'leri yalnızca web sayfalarında, e-postalarda veya bir tarayıcıyla açarak görüntüleyebildim. Sağ tıklayın ve tercih ettiğiniz tarayıcıyla "Aç" ı seçin.Bilgisayarınızda veya web sitenizde güzel görünen animasyonlar, boyutları çok büyükse sosyal medya sitelerinde engellenebilir.
Bir videoyu veya bir dizi görüntüyü animasyonlu GIF olarak kaydetmek için bir program bulmanız veya kendinizinkini oluşturmanız gerekir. Çevrimiçi GIF oluşturucuların bulunması kolaydır. Photoshop gibi bir boyama programı da kullanabilirsiniz. Tüm animasyonlarım, özel gözlük gerektirmeyen üç boyutlu görüntüleri nasıl yapacağımı öğrenirken yaptığım bir 3D GIF Maker ile yapıldı.
GIF'lerin daha az rengi vardır. Böylece görüntülerin kalitesini düşürür. Animasyonları videolar, WebP dosyaları veya APNG'ler olarak yapmak isteyebilirsiniz. APNG, animasyon için GIF'ler yerine PNG görüntüleri kullanır. Bu alternatiflerle daha kaliteli ve daha küçük dosya boyutu elde edersiniz. Olumsuz yanı, oynama olasılığının düşük olmasıdır. Bir e-postaya eklendiğinde, animasyonu görüntülemek için PNG dosyasını kaydetmem ve bir web tarayıcısında açmam gerekiyordu.
Star Wars animasyonumun boyutunu% 70 azaltmak için TinyPNG kullandım. Mümkün olan en küçük boyut için WebP veya video öneririm. Kısa bir videonun bir web sayfasındaki animasyonlu bir GIF gibi davranmasını sağlamak kolaydır. Aşağıdaki kodda bulunan video öğesi, kullanıcının tarayıcısıyla çalışan ilk videoyu oynatır. Resim öğesi, çalışan ilk resmi görüntüler.
video otomatik oynatma döngüsü sessiz inline title = "3D Animasyon"> kaynak src = "3DVid.webm" type = "video / webm"> kaynak src = "3DVid.mp4" type = "video / mp4"> / video> resim> kaynak srcset = "3DAnimation.webp" type = "image / webp"> img src = "3DAnimation.gif"> / resim> Başka bir numara Engeller ve sınırlar oluşturun. Sonra onları kırın.
Dışarı kırarak
Nesneler kameraya yaklaştığında ekran efektinin kırılması daha iyi sonuç verir. Yaklaştıkça biraz daha büyüyor. Bir görüntünün 3 boyutlu görünmesini sağlamanın tek yolu çubuk eklemek değildir. Optik bir illüzyon yaratıyorsunuz. Sahte sınırlar yaparak izleyiciyi yanlış varsayımlar yapması için kandırmaya çalışın.
Tank animasyonu için arka plan rengini silmek için bir filtre kullanabildim. En zor kısım, siz arka plan renklerini kaldırırken hareket eden nesneyi yanlışlıkla silmemektir. İkinci animasyonda, şeffaf bir kamu malı hayalet görüntüsü kullandım. Tek yapmam gereken hayaletin boyutunu 50 kez değiştirmekti ve bunu benim için yapacak programımı aldım.
Yukarıdaki fotoğrafın altında çok fazla beyaz alan var gibi görünüyor. Fotoğrafın olduğundan daha küçük görünmesi gerektiğinden, sayfadaki diğer içerikle arasındaki mesafe en aza indirilmelidir. Beyaz alan, resmin arka planına metin veya resimler ekleyerek veya resmin altına yerleştirilerek azaltılabilir. Resme biraz metin ekledim ama daha fazlasını yapabilirdim. Yukarıdaki görüntünün şeffaf bir arka planı olsaydı, onu bir web sayfasına, altında arka plan görüntüsünün altında metin bulunan bir sayfaya koyabilirdim. Animasyon diğer içeriğin üstünde olacaktı, ancak metin hayalet üzerine gelene kadar görünür olacaktı. Bölme efekti, sayfa arka planı görüntüyle eşleştiğinde en iyi sonucu verir. Bu sayfadaki görselleri beyaz bir arka plan için yaptım. Şeffaf arka planlar her zaman arka planla eşleşir. Arka plan görüntüsünün etrafında beyaz olması yerine, etrafındaki alanla aynı renkte olabilir. Kullandığınız GIF oluşturucunun veya boyama programının şeffaf bir arka plan oluşturmanıza izin verip vermediğine bakın. Şeffaflığı destekleyen dosya türleri arasında PNG, WebP, WebM, Mov ve GIF bulunur. Görüntüler ve videolar şeffaf olabilir. Bir örnek görmek için Star Wars animasyonuma bakın. Siyah bir arka planla görmek için yeni bir sekmede açın. Şeffaf arka plana sahip GIF'ler yapmanızı önermiyorum. Düzgün kenarlar pürüzlü hale gelebilir.
Beyaz Boşluğu Azaltma
İçeriği Bir Web Sayfasına Konumlandırma
Aşağıdaki kod, metnin sayfadaki konumunu, görüntünün altında olacak şekilde değiştirir. GetBoundingClientRect görüntünün konumunu ve boyutlarını alır. Konum, konumun sayfadaki kod kullanılarak ayarlandığını söyler. Sol ve üst değerleri ayarlamak, metnin nerede görünmesi gerektiğini söyler. Kodu kopyalayabilir ve NotePad gibi bir metin düzenleyicide resimli bir dizine kaydedebilirsiniz.
Dosya adı "transparent.gif", kullanmak istediğiniz dosyayla değiştirilmelidir. En iyi sonuçlar için şeffaf bir GIF kullanın. Dosya, varsayılan web tarayıcınızda açılacaktır. Bir web sayfasındaki içeriğin konumunu değiştirmek, özel efektler, oyunlar ve çevrimiçi görüntü düzenleyiciler için çok yararlı olabilir.
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> Bir Resim / başlık Altında Metni Taşıma> / head> body> center> img id =" pic1 "style =" max-width: 90% ";> div id =" div0 "style = "font-size: 120%; text-align: justify; visibility: hidden;"> Altına metin veya resimler yerleştirerek saydam bir görüntünün olduğundan daha küçük görünmesini sağlayın./div> div id = "div1" style = "position : mutlak; yazı tipi boyutu:% 120; kenar boşluğu: otomatik; kenar boşluğu: otomatik; genişlik:% 100; metin hizalama: yaslama; zIndex: 0 "> / div> / center> script> var Pic1 = document .getElementById ("pic1"), Div0 = document.getElementById ("div0"), Div1 = document.getElementById ("div1"); function onload () // hazır {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 = "yok"; } Pic1.src = "transparent.gif"; }; window.onload = onload (); Div1.style.zIndex = "-1"; / script> / body> / html>
3D-imge Görüntüler
Bölünmüş derinlikli GIF'ler neredeyse 3D'dir.
Wiggle 3D Stereogramları
Stereogramlar, sol ve sağ perspektifi birleştiren görüntülerdir. Farklı açılar, bunların 3B olarak görülmesine izin verir. Wiggle görüntülerinin gözlüksüz gerçek bir 3D efekti sağlayabilmesi gerekiyor. Derinlik ekleyebilirler ancak yalnızca ekranın içine veya arkasına giriyor gibi görünürler. Bunları yapmak için sadece iki veya üç resme ihtiyacınız var. Sol, sağ ve sol ile sağ arasında çekilmiş isteğe bağlı bir geçiş fotoğrafı. Ortadaki fotoğraf iki kez kullanılacaktır.
Kıpır kıpır GIF'ler yapmak gerçekten çok kolay, ancak insanların bakmayı sevdikleri GIF'leri yapmak zor olabilir. Çalkalama miktarını sınırlayın. Genellikle her iki resmin de ana konuya odaklanmasını istersiniz, böylece resmin konusu zorlukla hareket eder. Deprem kaydediyormuşsunuz gibi görünmemelidir.
Kısmen 3D Görüntüler Kıpır kıpır stereogramlar her iki göz tarafından da görüldüğünden tam etkiyi elde edemezsiniz.
Gözlüklü veya Gözlüksüz
Wiggle stereoskopi, gerçek stereoskopik görüntülerin ucuz bir şekilde kesilmesi gibidir. Görüntüler titrek ve ekrandan yeterince dışarı çıkmıyorlar. Gerçek 3D görüntüler çok daha iyi görünme eğilimindedir, ancak özel gözlük gerektirirler. Etkiyi daha fazla insanın görmesini istiyorsanız kıpırdatlı stereoskopi kullanın. Daha iyi sonuçlar için gerçek 3B kullanın. Her ikisini de yapmak için aynı resimleri kullanabilirsiniz.
Bölünmüş derinlikli animasyonlu GIF'ler gerçek bir 3B efekt sağlamaz ve yapmak için daha fazla zaman ve çaba gerektirir. Bakışları, stereoskopik görüntüleri oynatmaktan daha ilginç olma eğilimindedirler. Bu yüzden fazladan çabaya değer olduklarını düşünüyorum. Çubukları eklediğimde aldığım sonuçları beğendim ama favorilerim resimden çıkmış gibi görünüyor.
Üç boyutlu resimler yapmakla ilgileniyorsanız, bir çift üç boyutlu gözlük almanızı tavsiye ederim, böylece gerçek 3D, kıpırdatma 3D ve bölünmüş derinlik animasyonları yapabilirsiniz. Gözlüklerle ve onlarsız güzel görünen görüntüler oluşturun. Bu sayfadaki resimler yaptığım ilk animasyonlardan bazıları. Hala onları nasıl yapacağımı öğreniyordum ve çok fazla pratik yapmadım. Bunları örnek olarak kullanın ama daha iyisini yapmaya çalışın.
Bazı Daha Faydalı Bağlantılar
- Üç Boyutlu Olmayan 3D Görüntüler ve Videolar Nasıl Oluşturulur ...
2D'yi 3D'ye nasıl dönüştüreceğinizi öğrenin. Üç boyutlu fotoğraflar çekmek kolay ve hızlı olabilir. 30 saniyede güzel bir üç boyutlu görüntü oluşturabilirim. Derinlik yanılsaması ekleyebilecekken neden düz resimlere razı olasınız ki? Özel gözlük gerektirir ama - Görünmezlik Video Efektlerini Kullanarak Kamerada Nasıl Görünmez Olunur - Uzman Sonuçları
Görünmez olmak ister misiniz? Renkleri saydam hale getirerek web kameramdaki nesnelerin arkasını görebilecek miyim diye deneyler yaptım. Görünmezliğin nasıl çalıştığını ve görünmezlik efekti kullanarak nasıl kolayca görünmez olabileceğinizi öğrenin.
