Yüzerken animasyonlu giflerle arka plan görüntüleri nasıl değiştirilir
Animasyonlu GIF’lerle arka plan görüntülerini değiştirmek, içeriğinizi açmanın iyi bir yolu olabilir ve ürünler veya hizmetler için harika resimler sağlar. Örneğin, belirli yazılım ürün özelliklerini tanıtıyorsanız, GIF animasyonu ürün işlevselliğinin yönlerini tanımlamaya yardımcı olabilir (bunu burada zarif temadaki ürünler için yapıyoruz). Bununla birlikte, ilk başta GIF’i görüntülemek yerine, imleci yönlendirirken animasyonlu sürüm (veya GIF) ile değiştirilen işlevin sessiz bir ekran görüntüsünü görüntülemek isteyebilirsiniz. Bu öğreticide, yüzerken animasyonlu bir GIF ile arka plan görüntüsünü (sessiz) değiştiren kısa bir açıklama yapacağımı göstereceğim. Snagit (ekran görüntüsü yazılımı) kullanarak ekran görüntüleri ve GIF’lerin nasıl yapılacağını tartışarak başlayacağız. Ardından, arka plan görüntüsünün açıklamaya nasıl uygulanacağını tartışacağız. Hover arka plan divi seçeneği ile gerçek görüntü değişikliği çok kolaydır.
Bu tasarım, tasarımın statik kalmasına yardımcı olacak ve daha sonra kullanıcıları içerikle her etkileşime girdiklerinde içerecektir. Başlayalım. Gizlice göz atma
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını etkin bir Divi oluşturucu ile yeni bir sayfaya sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için YouTube kanalımıza abone olmaya başlamak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Ekran görüntüleri almanıza, ekran videosunu kaydetmenize ve GIF’ler oluşturmanıza olanak tanıyan tarama yazılımı (veya takım kombinasyonu). Bu öğreticide Snagit’i esas olarak kullanacağım çünkü bu, blogumu yayınlamak ve öğretmek için her gün kullandığım eksiksiz bir çözüm. Ön uçta baştan (görsel yapımcı) yeni bir sayfa yapıldı.
Bundan sonra, Divi’de birkaç Hover sekmesi yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Bu tasarım için ekran görüntüleri ve gifler yapmak, ekran görüntülerinin açıklama modülü için sessiz bir arka plan görüntüsü olarak görüntülenmesini istiyoruz. Sonra, ürünün nasıl çalıştığına dair kısa bir örnekle sessiz arka plan görüntüsünü açan bir GIF (animasyonlu görüntü) yapmak istiyoruz. İşin püf noktası, oldukça benzer olan görüntüler ve gifler yapmaktır, böylece bir resmi yüzerken başka bir görüntüle hareket ettirirken düzgün bir geçiş yaparlar. Her iki görüntü de yapıldıktan sonra, ilk arka plan görüntüsü olarak sessiz bir görüntü kullanabiliriz. Ardından, imleci açıklama modülüne işaret ederken arka plan görüntüsünü GIF görüntüsüne değiştirebiliriz.
Ekran görüntüleri ve GIF’ler yapmak için Snagit’i kullanacağım. Bu ücretsiz yazılım olmasa da, bu kullanımı çok kolaydır ve ekran görüntüleri yapmanıza, ekranınızı kaydetmenize ve gizli ekranları tek bir yerde GIF’lere kaydetmenize olanak tanır. Bir ekran görüntüsü yapmak, aç ve yakalama kutusunu açmak için sessiz bir ekran görüntüsü yapmak. Ardından ekran alanınızı seçerek fotoğraf çekmeyi seçtiğinizden emin olun. Bu, bir görüntü olarak çekilmek üzere ekranınıza sürüklemenize olanak tanır. Ekran görüntüsünü başlatmak için Al düğmesini tıklayın.
Ardından, resim olarak çekmek istediğiniz ekran alanının etrafındaki geri alma alanını tıklayın ve sürükleyin. Görüntüyü bilgisayarınıza saklayın. Ardından Snagit Yakalama kutusunu tekrar açın ve ekran alanınızı seçerek video kaydetmeyi seçin. Ekran görüntüsünü başlatmak için Al düğmesini tıklayın.
Ardından, video klibi olarak yakalamak ve kaydetmek istediğiniz ekran alanının etrafına alma alanını tıklayın ve sürükleyin. Sabit ve GIF görüntüsü arasında daha pürüzsüz bir geçiş yapmak için, video için görüntü için (veya mümkün olduğunca yakın) aynı alanı yakalamanız gerekir.
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını etkin bir Divi oluşturucu ile yeni bir sayfaya sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için YouTube kanalımıza abone olmaya başlamak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Ekran görüntüleri almanıza, ekran videosunu kaydetmenize ve GIF’ler oluşturmanıza olanak tanıyan tarama yazılımı (veya takım kombinasyonu). Bu öğreticide Snagit’i esas olarak kullanacağım çünkü bu, blogumu yayınlamak ve öğretmek için her gün kullandığım eksiksiz bir çözüm. Ön uçta baştan (görsel yapımcı) yeni bir sayfa yapıldı.
Bundan sonra, Divi’de birkaç Hover sekmesi yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Bu tasarım için ekran görüntüleri ve gifler yapmak, ekran görüntülerinin açıklama modülü için sessiz bir arka plan görüntüsü olarak görüntülenmesini istiyoruz. Sonra, ürünün nasıl çalıştığına dair kısa bir örnekle sessiz arka plan görüntüsünü açan bir GIF (animasyonlu görüntü) yapmak istiyoruz. İşin püf noktası, oldukça benzer olan görüntüler ve gifler yapmaktır, böylece bir resmi yüzerken başka bir görüntüle hareket ettirirken düzgün bir geçiş yaparlar. Her iki görüntü de yapıldıktan sonra, ilk arka plan görüntüsü olarak sessiz bir görüntü kullanabiliriz. Ardından, imleci açıklama modülüne işaret ederken arka plan görüntüsünü GIF görüntüsüne değiştirebiliriz.
Ekran görüntüleri ve GIF’ler yapmak için Snagit’i kullanacağım. Bu ücretsiz yazılım olmasa da, bu kullanımı çok kolaydır ve ekran görüntüleri yapmanıza, ekranınızı kaydetmenize ve gizli ekranları tek bir yerde GIF’lere kaydetmenize olanak tanır. Bir ekran görüntüsü yapmak, aç ve yakalama kutusunu açmak için sessiz bir ekran görüntüsü yapmak. Ardından ekran alanınızı seçerek fotoğraf çekmeyi seçtiğinizden emin olun. Bu, bir görüntü olarak çekilmek üzere ekranınıza sürüklemenize olanak tanır. Ekran görüntüsünü başlatmak için Al düğmesini tıklayın.
Ardından, resim olarak çekmek istediğiniz ekran alanının etrafındaki geri alma alanını tıklayın ve sürükleyin. Görüntüyü bilgisayarınıza saklayın. Ardından Snagit Yakalama kutusunu tekrar açın ve ekran alanınızı seçerek video kaydetmeyi seçin. Ekran görüntüsünü başlatmak için Al düğmesini tıklayın.
Ardından, video klibi olarak yakalamak ve kaydetmek istediğiniz ekran alanının etrafına alma alanını tıklayın ve sürükleyin. Sabit ve GIF görüntüsü arasında daha pürüzsüz bir geçiş yapmak için, video için görüntü için (veya mümkün olduğunca yakın) aynı alanı yakalamanız gerekir.
Hazır olduğunuzda, kayıt düğmesini tıklayın ve kaydetmek istediğiniz gösteriyi yapın.
Bittiğinde kaydı durdurmak için Durdur’u tıklayın. Ardından Snagit düzenleyicisinde video klibi düzenleyebilirsiniz. Sürümü tamamladıktan sonra, videonuzdan bir GIF oluşturmak için videonun yanındaki GIF düğmesini tıklayın. GIF açılır penceresinde, çıkış ayarlarını gerektiği gibi değiştirin. GIF’inizin tekrarlanması için döngüyü etkinleştirdiğinizden emin olun. Ardından Oluşturma düğmesini tıklayın. GIF yapıldıktan sonra bilgisayarınıza kaydedin. Artık Divi’deki tasarımınıza eklenmeye hazır sessiz bir görüntünüz ve bir GIF görüntüsünüz var. Bölüm 2: Yapmadıysanız, yeni bir sayfa oluşturduğunuzda, arka plan görüntüsünü animasyonlu bir GIF görüntüsü ile değiştiren bir bulanıklık yapın ve ön tarafta inşa etmek için Divi Builder’ı kullanın. Ardından, iki sıra sütun içeren yeni bir normal bölüm oluşturun. Sütun 1’e açıklama modülünü ekleyin. Ardından İçerik Ayarlarını şu şekilde güncelleyin: İçindekiler: “İçindekiler Metni Burada” Simgeyi kullanın: Evet Icon: Bulut (Ekran görüntüsüne bakın) Bir sonraki varsayılan arka plan görüntüsünü ekleyin, varsayılan arka plan görüntüsünü aşağıdaki açıklamaya ekleyin: Arka plan görüntüsü: oluşturduğunuz arka plan görüntüsü (sessiz ekran yakalama) yükleyin. Arka plan görüntü boyutu: PAS (bu, tüm görüntülerin görünür kalmasını sağlayacaktır) arka plan görüntü konumu: üst orta (bu, görüntünün açıklamanın üstünde kalmasını sağlayacaktır) bir başlangıç arka plan görüntüsüne sahip olduktan sonra bir GIF fıçı arka plan görüntüsü ekleyin, uygulayın Geri Hover seçeneği arka planı ve Hover sekmesini seçin. Ardından, Hover durumuna yeni bir arka plan görüntüsü olarak kullanılacak bir GIF görüntüsü ekleyin. Bulanık modülün düzenlenmesi Aşağıdaki tasarım ayarlarını güncelleyerek açıklamanın modülünü düzenlemeye devam edin: Renk simgesi: #6bb962 daire simgesi: #fffff Metin Seviyesi: Orta Yazı Tipi Başlık: Lora Metin Boyutu Başlık: 34px Pathing:% 50% 50 Yukarıda,% 5 aşağıda,% 3 sol,% 3 sağ bu tasarımın gerçek anahtarı dolgudur. Arka planı açıklama içeriğinin üzerine yerleştirmek için, üst dolgunun yaklaşık% 50’sini eklemeniz gerekir. Arka plan görüntüsünün boyutu “sığacak” olarak düzenlendiğinden ve konumu “orta merkeze” düzenlendiğinden, tarayıcının genişliğine yanıt olarak içeriğe iyi oturacaktır. Son olarak, havada uçuşta bir bulanıklık kutusu gölgesi verin: Gölge Kutusu: Ekrana bakın Dikey Konum Yakalama Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu: 0px (varsayılan), 24px (nokta imleç) Buradaki nihai sonuç nihai sonuçtur. Ve bu tabletler ve cep telefonları üzerindeki tasarım. Ve bu, farklı ekran görüntüleri ve renklerle ek açıklamaların ortaya çıkmasıdır.