Kuika'nın Fill (Dolgu) özelliği, tasarımınızdaki elementlerin gövde renklerini veya arka planlarını özelleştirmenize olanak tanıyan güçlü bir araçtır. Bu özellik sayesinde elementlerin iç yüzeylerini düz renklerle doldurabilir, dolgu olarak resimler veya desenler kullanabilir ve cihazınızdan görüntü dosyaları ekleyebilirsiniz. Dolgu özelliğinin esnek yapısı, hem görsel açıdan zengin hem de kullanıcı deneyimini iyileştiren tasarımlar oluşturmanıza yardımcı olur. Bu eğitim içeriğinde, renk ile dolgu yapmayı, harici resimler kullanarak arka plan oluşturmayı, desen ve dokularla dolguları zenginleştirmeyi ve kendi görsellerinizi tasarımlarınıza entegre etmeyi öğreneceksiniz.
Fill Özellikleri
1. Color
Elementin gövdesini belirli bir renk ile doldurabilirsiniz. Bunun için:
Element Seçimi: Renk eklemek istediğiniz elementi seçin.
Color Picker Kullanımı: Fill (Dolgu) bölümündeki Color Picker aracılığıyla rengin tonunu ve parlaklığını seçebilirsiniz.
Renk Kodları:
HEX: Örneğin, #FF5733 gibi altı haneli kodlar kullanabilirsiniz.
RGB veya RGBA: Örneğin, rgb(255, 87, 51) veya şeffaflık eklemek için rgba(255, 87, 51, 0.5) kullanabilirsiniz.
2. Style
Sık kullanılan renk tonlarını farklı elementlerde tekrar kullanmak için bir stil şablonu oluşturabilirsiniz:
Yeni Stil Oluştur: Renk tonlarınızı kaydedip farklı elementlerde kullanarak zamandan tasarruf edebilirsiniz.
Stil Yükleme: Kaydettiğiniz stilleri kolayca yükleyerek tasarım tutarlılığını sağlayabilirsiniz.
3. Image Library
Elementlerin arka planına resimler ekleyebilirsiniz. Image Library şu formatları destekler:
JPG, PNG, SVG, XML. Eklenen arka plan resmini daha etkili bir şekilde kullanmak için konum ve tekrarlama seçeneklerinden faydalanabilirsiniz.
4. Fill’de Image Library With AI
Kuika'nın yapay zeka asistanı ile ekranların veya elementlerin arka planına özel resimler oluşturabilirsiniz.
Generate With AI: Bu butona tıklayın ve açılan Prompt Giriş kutusuna ihtiyacınız olan resimle ilgili detaylı bilgiler yazın.
Öneri Listesi: Yapay zeka, verdiğiniz bilgiler doğrultusunda resim önerileri sunar. Beğendiğiniz resimleri bulut ikonuna tıklayarak resim kütüphanenize ekleyebilirsiniz.
5. Repeat
Eklediğiniz arka plan resminin boyutuna bağlı olarak, ekranın genişliğine veya yüksekliğine göre resmin tekrar tekrar görüntülenmesini sağlayabilirsiniz.
Resim, ekrandaki tarayıcı genişliğine bağlı olarak yatay veya dikey yönde tekrar eder.
Özellikle desenli veya dokulu arka planlar için bu özellik oldukça kullanışlıdır.
6. Position
Eklediğiniz resmin pozisyonunu ayarlayabilirsiniz. Position (Konum) ayarları:
Center (Orta): Resim ekranın tam ortasında konumlandırılır.
Right (Sağ): Resim ekranın sağ tarafına yerleştirilir.
Left (Sol): Resim ekranın sol tarafına yerleştirilir.
Top (Üst): Resim ekranın üst kısmına yerleştirilir.
Bottom (Alt): Resim ekranın alt kısmına yerleştirilir.
Resmin konumlandırılması, ekran veya tarayıcı boyutuna bağlı olarak değişiklik gösterebilir. Örneğin, Position → Center seçildiğinde resim, tarayıcı genişliğine bağlı olarak orta alanda kalır.
Fill Özelliklerinin Avantajları
Esneklik: Renkler ve arka plan resimleri arasında geçiş yaparak tasarım özgürlüğünüzü artırabilirsiniz.
Tutarlılık: Kaydedilen renk ve stil şablonları ile uygulama genelinde tasarım bütünlüğü sağlayabilirsiniz.
Yapay Zeka Desteği: AI ile arka plan resimleri üreterek zaman kazanabilir ve özgün tasarımlar oluşturabilirsiniz.
Dinamik Kullanım: Tekrarlama ve konumlandırma seçenekleri ile arka plan tasarımlarını ihtiyacınıza göre şekillendirebilirsiniz.
Kuika'nın Fill (Dolgu) özelliği, kullanıcı dostu arayüzü ve güçlü araçları ile tasarımlarınızın görsel etkisini artırırken, kullanım kolaylığı sağlar.
Elementlerde Fill (Dolgu) Ayarları Yapma
Kuika ile tasarım yaparken, Fill (Dolgu) ayarlarını kullanarak elementlerin gövde renklerini veya arka plan görsellerini özelleştirebilirsiniz. Aşağıdaki adımları izleyerek Fill ayarlarını kolayca düzenleyebilirsiniz:
Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
Ardından “UI Design” modülüne tıklayın.
Sol kenardaki "Elements" panelinden bir element ekleyin.
Fill ayarlarını yapmak istediğiniz elementi seçin.
Styling Panelini açın ve Fill (Dolgu) bölümüne gidin.
Fill alanında yer alan Styles yanındaki üç nokta ikonuna tıklayın.
Açılan menüden Add New Style seçeneğine tıklayarak farklı elementlerde ya da farklı yerlerde kullanmak üzere Fill stilleri oluşturup kaydedebilirsiniz.
Mevcut bir stili kullanmak için, Styles alanındaki Search Box içerisinde yer alan Load Style seçeneğini kullanarak önceden kaydedilmiş hazır stillerden birini seçebilirsiniz.
Custom Style alanında yer alan Color seçeneği ile elementinize bir renk ekleyebilirsiniz.
Renk Seçimi Araçları:
Color Picker: İstediğiniz rengi ve tonunu seçmek için kullanabilirsiniz.
Renk Kodları:
HEX: Altı haneli renk kodlarını kullanabilirsiniz (ör. #FF5733).
RGB veya RGBA: Doğrudan renk değerlerini veya şeffaflık içeren RGBA değerlerini belirtebilirsiniz (ör. rgba(255, 87, 51, 0.8)).
Background Image seçeneği ile elementlerin dolgu alanına görseller ekleyebilirsiniz.
Görsel Eklemek için:
Add: Cihazınızdan JPG, PNG, SVG veya XML formatında bir görsel seçin.
Generate with AI: Yapay zeka ile görsel oluşturun.
AI Görsel Üretimi: "Generate with AI" butonuna tıklayın ve ihtiyacınız olan görsel için gerekli bilgileri girin. Yapay zeka tarafından önerilen görsellerden birini seçip elementinizin dolgusuna ekleyebilirsiniz.
Fill (Dolgu) ayarlarını yaptıktan sonra, seçilen elementin dolgu rengi veya arka planı otomatik olarak güncellenir.
Fill (Dolgu) Özelliklerine Göre Element Uyumluluğu
Bazı Elementlerde Tüm Özellikler: Bazı elementler Fill (Dolgu) içerisinde yer alan tüm özellikleri destekler.
Sınırlı Özellik Kullanımı: Bazı elementlerde ise Fill (Dolgu) özelliği sınırlı olabilir ve yalnızca belirli ayarları destekleyebilir.