Responsive Web Tasarımı İçin Photoshop Görgü Kuralları

Photoshop Görgü Kuralları (Photoshop Etiquette) resmi olarak ilk kez 2011 yılında ortaya atıldı ve bu kavramla birlikte herkes responsive web tasarımı geliştirmeye başladı. Etiquette için tasarımcılar çok çeşitli yollar ve yöntemler denediler. Çeşitli stil prototipleri, görsel envanterler, stil kılavuzları vs.

Photoshop Etiquette’in amacı, photoshop kullanan kişilerin belirli kural, düzen ve yöntemlere göre çalışmasıdır. Böylece oluşabilecek bütün sorunlar, hatalar ve anlaşmazlıklar en aza indirilebiliyor.

Görgü kuralları hala önemini koruyor mu?

Yazımızda Etiquette(görgü kuralları) kavramını dosyaları organize, düzgün, açık ve anlaşılır bir şekilde aktarmak olarak tanımlayacağız. Responsive tasarım genellikle @ 2x resimler, birleştirilmiş CSS dosyaları ve birçok hareketli parçayla birlikte gelir. Bir web sitesini yayınlamak için yapılması gereken bir çok şey vardır. Burada dikkat edilmesi gereken en önemli nokta ise yapılması gereken şeylerin ne kadar verimli olduğudur.

Verimlilik, zayıf yapılandırılmış bir organizasyon ve iletişim sıkıntıları ile beraber ürün yetiştirme acelesinden kaynaklanan sorunlardan dolayı sürekli olarak maskelenmektedir. Bizler Photoshop’da farklı farklı işleri beraber yapmaktayız. Bu beraberlik bazen katmanlar ya da dışa aktarılan dosyalar üzerinde ince çalışmalara engel olabiliyor ya da yeteri kadar özen gösterilemiyor diyelim. Fakat gerçek şu ki, yapılması gereken her şey iyi yapılmaya değerdir.

Zamandan tasarruf etmek istiyorsak, düzenli ve açık/anlaşılır kalmaya biraz daha özen göstermek gerekiyor. Şimdi verimsizliğe bir örnek verelim. İş arkadaşınız sizden bir işi devralıyor ve işe nereden davam edeceğini anlayamıyor ya da anlayabilmek için belli bir vakit harcıyor çünkü dosyaları düzgünce sınıflandırmamışsınız. Aynı zamanda yüklediğiniz fotoğraflar üzerinde de düzeltmeler yapmak zorunda kalıyor daha da kötüsü yerinde olması gereken dosyaları bulamıyor. İşte tüm bu durumlara sebep olmamak için işlerinizde daha titiz çalışmaya özen gösterin.

Photoshop Görgü Kurallarında yeni neler var?

Photoshop Etiquette, NewYork’daki bir tasarım stüdyosu olan Adjacent tarafından yeni bir yaklaşıma kavuştu. Konseptte yeni olanlar için Photoshop Etiquette, web tasarımında netlik/açıklık yoluyla verimliliği artıran en iyi uygulama rehberidir. Photoshop için tasarlanmış olmasına rağmen, bu ilkelerin çoğu Sketch ve benzeri katman tabanlı tasarım araçları için de geçerlidir.Bahsettiğimiz bu rehber aşağıdaki bölümlere ayrılmıştır:

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Dosya organizasyonu

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Katman yapısı

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Dosyaları dışa aktarma

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Tür yürütme

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Etki uygulaması

[mks_icon icon=”fa-angle-double-right” color=”#dd3333″ type=”fa”] Kalite kontrol

Siteye aşina olanlar tanıdık bir sürü rehber göreceklerdir. Örneğin, ‘Katmanları Adlandırın’,  ‘Dosyaları Doğru Adlandırın’  ipuçları gibi.

Rehber içerisinde aynı zamanda çeşitli yönergelere eklenen kaynaklardan tutun birden fazla cihaz kullanımına yönelik hazırlanmış tavsiyelere kadar bir çok içerik bulabilirsiniz.

1- PSD’lerinizi birleştirin

Eğer çoklu sayfalar için birden fazla çıktı (PSD) sunuyorsanız, Photoshop’un bu çalışmalarınızı bir arada bulundurmak için tasarladığı layer ve klasörler alanı vardır, bunları kullanabilirsiniz. Bu şekilde hangi PSD’nin doğru PSD olduğu hakkında düşünmenize gerek kalmaz. Eğer bunu kullanabiliyorsanız  tonlarca PSD ile uğraşmak yerine ekstradan katman kompozisyonları, akıllı objeler ve çalışma yüzeylerini kullanmayı deneyin.

2- İş birliği içerisinde çalışın

Creative Cloud (Yaratıcı Bulut) kütüphanelerinin ve bağlantılı akıllı nesnelerin eklenmesi ile tasarımcılar varlıklarını kolay bir şekilde paylaşabilmektedir. Örneğin siz Photoshop’da bir öğe üzerinde çalışırken, başka bir tasarımcı da o dosyanın başka bir kısmında aynı anda çalışabilir ve bu komponentler bir kütüphane ya da bağlantılı akıllı nesne ile ana PSD dosyanıza aktarılabilinirler.

Bağlantılı akıllı objeler ve CC kütüphaneleri arasında işbirliği içerisinde çalışmak için bir çok seçenek bulunmaktadır.

3- Cihaza göre tasarım yapmayın

Aslında bu tartışılabilir bir durum , fakat  eğer ki responsive tasarım tüm cihazları kapsayacak ise, Photoshop’un bize sunduğu popüler cihazlar için oluşturulmuş hazır şablonları kullanmaktan vazgeçmeliyiz. İstisna olarak eğer ki bir platforma ya da cihaza yönelik bir uygulama geliştiriyorsanız önceden belirlediğiniz ayarlar size yardımcı olacaktır.

4- Kayıplara sebep olmayın

SVG’nin artan uygulama ve desteği ile vektör varlıklarının Photoshop’ta tutulması tasarımcılar için önemlidir. Photoshop, piksellerimiz ile görüntüde kayıplar olmamasının bir yolu olan SVG’leri kaydetmenize olanak tanır.

5- Ekran çözünürlüğünün farkında olun

SVG, herhangi bir boyuta uyum sağlayabilen ve uyumluluğunu kaybetmeyecek bir varlık sunabilmeniz için gerçekten harika bir yaklaşımdır. Retina varlık iş akışına sahip olmak, SVG veya @ 2x / @ 3x görüntülerini iş akışının bir parçası haline getirdi.

6 -Sıkıştırma yapın

Performans sadece geliştirici için değil ama bir tasarımcı için çok değerli ve önemli bir kavramdır.

Örneğin projelerinizde ağır web fontları kullanacaksanız, resimleri sıkıştırmak size performans açısından fayda sağlayacaktır. Bunun için TinyPNG gibi üçüncü part uygulamalar işinizi çok rahat görecektir.

Performans, tasarımcının görevidir. Bu yüzden resimlerinizin ekstra dosya boyutlarını sıkıştırdığınızdan emin olun.

Photoshop Etiquette hakkında daha fazla bilgi almak için kendi sitesini ziyaret edebilirsiniz. Ayrıca bu sitenin Türkçe çevirisi olan şu siteyi de burayı tıklayarak inceleyebilirsiniz.

“Arkadaşlar bugünkü yazımızda Photoshop Görgü Kuralları’ndan bahsettik. Sizlerde bu konudaki düşünce, öneri ve yorumlarınızı mutfakla paylaşın ? Aynı zamanda mail aboneliğine kayıt olarak yazılarımızı takip edebilirsiniz.”