Adobe XD Web Tasarımında Avatarları Otomatik Oluşturmak

Adobe XD web tasarımcılarına web tasarımları hazırlarken, web tasarımları prototipleri hazırlarken çok kolaylık sunuyor. Özellikle eklenti desteğiyle çok hızlı işler çıkarabiliyorsunuz. Bugün ben de bir eklentiden bahsedeceğim. Bu eklenti sayesinde web sitenizde hazırladığınız profil görselleri veya avatarlar gibi boşlukları otomatik olarak hızlı bir şekilde doldurabilirsiniz.

Eklenti, farklı kaynaklardan yüz fotoğrafları çekmenize ve filtreleme özelliği sayesinde aradığınız tipteki yüzleri, çalışmanızda kullanmanıza olanak tanıyor. Mutlu bir yüz arıyorsanız bunun filtrelenmesini yapabiliyorsunuz veya siyahi, sarışın ya da kumral bir tip arıyorsanız bunun da filtrelenmesini yapabiliyorsunuz.

Bu eklenti sayesinde web tasarımlarımızdaki ve mobil uygulamalarımızdaki profil görseli alanını nasıl otomatik bir şekilde doldurabileceğimizi görelim. Video öncesinde bir çalışma hazırladım. Bu bir mobil uygulama örneği olabilir veya bir web sitesinin mobil versiyonu olabilir, istediğiniz gibi düşünebilirsiniz, burada gösterme istediğim şey avatarları nasıl kullanabileceğimiz. Tasarımda gördüğünüz gibi buralar avatar bölümü. Buralara profil görseller yüklenecek. Dolayısıyla bu tasarımı bir Photoshop içerisinde yapsaydınız, internet üzerinden profil fotoğrafı bulmak gerekecekti. Ancak bunu Adobe XD ile nasıl yapabileceğimizi göstereceğim.

Profil Fotoğrafı Bulma Eklentisi

Öncelikle bir eklenti kurmamız gerekiyor. Eklentinin ismi UI Faces. Programın sol alt tarafında bir Plugins ikonu var. Bu ikona tıklıyorum. Sol taraftaki alan değişiyor. Discover Plugins butonuna tıklayarak plugin sayfasını açıyorum. Açılan bu pencerede görüyorsunuz zaten UI Faces adındaki eklentiyi. Eğer siz görmüyorsanız buradan Browse sekmesine tıklayarak uygulamanın adını yazabilirsiniz. Hemen yazalım, yazıyorum ve Enter butonuna tıklayarak aratıyorum. İlk sırada UI Faces eklentisi çıkıyor. Eklentinin bulunduğu alanın sol alt tarafında küçük bir Install linki aracılığı ile eklentiyi kuruyorum.

UI Faces Eklentisi Nedir?

Eklenti kurulduğu zaman az önce açılan sol tarafta, yani eklentiler (plugins) alanında Adobe XD’de kullanılmak üzere olan plugin’ler, kurulmuş olan plugin’ler yer alıyor. Bizim kurduğumuz plugin de bu. Bunun üzerine tıkladığımda plugin ile ilgili detaylar açılıyor. Ne demiştik sayfayı hazırlarken? Sayfanın gri alanları, yuvarlak gri alanları profil görsellerinin bulunacağı yer. Bir tanesinin üzerine tıklıyorum. Buna tıkladığım zaman sol tarafta farklı seçenekler açılıyor. Bu seçenekleri inceleyelim. Burada gördüğünüz seçenekler, buraya eklenecek olan profil görselinin nereden alınacağını seçebildiğiniz seçenekler. Unsplash.com’dan almak isteyebilirsiniz veya Pexels.com’daki portre fotoğrafları almak isteyebilirsiniz. Ve bunun gibi çeşitli farklı siteler var. Gördüğünüz gibi burada bağışlanan görsellerin bulunduğu Donated kısmı da var. Çeşitli seçenekler var burada. Bunlardan bir tanesini seçerek devam edelim.

Mesela yine aşina olduğumuz Pexels.com’u seçelim öncelikle. Aşağıya doğru indiğimizde burada fitreler var. Filtrelerin üzerine tıkladığımızda kadın mı, erkek mi olacağı, mutlu mu yoksa daha normal görünümün mü olacağı ya da cilt rengine göre siyahi mi, kumral mı, yoksa sarışın mı olacağını buradan belirleyebiliyoruz.

Biraz daha aşağı indiğimizde Advanced sekmesinde de bazı özellikler var, bazı filtrelerine sistemleri ve sıralama sistemleri var. İlk seçenek size gösterecek olan profil fotoğrafların sıralamasını belirleyen seçenek. Popülaritesine göre bu sıralamayı yapacak. Ekleyeceğimiz profil fotoğrafı, profil görselini siyah beyaz renkle ekleyebilmemize olanak tanıyan üçüncü seçeneği de seçebilirsiniz.

Adobe XD UI Faces Eklentisi Kullanımı

UI Faces uygulamasını tanıdığımıza göre şimdi uygulamaya geçebiliriz. Çalışma alanında bir görsel alanımız var. Hemen filtrelerimizi yapalım ve örnek bir fotoğraf koyalım. Pexels.com üzerinden bu fotoğrafları bulmasını istiyorum. Aşağıda iki tane seçeneğimiz var.

  • Apply Randomly butonuna tıklarsak rastgele bir fotoğraf seçecek bizim için ve buraya koyacak. Hemen ilk olarak, ilk örnek olarak bunu seçelim. Buna tıkladığım zaman ilk örnek olarak bana böyle bir görsel sundu.
  • Şimdi diğer seçeneği seçelim, ama bu sefer sisteme bırakmayalım. Biz kendimiz seçelim. Select Photos butonuna tıklıyorum. Bu butona tıkladığımda bana örnek fotoğrafları, Pexels.com üzerindeki örnek fotoğrafları gösteriyor. Filtreleme yapıp bakalım, Kadın olsun, mutlu olsun. Buradan da Brown seçeneğini seçelim. Select Photos butonuna tıklıyorum. Pexels.com üzerindeki bize önerilen fotoğraflar bunlar. Fotoğrafları biraz daha genişletmek için, daha farklı fotoğrafların çıkması için diğerlerini de seçebilirsiniz. Diğerlerini seçiyorum. Bir de öyle bakalım. Bize ne tür fotoğraf örnekleri verecek. Gördüğünüz gibi örnek fotoğrafların sayısı arttı. Burada istersek diğer fotoğraflara da göz atabiliriz. Burada da örnek fotoğraf olsun diye bunu seçiyorum ve Apply butonuna tıklıyorum. Apply ile birlikte görselim buraya geldi. Gördüğünüz gibi hızlı bir şekilde profil görselleri ekleyebiliyoruz.

Repeat Grid ile UI Faces

Grid sistemi üzerinde bu işlemler nasıl işliyor? Grid dediğimiz şey şu. Yuvarlak bir alan belirleyelim ve bu alanı çoğaltacağım. Mesela bir yorum alanı olabilir, yorum tasarımı yapıyor olabiliriz ya da bunun gibi çeşitli listeler yapıyor olabiliriz. Bunların hepsine tek tek profil fotoğrafı koymamıza gerek yok. Daha hızlı bir yöntem var çünkü. Yuvarlak alanları çizdim. Repeat Grid‘e tıklıyorum. Buna tıkladığım zaman çizdiğim profil alanının altında ve sağında bir buton belirliyor. Buton diyebiliriz sanırım buna. Bunu aşağı doğru sürüklediğimde, istersem aralarındaki boşlukları da artırabiliyorum. Ve şöyle yana doğru da artırabiliyorum. Buradaki Grid sistemini bu şekilde oluşturdum.

Repeat Grid sistemlerindeki avatar eklemenin özelliğinden bahsedeceğim. Bir tane görseli seçiyorum ve diyelim ki yine bunlardan bir tanesi. Select Photos butonuna tıklıyorum. Bu arada, buradaki herhangi birini seçmezseniz hepsini seçtiği anlamına geliyor. Burada üç tane fotoğraf seçeceğim. Neden üç tane fotoğraf seçiyorum? Bakın burada 0/3 selected yazıyor. Yani üç tane fotoğraf seçme hakkım var ki bizim üç taneydi zaten, üç tane satır alt altaydı ve bunlardan bir tanesini seçiyorum, diğerini de seçiyorum. Gördüğünüz gibi iki tane seçmiş oldum. Şimdi bir tane daha seçmem lazım. Onu da seçiyorum ve tamamlanıyor. Tamamlandıktan sonra Apply butonuna tıklıyorum. Apply butonuna tıklar tıklamaz Repeat Grid ile oluşturduğum bu profil görselleri alanlarının otomatik olarak dolduğunu görebiliyorum. Repeat Grid’ler üzerindeki profil görsellerinin UI Faces ile kullanımı da bu şekildeydi.

Bu derste hızlı bir şekilde avatar eklemeyi göstermeye çalıştım, eklenti vasıtasıyla tabii ki, UI Faces eklentisiyle. Tasarımlarızı hazırlarken örnek tasarımlar da demo içeriği hızlı bir şekilde tamamlayabilmenin bir yolu.

Popular Eğitimler

Adobe XD ve Sayfa İçi Linkleme (Anchor Links)
Adobe XD ve Sayfa İçi Linkleme (Anchor Links)

Bu derste Adobe XD ile bir sayfadaki anchor link yapımını gösteriyorum. Adobe…

Adobe XD Web Tasarımında Avatarları Otomatik Oluşturmak
Adobe XD Web Tasarımında Avatarları Otomatik Oluşturmak

Adobe XD web tasarımcılarına web tasarımları hazırlarken, web tasarımları prototipleri hazırlarken çok…