İster bir blog yazısı için stok fotoğrafı hazırlıyor olun, ister müşterinize sunacağınız bir web tasarımının arayüzünü kodluyor olun, dijital dünyanın en temel ve en sık tekrarlanan işlemi "yeniden boyutlandırmadır" (resizing). Ancak bu işlemi bilinçsizce yapmak, görsellerin sünmesine, insanların yüzlerinin garip şekillere girmesine ve markanızın amatör görünmesine sebep olur.
İşte tam bu noktada, matematikteki "orantı" kuralı yani en-boy oranı (aspect ratio) hayat kurtarır. Bir görseli bozulmadan küçültmenin veya büyütmenin tek kuralı, orijinal genişlik ile orijinal yükseklik arasındaki o görünmez bağı (oranı) yeni boyutlarda da korumaktır. Eksik kenar pikselini bulma işlemlerini kağıt kalemle yapmamak için En-Boy Oranı Hesaplama aracımızı her zaman bir sekmede açık tutabilirsiniz. Gelin, orantılı yeniden boyutlandırmanın arkasındaki mantığı ve pratik kullanım alanlarını inceleyelim.
Orantılı Boyutlandırma (Proportional Scaling) Nedir?
Bir nesnenin sadece bir kenarını (örneğin sadece genişliğini) değiştirip yüksekliğini aynı bırakırsanız, nesne o yöne doğru "sünerek" deforme olur. Orantılı boyutlandırma, genişliği yüzde kaç oranında büyütüyorsanız (örneğin %50 büyütüyorsanız), yüksekliği de birebir aynı oranda (%50) büyütmeniz demektir. Bu sayede nesnenin kapladığı alan değişse bile, genel formu ve estetiği bozulmadan kalır.
Görsel işleme programlarında (Photoshop, Illustrator vb.) veya ofis programlarında (Word, PowerPoint) bir resmi köşesinden tutup çekerken klavyede Shift tuşuna basılı tutmak, orantılı boyutlandırmayı zorunlu kılar; işte bu tuşun yaptığı şey arka planda anlık olarak en-boy oranını hesaplamaktır.
Eksik Kenarı Bulma Formülü
Pratikte karşımıza çıkan en yaygın senaryo şudur: Elimizde belli boyutlarda bir görsel vardır, ancak bu görseli koyacağımız alanın (örneğin web sitesindeki bir resim çerçevesinin) genişliği bellidir. Peki bu durumda yüksekliği (eksik kenarı) kaç piksel ayarlamalıyız ki resim tam otursun ve bozulmasın?
Formül: (Yeni Genişlik / Orijinal Genişlik) x Orijinal Yükseklik = Yeni Yükseklik
- (Orijinal Yükseklik / Orijinal Genişlik oranına ulaşıp bunu yeni genişlikle çarpmakla aynı anlama gelir)
Senaryo 1: Web Sitesi İçin Banner Hazırlama
Elinizde dijital bir kamerayla çekilmiş devasa bir fotoğraf var.
- Orijinal Boyutlar: 6000 piksel genişlik x 4000 piksel yükseklik. (Oranı 3:2'dir).
- Sitenizin blog şablonu, görsellerin genişliğinin tam olarak 800 piksel olmasını şart koşuyor.
Fotoğrafı Photoshop'a atıp genişliği 800 yaptığınızda yüksekliğe ne yazacaksınız?
- Formül: (4000 / 6000) = 0.666... (Bu, fotoğrafın yüksekliğinin genişliğinin %66'sı kadar olduğunu söyler).
- 0.666... x 800 (Yeni Genişliğimiz) = 533.33
- Dijital dünyada yarım piksel olmadığı için bu değeri en yakın tam sayıya, yani 533'e yuvarlarsınız. Yeni boyutunuz 800x533 piksel olmalıdır.
Senaryo 2: Verilen Bir Yüksekliğe Göre Genişliği Bulma
Bu kez bir dergi kapağı (dikey) tasarlıyorsunuz. Fotoğrafı koyacağınız alanın yüksekliği sabit.
- Orijinal Fotoğraf: 1920 Genişlik x 1080 Yükseklik (16:9 yatay).
- Derginin tasarımında o alana ayrılan yükseklik tam 500 piksel. Genişlik ne olmalı?
Formülü ters çeviriyoruz:
- (Orijinal Genişlik / Orijinal Yükseklik) x Yeni Yükseklik = Yeni Genişlik
- (1920 / 1080) = 1.777...
- 1.777... x 500 = 888.88 (Yuvarlarsak 889).
- Eğer fotoğrafı sadece 889x500 boyutlarına getirirseniz fotoğraf sığacaktır (Fakat 16:9 yatay bir fotoğrafı dikey bir tasarıma koyduğunuz için muhtemelen sağdan ve soldan kırpmanız gerekecektir).
Bu hesaplamaları her defasında manuel yapmak zaman kaybettirir ve formülü karıştırabilirsiniz. En-Boy Oranı Hesaplama aracımızı kullanarak ilk kutuya orijinal ölçüleri, ikinci kısımdaki hedeflenen boyuta da bildiğiniz kenarı yazdığınızda sistem eksik kenarı anında size verecektir.
CSS ve Web Tasarımında En-Boy Oranı (aspect-ratio özelliği)
Geçmişte web geliştiricileri (Front-end developer'lar), sitelere bir video veya resim koyarken ekran küçüldüğünde (örneğin telefondan girildiğinde) görselin sünüp bozulmasını engellemek için karmaşık kodlar (Padding Hack gibi hileler) yazmak zorundaydılar.
Neyse ki günümüz modern web tarayıcıları CSS'te hayat kurtaran bir özelliği destekliyor: aspect-ratio.
Bu CSS kodu sayesinde, HTML'de bir nesneye (örneğin bir div veya img etiketine) sadece genişlik verir ve aspect-ratio: 16/9; kuralını eklerseniz, tarayıcı ekran ne kadar büyürse veya küçülürse küçülsün yüksekliği otomatik olarak formüle göre kendisi hesaplar ve nesnenin 16:9 formunu asla bozmaz.
Örnek Kod:
.video-kutusu {
width: 100%; /* Ekran genişliği neyse tamamını kapla */
aspect-ratio: 16 / 9; /* Ama yüksekliği otomatik olarak 16:9 oranına göre hesapla */
background-color: black;
}
Bu özellik, responsiv (duyarlı) mobil uyumlu web siteleri tasarlarken geliştiricilerin en büyük yardımcısıdır. Hangi oranın tasarımınıza daha çok yakışacağını (4:3 mü, 1:1 mi, 16:9 mu?) kodlamadan önce sitemizdeki hesaplayıcı ile test edebilirsiniz.
Sonuç
Görselleri doğru boyutlandırmak dijital hijyenin ilk kuralıdır. Yanlış hesaplanmış veya sünmüş bir görsel, en iyi içeriğin bile amatör görünmesine sebep olur. Matematiksel oran-orantı formülünün arkasındaki mantığı anlamak önemlidir, ancak bu formülü her gün elle hesaplamak zorunda değilsiniz. Tasarım, kodlama veya içerik süreçlerinizde hız ve kesinlik için En-Boy Oranı Hesaplama aracını araç kutunuza ekleyerek profesyonel görünümünüzü her platformda koruyabilirsiniz.
En-Boy Oranı Hatalarının Markanıza Etkisi
Tasarımlarınızda en-boy oranına dikkat etmemenin sadece estetik değil, aynı zamanda güvenilirlik açısından da önemli sonuçları vardır. Özellikle kurumsal kimlik çalışmalarında, bir logonun veya ürün fotoğrafının deforme olması, doğrudan amatör bir izlenim bırakır. Tüketiciler, dijital varlıklarına (web sitesi, sosyal medya vb.) özen göstermeyen bir markanın ürün veya hizmet kalitesine de şüpheyle yaklaşabilirler.
Profesyonel bir imaj çizmek, detaylara verilen önemle başlar. Her platformun kendine özgü görsel standartları olduğunu ve bir görseli her yere aynı boyutlarda kopyala-yapıştır yapmanın genellikle sorun yarattığını unutmamak gerekir. Doğru orantılı boyutlandırma tekniklerini kullanmak, markanızın ciddiyetini yansıtan sessiz ama güçlü bir iletişim aracıdır.
