Divi'de 3B Fotoğraf Duvarları Tasarlamak için Dönüştürme Seçenekleriyle Perspektif nasıl kullanılır?
Yayınlanan: 2019-05-043B fotoğraf duvarı tasarlamak, yalnızca Photoshop veya Sketch gibi bir fotoğraf düzenleyici kullanarak mümkün gibi görünüyor. Ama değil! Bugünlerde sadece CSS kullanarak web üzerinde oluşturabileceğiniz imkansız görünen tonlarca tasarım var. Divi gibi bir sayfa oluşturucuyla, bu tür tasarımları oluşturmak için CSS hakkında çok fazla bilgi sahibi olmanıza bile gerek yok. Bu yüzden bugün size Divi'de nasıl 3D fotoğraf duvarları tasarlayacağınızı göstereceğim.
İşin püf noktası, perspektif css özelliğini kullanmaktır. Bir ana öğeye eklenen yalnızca tek bir CSS satırıyla, öğeleri gerçeğe yakın 3B tasarımlara döndürmek için Divi'nin yerleşik dönüştürme seçeneklerini kullanabilirsiniz.
Başlayalım!
Gizlice Bakış
İşte bugün tasarlayacağımız 3D Fotoğraf duvarlarına bir göz atın.
3D Fotoğraf Duvarı tasarım örneklerini ÜCRETSİZ indirin
Bu eğitimdeki 3D fotoğraf duvar tasarımlarına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Youtube Kanalımıza Abone Olun
Başlarken
Bu eğiticiye başlamak için tek ihtiyacınız olan Divi Teması'nın kurulu ve etkin olmasıdır. Çalışmak için bazı resimlere ihtiyacınız olacak, bu yüzden Seyahat Acentesi Düzen Paketinden kullandığım resimlerin aynısını kullanmaktan çekinmeyin. Bundan sonra, yeni bir sayfa oluşturmanız, sayfa ve başlığı vermeniz ve ön uçta oluşturmak için Divi Builder'ı dağıtmanız gerekecektir. Ardından “sıfırdan inşa” seçeneğini seçin. Bu kadar. Tasarım tuvaliniz sizi bekliyor!
Perspektifin Dönüştürme Seçenekleriyle Nasıl Çalıştığını Anlama
Temel bir sanat dersi aldıysanız, muhtemelen perspektife aşinasınızdır. 2 boyutlu bir kağıt veya tuval üzerinde var olmasına rağmen 3 boyutlu gibi görünen nesneleri çizmek için sanatçılar tarafından kullanılan bir tekniktir. Web tasarımında, transform özelliğini kullanarak öğeleri 3B konumlarda konumlandırabilirsiniz. Divi'de bu dönüştürme seçenekleri Divi oluşturucuda yerleşiktir. Bir öğeyi 3B konuma yerleştiren ana dönüştürme özelliği, öğeleri z, x veya y ekseni boyunca döndürmenize olanak tanıyan dönüştürme döndürmedir. Ancak, bir öğeyi dönüştürme döndürmeyi kullanarak döndürürseniz, perspektif özelliği uygulanmadıkça öğe 3B olarak görünmez.
Örneğin, bir sütun satırına bir görüntü eklenmiş tek bir görüntü modülünüz olduğunu varsayalım.
Ardından, görüntüyü x ekseni boyunca döndürmek için transform döndürme özelliğini kullanırsınız. Görüntü dönecek, ancak 2B kalacak, böylece görüntü kısalmak için yukarıdan ve aşağıdan sıkıştırılmış gibi görünecektir.
Şimdi, Row'un ana öğesine (resmin ana öğesi olan) CSS'nin küçük pasajını kullanarak perspektif eklerseniz, resme perspektif eklersiniz. Perspektif değerine bağlı olarak, nesnenin ekrana bakan kullanıcıdan görünen uzaklığını artırabilir veya azaltabilirsiniz. Satıra “perspektif: 600 piksel” eklerseniz görüntünün nasıl görüneceğine dair bir örnek.
Perspektif 3D efekti oluşturarak görüntünün üst kısmının daha küçük ve görüntünün alt kısmının daha büyük olduğunu görebilirsiniz. Temel olarak görüntü, sayfayı görüntüleyen kullanıcıdan 900 piksel uzakta görünüyor.
Bu derste, aynı tekniği tüm bir görüntü sırasını döndürmek için kullanacağım ve ardından 3D fotoğraf duvarları oluşturmak için ana bölüme perspektif ekleyeceğim.
Üst ve Alt 3D Fotoğraf Duvarları Tasarlama
Bu ilk tasarımda, başlık olarak kullanılabilecek tek bir metin benzerinin üstüne ve altına bir 3D fotoğraf duvarı ekleyeceğiz. İşte nasıl yapılacağı.
En İyi 3D Fotoğraf Duvarını Oluşturma
Yeni sayfanıza başlamak için dört sütunlu bir satır içeren normal bir bölüm oluşturun.
1. sütunda, ilk resminizle birlikte bir resim modülü ekleyin. Bu örnekte kullandığım tüm resimler 600 piksele 800 pikseldir.
Resminizi resim modülüne yükledikten sonra, dolguyu aşağıdaki gibi güncelleyin:
Özel Dolgu: %3 üst, %3 alt, %3 sol, %3 sağ
Görüntüyü çoğaltın (veya kopyalayıp yapıştırın) ve dört sütunun her birine ekleyin, böylece dört sütunun her birinde bu şekilde üç görüntü olsun.
Bu, 3D duvar tasarımı oluşturmak için döndüreceğimiz ve perspektif ekleyeceğimiz üst duvar (veya tavan) görevi görecektir.
Perspektif Eklemek ve Taşmayı Gizlemek için Bölümü Özelleştirin
Satır modülünü (bireysel resimler değil) döndüreceğimiz için, satırın üst öğesi olan bölüm olan perspektif özelliğini eklememiz gerekiyor. Ve görüntülerin bölüm kabının dışına çıkmasını önlemek için hem dikey hem de yatay taşmaya gizli taşma eklemeliyiz.
Bunu yapmak için bölüm ayarını açın ve aşağıdakileri güncelleyin:
Arka Plan Rengi: #000000
Özel Dolgu: 0 piksel üst, 0 piksel alt
Perspektif özelliğini eklemek için ana öğeye aşağıdaki özel CSS'yi ekleyin:
Ana Öğe CSS'si:
perspective: 400px;
Aşağıdaki gibi taşma özelliklerine bakın:
Yatay Taşma: gizli
Dikey Taşma: gizli 
Satır Ayarlarını Güncelle: Genişlik ve Cilt Payı Genişliği
Şimdi sıra, döndürülmüş 3B tasarıma hazırlamak için satırı özelleştirmeye geldi. Bunu yapmak için, oluk genişliğini güncelleyerek genişliği küçülteceğiz ve görüntüler arasındaki boşluklardan kurtulacağız.
Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Oluk Genişliği: 1
Genişlik: 300 piksel (masaüstü, tablet ve telefon)
Satır Ayarlarını Güncelle: Dönüştür Döndür ve Kökeni
Şimdi satırı aşağıdaki gibi döndürmek için dönüştürme döndürme seçeneğini kullanın:
Dönüştür Y eksenini döndür: -58deg
Dönüştürme Kaynağını aşağıdaki gibi değiştirin:
Kökeni Dönüştür: alt merkez (veya %100 %50)
Satır Ayarlarını Güncelle: Özel Sütun Genişlikleri
Dört sütunlu düzenin tablet ve telefon ekranlarında kalmasını istediğimizden, bu kesme noktalarında sütun genişliği için css'yi geçersiz kılmamız gerekiyor. Bunu yapmak için sütunların her birine bir width css özelliği eklememiz gerekiyor. Gelişmiş sekmesi altında, aşağıdaki özel CSS parçacığını her sütunun ana öğesine aşağıdaki gibi ekleyin:
(not: oluk genişliğinin 1 olarak ayarlandığından emin olun yoksa bu çalışmaz)
Sütun 1 Ana Öğe:
width: 25% !important;
Sütun 2 Ana Öğe:
width: 25% !important;
Sütun 3 Ana Öğe:
width: 25% !important;
Sütun 4 Ana Öğe:
width: 25% !important;
Bu kadar. İlk 3 boyutlu fotoğraf duvarımız oluşturuldu.
Başlık Bölümünü Oluşturun
Tasarım başlığımızı oluşturmak için, doğrudan mevcut bölümün altında tek sütunlu bir satırla yeni bir normal bölüm oluşturmamız gerekiyor.
Modül eklemeden önce bölümü siyah arka planla güncelleyin:
Arka Plan Rengi: #000000
Ardından, daha önce yaptığımız gibi aynı perspektif özelliğini bölümün ana öğesine ekleyin:
Ardından, aşağıdakileri içeren satıra bir metin modülü ekleyin:
İçerik: Fotoğrafçılık
Metin Yazı Tipi: Titillium Web
Metin Yazı Tipi Stili: TT
Metin Metin Rengi: #ffffff
Metin Metin Boyutu: 5vw
Metin Harf Aralığı: 6px
Metin Satırı Yüksekliği: 1em
Metin Yönü: Merkez
Şimdi, metin modülüne bir dönüşüm döndürme ekleyebiliriz. Üst öğede (veya bölümde) perspektif ayarlandığında, metni döndürdüğümüzde 3B efekti ortaya çıkar.
Dönüştürme döndürme değerlerini aşağıdaki gibi ekleyin:
Dönüştür X Eksenini Döndür: -12deg
Dönüştür Y eksenini döndür: 32deg
Şimdi alt 3 boyutlu fotoğraf duvarını oluşturmaya hazırız.
Alttaki 3B Fotoğraf duvarını (veya Zemini) oluşturun
Alttaki 3 boyutlu fotoğraf duvarını oluşturmak için, üst duvarı içeren üst bölümü kopyalayıp yapıştırabilir ve doğrudan başlık bölümünün altına yapıştırabiliriz.
Ardından, yeni bölümün satır ayarlarını aşağıdaki gibi güncelleyin:
Dönüştür Y eksenini döndür: 58deg
Kökeni Dönüştür: Üst Merkez
Son tasarım
Bu kadar! Son tasarımı kontrol edelim.
Tasarım aynı zamanda mobilde de (biraz taşma dışında) bozulmadan kalacaktır.
Sol ve Sağ 3D Fotoğraf Duvarları Oluşturma
Bir sonraki tasarım için başlığımızın üst ve alt kısımları yerine sol ve sağ tarafında 3 boyutlu fotoğraf duvarları oluşturacağız. Tasarım sürecini hızlı bir şekilde başlatmak için ilk örneğimizde önceden oluşturulmuş tasarımlarımızdan bazılarını kullanacağız.
Başlamak için, alt görüntü duvarını içeren ilk tasarım örneğinin alt bölümünü çoğaltın. Ardından yeni bölümün satır ayarlarını açın ve dönüştürme seçeneklerini varsayılan duruma geri döndürün.
Sonraki satırı çoğaltın.
Ardından, metin modülünü içeren Satırı (bölümü değil) ilk tasarım örneğindeki başlıkla kopyalayın. Ardından, görüntüleri içeren iki satır arasına yapıştırın.
Bu, tüm sıralarımızın bir bölümün içinde olması dışında, ilk tasarıma benzer bir kurulumdur. Bu bir sonraki adım için önemlidir.
İki resim duvarımızın, metin ortada olacak şekilde sayfanın solunda ve sağında olmasını istiyoruz. Bunu yapmanın kolay bir yolu, bölümümüzde display flex kullanmaktır. Bu, satırlarımızı bölüm içinde yatay olarak hizalayacaktır.
Bunu yapmak için bölüm ayarlarını açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:
(Kullanıcının perspektifinde daha fazla "Z alanı" mesafesi oluşturmak için perspektif değerini 700 piksele yükselttiğimize dikkat edin.)
Ana Öğe CSS'si:
perspective: 700px; display:flex;
Ve işte! Duvarlarımız yerinde ve dönmeye hazır.
Daha yüksek bir duvar için Daha Fazla Resim Ekleyin
3D fotoğraf duvarımızı biraz daha yüksek yapmak için tek yapmamız gereken, resim içeren satırların her birinde dört sütunumuzun her birine başka bir resim eklemek. Sadece diğerleri gibi %3 dolguyu taşıdıklarından emin olun.
İki Yan Sıranın Genişliğini Değiştirme
Resim duvarımızı döndürmeden önce genişliklerini %100 olarak ayarlamamız gerekiyor. Sol taraftaki görüntü duvarı için satır ayarlarını açın ve aşağıdakileri güncelleyin:
Genişlik: %100 (masaüstü, tablet, telefon)
Maksimum genişlik: %100
Daha sonra aynı işlemi sağ taraftaki sıra için yapın.
3B Efekt için Yan Satırları Döndürme
Artık satırlarımızın her birine dönüşüm rotasyonumuzu eklemeye hazırız. İlk olarak, sol satır için satır ayarlarını açın ve aşağıdakileri güncelleyin:
Dönüştür X Eksenini Döndür: 90deg
Ardından, sağ taraftaki satır için satır ayarlarını açın ve aşağıdakileri güncelleyin:
Dönüştür X Eksenini Döndür: -90deg
Perspektifimiz kesit seviyesindeyken, satırlarımız metin modülümüzün her iki tarafında 3B fotoğraf duvarları olarak görüntülenecektir.
Son sonuç
Nihai sonucu kontrol edelim.
Pastanın üzerine biraz krema koymak için 3B grafik öğelerle bir arka plan görüntüsü ekleyebilirsiniz. İşte Cryptocurrency Layout Pack'ten alınan bir arka plan görüntüsüne sahip tasarımın bir örneği.
Bonus Hover Etkisi: Bu duvarları Hover'da Görünüm'e çevirin!
Kullanıcının, fareyle üzerine gelindiğinde görüntüye çevirerek görüntü duvarını görüntülemesini sağlayacak bir dönüştürme döndürme vurgulu efektini kolayca ekleyebilirsiniz. Bunu yapmak için sol satır ayarlarını açın ve aşağıdakileri güncelleyin:
Kökeni Dönüştür: sol orta
Dönüştür X Eksenini Döndür (vurgulu): 0deg
Ardından, sağ satır ayarlarında aşağıdakileri güncelleyin:
Kökeni Dönüştür: sağ merkez
Dönüştür X Eksenini Döndür (vurgulu): 0deg
Şimdi sonucu kontrol edin.
Bonus Tasarım Etkisi: Görüntülerin Uzaya Ayrılmasını Sağlayın
Görüntü Satırı perspektif yerinde döndürüldüğünden, transform translate kullanarak görüntüleri satırınız içinde taşıyabilirsiniz. Bununla ilgili harika olan şey, hareketin 3B düzlem boyunca kalacak olmasıdır. Bunu yapmak için, bir görüntünün ayarlarını açın ve görüntüyü ızgaranın dışına uzaya taşımak için dönüştürme çevirme seçeneğini kullanın!
Resimlere birkaç dönüşüm çevirme değeri ekleyerek bunun nasıl görüneceğine dair bir örnek.
Son düşünceler
Divi'de 3D Fotoğraf Duvarları oluşturmak, bir sayfanın tasarımı üzerinde gerçekten etkileyici bir etki yaratır. Ve bu makaledeki teknikleri kullanarak farklı tasarımlar denemenin gerçekten eğlenceli olduğunu söylemeliyim. Perspektif özelliği, 3D tasarımlar gibi sayısız yaşam yaratmak için dönüştürme seçenekleriyle el ele çalışır! Ve unutmayın ki bu sıralar (veya duvarlar) Divi'deki herhangi bir modül ile doldurulabilir. Bu nedenle, bazı tanıtım yazılarını da denemekten çekinmeyin. Umarım bu, bugün benzersiz bir şey yaratmanız için size ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!