ILLUSTRATOR İLE ICON SET ÜRETMEK VE GRID MANTIĞINI STANDARDIZE ETMEK

Illustrator’da tutarlı bir icon set üretmek, çizim yeteneğinden çok grid, ölçü, stroke ve export kurallarını yazılı bir sisteme bağlamakla ilgilidir; bu yazıda grid mantığını standardize etmeyi, pixel perfect yaklaşımını korumayı ve dosyayı geliştiriciye temiz teslim etmeyi öğrenerek setiniz büyüse bile “aynı aile” hissini koruyacaksınız.

1. Icon set hedefini ve kullanım bağlamını tanımlamakla başlamak

Standardın ilk adımı, ikonların nerede görüneceğini netleştirmektir: mobil mi web mi, koyu tema var mı, ikonlar buton içinde mi yoksa metin yanında mı? Bu sorular; boyut, stroke, köşe yarıçapı ve detay seviyesini doğrudan etkiler. Örneğin tablo yoğun bir ekranda 16px ikonlar okunaklı olmalı; pazarlama sayfasında ise 48px ikonlar daha detaylı olabilir.

Kararları bir kez verip kilitlemek

Burada bir primary keyword gibi düşünün: “Illustrator ile icon set üretmek” hedefini destekleyen kararları bir kez verip kilitlemek, sonradan zaman kazandırır. Ayrıca “dolgu mu çizgi mi” sorusu da kritik: Outline ikonlar için stroke standardı gerekir, filled ikonlar için negatif boşlukların tutarlılığı öne çıkar.

İlk çerçeveyi yazılı hale getirmek

İlk çerçeveyi şu parametrelerle yazılı hale getirin: temel boyut (örn. 24px), stroke kalınlığı (örn. 2px), köşe yarıçapı (örn. 2px), uç (cap) ve köşe (join) tipi, hizalama (stroke align) prensibi ve minimum boşluk (padding) yaklaşımı. Bu metin, hem tasarım hem geliştirme tarafında aynı beklentiyi oluşturur.

Temel boyut setini ve ölçek oranını belirlemekle ilerlemek

Tek bir boyuta bağlı kalmak yerine, çoğu ekip 16/20/24/32/48 gibi bir set kullanır. Ancak ikonları “rastgele ölçeklemek” yerine, ana grid üzerinden oranlı büyütmek daha temiz sonuç verir. Örneğin 24px ana grid üzerinde üretilen ikonları 48px’e taşırken çizgilerin oranı ve boşlukları iki katına oturtmak, aile hissini korur.

2. Grid sistemi, keyline ve optik dengeyi standardize etmek

Grid, sadece karelerden oluşan bir kılavuz değildir; ikonların gövde kalınlığını, boşluklarını ve optik ağırlıklarını eşitleyen bir tasarım sözleşmesidir. En yaygın yaklaşım, 24px ikon için 24x24 artboard ve içeride güvenli alan (örn. 2px padding) tanımlamaktır. Böylece ikonlar yan yana geldiğinde nefes alır.

Optik eşitliği matematiksel eşitliğin önüne almak

Keyline mantığında, farklı şekillerin optik olarak eşit görünmesi hedeflenir. Daire, kareye göre daha küçük algılanır; bu yüzden aynı sınır içine oturtmak yetmeyebilir. Standardize edilen grid; dairelere biraz daha alan, keskin köşeli formlara biraz daha sıkı sınır verebilir. Buradaki amaç “matematiksel eşitlik” değil, optik eşitlik yakalamaktır.

Keyline şablonunu hazırlamakla tekrar kullanım sağlamak

Bir kez hazırladığınız keyline şablonunu her ikon dosyasına koymak yerine, Illustrator’da ayrı bir template dosyası olarak saklamak iyi çalışır. Şablonda artboard, güvenli alan çizgileri, merkez çizgileri ve sık kullanılan kılavuzlar yer alır. Böylece yeni ikon üretirken “nereden başlasam” sorusu ortadan kalkar.

Optik hizalamayı kontrol etmek için test satırı kurmak

İkonları tek tek güzel çizmek yetmez; asıl sorun yan yana gelince ortaya çıkar. Bu yüzden bir test satırı oluşturun: farklı ikonları tek bir artboard üzerinde 16px, 24px ve 32px’te yan yana dizin. Koyu/açık arka planlarda, buton içinde ve metin yanında deneyin. Bu test, grid ve boşluk standardınızı gerçek hayatta doğrular.

3. Stroke, köşe, uç ve boşlukları sabitlemekle tutarlılık kurmak

Outline ikonlarda en çok dağılan konu stroke davranışıdır. Stroke kalınlığı sabit değilse, ikonlar aynı boyutta bile farklı ağırlıkta görünür. Aynı şekilde round cap ile butt cap karışırsa, uçlar farklı hisseder. Bu yüzden setin başında “stroke style” standardını kilitleyin: stroke 2px, round cap, round join gibi.

Stroke alignment kararını platforma bağlamak

Stroke alignment konusu da önemlidir. İçeriden hizalanan stroke, küçük boyutta daha net olabilir; ortadan hizalanan stroke ise geometrik doğruluğu korur ama export’ta piksele oturmamış çizgiler bulanıklaşabilir. Burada hedef platform ve boyutlar belirleyicidir. Eğer ikonlar küçük boyutta yoğun kullanılıyorsa, pixel grid’e oturma kontrolünü sıklaştırın.

Pixel perfect yaklaşımını düzenli kontrol etmekle netlik korumak

Illustrator’da “Align to Pixel Grid” davranışı sürüm ve ayara göre değişebilir. Pratik yaklaşım: çizim sırasında snap ve kılavuzları kullanın, sonra kritik ikonları 100% zoom dışında da kontrol edin. 16px’te ince çizgiler titriyorsa, stroke kalınlığı veya detay sayısı fazladır. Bu durumda ikonu sadeleştirmek çoğu zaman en iyi çözümdür.

4. Sembol kütüphanesi, varyantlar ve isimlendirmeyi yönetmekle ölçeklenmek

Icon set büyüdükçe “aynı ikonun farklı hali” ihtiyacı gelir: outlined/filled, active/inactive, small/large. Bu varyantları yönetmenin en temiz yolu, ikonları tek tek dosyalarda kaybetmek yerine bir kaynak dosyada sistemli tutmaktır. Illustrator’da Symbols, Components ve Layers yaklaşımıyla düzen kurabilirsiniz.

İsimlendirmeyi çizim kadar ciddiye almak

İsimlendirme standartları da en az çizim kadar kritiktir. Geliştirici, “search”, “search-16”, “search-filled” gibi tutarlı adlar bekler. Ayrıca yön belirten ikonlarda (arrow-left/right) simetri ve dönüş kurallarını da yazılı hale getirmek gerekir. Bu kurallar, tasarım sistemine giden yolun temel taşlarıdır.

İsimlendirme şemasını ekipçe yazılı hale getirmekle hızlanmak

Şu tip bir şema çoğu ekipte işe yarar: kategori-aksiyon-durum-boyut-stil. Örneğin “navigation-back-default-24-outline”. Bu biraz uzun görünse de arama ve otomasyon tarafında çok avantaj sağlar. Üstelik yeni biri projeye girdiğinde ikonları tahmin ederek bulabilir.

{
  "iconSystem": {
    "baseSize": 24,
    "sizes": [16, 20, 24, 32, 48],
    "stroke": { "width": 2, "cap": "round", "join": "round" },
    "grid": { "padding": 2, "keyline": "24x24", "centerGuides": true },
    "naming": "category-action-state-size-style",
    "styles": ["outline", "filled"]
  }
}

5. Export, SVG optimizasyonu ve teslim formatını standardize etmek

Çizim standardı kadar export standardı da önemlidir. Aynı ikon bazen farklı seçeneklerle export edilince kod tarafında farklı sonuçlar doğurur: gereksiz <metadata> kalabalığı, dönüşüm matrisleri, farklı viewBox değerleri gibi. Bu yüzden export adımlarını “tek kişi biliyor” seviyesinde bırakmamak gerekir.

Ortak viewBox ile teslim etmek

Önerilen teslim yaklaşımı: her ikonun SVG’si, aynı viewBox mantığıyla (örn. 0 0 24 24) gelmeli, gereksiz gruplar temizlenmeli, path sayısı makul tutulmalı. Eğer filled ikonlar varsa, outline ikonlarla aynı optik ağırlığı korumak için dolgu alanlarını kontrol edin. Böylece UI tarafında yan yana geldiğinde dengeli görünür.

SVG export ayarlarını sabitlemekle sürprizleri azaltmak

Export ederken decimal hassasiyeti gereksiz yükseltmek dosyayı şişirir. Öte yandan fazla düşürmek de köşeleri bozabilir. Sık kullanılan bir aralık 2–3 decimal seviyesidir. Ayrıca “minify” ve “responsive” seçeneklerini projeye göre belirleyin. Eğer ikonlar CSS ile boyutlanacaksa responsive mantık daha uygundur.

SVG Export Checklist
- ViewBox: 0 0 24 24
- Stroke: 2px, round cap, round join (outline set)
- Expand Appearance: only if required by effects
- Decimal: 2 or 3
- Remove: metadata, hidden layers, unused groups
- File name: navigation-back-default-24-outline.svg

6. Kalite kontrol, inceleme akışı ve geri bildirim döngüsü kurmak

Standardı yazmak kadar uygulamak da süreç ister. Kalite kontrol için basit ama etkili bir kontrol listesi oluşturun: boyut doğru mu, viewBox aynı mı, stroke standarda uyuyor mu, ikon güvenli alanı aşıyor mu, 16px’te okunuyor mu, koyu temada kayboluyor mu? Bu maddeler, üretim hızını düşürmeden kaliteyi yükseltir.

Tekil ikon değil set odaklı değerlendirmek

İnceleme akışında, ikonları tek tek değil set olarak değerlendirin. “Bu ikon güzel olmuş” demek yerine, “bu ikon setin ağırlık standardından sapmış” gibi set odaklı geri bildirimler daha faydalıdır. Ayrıca sürümleme yapın: setin bir versiyon notu varsa, değişikliklerin takibi kolaylaşır.

Review oturumlarını kısa aralıklarla yapmakla tutarlılığı korumak

Ayda bir büyük temizlik yerine, haftalık kısa review oturumları daha etkilidir. Yeni gelen ikonlar test satırına eklenir, 16/24/32 boyutlarında hızlı kontrol edilir, isimlendirme ve export standartları doğrulanır. Bu döngü, ileride “seti baştan elden geçirelim” maliyetini azaltır.

7. Eğitimle ortak dili hızlandırmak ve üretimi ölçeklemek

Icon set üretimi, tasarım ekibi ile geliştirme ekibi arasında ortak bir sözlük gerektirir. Grid, keyline, stroke, viewBox ve isimlendirme gibi konular netleştiğinde, geri dönüşler azalır ve teslim süreleri kısalır. Özellikle farklı ekiplerin aynı tasarım sistemine katkı verdiği yapılarda, bu standartlar zaman kazandırır.

Doğru alışkanlıkları baştan kurmak

Illustrator tarafında doğru alışkanlıkları baştan kurmak için pratik, örnek odaklı bir yol izlemek isterseniz Illustrator eğitimi sayfasına göz atabilirsiniz. Amaç, araç bilgisini artırmaktan çok; üretim standardını sağlamlaştıracak bir iş akışı oluşturmaktır.

8. Hızlı kontrol listesiyle uygulamayı pekiştirmek

Aşağıdaki maddeleri bir dosyada sabit tutup her set güncellemesinde kullanın. Bu küçük rutin, standardın canlı kalmasını sağlar ve yeni katılan ekip üyelerinin adaptasyonunu kolaylaştırır.

• Artboard boyutu ve güvenli alan değerlerini doğrulamak
• Stroke kalınlığı, cap ve join ayarlarını sabitlemek
• Optik denge için test satırında yan yana kontrol etmek
• İsimlendirme şemasını tutarlı uygulamak
• SVG viewBox ve export ayarlarını aynı tutmak

Bu kontrol listesiyle ilerlediğinizde, icon setiniz büyüse bile “aynı aile” hissini korur. Üretim hızlanır, hata oranı düşer ve tasarım kararları daha şeffaf hale gelir. En önemlisi, ikonlar artık tek tek değil; sistemin parçası olarak yönetilir.