Kendi Simgeni Nasıl Yapılır?
Bu makalede, kendi gömülebilir simge yazı tipinizi nasıl oluşturacağınızı öğretmeden önce başarılı UI simgeleri oluşturmanın arkasındaki bilimi inceleyeceğim.
Bireysel simgeleri tasarlamadan @font-face Bunları dağıtım için gömmek, hatta lisanslamak, sadece ücretsiz yazılım ve çevrimiçi hizmetler kullanıyor olacağız. Peki ya bu? Başarılı alfasayısal yazı yapabilmek için gereken ezoterik bilgiye güvenmeniz gerekmez; Sadece çok küçük görünebilecek şeyler tasarlamak için bir göz.
Sonuçta, basit ikonların üretiminin çok ötesine uzanan tasarım öğeleri yapmak için bir süreçle gitmelisiniz.
Devam etmeden önce, tam olarak ne denediğimize dair bir şey söylenmeli achieve tasarımlarımızdaki simgeleri ilk etapta kullanarak ve bir simgeyi bir öncekinden daha başarılı kılan şey. Uygulama öncesi teori. Bunu yapabilmek için, ikonun rolünü semiyolojinin bir parçası olarak düşünmeliyiz.
İyi bir simge ne yapar?
semiyoloji En geniş anlamıyla, işaret sistemlerinin incelenmesi, bunların oluşumu ve sürdürülmesine nasıl katkıda bulunduğumuz ve içimizdeki ve bizden dünyaya dair anlayışımız üzerindeki etkisidir.
Tasarım çalışmanızın bir bölümünü ne zaman ele aldığınızı göz önünde bulundurun. anlamına hangi - izleyicinize ne söylediği veya onlar için hatırlatan kavramlar - tasarımınızı bir semiyoloji olarak düşünmektesiniz. Dilbilim gibi semiyoloji dilleri kapsamasına rağmen, bir web sitesinde renkler, yazı biçimleri ve simgeler olarak adlandırdığımız şekiller gibi kelimeler olmadan bir şey söyleyen çok daha fazla şey vardır. Bu şeylerin söylediklerinin güçlü bir kültürel boyutu olduğu konusunda ihtiyatlı olmak gerekir. Çin'de Kırmızı renk birçok Batı ülkesinde tehlikeyi göstermek için kullanılırken, kırmızı renk iyi bir serveti ifade edebilir.
(Bir resme göre ell kahverengi )
“İkon” teriminin semiyoloji alanında özel bir anlamı vardır. Bir simge, bir şeye benzeyen bir şeyi simgeleyen bir eserdir. Örneğin bir harita iğnesi simgesi alın . “Gerçek” harita pimini andıran bir şekil olarak, onu ifade edebilir. Sırayla, gerçek harita pimi, her türlü anlamlı kavramları akla getiriyor. Bunlar arasında, pinin ait olabileceği harita gibi konum gibi daha az soyut kavramlar gibi soyut kavramlar vardır.
Bazı sözde simgeler gerçekten ikonik değildir. Her yerde bulunan RSS simgesi , nokta ve iki eşmerkezli daire segmentiyle, “Gerçekten Basit Dağıtım” kelimesine benzemeyen sendikasyona benzememektedir. RSS ikonu oluşturan şekillerin konfigürasyonu, yalnızca konvansiyonel olarak RSS'yi ifade eder; Bunun ne için olduklarına karar verdik. Bir RSS simgesi daha doğru bir RSS sembolü olarak adlandırılır.
Şimdiye kadar, bu başarılı web simgelerinin aşağıdaki iki kriterin birini veya her ikisini de karşılaması gerektiğini belirledik.
- Gerçek bir şeye güçlü bir benzerlik, örneğin gerçek bir yazıcıya benzeyen bir yazdırma simgesi
- Bu nedenle, işaret sistemi dahilinde tanınabilir bir sembol olarak kuruluş ve yakınlık
Simge yazı tipleri popülerlik kazanıyor
Simgeler uzun zamandır UI tasarımlarını geliştirmek için iyi bir yol olarak düşünülmüştür, çünkü tamamen metinsel bir mesajın anlaşılmasına yardımcı olan görsel bir kısa yol sağlarlar. Simge görüntülerinin sayfaları, web tasarım topluluğu boyunca kontrbas gibi dolaştırılır, her bir set tasarımınızı daha parlak, daha çekici ve sondan daha tıklanabilir hale getirme sözü verir.
Resimlerle karşılaştırıldığında, gömülü yazı tiplerini simgeler için kullanma fikri nispeten yeni bir fikirdir. Bununla birlikte, görüntü üzerindeki birçok doğal avantajdan dolayı önemli bir çekiş kazanıyor (veya background-image ) yöntem. ben Hakkında yazmıştı Eylül ayı başlarında minik blogumda bu avantajlardan bazıları. Chris Coyier Açıkça benzer bir fikir vardı, bu fikri daha sonra haftada bir ( çok, çok ) izleyici kitlesine tanıttı. İki gönderi ve diğerleri üzerinde çizim yaparak, bu kapsamlı özellik listesini derledim:
- Bozulmadan kolayca yeniden boyutlandırılırlar (çünkü esasen vektörlerdir)
- Simgeyi yeniden renklendirmek, metni yeniden renklendirmek kadar önemsizdir. Örneğin,
color: orangeRSS simgesi için - Birçok simge tek bir dosyada toplanır ve yalnızca bir http isteği gerekir
- Chris'in belirttiği gibi, tarayıcılarda IE6 kadar erken (alfa PNG'lerden farklı olarak) çalışan saydam “knockout'ları” olan şekillerdir.
- Metnin bitişiğinde görünmesi gereken simgeler için, hizalama ve kaydırma işlemleri sorun değildir (çünkü bunlar metinlerdir).
- CSS3 efektlerini üzerinden uygulayabilirsiniz.
text-shadowvebackground-clip:textglifin şekline saygı duyuyor - SVG'den farklı olarak, tarayıcılar arası desteğin elde edilmesi kolaydır
sorunlar
Chris'in deyimiyle, simgeler için yazı tiplerini kullanmak iyi bir fikir, size söylüyorum
. Bununla birlikte, simge font kullanımı ile ilgili durum quo ideal değildir. Öncelikle, kullanılabilir kaliteli yazı tiplerinin çoğu gibi şeyler denir pictos , Fico , Klepto, Cheetos, Ponyo ve Ayın denizci eri (Bu yanlış bazı olabilir), yazı tipi için ödenir. Pratikte bunun anlamı gerçekten iki problem :
- Parayla ayrılman gerekebilir
- Paranız olsun ya da olmasın, başkasının pis tasarım işini kabul etmeniz gerekecek.
Otomatik paletli programların yanı sıra, çoğunlukla bu makaleyi okuyacak olan web tasarımcıları olduğunu varsayıyorum. Ben kendim bir tasarımcıyım ve kendi tasarımımdan ödün vermek zorunda kalma fikrini bir başkasının el işlerine dayanarak reddettiğimi düşünmüyorum. Doğal olarak, ayrıcalık için ödeme düşüncesiyle daha az hayran kaldım. Hangi simgeleri kullanmak istediğimi biliyorum ve onları genel tasarımma nasıl uyarlamak istediğimi kesinlikle biliyorum. Bu kontrolü istiyorum .
Bazı aramalardan sonra sonunda olasılıklara tanıttı arasında Inkscape 's SVG Yazı Editörü . Inkscape'i ve SVG yazı tipimi bir TTF'ye dönüştürmek için bir çevrimiçi çevirici yardımıyla küçük bir uygulama yaparak, “Heydings” yapmayı başardım. Bu yazı artık Simurai'nin listesi (Coyier'in makalesine bağlı olarak). Sana fontumu satmaya çalışmıyorum (yine de ücretsizdir) ama bence bu kavramın güzel bir kanıtıdır :
Inkscape ile simge glifleri yapma
Inkscape'i kurma
Hadi başlayalım indirme ve Inkscape'i yüklemek. Kaynaklar klasöründe bulunan, simge font starter şablonumu da kullanmalısınız. bu GitHub deposu (Daha sonra bu GitHub projesinde daha fazla). Bu dosyayı yeni Inkscape yüklemenizde açtıktan sonra, ana menüye aşağıdaki pencereleri açarak çalışma alanınızı ayarlamanız gerekir:
- AMAÇ → DOLUM VE STROK
- HEDEF → ALIGN VE DAĞITIM
- METİN → SVG FONT EDİTÖRÜ
SVG Font Editor bölmesinde, “Font” altındaki “Font 1” e tıklayın. Çalışma alanınız şimdi bu ekran görüntüsü gibi bir şeye benzemelidir:
Bunu işaret etmeye değer başlangıç kılavuz, tuvalin alt sınırının altında yanlış değildir: Bir başkası tarafından en iyi bilinen nedenlerden ötürü, bitişik yazı tipleri ile aynı taban çizgisini paylaşmalarını isterseniz, simgelerinizin tuvalin alt kısmından çok az fazla çıkması gerekir. Bunu Georgia, Arial ve bir dizi web fontu ile test ettim.
İlk glifinizi yapmak
Glifi tanımlamak için, SVG Font Editor bölmesinde Glifler sekmesine tıklayın, ardından bölmenin alt kısmındaki Glif ekle düğmesini tıklayın. İlk incelemede hemen anlaşılmaz, ancak glifinizi ("Glif 1") tıklarsanız, simgenizi atamak istediğiniz karakteri girmenizi sağlayan bir alan görünür. Öncelikle basit bir yıldız şekli oluşturacağız, bu yüzden “s”, “S” veya “*” karakterlerini girmenizi tavsiye ederim:
Şimdi, glifin karşılık gelen karakterini tanımladığımıza göre, glifin kendisini yapmamız gerekiyor. Bu sefer sadece bir yıldız yaptığımız için, Inkscape'in faydalı Yıldızlar ve Poligonlar aracını sol araç çubuğundan seçmeli ve tuvalde bir yıldız çizmeliyiz. Bu aracın, yıldızın görünümünü değiştirmenize izin veren seçeneklerle geldiğini fark edeceksiniz. Örneğimde 5 köşe, 0.5'lik bir konuşma oranı ve 0,1'lik bir yuvarlak değer seçtim.
Hizalama ve Dağıtma panelini ( SVG Yazı Düzenleyici'nin altında gizlenmiş olabilir) kullanarak yatay olarak yıldızı ortalayın ve şekli taban çizgisine göre aşağı doğru sürükleyin. Izgara kapalıyken, tuval şu şekilde görünmelidir:
Simge yazı tipindeki glifler sadece şekillerdir; renkleri, katları veya degradeleri olmayan şekiller. Dolayısıyla, yıldızımızı yazı tipimiz için meşru bir aday haline getirmek için, onu bir nesneden yola dayalı bir şekle dönüştürmeliyiz. Bunu yapmak için, yıldızı seçin ve ana menüden PATH → OBJECT TO PATH komutunu seçin. Şimdi, yıldız seçildiğinde, SVG Font Editor'imize gidebilir, geçerli “s” glifini vurgulayabilir ve seçim düğmesinden Get eğrilerini alabiliriz :
Örnek Metin alanına “s” girdiğinizde, yıldızınız şu şekilde bir önizleme olarak görünmelidir:
Daha karmaşık simgeler yapma
Artık ilk ölçeklenebilir SVG yazı tipi glifini oluşturdunuz. Dolgu ve Kontur bölmesinin seçeneklerini kullanarak, yol düğümlerini düzenleyerek ve nesneleri ve konturları birleştirerek çok daha iddialı simge tasarımları yapabilirsiniz. Tam bir Inkscape eğitimine girmek istemiyorum çünkü çok daha fazla gizliliğimiz var, ancak bu basit kuralları takip etmek sizi iyi bir şekilde destekleyecektir:
- Simgeler sadece karmaşık vektör grafikleri değil sadece şekiller olduğunu hatırlatmak için siyah konturları ve dolguları kullanmaya devam edin. CSS kullanarak son üründe simgeyi boyamak mümkündür.
- Tüm nesneler ve konturlar (satırlar), PATH → PATH AŞAĞI ya da PATH → YOLUNA GİDEN YOLUNU kullanarak yollara dönüştürülmelidir.
- Bir simge glifi oluşturmak için kullanılan birden fazla nesne ve / veya kontur, PATH → COMBINE (veya bazı durumlarda PATH → UNION) kullanılarak birlikte kullanılmalıdır.
- Şekillerden şekiller kesmek için (bir çerez kesici kullanarak), ana şeklin üzerinde “nakavt” yaratacak şekli yerleştirin, ikisini birden seçin ve PATH → FARK'ı seçin. “Knockout” gibi görünen siyah beyaz alanlar yeterli olmaz, çünkü vurduğunuzda eğrileri farkedeceğiniz gibi Kural 1'e bakınız.
Yazı tipini yerleştirme için hazırlama
Az önce bahsettiğim ve dosyayı myicons.svg olarak kaydettiğim glif yumurtlama yöntemini tekrarlayarak, yazı tipiniz için bir dizi faydalı simge oluşturmaya gittiğinizi düşünün. Şimdi, bu ikon kütüphanesini web sayfalarında kullanmak için hazırlayacaksınız.
SVG'yi TTF'ye dönüştürme
Yapmanız gereken ilk önlem @font-face Gereksinimler. Yazı biçimlerini fontlar arasında dönüştürmenize olanak tanıyan çevrimiçi hizmetler arasında http://onlinefontconverter.com/ bulunmaktadır , http://www.fontconverter.org/ ve http://www.font2web.com/ . Benim kişisel favorim ise http://www.freefontconverter.com/ çünkü kuyruğa giremedim ve herhangi bir aksaklık döndürdüğünü hiç bilmiyordum.
Bu kaynağı nasıl kullanacağınızı açıklayarak sizi korusun. Ardışık dosya yükleme alanı, seçim elemanı ve devasa dönüştürme butonu kendileri için gerçekten konuşur.
Yazı tipinin meta bilgilerini düzenleme
Artık TTF'niz elinizde olduğundan, oluşturulan meta verileri düzenlemenizi öneriyorum. Yazı tipini yeniden adlandırmak, tanımlamak ve tanımlamak, onu kurulum, yerleştirme ve dağıtım için hazır hale getirir. Ayrıca yazı tipinin kendi çalışmanız olduğunu göstermenin bir yolu. Windows çalıştıran okuyucular aldatıcı büyük bir sondaj kullanma seçeneğine sahiptir Microsoft Yazı Tipi Özellikleri Düzenleyicisi veya x için serbest kalan günler Typograf . Apple ve Linux kullanıcıları için, daha iyi bilgilendirilmiş olanları, yorumlarda yardımcı olmaktan çok etkiliyorum.
Clunky ama kullanışlı Yazı Tipi Özellikleri Düzenleyicisi
Önemli not: Microsoft Yazı Tipi Özellikleri Düzenleyicisi, yazar, açıklama ve lisans bilgilerini eklemenize izin verse de, yazı tipi adı ve postscript adı gibi temel verileri düzenlemenize izin vermez. Bu alanlar devre dışı. Bu özel yazılım parçasını kullanıyorsanız, TTF dönüşümünden önce SVG kodundaki yasaklanmış değerleri bulmanız ve düzenlemeniz gerekir. Favori metin editörünüzde orijinal SVG'yi açın (kullanıyorum Notepad ++ ) ve aşağıdakileri düzenleyin:
Yazı Tipi Adı: Etikette bulundu, font-family nitelik
Postscript Adı: Etikette bulundu, id nitelik
Açıklama: Etikete bir açıklama (yazar, lisans vb.) Eklemelisiniz. Lütfen bunun TTF açıklama metnine eşdeğer olmadığını ve dönüşümle korunmayacağını unutmayın. TTF açıklamasını ayrı olarak eklemeniz gerekir.
Yazı tipi gömülebilir hale getirme
Yerel sisteminizde TTF'yi kurduktan ve hiçbir şeyin yanlış gitmediğinden emin olmak için biraz önizleme yaptığınızda, Font Squirrel'in çalışması @ yazı tipi yüz jeneratörü . Çıktı kodunun olabildiğince verimli ve verimli hale getirilmesi için jeneratörün uzman modunda belirtilmesi gereken birkaç seçenek vardır:
Alt Ayarlama: Alt- setleme seçeneği, sadece yetki verdiğiniz karakterleri eklemenize ve dosya boyutunu azaltmanıza olanak tanır.
Karakter aralığını kaldır: Simgeleriniz neredeyse her zaman ayrı ayrı görünür, böylece karakter aralığı (karakterlerin birbirine yakınlığıyla ilgili eklenmiş bilgiler) gerekli değildir. Bu, dosya boyutunu da azaltacaktır.
WebOnly ™ : Yazı tipinizi amaçlanan şekilde kullanan kişiler hakkında evanjeliyseniz ve görüntülerin gliflerin içinden çıkıp Photoshonk - Bu seçeneği seçebilirsiniz. Ayrıca lisanslama planınıza daha uygun olabilir. Şimdi lisansı ele alacağım.
Yazı tipini dağıtma
Yazı tipinizi serbest bırakmak istiyorsanız, lisans vermek için iyi bir uygulama olarak kabul edilir. Birçok yazı tipi web sitesi yazı tipinizi bir tane olmadan taşımayacaktır. Simgeleri yapmak için özgür, açık kaynaklı bir yazılım kullandığımızdan, onları böyle dağıtmamız gerektiğine uyuyor.
Mevcut birçok lisanslama seçeneği vardır ve bunları araştırmak bazen şaşırtıcıdır. GNU General Public License GNU Genel Kamu Lisansı kesinlikle kabul edilebilir, ancak SIL Açık Yazı Tipi Lisansı . Bu lisansın asıl avantajı, ayrılmış bir font isminin sağlanmasıdır : Diğer tasarımcıların, fontları farklı şekilde isimlendirdikleri sürece değiştirmelerine izin verilir. Pratikte, bu, simge tasarımına karşı işlenen suçların “adınıza” gerçekleştirilemeyeceği anlamına gelir.
Her iki lisans söz konusu olduğunda, bir metin dosyasına bir sürüm eklemenin yanı sıra telif hakkı bildiriminin yanı sıra yazı tipinin meta dosyasındaki tam lisans URL'sine bir bağlantı eklemeniz gerekir. Daha özel talimatlar için ilgili lisans sayfalarını (yukarıda bağlantılı) ziyaret edin.
CSS yazımının sonu
Neden SVG yazı tiplerini kullanarak genel simgeler yapmayı bırakalım? Simgeleri yapma yeteneği sayesinde daha fazla alana özgü şekiller, markalama öğeleri ve süslemeler yapma yeteneği gelir. Sevmek CSS spriteları Bu görsel unsurların tümü tek bir dosyada saklanabilir ve sunucu çağrılarını tekil bir http isteğine indirgeyebilir. CSS spritelarından farklı olarak, elemanlar hem yeniden boyutlandırılabilir hem de konumsal koordinatlara bağlı değildir (
background-position doğru olarak gösterilecek değerler. Bu onları daha duyarlı tasarımlara daha uygun hale getirir .
Bazı temel tasarım öğelerini belirsiz bir şekilde gizlemek için SVG yazı tipi kullanmayı tercih ettiğimi varsayalım steampunk -sevmek Blog . Bileşen tasarımlarının basit bir HTML tablosu oluşturması şöyle bir şey olurdu:
Bu yaklaşımla ilgili en iyi şeylerden biri çok yönlülük. Örneğin, soldan ikinci dişli şekli hem küçük bir mermi noktası tasarımı hem de dev, soyut bir arka plan dekorasyonu olarak kullanılabilir . Boyama kullanmak kadar kolay color:maroon ama düz renklere bağlı kalmaya gerek yok; doku ve dokunsallık eklemek için çok sayıda CSS3 etkisi kullanılabilir. Başlamak için biraz ilham almak için inceleyin CSS3 geliştirilmiş web fontları bu mükemmel galeri .
Ekran okuyucuları hakkında kısa bir not
Görsel öğelerin bu şekilde görüntülenmesi için yazı tiplerinin kullanılmasıyla ilgili bir sorun, üzerindeki etkidir. ekran okuyucu çıktı. Görsel olarak okuyan siteye gelen bir ziyaretçi, çarkları, okları ve benzerlerini görecektir, ancak bir ekran okuyucu bu tasarımları belirten karakterleri okuma konusunda ısrar edecektir. Dekoratif SVG yazı tipi elemanlarının kullanımı için, Coyier'ın önerisini öneriyorum: Vektörleri atama Tamamlayıcı Özel Kullanım Alanı Unicode. Bu karakterler okuyucular tarafından okunmamalıdır.
Ortak bir simge webfont
JavaScript danışmanım olarak Rupert , diğer gün bana işaret, simge setleri oluşturmak için SVG yazı tiplerini kullanarak işbirliği için ilginç bir fırsat sunuyor. Görüyorsunuz, SVG kodu - ki bu bir XML biçimidir - oldukça standartlaşmış ve kolayca okunabilir. Bu, tıpkı bir “sosyal kodlama” hizmetini kullanarak geliştirmeye uygun kaynak kodun bir türüdür. GitHub .
Fikir, semiyotik etkilerinden dolayı yankı uyandırdı: Eğer bir ikonun anlaşılabilirliği uzlaşma ile belirlenirse , o zaman mutlaka konsensüs onun oluşumunda bir rol oynamalıdır. İkonumuzun “işaret sistemi” üzerinde işbirliği yaparak, sadece en arketipik ikon tasarımları ortaya çıkmalıdır. Gerçekten bir şey ifade etmesi gereken topluluklara ait olan ikon kelime hazinelerini oluşturabilmeliyiz.
Bu fikri desteklemeye yardım etmek için ortak bir GitHub deposu oluşturdum. denilen Topluluk Simgesi Yazı Tipi Deponun kod tabanı karmaşık değildir: Bir önceki Inkscape öğretisinin yakından incelenmesi ve hızlı bir şekilde okunması proje sayfası dahil olmak için gereken her şeyi size vermelidir. GitHub’da yeniyseniz, yardım sayfaları ya da mahalle teknisyenine soruyorum (yaptığım şey bu).