Divi ile yuvarlanan moda kataloğu nasıl yapılır
Bu yazıda, nasıl yuvarlanan bir moda kataloğu yapabileceğinizi göstereceğiz. Bu yöntemi kullanmak, onlara bir kağıt kataloğu vererek kitlenize bağlanmanıza yardımcı olacaktır. Çevrimiçi yuvarlanan bir moda kataloğu yapmak, katalogdan aldığınız sonuçları iyileştirmeye yardımcı olabilir. Örneğin, mağaza öğesine doğrudan bir bağlantı ekleyerek, satın alma işlemi de artırılacaktır. Sonuçlarımızın sonuçları size adım adım nasıl göründüğünü gösterecektir.
Ve bunun gibi cep telefonları ve tabletlerde: Divi ile yuvarlanan moda kataloğu nasıl yapılırYouTube kanalına abone Oluruz Photoshop ile resme şeffaf bir şekil ekliyoruz. Photoshop için Gimarsop adlı ücretsiz bir alternatif var, ancak bu eğitim bölümünde sadece Photoshop kullanacağız. Her biri iki farklı forma sahip iki resme ihtiyacımız var; Biri masaüstü, diğeri cep telefonları ve tabletler için. Bu bölümde, size yalnızca resme nasıl şeffaf şekil ekleyeceğinizi göstereceğiz. Bundan sonra, ihtiyacınız olan tüm resimleri kendiniz yapabilirsiniz.
Fotoshop’u açın, bilgisayarınızda Photoshop’u açarak başlayın. Bir sonraki görüntüyü açın, düzenlemek istediğiniz ilk görüntüyü açın. Bu eğitim boyunca kullanacağınız üç resim için yöntem aynı kalır. Bu yüzden sadece bir kez açıklayacağız. Düzenlemek istediğiniz görüntüyü açtıktan sonra görüntüye çift tıklayın ve bir katman oluşturun, görüntüye çift tıklayın ve bunun için yeni bir katman oluşturun. Başka bir katman ekle üzerine başka bir boş katman ekleyerek devam edin. Katman 1 ve Polygonal Lasso Aracı Seçin Katman 1’i seçin ve Poligonal Lasso aracını kullanmaya başlayın. Poligonal kement aracı etkinleştirildiğinde, devam edin ve görüntünüzde şeffaf bir şekil yapın. Katman 1’i Görünmez Yapın ve Sil’ye basın Katman 0’ı seçerken Şeffaf Yapmak istediğiniz alanı seçtikten sonra, Katman 1’i görünmez hale getirin, Katman 0’ı tekrar seçin ve klavyenizdeki Sil düğmesine basın. Dikdörtgen seçim çerçevesi aracı seçin ve bunu bitirdikten sonra resimde bir yere tıklayın, dikdörtgen seçim çerçevesi aracını seçin ve resminizdeki bir yere tıklayın. Görüntüyü son PNG olarak kaydedin, görüntüyü PNG olarak kaydetmeniz ve tüm düzenlerde kullanacağınız dört görüntü için aynı işlemi tekrarlamanız gerekir. Ayarlar Ana menü Ayarları Yaptığımız düzen için ihtiyacımız olan ana menü ayarları aşağıdaki gibidir: Logo görüntülerini gizle: Etkinleştir
Menü Yüksekliği: 30
Metin Boyutu: 15
Mektup alanı: -1
Yazı Tipi: Lato
Yazı tipi stili: kalın ve büyük harf
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255,255,255.0)
Açılır menü arka plan rengi: RGBA (255,255,255.0)
Ön Baskı Ana menü çubuğunu değiştirdikten sonra, devam edip yeni bir sayfa ekleyebilir, bir divi oluşturucu kullanabilir ve görsel oluşturucuya geçebilirsiniz. Sayfaya yeni bir parça ekleyin, standart bir parça ekleyerek başlayın. Renk arka planının arka plan rengi kısmı ‘#d6d6d6′ olmalıdır.
Dolgu özelliği, o bölümdeki tasarım sekmesine taşındı. Uzay alt kategorisinde, üst dolguya ’24px’ ve alt dolguya 0px ekleyin. Tamamlandıktan sonra bir sütun satırı ekleyin, devam edebilir ve bu bölüme bir satır sütunu ekleyebilirsiniz. Yapıştırıcı Tasarım sekmesini açın ve alt kategori boyutunu değiştirin: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliğini kullanın: 1
Dolgu özel kaydırın ve üst dolguya ‘0px’ ekleyin.
Tamamlandıktan sonra ilk metin modülü, metin modülünü satıra ekleyebilirsiniz. Görüntülemek istediğiniz metni girdikten sonra tasarım sekmesini açın ve metin alt kategorileri için aşağıdaki değişikliklerin geçerli olduğundan emin olun: Metin Yazı Tipi: Eski Standart TT Yazı tipi stili: büyük harf
Metin yazı tipi boyutu: 72 (masaüstü), 41 (tablet), 29 (telefon)
Metin rengi: #000000
Metin mektubu alanı: 11 piksel
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Aralık alt kategorisini açın ve üst ve alt dolguya ’30px’ ekleyin.
Bölücü modülü metin modülünün hemen altındadır, bölücü modülünü ekleyin ve ‘Ekran göster’ seçeneğini etkinleştirin. Tasarım sekmesini açın ve bölücü rengi olarak ‘#ffffff’ seçin. Ardından, bir bölücü stili olarak ‘katı’ ve stil alt kategorisinde bölücü konumu olarak ‘üst’ seçin. Ardından, boyut alt kategorisini açın ve aşağıdaki ayarların uygulanmasını sağlayın: Bölücü ağırlığı: 10 piksel Yükseklik: 23px
Genişlik:% 100
İkinci metin modülü bölücü modülünün hemen altındadır, başka bir metin modülü ekleyin. Karakter haritasında (Windows) veya Karakter Paletinde (Mac) istediğiniz simgeyi seçin ve içerik sekmesine yerleştirin. Bu örnek için aşağıdaki sembolü kullandık: ‘↓’. Ardından, Tasarım sekmesini açın ve aşağıdaki ayarların uygulanmasını sağlayın:
Metin yazı tipi boyutu: 42px Metin Rengi: #000000 Metin Metin: Orta
Masaüstü Modu Kataloğu (Yeni Parça) Şimdi, diğer standart parçaları ekleyin. Bu bölüm, masaüstünde kataloğun farklı bir bölümünü gösterecek iki sıra içerecektir.
Arka Plan Rengi Bölümünün Ayarlanması Bu bölümün arka plan rengi olarak ‘#ffffff’ kullanın.
Özel dolgu daha sonra tasarım sekmesini açın ve üst dolguya ’15px’ ekleyin. Sütun yapısının ilk satırı ayarlarda bir değişiklik yaptıktan sonra, satırı aşağıdaki sütun yapısına ekleyin:
Arka Plan Rengi Satır ayarlarını açın ve arka plan rengi olarak ‘RGBA (255,255,255,0.14)’ ekleyin. Arka Plan Görüntüsü Bu yazının Photoshop bölümünde oluşturduğunuz resimlerden birini ekleyin ve arka plan görüntü karışımı olarak ‘Hue’ kullanın. Son yapıştırıcı, boyut alt kategorisinde aşağıdaki değişiklikleri yapın: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
İlk metin modülü Satır ayarlarını tamamladıktan sonra metin modülünü ikinci sütuna ekleyin. Metin alt kategorileri için aşağıdaki ayarları kullanın:
Metin yazı tipi: acı
Metin yazı tipi boyutu: 63px Metin rengi: #000000
Metin Oryantasyonu: Orta
Bölme modülü ilk metin modülünün hemen altındadır, bölücü modülünü ekleyin ve ‘Ekran göster’ seçeneğini etkinleştirin.
Tasarım sekmesine geçin ve bölücü rengi olarak ‘#000000’ kullanın.
Kuvvet alt kategorisinde, bir bölücü stili olarak ‘katı’ ve bölücü pozisyonu olarak ‘yukarı’ kullanın. Aynı sekmeyi aşağı kaydırın ve aşağıdaki ayarların alt kategori boyutu için geçerli olmasını sağlayın: Bölücü ağırlığı: 3px Yükseklik: 23px Genişlik:% 57
Modül hizalaması: sol
Son olarak, ’30px’ ve alt marj ’50px’ marjını ekleyin. Bölücü yerine ikinci metin modülü, devam edin ve başlığı içerecek ikinci metin modülünü ekleyin. Her şeyden önce, içerik sekmesindeki arka plan rengi olarak ‘#000000’ kullanın.
Ardından, Tasarım sekmesine devam edin ve aşağıdaki ayarların alt kategori metnine uygulanmasını sağlayın:
Metin yazı tipi: acı Metin yazı tipi boyutu: 92px Metin rengi: #000000
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Sınır alt kategorisini açın ve aşağıdaki sınırları kullanın:
Sınırı kullanın: Evet
Sınır rengi: #000000
Sınır Genişliği: 3px
Ardından, ‘%77′ genişliğini ve sol modül hizalamasını kullanın.
Son olarak, metin modülünün sağına, altına ve soluna ’15px’ ekleyin.
Üçüncü metin modülü bir öncekinin hemen altına başka bir metin modülü ekler. Bu açıklamayı temsil edecek. Tasarım sekmesini açın ve metin alt kategorileri için aşağıdaki ayarları kullanın:
Metin yazı tipi: lato Metin yazı tipi boyutu: 16px Metin rengi: #000000 Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Alt kategori boyutlandırmasını açın, genişlik için ’70’ kullanın ve sol hizalama modülünü seçin.
Son olarak, ’20px’ üzerinden marj ekleyin.
Beşinci Metin Modülü Beşinci metin modülü minimalist bir düğme olarak işlev görür. İçerik sekmesinde ‘→’ + metin sembolünü kullanın ve bağlantıyı arkasına yerleştirin.
Ardından, Tasarım sekmesini açın. Metin alt kategorileri için aşağıdaki ayarları kullanın: Metin yazı tipi: acı Metin yazı tipi boyutu: 23px Metin rengi: #000000 Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Boyutlu bir alt kategori bulana kadar aynı sekmeyi aşağı kaydırın. Bu alt kategoride, ’49’ genişliğini ve modülün uygun hizalamasını kullanın.
Son olarak, ’80px’e marj ekleyin. ‘→’ + metnini kullanın ve bağlantıyı arkasına yerleştirin.
Alt kategori metninin düzenlemesi aşağıdaki gibidir:
Metin yazı tipi: acı Metin yazı tipi boyutu: 23px Metin Rengi: #E02B20 Hat yüksekliği metni: 1em Metin Oryantasyonu: Sol
Genişliği ‘%39’ olarak değiştirin ve ayrıca doğru hizalama modülünü kullanın.
İkinci sıra arka plan rengi satır ayarlarını açar ve arka plan rengi olarak ‘RGBA (255,255,255,0.14)’ ekler.
Arka Plan Görüntüsü Bu yazının Photoshop bölümünde oluşturduğunuz resimlerden birini ekleyin ve arka plan görüntü karışımı olarak ‘Hue’ kullanın.
Standart bölüme eklemeniz gereken ikinci sıra sütun yapısı bir öncekinin tersidir.
Klon Modülü Önceki satırda kullandığımız modül, bu satır için ihtiyacımız olanla aynıdır, bu yüzden ikinci sütunda değil, ilk sütunda devam et, klonlama ve yerleştirin. Bu yazının bir sonraki bölümünde hizada bazı değişiklikler yapmamız gerekiyor. İlk metin modülünün değiştirilmesi İlk metin modülünü açın ve ’20px’ üzerinden marj ekleyin. Bölünme modülünün modifikasyonu Ardından, bölücü modülünü açın ve modülün boyuttaki alt kategorideki hizalamasını sağa değiştirin. İkinci metin modülünün değiştirilmesi İkinci metin modülünün metin yönünü sağa ayarlayın. Ve ayrıca boyut alt kategorisinde tam modül hizalamasını seçin. Üçüncü metin modülünün değiştirilmesi Üçüncü metin modülü de doğru metin yönünü gerektirecektir. Ve doğru modülün hizalanması da. Beşinci Metin Modülünün Değiştirilmesi Beşinci metin modülü için yapmanız gereken tek şey, genişliği ‘%82′ olarak değiştirmektir. Altıncı metin modülünün altıncı metin modülü için aynı miktarda değiştirilmesi, ancak bunun yerine ’87’ kullanın. . Tabletler ve cep telefonları için parçaları gizleyin İki satırı bitirdikten sonra, cep telefonunuzdaki ve tabletinizdeki tüm parçaları devre dışı bırakabilirsiniz. Tablet ve Telefon Katalogları (Yeni Parçalar) Tabletlerde ve cep telefonlarında her şeyin harika görünmesini sağlamak için yeni bir standart parça oluşturacağız. Arka plan rengi parçasını ayarlayın Bu parçanın arka plan rengi olarak ‘#ffffff’ ekleyin. Özel dolgu tasarım sekmesine geçer ve üst dolguyu ’15px’ ekler. Sütun yapısının ilk satırı daha sonra, o bölüme iki sütun satır ekleyin. Çizginin boyutunun yapıştırıcı açık alt kategorisi ve aşağıdaki değişiklikleri yapın: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1 Görüntü Modülü Arka plan görüntüsü kullanmak yerine, bunun yerine görüntü modülünü kullanacağız. Bu şekilde, metin ve görüntülerin örtüşmeyeceğinden emin olacağız. Devam edin ve görüntü modülünü satırın ilk sütununa ekleyin ve görüntüyü yükleyin. Masaüstü sürümündeki ilk satır klon modülü, masaüstü sürümünün ilk satırında kullandığınız tüm modülleri klonlar ve ikinci sütuna yerleştirir. İkinci Metin Modülü Fontunun Boyutunu Değiştirin Değiştirilmesi gereken tek bir şey vardır; İkinci metin modülünün yazı tipi boyutu. 65 piksel olarak değiştirin. Daha sonra sütun yapısının ikinci sırası devam edin ve diğer iki sütunu o bölüme ekleyin.
Bu satır yapıştırıcı ayrıca değiştirilmiş bir boyutlandırma alt kategorisi gerektirir:
Bu çizgiyi tamamen genişletin: Özel olukların genişliğini kullanın: evet
Talang genişliği: 1 Görüntü Modülü İlk sütuna da bir görüntü modülü ekleyin ve görüntüyü yükleyin. Masaüstü sürümündeki ikinci sıra klon modülü, devam edin ve masaüstü sürümünün ikinci satırına yerleştirilen modül klonu. Klonladıktan sonra, bu satırın ikinci sütununa yerleştirin. İkinci metin modülünün yazı tipi boyutunu değiştirin İkinci metin modülünün metin boyutunun da değiştirilmesi gerekir. Lütfen ve ’65px’ yazı tipi boyutunu verin. Her iki satırı bitirdikten sonra masaüstü bölümünü gizleyin, devam edebilir ve masaüstündeki tüm parçaları devre dışı bırakabilirsiniz. ET Voila Sonuçları, bu yazıdaki tüm adımları izledikten sonra, masaüstünde aşağıdaki sonuçları elde edeceksiniz:
Ve burada mobil ve tabletlerde:
Bu yazıdaki son zihin, nasıl iyi bir haddeleme moda kataloğu yapabileceğinizi gösterdik. Tasarımımızın çalışmasını sağlamak için, ilk olarak size Photoshop ile görüntünüzde nasıl şeffaf bir şekil yapacağınızı gösteriyoruz. Bundan sonra, bir tasarım yapmak için bu görüntüleri divi öğreticimizde kullanıyoruz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! RVector / Shutterstock.com tarafından Üstün Görüntü
