Pixel Hinting için Tasarımcının Kılavuzu
Piksel mükemmel simgeler ve tipografi çevrimiçi kalabalık arasında öne çıkıyor. Açıkçası hepimiz böyle bir rafine çalışma için çabalamak isteriz, ama bazen denedikten sonra bile biraz daha az bir şeyle sonuçlanırız. Pixel Hinting, otomatik bir özellik alan ve sonuçlarına göre iyileştiren becerilerden biridir. Günümüzün yüksek çözünürlükteki ekran çözünürlüğüne rağmen - Apple'ın retina ekranları gibi - piksel eğrileriyle sonuçlanmayacağımıza rağmen pürüzsüz eğrileri hala "sahte" hale getirmemiz gerekiyor.
Birçok tasarımcı ve geliştirici, şimdi SVG ve vektör tabanlı yaklaşımlara doğru daha fazla hareket ediyor; desteğiyle gün geçtikçe iyileşiyor. Yine de, vektör tabanlı çözümlerin üretimde kullanacak kadar olgunlaşmadan önce gitmeleri gereken çok uzun bir yol var. SVG, vektör şekillerini görüntülemek için harikadır, ancak bu şekilleri yeniden boyutlandırmak için çok sıcak değildir. Yani her şey gibi, her çözüm için bir zaman ve yer var.
Vektörler nelerdir?
Vektörler, bir şeklin matematiksel temsilinin esasen sonuçlarıdır. Ekranınızda bir şey gördüğünüzde, bilgisayarınız bu nesneleri oluşturduğundan ve bunları ekranınızdaki piksellere bağladığından. Bunu yaparken, bilgisayarınız da tüm pikseller olarak nelerin gösterilmesi gerektiği ve nelerin yapılmaması gerektiği konusunda kararlar almıştır. Örneğin, “D” büyük harfinin her ikisi de mükemmel bir düz çizgiye ve kavisli bir şekle sahiptir.
Gördüğünüz gibi, kenar yumuşatma olmadan “D” üzerindeki eğri çizgi oldukça piksellidir. Yani, telafi etmek için, vektör şekilleri oluşturulduğunda, daha sağlam bir görünüm sağlamak için genellikle anti-aliased olurlar. Sadece vektör taslağı içinde yer alan pikselleri görüntülemek yerine, pikseller kademeli olarak gölgelendirilir. Bu, beyninizi piksel ızgarasına mükemmel şekilde uymayan kıvrımlı şekillerde daha düzgün bir çizgi görmesini sağlar.
Yukarıda, “D” nin nasıl pürüzlü pikselleşmeyi kaldırmaya yardımcı olması için yarım piksel olarak adlandırılana verildiğini görebilirsiniz. Ancak, bu özellik aynı zamanda bir problemi de ortaya koyuyor: bilgisayarlar görsel olarak çekici olanı bulmakta korkunç. Bu yarım pikselleri eklerken yuvarlatılmış köşeleri fantastik hale getirirken, üst / alt iç çizginin bulanıklaşmasını da sağlar. Bir vektör şekli oluşturulduğunda ortaya çıkan otomatik kenar yumuşatma, şekillerin ve tipografinin birçok parçasının harika görünmesine neden olur, ancak diğerlerini, başladığından daha kötü bir kalitede bırakır.
Merhaba, piksel ipucu.
Şimdi, vektör şekilleri ve nasıl çalıştıkları hakkında kısa bir geçmişiniz var, hadi gerçek işe girelim. Piksel ipucu, piksellerin daha fazla estetik bir şekilde, vektörün bağlantı noktalarını piksel sınırlarına dayanarak hareket ettirmeyi içerir. Bu düz çizgileri daha mükemmel hale getirirken, yine de yarım pikselleri eğrilere bırakıyor. En yaygın olarak, piksel ipucu tipografi ve raster görüntüler için şekiller (logolar, ikonlar, markalama, vb) kullanılır. Şimdi, en önemlisi, vektörünüzü doğru bir şekilde ayarlamak için, istediğiniz boyutta ve şekilde olmalıdır. Pikseliniz işinizi ima ettikten, döndürdüğünüzde veya yeniden boyutlandırabildiğinizde, otomatik olarak anti-aliasing yaparak tüm bu işleri bir kenara bırakabilirsiniz. Başlamadan önce aşağıdaki ayarların yapıldığından emin olun (Bu görev için Photoshop kullanıyorum):
- Piksel ızgarasını açın (Görünüm> Göster> Kılavuz, ayrıca Ekstraların Göster menüsü üzerinde kontrol edildiğinden emin olun)
- Kılavuzunuzun 10 altbölüm ile her 10 pikselde bir kılavuz çizgisi olduğundan emin olun. Ya da benzer bir şey, böylece her piksel arasında bir çizgi var.
- Snapping'i devre dışı bırak (Görünüm> ekin işaretini kaldırın). 1px artışlarla tutturma noktaları istemiyoruz, noktaları pikseller içinde taşımak istiyoruz.
Piksel ipucu tipografi
Şekillere karşı tipografi yapma süreci biraz farklıdır, bu yüzden sizi her ikinize de götüreceğim. İdeal olarak tipografi ile, ipuçlama işleminizden önce veya sırasında türünüzü belirtmek istersiniz. Ne olursa olsun, piksel ipucu yaptığınız son şeylerden biri olmalıdır.
Öncelikle, piksel ipucu oluşturmak istediğiniz tipografiyi seçin ve katmanın bir kopyasını yapın, ardından bu katmanı bir şekle dönüştürün.
Metnin, hem yatay hem de dikey eksende ızgaradan garip bir şekilde düştüğünü görebilirsiniz. Bunu düzeltmek için, yerleştirilen piksel ızgarasıyla daha yakından hizalanana kadar her bir harfin çapa noktalarını yavaşça hareket ettireceğiz. Amaç, ızgara çizgileri üzerinde doğrudan değilse, şekil çizgilerini kapatmaktır. Dübel çapa noktalarını daha hassas bir şekilde yakınlaştırın. Bunu yaparken, ayarlarınızın doğru olduğundan emin olmak için sık sık uzaklaştırın.
İlk olarak kenar yumuşatma avantajlarını ortadan kaldırdığı için, kılavuza tam olarak uymak istemezsiniz. Bunun yerine, yalnızca işleri tutarlı tutmaya çalışın - sadece her bir eksenin bir tarafında yarım piksellere izin verin. Örneğin, sol ve alt kenarları ızgaraya doğru zorlarken, her zaman sağa ve sağa doğru yarım piksellere izin veririm.
Gördüğünüz gibi, “içeri girme” kabaca ayarlanırken, “dokunma” olduğu gibi kalır. Karakterde olduğu gibi, piksel ipucu bir bilimden çok bir zanaatdır. İşin, ayarlamadan sonra daha iyi veya daha kötü göründüğüne bakmak ve fark etmek keskin bir göz gerektirir. Tipografik pikselleri pürüzlü bir şekilde bulursanız, yineleyin ve onunla çalışmaya devam ederseniz cesaretiniz kırılmayın. Sonucunuz hala alt parsiyla görünüyorsa, katmanı her zaman silebilir ve yeniden orijinalden kopyalayabilirsiniz. Özellikle harika görünmek için tipografi almak biraz zaman alır, sadece devam edin ve er ya da geç sıkı çalışmanızın karşılığını alacaktır.
Piksel ipucu vektör şekilleri
Genel olarak piksel ipucu şekilleri simgeler veya logolar için ayrılmıştır. Yine, şeklin, ayarlamaya başlamadan önce istediğiniz büyüklükte ve dönüşte olduğundan emin olmak istersiniz, daha sonra ayarlamak tüm zor işlerinizi atabilir. Şekilleri ayarlamak çok daha kolaydır ve iç detay için daha az göze ihtiyaç duyar. Daha karmaşık şekillerin daha uzun sürdüğü ve ayarlanması daha zor olduğu söylenir, bu yüzden basit bir şeyle başlamak en iyisidir.
Yukarıda, bizim ok ve dairemizin onları istediğimiz yerden birazcık uzandığını görebilirsiniz. Kenar yumuşatma tarafından oluşturulan yarım pikseller, sonuç olarak tüm biçimin bulanık görünmesine neden olur. Bu yüzden ızgaradaki her şeyin biraz daha iyi düşmesine izin verelim.
Oraya gidiyoruz! Bağlantı noktaları ızgarayla hizalanacak şekilde ayarlanarak, daha keskin bir simgeyle sonuçlanır. Bu simgenin bir daire olduğu için, genişlikteki herhangi bir ayarın da yüksekliğe yansıtılması gerektiğinden bahsetmek önemlidir. Ayrıca, şeklin iç kısmının iyi ve tutarlı görünmesini de unutmayın. Bir önceki resme bakarsanız, çemberin iç taraflarının aynı şekilde anti-aliased olmadığını fark edersiniz.
Sonuç olarak
Yukarıdaki çalışma ile sonuç daha keskin ve daha profesyonel görünen bir görüntüdür. Elbette, bu teknikleri bir düğmeden çok daha önemli şeylere uygulayabilirsiniz.
Bilgisayarınız tarafından yapılan otomatik kenar yumuşatma kabul edilebilir görünüyor olsa da, daha iyi olabilir. Bu nedenle, logonuza veya raster formdaki önemli simgeler / tipografi söz konusu olduğunda, piksel ipucu sadece bir niş becerisinden daha fazlasıdır; Hepimiz yüksek piksel yoğunluklu ekranlar kullandığımıza kadar, bu esastır.