"Göz kararı" olmadan düzgün yerleşim: Hizalama, ızgara, kılavuzlar ve yakalama
Nesnelerin düzgün durması için ızgarayı/kılavuzları etkinleştirin, yakalamayı (snap) açın ve elle sürüklemek yerine Align/Distribute araçlarını kullanın. Aşağıda evrensel işlem sırası ve popüler programlar için hızlı adımlar yer almaktadır.
İçindekiler
- Tam olarak neye ihtiyacımız var: Align, Distribute ve Snap
- Düzgün yerleşim için evrensel algoritma
- Izgara ve kılavuzlar nerede açılır (kısayol)
- Figma: layout grid, tidy up ve otomatik boşluklar
- Photoshop: ızgara, kılavuzlar ve "akıllı" ipuçları
- Illustrator: Yakalama ve ana nesneye göre hizalama
- InDesign: Kılavuzlar, document/baseline grid ve Align
- PowerPoint: guides/gridlines ve distribute
- Sık yapılan hatalar
- SSS
Tam olarak neye ihtiyacımız var: Align, Distribute ve Snap
- Align (Hizala) — Nesneleri kenara veya merkeze yerleştirme (sol/sağ/üst/alt/merkez).
- Distribute (Dağıt) — Nesneler arasında eşit boşluklar oluşturma.
- Snap (Yakalama) — Öğelerin ızgaraya, kılavuzlara, diğer nesnelerin kenarlarına ve merkezlerine "yapışmasını" sağlar (böylece 1–2 px kaymazlar).
Neredeyse her zaman doğru sıra şudur: ızgarayı/kılavuzları aç → yakalamayı aç → en dıştaki öğeleri yerleştir → geri kalanlar için Distribute/Align kullan.
Düzgün yerleşim için evrensel algoritma
- Varsa cetvelleri açın ve temel referans noktalarını belirleyin: kenar boşlukları, merkez, sütunlar.
- Izgarayı (düzenli yapı) açın ve kılavuzlar ekleyin (keskin referans noktaları).
- Izgaraya/kılavuzlara/nesnelere yakalamayı (Snap) etkinleştirin.
- "Göz kararı" yapmak yerine Align ile hizalayın.
- Distribute (veya Tidy up gibi bir benzeri) aracılığıyla eşit boşluklar oluşturun.
- %100 yakınlaştırmada kontrol edin: rastgele piksel kaymaları olup olmadığına bakın.
Izgara ve kılavuzlar nerede açılır (kısayol)
Hızlıca: Menüde ne aranmalı
| Program | Izgara | Kılavuzlar | Hizalama/Aralıklar |
|---|---|---|---|
| Figma | Frame içindeki Layout grid | Frame içindeki kılavuzlar/yakalamalar | Align, Distribute, Tidy up |
| Photoshop | View/Görünüm → Grid | View/Görünüm → Rulers + Guides | Hizalama paneli/araçları |
| Illustrator | View → Show Grid | Rulers + Guides | Window → Align (+ Distribute) |
| InDesign | Document/Baseline grid | Ruler Guides | Align paneli |
| PowerPoint | View → Gridlines | View → Guides | Format → Align + Distribute |
Figma: layout grid, tidy up ve otomatik boşluklar
- Maket için ızgara: Frame'i seçin → sağ panelde Layout grid ekleyin (Grid/Columns/Rows).
- Hizalama: Nesneleri seçin → Align butonlarını kullanın (kenarlara/merkeze göre).
- Eşit aralıklar: 3 veya daha fazla öğe için Tidy up veya Distribute spacing kullanın.
- Eğer bunlar UI bloklarıysa, bunları Auto Layout içine almak daha hızlı ve kararlıdır; böylece boşluklar ve aralıklar sayı ile belirlenir ve "kaymaz".
Photoshop: ızgara, kılavuzlar ve "akıllı" ipuçları
- Rulers/Cetvelleri açın ve cetvelden tuvale bir kılavuz sürükleyin (veya kesin bir değere göre kılavuz oluşturun).
- Grid/Izgarayı açın ve gerekirse ızgara adımını ayarlarda yapılandırın.
- Smart Guides/Akıllı Kılavuzları açın; bunlar sürüklerken merkezleri, kenarları ve eşit mesafeleri yakalamanıza yardımcı olur.
Izgara/kılavuzlar "kaybolduysa", genellikle yardımcı öğeleri gösterme anahtarının (yazdırılmayan) kapalı olması suçludur. Açık olduğundan emin olun.
Illustrator: Yakalama ve ana nesneye göre hizalama
- Grid'i ve gerekirse Snap to Grid'i (ızgaraya yakalama) açın.
- Merkezler/kesişimler için ipuçları sağlayan Guides/Kılavuzlar ve Smart Guides'ı açın.
- Align panelini açın ve şunları kullanın:
- Hizalama için Align,
- Eşit aralıklar için Distribute.
- "Ana" öğeyi hareket ettiremiyorsanız, ana nesne modunu açın (seçili ana nesneye göre hizalama).
InDesign: Kılavuzlar, document/baseline grid ve Align
- Ruler Guides'ı (cetvel kılavuzları) kullanın ve bunlara yakalamayı açın.
- Nesne yerleşimi için Document Grid'i, düzgün metin için Baseline Grid'i açın (böylece sütunlardaki satırlar hizalanır).
- Align panelinde hizalamanın neye göre yapılacağını seçin: seçim / sayfa / yayılma / kenar boşlukları ve ancak sonra Align/Distribute'a basın.
PowerPoint: guides/gridlines ve distribute
- Guides (kılavuzlar) ve **Gridlines (ızgara çizgileri)**ni View/Görünüm sekmesinde açın.
- Birden fazla nesneyi seçin → Align (sol/merkez/sağ; üst/orta/alt).
- Eşit boşluklar için Distribute horizontally/vertically kullanın.
- Nesneler aşırı "yapışıyorsa", yakalamayı geçici olarak zayıflatın (veya ızgara ve kılavuz ayarlarında kapatın).
Sık yapılan hatalar
- Align/Distribute yerine "göz kararı" tek bir nesneye göre hizalama yapılıyor — bu da farklı boşluklara neden oluyor.
- En dıştaki öğeler yerleştirilmeden önce Distribute'a basılması: Dağıtım genellikle kenarları "sabiter" ve ortayı yeniden düzenler.
- Farklı kapsayıcıların karıştırılması (gruplar/frame'ler/slaytlar): Hizalama beklenmedik bir alana göre yapılır.
- Yakalama olmadan çalışmak ve özellikle %100 olmayan yakınlaştırmalarda "yarım piksel" hatasına düşmek.
SSS
Kartlar/simgeler arasında eşit boşluklar nasıl oluşturulur?
En dıştaki öğeleri yerleştirin, ardından Distribute (veya Figma'da Tidy up) uygulayın. Tekrarlayan bloklar için Auto Layout (Figma) veya diğer düzenleyicilerde Align paneli üzerinden eşit aralıklar daha iyidir.
Koordinatlar düzgün olsa da nesneler neden eğri görünüyor?
Bazı yakınlaştırma seviyelerinde (örneğin %66,7) görüntüleme "gürültülü" olabilir. %100'de kontrol edin ve öğelerin tam piksellerde durduğundan emin olun (ekran grafiği için).
Hangisi daha iyi: ızgara mı yoksa kılavuzlar mı?
Izgara düzenli yapılar (adım, sütunlar) içindir, kılavuzlar ise kesin çizgiler (kenar boşlukları, eksenler, temel hizalamalar) içindir. İdeal olan her iki aracı birlikte kullanmaktır.