Sanırım daha uygun bir başlık 'Photoshop hala tipografiyi dizayn etmek için uygun bir araç mı?' Fakat bu, yukarıdakilerin dramatik çekiciliğinden yoksundur.
Birçoğunuz gibi, her zaman tasarımlarımın mock-up kompozisyonlarını oluşturmak için Photoshop'u kullandım. Hatırlayabildiğim kadarıyla, çalıştığım tasarımcıların çoğu için endüstri standardı ve tercih edilen yazılım olmuştur. Haftaları piksel mükemmel düzenler tasarladım, öğeleri hiyerarşik klasörler halinde gruplandırdım ve tüm güzel katmanlarımdan kodu mümkün olduğunca düzgün bir şekilde kodlamaya dönüştürmek için tüm katmanlarımı etiketledim.
Tasarımlarımı bir geliştiriciye açıklayan coşku, enerji ve heyecanla doluyken, katmanlarımın herşeyi Photoshop aracılığıyla deneyimlemeyi ve denemeyi denemek için açıp kapatacağım ama parlak, parlak tasarımımın görebildiğim şeye dönüştüğü için her zaman biraz hayal kırıklığına uğrayacağım. tarayıcıda. Elbette, tasarımıma benziyordu… Ve ben yazı tiplerini tanıdım ama kompozisyonlarımdan hatırladığım keskinliği yoktu. Geliştiricilerin iyi kodlamadığı, daha çok Photoshop'ta yarattığım tipografinin kod çevrilmediği.
Seçerken yazı Bir yazı tipinin kolayca okunabilir olup olmadığından daha önemli olan birkaç şey vardır. Photoshop'ta, bu bir problem değil, çünkü her şey harika görünüyor. Ekranda mükemmel bir şekilde işleneceği için hangi yazı tipinin, hangi boyutta veya ağırlıkta (sebep dahilinde) kullanıldığı önemli değildir.
Ne yazık ki, bu tarayıcıya uzanmıyor. Genellikle tarayıcımda tasarımımı görüntülerken, öğeler ve tür arasındaki ilişkiler yanlıştı. Photoshop mağazamdaki stillere bağladığım yazı tipi boyutları ve çizgi yüksekliği, tarayıcıda olduğu gibi görünmeyecektir. Tasarımlarımda başlığın üzerinde 20 piksellik bir kenar boşluğu belirtmiş olsaydım, bu mesafe, başlığın satır yüksekliğinin, kenar boşluğunun boyutu üzerinde bir etki yaratmasıyla değişebilirdi, Photoshop'ta olmayacak bir şey. O zaman korkmuş 'tasarım tweaks' uzun ve sıkıcı sürecini başlatmak gerekir.
Bana güvenin, sadece yanlarında bir tasarımcı oturumu düşüncesinden utanan geliştirici değil, aynı zamanda geliştiricinin CSS değişikliği yapmasını ve yapmasını sağlayarak 'iki kopya ile vücut kopya çizgisi yüksekliğini artırmasını' istiyorlar. Girmek. 'Aslında 1 piksel daha küçük'… Enter. 'Belki de nasıl olduğu daha iyiydi'. CSS bit'inin tarayıcı tarafından gerçek zamanlı olarak gerçek zamanlı olarak görülebilmesi için yapılan bu tür bir alıştırma, zaman alıcıdır ve yaratıcılığa elverişli değildir. Geliştiriciler, gün içinde hiçbir şeyi farketmeyecek en küçük ayrıntı olarak gördükleri şeyleri sürekli olarak değiştirerek, gün geçtikçe hızlı bir şekilde tükeniyor ve tasarımcılar tarayıcıda daha iyi bir hale gelebilecekler için yazı tipi ve stilleri hızlı ve kolay bir şekilde değiştiremiyorlar.
CSS hakkında bilgi sahibi olan tasarımcılar için, kundakçı tarayıcınızda kendi tasarım tweaks'lerinizi etkili bir şekilde yapmak için, bir CSS'deki değişikliklerin hepsini bir belgede not ederek aşağıdakini uygulamak için geliştiriciye iletebilirsiniz. Bu, bir geliştiriciyle oturmak ve CSS değişiklikleri yapmakla aynı olmakla birlikte geliştirici için çok daha az sıkıcıdır ve aynı zamanda tasarımcının bir karar vermeden önce boyut ve stillerle daha fazla deneme yapmasına da olanak tanır. Bu, HTML ve CSS'nin parçalarını incelemek ve değiştirmek için iyi bir araç olmasına rağmen, tarayıcı yenilenir yapılmaz yaptığınız değişiklikleri kaybedersiniz, çok sayıda öğeyi değiştirdiyseniz ve tüm notlarınızı not etmediyseniz çok can sıkıcı olabilirsiniz. ayarlamaları.
Kullanabilirsiniz Firediff eklentisi Firebug içinde yaptığınız tüm değişikliklerin bir kaydını kaydetmek için, her değişiklik daha sonra ayrı bir e-tabloda not etmeniz gerektiğinden tasarruf etmenizi sağlar. Bu yöntemle ilgili en büyük sorun, herhangi bir yazı tipinin tip kitinize yüklenebilmesi veya tarayıcıda görünmemesi gerektiğinden, denklemlere web yazı tiplerini tanıtmaya başlamanızdır. Bu, yazı tiplerini hızlı bir şekilde deneme imkanınız olmadığından, farklı yazı tipleriyle kolayca deneme yapmak için işleri çok daha zor ve daha az özgür kılar.
Gibi hizmetler hep aynı tür rolleri vermek tasarımcıların web yazı tipleriyle çalışmasını çok daha kolay hale getiriyor ve web için kullandığım tüm tipografiyi oldukça kullanıyorum. Yazı tiplerini, stilleri, ağırlıkları, renkleri, çizgi yüksekliğini, kenar boşluğunu, dolguyu ve daha fazlasını tipografinize atamak için görsel arabirimini kullanarak (Photoshop'ta olduğu gibi) yazım hataları oluşturabilmenizi sağlar. Typecast'in kullanımıyla ilgili en iyi şey, tarayıcıda çalışmanın en iyi yoludur, bu nedenle kullanıcı için tam olarak oluşturulacağı şekilde kararlar alırsınız. Belirli bir yazı tipi 19 pikselde çok sıcak görünmüyor mu? Bir düğmeye tıklama ile 20'ye vurabilir, nihayet 19'a inmeden önce 19'a kadar geri çekilir, hepsi bir geliştirici ile oturmak yerine saniyeler içinde yapılır.
Google fontları, Typekit ve kompozisyonlarınızda bulunan 23.000 yazı tipi koleksiyonlarından herhangi bir web yazı tipini kullanabilirsiniz. Bu da, denemeyi hızlı ve kolay hale getirir (kısa bir süre önce Fonts.com ve Myfonts'a sahip olan Monotype tarafından satın alınmışlardır. Yakında yolda). Benim düşünceme göre tipik bir oyun karakteri, tipografiye geri dönmenizi sağlar, çünkü font çeşitlemelerini denemenizi teşvik eder, ki bu türden hiç olmadığı kadar kolay erişilebilir ve kolay değiştirilebilir olmadıklarını asla fark etmemiş olabilirsiniz.
Tipik bir diğer kullanışlı özellik de, türünüzün CSS'sini görüntüleme ve düzenleme becerisidir. CSS panelini düzenleyerek arka plan renkleri ve resimler, vurgulu durumları ve hatta geçişler ekleyebilirsiniz. Yaratılışınızdan memnun olduğunuzda, CSS kodunu kolayca dışa aktarabilir ve kaydedebilirsiniz. Böylece sitenize yüklenebilir veya bir geliştiriciye gönderilebilir ve her şey tarayıcıda tasarlandığından tam olarak istediğiniz gibi görünecektir.
Photoshop hiçbir şey için endüstri standardı değil, ve tarayıcıda tasarım yapmak için onu düşürme düşüncesinde hipnotize olan bazılarınız olacak, her şeyden önce kodlayıcı değil. Photoshop'ta web yazı tiplerini kullanarak güzel tipografi oluşturmanın bir yolu olduğu için kâğıt torbayı indiriniz. Extensis Photoshop'un CS5 ve üstü sürümlerine yükleyebileceğiniz bir eklenti oluşturdu. Bu, tüm Photoshop ve Google Web Yazı Tiplerine ücretsiz, doğrudan Photoshop içinde kullanmanıza olanak sağlayacak.
Bu, tasarım bileşenlerinizdeki herhangi bir yazı tipini kullandığınız gibi, WebInfo veya Google'ın web yazı tiplerinden herhangi birini kullanabileceğiniz anlamına gelir ve bunlar tarayıcıya bakacakları gibi aynı şekilde görüntülenir. Eklenti şu anda yalnızca WebINK ve Google web yazı tiplerine erişmenizi sağlar, ancak artı tarafta yeni fontları WebINK ve Google'ın font kütüphanesine eklendikçe otomatik olarak günceller.
Photoshop besteleri ile tarayıcı uyumlu CSS arasındaki geçişi kolaylaştırmaya yardımcı olan bir başka değerli eklenti, ücretsiz, bulut tabanlı eklentidir. css3ps.com . Pek çok tasarımcının Photoshop ile çalışmasının temel nedenlerinden biri, katmanların ve şekil öğelerinin üzerinde sahip olduğunuz denetimdir. Gölge, parıltı, renk, doku, yuvarlatılmış köşeler ve daha fazlası ile kolayca ve hızlı bir şekilde deney yapabilme, çoğu zaman için neredeyse ikinci doğanın ve deneyimli tasarımcıların tarayıcıda tam olarak çoğaltmak için çabaladıkları bir şeydir. Bunlar için, bu eklenti, kompozisyonlarınızı en iyi bildiğiniz şekilde oluşturmanıza olanak tanıdığı için mükemmeldir, ancak daha sonra biçiminizin stillerini tarayıcı uyumlu CSS3'e kolayca dönüştürebilirsiniz. Bu yöntem, düğmeler, gezinme ya da sizin için bir şekil çizmiş olabileceğiniz başka şeyler tasarlamak için idealdir.
Belki de Photoshop için web mizanpajlarını tasarlamada bir araç olarak bir rol vardır, ancak web için tipografi tasarlarken Firebug ve Typecast gibi uygulamalar bunu aşmıştır. Statik kompozisyonları güncellemek için gereken süre, hızıyla karşılaştırılamaz ve kolay bir şekilde tarayıcıda değişiklik yapabilirsiniz. Tarayıcıda tasarım yapma fikrini bile bulamayanlarınız için, yukarıdaki eklentiler en azından Photoshop'un alakalı kalması ve geçişi kolaylaştırmaya yardımcı olması için gereken desteği sağlamalıdır.
Web sitelerini tasarlamak için Photoshop kullanıyor musunuz? Photoshop Flash'ın yoluna mı gidiyor? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kullanımlar ölü görüntü Shutterstock üzerinden.