ILLUSTRATOR İLE UI İÇİN ASSET ÜRETMEK VE EXPORT STANDARDI KURMAK

Illustrator’da UI için asset üretmek; ölçek, format, isimlendirme ve export ayarlarını tekrar edilebilir bir standarda bağlamakla ilgilidir. Bu yazıda ikon ve bileşen çıktılarını hatasız üreten, ekipler arası teslimi hızlandıran ve geliştiriciye net bir paket gönderten bir asset üretim ve export standardı kurmayı öğreneceksiniz.

1. UI asset üretiminde hedef çıktıyı netleştirmek

Standart kurmanın ilk adımı, “neyi teslim ediyoruz?” sorusunu netleştirmektir. UI için üretilen asset’ler genelde üç grupta toplanır: ikon setleri, illüstrasyonlar ve arayüz bileşen parçaları (badge, avatar çerçevesi, dekoratif şekiller vb.). Her grubun ihtiyaç duyduğu format ve export davranışı farklıdır.

Standardın kapsaması gereken soru

İkonlar için çoğu ekipte öncelik SVG iken, bazı bileşenler için PNG (1x/2x) gerekebilir. İllüstrasyonlarda PDF veya optimize SVG tercih edilir. Bu yüzden standart; sadece “hangi tuşa basıyoruz” değil, hangi çıktı hangi kullanım senaryosu için sorusunu da kapsamalıdır.

Format kararlarını kullanım yerine göre sınıflamak

• SVG: Vektör ikonlar, tek renk/çok renk UI sembolleri, esnek ölçek ihtiyacı
• PNG: Raster detay barındıran öğeler, gölge/blur gibi efektli parçalar, 1x/2x paket
• PDF: Dokümantasyon, baskı benzeri ihtiyaçlar, dış paydaşlarla paylaşım

Tek kaynak dosya yaklaşımıyla versiyon karmaşasını azaltmak

Dağınık dosyalar yerine tek bir “source of truth” belgesiyle ilerlemek, teslimde tutarlılığı artırır. Illustrator dosyası; artboard’larla bölünmüş, katman isimleri düzenli, export kuralları yazılmış bir şablon haline getirildiğinde ekip içi değişiklikler daha kontrollü olur. Böylece “hangi ikon günceldi?” tartışması yerine izlenebilir bir akış oluşur.

2. Artboard ve katman yapısını standardize etmek

Illustrator’da UI asset üretiminin bel kemiği artboard düzenidir. Her asset’in tek bir artboard’da, net sınırlarla yer alması; export sırasında kesme hatalarını, boşluk problemlerini ve yanlış ölçekte çıktı almayı azaltır. Bu kurgu aynı zamanda paketlemeyi hızlandırır.

Artboard boyutlarını ölçek mantığıyla kurgulamak

UI ikonlarında yaygın yaklaşım; taban ölçüyü 24px veya 20px seçmek ve tüm ikonları aynı grid’e oturtmaktır. Taban ölçüyü seçerken, ürünün kullandığı ikon kütüphanesi veya platform standartlarını dikkate alın. Önemli olan; herkesin aynı ölçüden başlaması ve 1x/2x export mantığını aynı şekilde uygulamasıdır.

Katman isimlerini teslim diline çevirmek

Katman isimleri, tasarımcı için değil teslim alan kişi için okunabilir olmalıdır. “Layer 23 copy” yerine “icon/arrow-right/24” gibi bir düzen; dosyayı açan herkesin niyeti anlamasını sağlar. Ayrıca arama yapmayı kolaylaştırır ve yanlış export riskini azaltır.

// Örnek katman ve artboard adlandırma şeması (ekip içinde kopyalanabilir)
icon/{category}/{name}/{size}
illustration/{module}/{scene}/{variant}
component/{group}/{part}/{state}

// Örnekler
icon/navigation/arrow-right/24
icon/system/close/20
component/avatar/ring/active
illustration/onboarding/success/v2

3. İsimlendirme ve dosya çıktısı kuralları koymak

En sık yaşanan problem, export edilen dosyaların isimlerinin tutarsız olmasıdır. “final.png”, “final2.png”, “sonson.svg” gibi isimler; teslim alan tarafta yeniden adlandırma işi çıkarır. Bu zaman kaybı çoğu zaman tasarım ekibine geri döner.

Şemayı kısa tutup istisna bırakmamak

Standart bir isimlendirme; arama, sürüm takibi ve otomasyon için temel oluşturur. İsimlendirmeyi belirlerken kısa ama anlamlı bir şema seçin ve bunu dokümante edin. İstisna bırakmamak burada kritiktir.

İsimlendirme şemasını ürün terminolojisine yaslamak

Dosya isimleri; ürünün kullandığı bileşen adlarıyla aynı olursa, tasarım–geliştirme arasında çeviri ihtiyacı azalır. Örneğin “btn-primary” geliştirme tarafında da aynı isimle geçiyorsa, asset paketinde de aynı kalmalıdır. Böylece teslimin doğruluğu artar.

Export klasör yapısını tek bakışta anlaşılır kılmak

Klasör yapısı, teslimin okunabilirliğini doğrudan etkiler. Basit bir yaklaşım; formatı ve ölçeği klasörde ayırmaktır. Örneğin “svg/” ve “png/1x, png/2x” gibi. Bu yapı, paket içindeki dosyaların birbirine karışmasını önler ve ihtiyaç duyulan şeyi hızlı buldurur.

{
  "project": "ui-assets",
  "exports": {
    "svg": "dist/svg/",
    "png_1x": "dist/png/1x/",
    "png_2x": "dist/png/2x/"
  },
  "naming": {
    "icons": "icon-{category}-{name}-{size}",
    "components": "component-{group}-{part}-{state}"
  }
}

4. Export ayarlarını tekrarlanabilir hale getirmek

Illustrator’da export kalitesi, tek seferlik “doğru tıklama”dan çok, tekrar edilebilir ayar setlerine bağlıdır. Aynı dosyadan farklı günlerde export alındığında aynı çıktıyı üretmek istiyorsanız; hangi pencerede hangi seçeneklerin işaretli olacağını netleştirmelisiniz.

SVG export’ta temizlik ve performans dengesini kurmak

SVG çıktılarında şişme çoğunlukla gereksiz metadata ve karmaşık path’lerden gelir. Basit ikonlarda path sayısını azaltmak ve gereksiz noktaları temizlemek, çıktıyı hafifletir. Export sırasında “presentation attributes” ve “minify” gibi seçenekler ekibe göre değişebilir; ama karar bir kez verilip standartlaştırılmalıdır. Amaç; tarayıcıda hızlı çizilen, okunabilir ve stabil bir çıktı üretmektir.

PNG export’ta ölçek, arka plan ve kenar netliği

PNG tarafında temel karar; 1x ve 2x (gerekirse 3x) üretimidir. Şeffaf arka plan çoğu UI öğesinde tercih edilir. Ayrıca keskin kenarlı öğelerde anti-alias davranışı önemlidir; küçük boyutlarda bulanıklık oluşuyorsa, çizim grid’e oturmamış olabilir. Bu yüzden export öncesi artboard sınırları ve hizalamalar kontrol edilmelidir.

5. Ekip içi teslim akışını dokümante etmek ve paylaşmak

Standart; sadece tasarım dosyasında kalırsa hızla unutulur. Bu yüzden kısa ve uygulanabilir bir “teslim kontrol listesi” hazırlayın. Liste; yeni başlayan birinin bile aynı çıktıyı üretebileceği kadar net olmalı, ama gereksiz ayrıntıyla boğmamalıdır.

Ortak dil için eğitim ve pratik

Bu noktada, eğitim ve ortak pratik çok iş görür. Illustrator’da aynı işi farklı yollarla yapan kişiler varsa, çıktı tutarlılığı düşer. Ekip içinde aynı dili oluşturmak için Illustrator eğitim programı gibi odaklı bir program, standartları daha hızlı benimsetir.

Teslim kontrol listesini kısa ve ölçülebilir yapmak

1. Artboard ölçüleri standart mı, boşluk ve taşma var mı?
2. Katman/adlandırma şeması doğru mu, gereksiz katman kaldı mı?
3. SVG’ler test edildi mi (tarayıcıda ve hedef UI’da)?
4. PNG 1x/2x çıktıları doğru klasöre gitti mi?
5. Paket içinde README ve sürüm notu var mı?

Değişiklik yönetimini görünür kılmak

Asset paketinde değişiklik olduğunda, “ne değişti?” sorusu hızlı yanıtlanmalıdır. Basit bir changelog yaklaşımı bile çok fark yaratır. Örneğin her export paketine kısa bir not eklemek; hangi ikonların güncellendiğini, hangilerinin kaldırıldığını belirtmek teslim kalitesini yükseltir. Bu pratik, özellikle çok paydaşlı ürünlerde tekrar tekrar zaman kazandırır.

6. Otomasyonla export süresini kısaltmak ve hatayı azaltmak

Standart oturduktan sonra en büyük kazanım, otomasyona alan açmasıdır. Illustrator’da “Export for Screens” gibi özellikler; artboard bazlı export’ta ciddi hız sağlar. Daha ileri düzeyde, basit script’lerle belirli klasörlere otomatik çıktı almak da mümkündür. Buradaki amaç; tasarımcının zihnini tekrara değil karar kalitesine ayırmasıdır.

Export for Screens ile artboard bazlı paket üretmek

Artboard’lar doğru isimlendirildiyse, export aşamasında manuel seçim azalır. Ölçekleri (1x/2x) ve formatları bir kez tanımlayıp, her export’ta aynı preset’i kullanmak; süreyi kısaltır. Üstelik bu yaklaşım, yeni ekip üyelerinin adaptasyonunu da hızlandırır.

Basit bir batch export script örneğiyle düzeni korumak

Aşağıdaki örnek, ekip içinde “herkes aynı klasöre export alsın” ihtiyacını destekler. Bu tip bir yaklaşım; teslimde sürprizleri azaltır. Script kullanımı ileri seviye olabilir; ama standartlar oturduğunda uygulanması kolaylaşır.

// ExtendScript (Illustrator) - basit batch export mantığı (örnek)
var doc = app.activeDocument;
var baseFolder = Folder.selectDialog("Export klasörünü seçin");
if (baseFolder) {
  var svgFolder = new Folder(baseFolder + "/svg");
  if (!svgFolder.exists) svgFolder.create();

  for (var i = 0; i < doc.artboards.length; i++) {
    doc.artboards.setActiveArtboardIndex(i);
    var abName = doc.artboards[i].name;
    var file = new File(svgFolder + "/" + abName + ".svg");

    var opts = new ExportOptionsSVG();
    opts.embedRasterImages = true;
    opts.fontType = SVGFontType.SVGFONT;
    doc.exportFile(file, ExportType.SVG, opts);
  }
}

7. Kalite kontrolüyle teslimi güvenceye almak

Bir standardın başarısı, “hız” kadar “stabil teslim” üretmesidir. Kalite kontrol; son dakikada yapılan hızlı export’ların getirdiği riskleri azaltır. Burada kritik olan; kontrolün kişiye bağlı olmaması ve herkesin aynı kontrol adımlarını uygulamasıdır.

Hedef platformda hızlı doğrulama yapmak

SVG ikonları mutlaka tarayıcıda ve hedef UI bileşeninde test edin. Stroke kullanımı, viewBox hataları veya beklenmeyen boşluklar; çoğu zaman yalnızca Illustrator önizlemesiyle yakalanmaz. PNG’lerde ise farklı arka planlarda kenarların ve gölgelerin nasıl göründüğünü kontrol etmek, son kullanıcı deneyimini korur.

Tekrarlanan sorunlar için küçük kurallar eklemek

Eğer ekipte sürekli aynı problem dönüyorsa (örneğin “icon’larda padding tutarsız”), standarda küçük bir kural ekleyin: grid ölçüsü, minimum padding, stroke kullanımı gibi. Bu tür mikro kurallar; yeniden iş ihtiyacını azaltır ve tasarım–geliştirme arasında gereksiz ping-pong’u bitirir.

8. Standartları ekibe yaymak ve sürdürülebilir kılmak

Standartları sürdürülebilir kılmanın yolu; tek bir kişinin bildiği “usta işi” olmaktan çıkarıp ekip refleksi haline getirmektir. Bunun için kısa bir onboarding dokümanı, örnek dosya şablonu ve düzenli gözden geçirme yeterlidir. İyi standart, eğitimle büyür; çünkü aynı araç farklı alışkanlıklarla kullanıldığında çıktı kalitesi düşer.

Çizim aracından üretim hattına

UI asset üretimi ve export standardı, doğrudan teslim süresini ve ürün kalitesini etkiler. Doğru kurgu ile Illustrator; sadece çizim aracı değil, ölçeklenebilir bir üretim hattı haline gelir.