Google Material Design Giriş : Çevre Nedir ?

0
219

Google Material Design ile giriş yaptığımız yazımıza kaldığımız yerden devam ediyoruz. Şimdi yine giriş niteliğindeki yeni konumuz çevreden bahsedeceğiz.

Yaşadığımız ortam çevre içinde de karşılaştığımız gibi ışığın varlığı ile nesneleri görmeye başlarız. Işığın oluşmasıyla birlikte nesne üzerine düşen renkler/ışıktaki renkleri alır ve sadece kendi rengini yansıtır. Bu yansıtma esnasında ışığın az olduğu yerlerde ki renkler nesnenin kendi rengine göre daha koyu, ışığın fazla olduğu yüzeylerde ise daha açık/parlak olurlar. Bu haliyle de nesne üzerindeki aydınlık ve az ışıklı/gölge alanları ile gördüğümüzde artık nesne 3 boyutlu hale dönüşür. 3 boyutu (3B= 3 Boyut / 3D= 3 Dimensions) ayrıca çevreyi tanımlarken kullandığımız x, y, ve z boyutlarında da kullanırız.

Google Material Design da ise Yine ışık, malzeme ve gölgeyi içeren üç boyutlu bir ortamıdır. Her ne kadar x ve y konumlarında değişim olsa da z ekseni sabittir. Ana ışık yönsel gölge çevre ışığı ise yumuşak gölgeler oluşturur. Ayrıca şunuda söylemek gerek gölgenin yapısı sabit değildir. Malzemenin yükseliğine göre gölgedeki yapıda değişkenlik sağlayacaktır.

3 Boyutlu Dünya

Material Design daki ortam 3B uzaydır. Yani nesnelerin x, y ve z boyutları vardır. Layouta bakış yönümüz +Z eksenidir. Her bir nesne z ekseninde tek bir konum kaplar ve standart olarak 1dp kalınlığa sahiptir. 1dp ise çözünürlüğü 160dpi olan bir ekranda 1 piksel değerine eşittir.

Ekrana baktığımız yönü +Z tanımladığımız için perspektif kullanılmaz. y ekseni hareket ettirilerek 3B oluşturulur.

Işık ve Gölge

Portre fotoğrafları ve sinema görüntülerinde çok karşılaştığımız anahtar aydınlatma mantığı burada da geçerlidir. Sahne/layout sanal ışık ile aydınlatılmıştır. Ana ışık ise yönsel gölge oluştururken, ortam ışığı yumuşak gölgeler oluşmasını sağlar. Material Design ile hazırlanan layout/yüzeylerde bu iki ışık kaynağı ile gölgeler oluşturulur. Gölgeler; ışık kaynağı ve z-ekseni boyunca çeşitli konumlarda malzeme yüzeyleri ile bloke edilerek oluşturulur. Ekranlarda gölgeler sadece y ekseni hareket ettirilerek oluşturulur. Altta Google Material Design – Environment sayfasında paylaştığı örnekleri inceleyelim.

Ana ışıkla oluşturulan gölgeler (Dikkat edecek olursanız ışık üstten geliyor. ve gölge yoğunluğu al kenarda)

Ortam ışığıyla oluşturulan gölgeler – Burada ise nesne yüzeyine çevresel olarak yayılmış bir gölge görüyoruz.

Ana ışık ve ortam ışığının birleşmesi ile oluşturulan gölgeler – Burada ise her iki ışık kaynağı ile oluşan gölgenin birleşimini görüyoruz.

Pekala, benzer bir gölgelemeyi kullandığımız Photoshop ve Illustrator gibi programlarla nasıl yaparız? Aynı şekilde 2 gölgeyi sırası ile Drop Shadow ve Glow ile oluşturabiliriz.