SASS – Variables & Nesting

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Variables(değişkenler) tanımlama ve kullanma, Nesting(iç içe yazma) gibi konulara değiniyor olacağım. “div” elementlerine SASS dosyası(.scss) ile oluşturduğumuz(aslında otomatik olarak oluşan) css dosyası ile stil vereceğiz.

kmb-udemy-reklam

Photoshop – Variables

Bu sefer tasarımcıların bölgesine adım atacağım ve biraz buralardan bahsedeceğim. Biliyorum, bir yazılımcı olarak gerçekten tehlikeli sularda bulunuyorum. 🙂 Fakat güzel bir özelliği sizinle paylaşmak istedim. Aşağıda videosunu izleyeceğiniz olayı kısaca anlatmak gerekirse, senaryomuz şu şekilde işliyor..

Örneğin; bir araba sitesi ya da benzeri bir site sahibi ya da tasarımcısısınız. Söyle birşey düşünebilir ya da tasarımcınızdan isteyebilirsiniz. Her bir araba için bir bilgi kartı görünümünde resim oluşturmak ve bunu resimleri sitemde animasyonlu bir katalog’da ya da olduğu gibi yayınlamak isteyebilirsiniz. Tabii ki bu durumda elinizdeki her araba resmi için veritabanınızda bu araba ile ilgili verilerinizde bulunmaktadır.

Bu elinizdeki veriler ve arabanın resmi ile araba için bir bilgi kartı resmi oluşturup (Üzerinde hem arabanın resmi hemde veritabanındaki bilgileri içerecek) her bir araba için tek bir resim dosyası elde edeceğiz. Tabii bunun için photoshop üzerinde her bir araba için resimi oturup çizmek pek akıllıca bir yöntem değil. Düşünün ki 10.000 araba resmi var elinizde 🙂 Gerçekten ilginç anlar yaşanabilir. Neyse amacımız;

Photoshop ile bir standart bilgi kartı resmi oluşturmak ve bu resimde istediğimiz alanlara veritabanımızdaki bilgilerin otomatik olarak eklenmesini sağlayarak, her araba için oluşturulacak resmin otomatik olarak photoshop tarafından oluşturulmasını sağlamak.

Tabii bunun için önce resimlerinizi bir klasör’e yerleştiriyorsunuz..

Veritabanındaki bilgilerden de “ , “ ile ayırarak bir “.txt” dosya oluşturuyorsunuz.

Örneğin; Ford , Mastang , 2001 Model , Beyaz , … şeklinde tabii her satırda bir resim için gerekli bilgiler sıralanmaktadır.

Ardından aşağıdaki video’daki gibi Photoshop üzerinde “Variables” tanımlayarak ve “Data sets” kullanarak resimlerin otomatik olarak oluşturulması sağlanmış oluyor.

Bence süper 🙂 nerede kullanacağız ki derseniz inanın biraz hayal gücünüzü zorlarsanız nerelerde kullanabileceğinizi farkedebilirsiniz. 🙂 İyi Seyirler..

http://images.tv.adobe.com/swf/player.swf