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

Resmi olarak web'de bir kalıntı haline getiren Photoshop Görgü Kuralları'nın piyasaya sürülmesinden bu yana neredeyse beş yıl geçti. Web'de birkaç yıl içinde pek çok şey olabilir ve bu son beş kişi bunu çoğundan daha iyi gösterdi.

2011'de herkes duyarlı web tasarımıyla ayaklarını ıslatıyordu. Geleneksel Comp-to-HTML iş akışı daha yeni eleştirilmeye başlandı ve o zamandan beri sayısız alternatif gördük. Stil Döşemeleri, Stil Prototipleri, Görsel Envanterler, Öğe Kolajları, stil kılavuzları ve hatta tarayıcıda tasarım yapmak, hepsi birden çok cihazlı tasarıma uygun yaklaşımlardır. Sayfa tabanlı tasarımdan tasarım sistemi oluşturmaya geçişle birlikte, gerçekten heyecan verici bir zaman.

SmashingMag'de Daha Fazla Okuma :

• Photoshop'ta Retina İçin Tasarlama
• Photoshop'ta Gelişmiş Animasyonlar
• Photoshop Retina Varlık İş Akışı
• Duyarlı Görüntü Kesme Noktaları Oluşturucu

Ayrıca duyarlı bir iş akışını daha verimli hale getirmeye çalışan bir araç patlaması oldu. Webflow ve Macaw gibi uygulamalar, koddan hoşlanmayanlar için kesme noktası görselleştirmesini sindirilebilir hale getirdi. Birçok tasarımcı Photoshop'tan Sketch, Affinity Designer veya benzerlerine geçti. Diğerleri, prototip oluşturma için Keynote gibi uygulamaları benimsemiştir.

'Görgü Kuralları' Hala İlgili mi?

Aşina olabileceğimiz yoğun Photoshopping'e alternatiflerle, hala görgü kurallarına ihtiyacımız olup olmadığını sorgulamak adil. Bu makale uğruna, görgü kurallarını dosyaları düzenli, açık ve anlaşılır bir şekilde aktarmak olarak tanımlayacağız. Duyarlı tasarım tipik olarak @2x görüntülerden, birleştirilmiş CSS dosyalarından ve daha fazlasından birçok hareketli parça ile birlikte gelir. Bir web sitesi yayınlamak için yapılacak daha çok şey varken, kârlı olmak istiyorsak verimli olmak tartışmasız yüksek bir önceliktir.

Genellikle verimlilik, zayıf organizasyon ve iletişim gibi maskelenenler, bir projeyi göndermek için acele etmenin ürünleridir. Photoshop'un iş akışlarımızda farklı roller üstlenmesiyle, katmanlar ve dışa aktarılan dosyalar köşeleri kesmek için kolay hedeflerdir. Gerçek şu ki: yapmaya değer her şey iyi yapmaya değer.

Zaman kazanmak istiyorsak, düzenli ve net kalmaya biraz önceden yatırım yapmalıyız. Verimsizlik, bir iş arkadaşından bir dosya devralmak ve açık bir şekilde etiketlenmediği için nereden başlayacağını bulmaya çalışmak için değerli zaman harcamaktır. Zaten dışa aktarılmış görüntüleri düzeltmek zorunda. En kötüsü, ilk etapta ihtiyacınız olan dosyayı bulamıyor.

Photoshop Görgü Kurallarındaki Yeni Neler Var?

Photoshop Görgü Kuralları, Syracuse, NY'deki bir tasarım stüdyosu olan Adjacent tarafından yeni bir kat boya verildi. Konseptte yeni olanlar için Photoshop Görgü Kuralları, web tasarımında netlik yoluyla verimliliği artıran en iyi uygulamalar kılavuzudur. Photoshop için tasarlanmış olsa da, bu ilkelerin çoğu Sketch ve benzeri, katman tabanlı tasarım araçları için geçerlidir.

Kılavuz aşağıdaki bölümlere ayrılmıştır:

• Dosya organizasyonu
• Katman yapısı
• Varlık dışa aktarma
• Tip yürütme
• Efekt uygulaması
• Kalite kontrolü

Siteye aşina olanlar, her biri 'Katman kopyası 5' ve 'istemci' gibi uygulamalardan kurtulma girişimi olan 'Katmanlarınızı Adlandırın' ve 'Dosyaları Doğru Bir Şekilde Adlandırın' gibi özlü ipuçları gibi birçok tanıdık yönerge görecektir. sırasıyla final-v3.psd'. Biraz daha derine inerseniz, çeşitli yönergelere eklenmiş çok sayıda duyarlı kaynak ve birden çok cihaz için tasarım yapmak için birkaç ipucu bulacaksınız.

1. PSD'lerinizi Konsolide Edin

Birden çok sayfa için birden çok kompozisyon oluşturuyorsanız, Photoshop'ta artık tek bir belgeye bağlı kalmanıza yardımcı olabilecek çalışma yüzeyleri vardır. Bu, hangi PSD'nin doğru PSD olduğu konusundaki kafa karışıklığını ortadan kaldırmaya yardımcı olur.

2. İşbirliği İçinde Çalışın

Creative Cloud Libraries ve Bağlantılı Akıllı Nesnelerin eklenmesiyle tasarımcılar varlıkları oldukça kolay bir şekilde paylaşabilir. Örneğin, Photoshop'ta bir desen veya bileşen kılavuzu oluşturuyorsanız, bir tasarımcı bir bileşen üzerinde çalışırken başka bir tasarımcı aynı anda farklı bir bileşen üzerinde çalışabilir. Bu bileşenler, bir Kitaplık içinde veya bir ana PSD'ye çekilen Bağlantılı Akıllı Nesneler olarak paylaşılabilir.

3. Cihaza Tasarım Yapmayın

Bu tartışılabilir, ancak duyarlı tasarım tüm cihazları kucaklamakla ilgiliyse, belki de Photoshop'ta popüler Apple cihaz ön ayarlarını belge boyutları olarak kullanmamalıyız. Bunun yerine, tasarımınızın, nerede olursa olsun, yerleşim stresi nedeniyle kesme noktalarını dikte etmesine izin verin. Bunun istisnası, bu tür ön ayarları hedeflemenin yararlı olduğu bir cihaz veya platforma özel uygulama tasarlıyorsanız.

4. Tahribatsız Olun

Artan uygulama ve SVG desteğiyle, tasarımcıların vektör varlıklarını Photoshop'ta düzleştirmeleri ve sürdürmeleri önemlidir. Photoshop artık SVG'leri kaydetmenize izin vererek piksellerimize zarar vermemek için bize bir neden daha veriyor.

5. Ekran Çözünürlüğünün Farkında Olun

SVG'den bahsetmişken, her boyuta uyum sağlayabilen ve aslına uygunluğunu kaybetmeyen tek bir varlığa hizmet vermek gerçekten harika bir yaklaşım haline geldi. İster SVG ister @2x/3x görüntüleri olsun, bir Retina varlık iş akışına sahip olmak, duyarlı bir uygulayıcının iş akışının bir parçası haline geldi.

6. Sıkıştır

Performans, yalnızca bir geliştirici için değil, bir tasarımcı için de değerli bir nedendir. Projelerime ağır web yazı tiplerini ve Açık Tip özelliklerini dahil etmek istersem, bir performans bütçesi içinde kalmak için resimlerimi agresif bir şekilde sıkıştırarak farkı kapatmam gerektiğini sık sık rasyonelleştirdim. TinyPNG gibi üçüncü taraf araçlar, görüntü sıkıştırmayı çok kolay hale getirdi.

Web tasarım iş akışlarımız ve Photoshop kullanımımız değişmeye devam ettikçe site de değişecektir. Photoshop merkezli bir iş akışını kapsamakla birlikte, Photoshop'un az kullanıldığı yerler için de birkaç ipucu var. Kılavuz, yalnızca Photoshop kullanıyorsanız ve ne zaman kullanıyorsanız, amacınızı mümkün olduğunca açık bir şekilde iletmenizi savunur.

Topluluk Tarafından Desteklenen

Photoshop Görgü Kurallarının birincil odak noktalarından biri, daha fazla kılavuz, daha fazla kaynak ve daha fazla bakış açısıyla kendini gösteren büyümedir. Siteye, inceleme için yeni bir kılavuz göndermek için daha kolay erişim sağlayan bir özellik eklendi; bu, yüzlerce tasarımcı ve geliştiricinin yıllar içinde beni Twitter'da takip ederek veya bir e-posta adresini arayarak yaptığı bir şey.

Google Translate'in yanlışlıklarının ardından, topluluk gönüllüleri tarafından da çeviriler için açık bir çağrı var.

Photoshop Görgü Kurallarının bu kadar çok kuruluş ve bireyde nasıl yankı uyandırdığını görmek heyecan verici. Size ve ekibinize nasıl yardımcı olabilir?