Arka plan görüntüsü ile benzersiz bir örtüşen etki nasıl yapılır
Web siteleri tasarlarken, bazen doğru yaratıcılık dengesini bulmak zordur. Tasarımınızı da “aşırı” istemiyorsunuz, ancak kitlenizi de hayal kırıklığına uğratmak istemiyorsunuz. Tasarımınıza ince ama yaratıcı bir yön eklemenin iyi bir yolu, üst üste binen görüntülerin (bildiğim yaratıcı isimler) etkisi dediğim şeydir. Bu örtüşen efekt, sayfadaki diğer öğeleri sürerken, duvara bir kağıt takan veya zarfı kapatan çıkartmalar gibi görüntü simgesinin kaldırılmasını sağlar. İşin püf noktası, arka plan görüntüsünü, kutunun gölgesinin görüntüyü ikiye bölmesine ve ortada kaldırılmış gibi görünmesine izin vermek için farklı bir katmana (parçalar, satırlar ve modüller gibi) yerleştirmektir.
Bu tasarım bulanık görüntü simgesi için çok iyi çalışır ve ayrıca metin modülünün yanına görüntüler eklemek için çalışır. Başlayalım. Bu öğretici için bu öğretici için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi teması (yüklü ve aktif)
Sayfa Düzeni Yazılım Pazarlama özelliği yeni bir sayfaya yüklenir
Görüntüleri kesme için basit fotoğraf editörü (önizleme gibi)
Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımdan gizlice bir bakış.
Biriniz bir sütuna eklenen bir arka plan var, arka plan görüntüsünü kopyalayabilir ve diğer iki sütuna ekleyebilirsiniz. Şu anda bulanıklık modülünü ayarlayabilirsiniz, çünkü açıklama örtüştüğü için arka plan görüntüsünü gerçekten göremezsiniz, ancak onarılacaktır . İlk açıklama için modül ayarları açıklamasını açın ve görüntü simgesinin alt yarısını açıklama simgesi olarak ekleyin. Ardından #FFFFFF arka plan rengini de ekleyin. Şimdi aşağıdakiler için tasarım ayarlarını güncelleyin: Yuvarlak açılı görüntü: 0px sınır genişliği görüntü: 0px Mesafe için, sütunun arka plan görüntüsünü ortaya çıkarmak için açıklamamıza tam olarak üst 64px marjı eklememiz gerekir. Bu, açıklamanın üstünde iki kesim simgesini sağlayacaktır. Ayrıca metnimiz için biraz dolgulamaya ihtiyacımız var. Özel Marj: 64px Top Özel Dolgu:% 8 Alt,% 8 Sol,% 8 Sağ
Ardından kutunun gölgesini açıklamaya ekleyin. Bu örtüşen etkinin benzersiz görünmesini sağlamanın anahtarıdır. Şimdi satırdaki diğer iki açıklamayı değiştirmek için modülü kopyalayıp yapıştırın ve satırı aşağıdaki eski açıklama ile silin. Aşağıdakiler çizginin nihai sonucudur. Metin modülünün yan tarafında üst üste binen bir resim simgesi oluşturun Düzenimizin bir sonraki kısmı için, sağ sütundaki metin modülümüzün yanına aynı tür örtüşen efekt ekleyeceğiz. Modül tarafında örtüşen efektler oluşturmak için arka plan görüntüleri eklemek biraz daha zorlayıcıdır, çünkü mobil cihazları da dikkate almak zorundayız. Bu yüzden yaklaşık 128 piksel genişliğe sahip görüntüler kullanmanızı öneririm, böylece bir akıllı telefonda görüntüleri de görüntüleyebilirsiniz. Bu tasarımın hilesi, biri parçanın ortasında ve diğeri sol sütunun ortasında olmak üzere birkaç arka plan görüntüsü olmaktır. Arka plan görüntüsü simgesini ilk parçaya ekleyin, önceki parçanın kuvvetini kopyalayın ve yapıştırın Aşağıdaki doğrudan kısma, böylece uygun bir arka plana sahip olabiliriz. Ardından görüntünüzü aşağıdaki bölüme ekleyin: Arka Plan Görüntü Boyutu: Arka Planın Gerçek Boyutu Görüntü Pozisyonu: Orta Tekrar Arka Plan Görüntü: Tekrar yok
Arka plan görüntüsü simgesini sütun 2’ye ekleyin, arka plan görüntüsümüz ortada olduğundan, cep telefonundaki metin modülümüzün solunda görülmeyecektir. Bu nedenle sütun 2’nin soluna başka bir arka plan görüntüsü eklememiz gerekiyor. Bu şekilde, modülün solundaki arka plan görüntüsünü görüntülemek için cep telefonundaki mesafeyi ayarlayabiliriz. Bölümün arka plan görüntüsünü devam ettirin ve kopyalayın ve sütun 2’nin arka planına ekleyin. Daha sonra sütun 2’nin arka plan görüntüsünün konumunu ortasına güncelleyin.
Çizgilerimizin düzenlemesini ayarlayın Sıra, arka plan görüntüleri için daha fazla alana sahip olabilmemiz için nihayet hücreselde% 100 genişliğe kadar uzanmasını istiyoruz. Aşağıdaki satır ayarlarını güncelleyin: Özel genişliği kullanın: Evet Birim: % Özel Genişlik: % 100 Özel oluklar kullanın: Evet Talang Genişliği: 1 Şimdi bazı dolgu sihirleri için hücresel için ayarlanmıştır. Özel Dolgu (Masaüstü):% 10 Sol,% 10 Sağ Özel Dolgu (Tablet):% 5 Sol,% 5 Sağ Özel Dolgu (Akıllı Telefon):% 0 Sol,% 0 Sağ Özel Sütun 2 Dolgu Özel (Tablet): 64px Sol, 64 piksel sağ sütun 2 dolgu özel (akıllı telefon): 64px sol, 0px sağ sütun 2’nin telefonda 64 piksel sol dolguya sahip olduğunu unutmayın. Bu, modülün solundaki arka plan görüntüsünün tam yarısını göstermek içindir. Ayarları kaydedin. Şimdi sağ sütundaki metin modülünün altındaki görüntüyü silin. Arka plan görüntüsünüz hizalanmadı, ancak görüntü ve metin modüllerimizi ayarladıktan sonra düzeltilecektir. İşin püf noktası, sağdaki metin modülünüzün her zaman sol sütundaki görüntüden daha yüksek olduğundan emin olmaktır. Bu, arka plan görüntüsünü uyum içinde mükemmel tutacaktır.
Görüntü Modülünü Bırakın Arka plan görüntüsü için boşluğu bırakmak için sol sütundaki görüntü modülünü biraz azaltalım. Aşağıdaki ayarları güncelleyin: Genişlik:% 75 (masaüstünde ve tabletlerde) Modül Hizalama: Merkez Arka plan ve alanı bir sonraki metin modülüne ekleyin, metin modülümüze bir arka plan rengi eklememiz gerekir. Arka plan rengi: #ffffff Arka plan görüntüsümüz için, resmimizin yarım sağ versiyonunu kullanmamız ve ardından solun ortasında olduğundan emin olmalıyız. Arka Plan Görüntü Boyutu: Arka planın konumunun gerçek boyutu Görüntü: Arka planın orta sol tekrarlama Görüntü: Tekrar yok Yeni ayarlar aşağıdaki gibidir: Genişlik:% 100 Özel Dolgu:% 15 üst,% 15 daha düşük,% 15 sol, % 15 Sağ Seçim Kutusu
Şimdi sonucu kontrol edelim. Sütun 2’nin soluna ikinci bir arka plan görüntüsü eklediğimiz için, tabletler ve hücreselde de iyi sonuçlar veriyoruz.
Ve bu tamamlanan tasarım. Bu örtüşen görüntü tasarımının son zihni, düzeninizi ayırt etmenin ince bir yolu olabilir. Daha benzersiz tasarımlar yapmak için farklı arka plan renkleri ve filtre efektlerini denemekten çekinmeyin. Sıradan görüntüler de kullanabilirsiniz. Bu tasarımın arka plan görüntüsünüz gerçek boyuta göre düzenlendiğinde çalıştığını unutmayın, bu nedenle küçük bir görüntü kullanmaya çalışın (yaklaşık 128 piksel genişlik). Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
