Jak vytvořit vlastní ikonu Webfont
V tomto článku budu zkoumat vědu za vytvářením úspěšných ikon uživatelského rozhraní, než vás učí, jak vytvořit vlastní embeddable font písma .
Od návrhu jednotlivých ikon k jejich konverzi @font-face zakládat a dokonce je licencovat k distribuci, budeme používat pouze svobodný software a on-line služby. Co takhle? Nebudete muset spoléhat na žádné esoterické znalosti potřebné pro úspěšné alfanumerické písmo; jen oko pro navrhování věcí, které se mohou zdát velmi, velmi malé.
Nakonec byste měli jít pryč s procesem vytváření návrhových prvků, který přesahuje hranici výroby jednoduchých ikon.
Než budeme pokračovat, mělo by se něco říct o tom, co přesně se snažíme achieve pomocí ikon v našem designu na prvním místě, a co dělá jednu ikonu úspěšnější než další. Teorie před aplikací. K tomu je třeba zvážit roli ikony jako součást semiologie.
Co dělá dobrou ikonu?
Semiologie , v nejširším smyslu je studie signatových systémů , jak přispíváme k jejich tvorbě a udržování, a dopad, který mají na naše chápání světa uvnitř i vně nás.
Kdykoli považujete za součást své konstrukční práce z pohledu toho, co to je znamená - co říká vašemu publiku nebo jaké pojmy je jim připomíná - uvažujete o svém designu jako semiotici. Ačkoli semiologie, jako je lingvistika, pokrývá jazyk, je na webu mnoho dalších věcí, které "říkají" něco bez slov, jako jsou barvy, písma a tvary, které nazýváme ikony . Měli bychom být opatrní, že to, co tyto věci říkají, má silný kulturní rozměr. V Číně , červená barva může znamenat štěstí, zatímco v mnoha západních zemích se používá k označení nebezpečí.
(Založeno na obrázku podle ell hnědá ).
Pojem "ikona" má zvláštní význam v oblasti semiologie. Ikona je artefakt, který znamená něco podobného. Vezměte například ikonu pin map . Jako tvar, který se podobá "skutečnému" mapovému kolíku, je schopen ho označit. Na druhou stranu skutečný mapový kolík přináší na mysli nejrůznější smysluplné pojmy . Mezi nimi jsou abstraktní koncepty, jako je umístění i méně abstraktní koncepty, jako je mapa, na kterou může být kolík.
Některé takzvané ikony nejsou skutečně ikonické. Všudypřítomná ikona RSS , jejíž tečka a dva soustředné kruhové segmenty se už podobají syndikaci než slova "Really Simple Syndication", to připomíná. Konfigurace tvarů, které tvoří ikonu RSS, označuje RSS podle konvence; dohodli jsme se, že to je to, proč jsou. Ikona RSS je správně nazývána symbolem RSS .
Nyní doufám, že jsme zjistili, že úspěšné webové ikony by měly splňovat jedno nebo obě následující dvě kritéria:
- Silná podoba skutečné věci, například ikona tisku, která se podobá skutečné tiskárně
- Zřízení a tedy známost jako rozpoznatelného symbolu v systému podpisu
Ikonová písma získávají popularitu
Ikony jsou již dlouho považovány za dobrý způsob, jak zvýšit vzory uživatelského rozhraní, protože poskytují vizuální zkratku, která napomáhá pochopení jinak čistě textové zprávy. Listy obrazů ikon jsou rozesílány v komunitě webového designu jako kontraband, každá sada slibuje, že váš design bude lesklý, více lákavější a více klikatelný než poslední.
Ve srovnání s obrázky je myšlenka používání vestavěných písem pro ikony relativně novým nápadem. Nicméně, je to, že získává značnou trakci kvůli mnoha inherentní výhody nad obrazem (nebo background-image ). I napsal o některé z těchto výhod na mém malém blogu zpátky na začátku září. Chris Coyier zjevně měl podobný nápad, představil tento nápad mnohem většímu publiku týdnů později. Na základě těchto dvou a dalších příspěvků jsem sestavil tento komplexní seznam funkcí:
- Mohou být snadno změněny bez degradace (protože jsou v podstatě vektory)
- Přebarvení ikony je stejně triviální jako změna barvy textu. Například,
color: orangepro ikonu RSS - Mnoho ikon je seskupeno do jednoho souboru, což vyžaduje pouze jednu žádost http
- Jak poznamenává Chris, jsou to tvary, které mají průhledné "knockouts", které fungují v prohlížečích již od IE6 (na rozdíl od alfa PNG)
- U ikon, které by se měly nacházet vedle textu, jsou zarovnání a zabalení nevýrazné (protože jsou text)
- Můžete použít efekty CSS3 přes
text-shadowabackground-clip:textkteré respektují tvar glyfu - Na rozdíl od SVG lze snadno dosáhnout podpory mezi prohlížeči
Problémy
Podle Chrisových slov je dobrý nápad používat písma pro ikony, říkám vám
. Nicméně status quo ohledně používání písma ikon není ideální. Za prvé, většina kvalitních písem, která jsou k dispozici, se nazývá věci jako Pictos , Fico , Klepto, Cheetos, Ponyo a Sailor Moon (Možná že jsem se některé z nich špatně), jsou placené fonty. V praxi to znamená, že existují opravdu dva problémy :
- Možná budete muset rozdělit peníze
- Ať už máte peníze nebo ne, budete muset přijmout někoho jiného špinavého designu
Kromě automatizovaných prohledávacích programů předpokládám, že většina webových designérů bude číst tento článek. Jsem návrhář sám a já si nemyslím, že jsem sám v odporu s myšlenkou, že musím kompromitovat svůj vlastní návrh tím, že spoléhám na někoho jiného. Přirozeně mě ani netrápí s myšlenkou, že zaplatím výsadu. Vím, jaké ikony chci používat, a vím, jak přesně je chci přizpůsobit jejich celkovému designu. Chci tu kontrolu .
Po nějakém hledání jsem byl nakonec možnosti z Inkscape SVG Font Editor . S malou praxí, která používala Inkscape a pomocí online konvertoru pro změnu písma SVG do TTF, jsem byl schopen vytvořit "Heydings". Toto písmo je nyní zahrnuto v Seznam Simurai (jak je spojeno článkem Coyier). Nesnažím se prodávat mé písmo (je to zdarma zdarma), ale myslím, že je to docela dobrý důkaz o konceptu :
Vytváření ikon s Inkscape
Nastavení Inkscape
Začněme stahování a instalace Inkscape. Měli byste také použít šablonu spouštěče písma ikony umístěnou ve složce zdrojů toto úložiště GitHub (více o tomto projektu GitHub později). Jakmile otevřete tento soubor v nové instalaci Inkscape, měli byste nastavit svůj pracovní prostor otevřením následujících oken z hlavní nabídky:
- PŘEDMĚT → PLNĚTE A STROKE
- OBJEKT → ALIGN A DISTRIBUTE
- TEXT → SVG FONT EDITOR
V podokně Editor SVG písma klikněte na "Font 1" pod "Font". Váš pracovní prostor by měl nyní vypadat podobně jako tato screenshot:
Stojí za to poukázat na to, že výchozí průvodce není omylem pod spodní hranicí plátna: Z důvodů nejlépe známých někomu jinému by měly vaše ikony velmi lehce překonat spodní část plátna, pokud si přejete, aby sdíleli stejnou základnu jako sousední písma. Zkoušel jsem to s Gruzií, Arial a řadou webových písem.
Vytvořte svůj první glyf
Chcete-li definovat glyf, klepněte na kartu Glyphs v podokně editoru SVG písma a potom klepněte na tlačítko Přidat Glyph v dolní části podokna. Není to okamžitě jasné při první kontrole, ale pokud kliknete na svůj glyf ("Glyph 1"), objeví se pole, které vám umožní zadat znak, kterému chcete přiřadit ikonu. Nejdříve vytvoříme jednoduchý tvar hvězdy, takže doporučujeme zadat znak "s", "S" nebo "*":
Nyní, když jsme definovali odpovídající znak glyfu, musíme vytvořit samotný glyf. Vzhledem k tomu, že tentokrát právě vytváříme hvězdu, měli bychom z levého panelu nástrojů vybrat nástroj Inkscape pro hvězdy a mnohoúhelníky a kreslit hvězdu na plátně. Všimnete si, že tento nástroj je dodáván s možnostmi, které umožňují změnit vzhled hvězdy. Ve svém příkladu jsem zvolil 5 rohů, poměr špiček 0,5 a zaokrouhlenou hodnotu 0,1.
Vycentrojte hvězdu horizontálně pomocí panelu Zarovnat a rozdělit (který může být skryt pod SVG Font Editor ) a přetáhněte tvar směrem dolů tak, aby odpovídal základní čáře. Pokud je mřížka vypnutá, plátno by mělo vypadat takto:
Glyfy v našem písmu s ikonami jsou jen tvary; tvary bez barev, vrstev nebo přechodů. Aby naše hvězda byla oprávněným kandidátem na naše písmo, musíme ji převést z objektu na tvar založený na cestách. Chcete-li to provést, vyberte hvězdičku a z hlavní nabídky zvolte možnost PATH → OBJECT TO PATH. Nyní s hvězdou, kterou jsme vybrali, můžeme jít do SVG Font Editoru , zvýraznit příslušný glyph "s" a stisknout tlačítko Get křivky z výběrového tlačítka:
Když do pole Vzorového textu vložíte znak "s", hvězda by se nyní měla zobrazit jako náhled, například takto:
Vytváření složitějších ikon
Nyní jste vytvořili svůj první škálovatelný znak písma SVG. Použitím voleb z podokna Fill a Stroke , úpravou uzlů cesty a kombinací objektů a tahů budete moci vytvořit mnohem ambicióznější návrhy ikon. Nechci jít do plného výukového kurzu Inkscape, protože máme mnohem víc, než to bude možné pokrýt, ale po těchto jednoduchých pravidlech vás postará dobře:
- Použijte černé tahy a výplně, pokud chcete pouze připomenout, že ikony jsou jen tvary, ne složitá vektorová grafika. Barvení ikony je možné v konečném produktu pomocí CSS.
- Všechny objekty a tahy (čáry) musí být převedeny na cesty pomocí buď PATH → OBJECT TO PATH nebo PATH → STROKE TO PATH
- Více objektů a / nebo tahů, které se používají k vytvoření jedné ikony, by měly být kombinovány dohromady pomocí PATH → COMBINE (nebo v některých případech PATH → UNION)
- Chcete-li vytvarovat tvary z tvarů (například pomocí řezačky cookie), umístěte tvar, který vytvoří "knockout" nad hlavním tvarem, vyberte obě a zvolte PATH → DIFFERENCE. Bílé plochy na černé barvě, které vypadají jako "knockouts", nestačí, jak zjistíte, když se dostanete k získání křivek z výběru. Viz pravidlo 1.
Příprava písma pro vkládání
Představte si, že jste vytvořili řadu užitečných ikon pro své písmo opakováním metody pro vytváření glyfů, které jsem právě popsal a uložil soubor jako myicons.svg . Nyní budete chtít tuto knihovnu ikon připravit pro použití na webových stránkách.
Převedení SVG na TTF
První opatření byste měli udělat, je převést @font-face požadavky. Online služby, které umožňují konverzi písem mezi formáty, zahrnují http://onlinefontconverter.com/ , http://www.fontconverter.org/ a http://www.font2web.com/ . Mým osobním favoritem je nicméně http://www.freefontconverter.com/ protože se nedostanu do fronty a nikdy jsem nevěděla, že by se vrátila nějaká závada.
Nebudu vás patrně vysvětlovat tím, jak používat tento zdroj. Po sobě jdoucí pole pro nahrávání souborů, výběr prvku a gigantické tlačítko Převést samozřejmě.
Úprava meta info písma
Nyní, když máte TTF v ruce, doporučuji upravit upravené meta data . Přejmenováním, přidělením a popisem písma k vaší spokojenosti je připraveno k instalaci, vkládání a distribuci . Je to také způsob, jak ukázat, že písmo je vaše vlastní práce. Čtenáři, kteří používají systém Windows, mají možnost používat podvodně velkou zvukovou stopu Editor fontů Microsoft Font nebo free-for-x-dny Typograf . Pro uživatele systému Apple a Linux žádám ty, kteří jsou lépe informováni než já, abych jim pomohl v komentářích.
Nesprávný, ale funkční editor vlastností písma
Důležitá poznámka: I když Editor fontů Microsoft Font umožňuje přidávat informace o autorovi, popisu a licencích, nezdá se vám, že byste mohli upravovat základní data, jako je název písma a název postscriptu . Tato pole jsou zakázána. Používáte-li tento konkrétní software, musíte před konverzí TTF vyhledat a zakázat hodnoty v kódu SVG. Otevřete původní SVG ve svém oblíbeném textovém editoru (používám Poznámkový blok ++ ) a upravte následující:
Název písma: Nalezeno ve značce, font-family atribut
Postscript Name: Nalezeno v tagu, id atribut
Popis: Ve značce byste měli přidat popis (autor, licence apod.). Vezměte prosím na vědomí, že to není rovnocenné s popisem textu TTF a nebude zachováno přes převod; budete muset přidat popis TTF samostatně.
Učinit vložení písma
Jakmile jste nainstalovali TTF do vašeho lokálního systému a předtím si jej trochu ukáželi, že se nic nestalo špatně, je čas ho spustit přes písmo Squirrel's @ font-face generator . Aby byl výstupní kód co nejúčinnější a nejúčinnější, existuje několik možností, které stojí za zmínku v expertním režimu generátoru:
Podsazení: Možnost podsítě umožňuje zahrnout pouze znaky, které jste delegovali, což snižuje velikost souboru.
Odstranění kerningu: Vaše ikony se téměř vždy objevují izolovaně, takže kerning (přidávané informace o vzájemné blízkosti znaků) není nutné. To bude pravděpodobně také snížit velikost souboru.
WebOnly ™ : Pokud jste evangeličtí o tom, že lidé používají vaše písmo podle svých představ - a ne vrátit se k vytváření obrazů z glyfů v Photoshonk - Tuto možnost můžete vybrat. Může také lépe vyhovovat vašemu licenčnímu plánu. Teď budu kryty licencování.
Distribuce písma
Pokud máte zájem o uvolnění vašeho písma, považuje se za správnou praxi poskytnout mu licenci. Mnoho webových stránek písma nebude mít vaše písmo bez jednoho. Vzhledem k tomu, že používáme bezplatný software open source pro vytváření ikon, je vhodné, abychom je distribuovali jako takové.
Existuje mnoho možností licencování a jejich vyšetřování je někdy zneklidňující. The GNU Všeobecná veřejná licence je zcela přijatelné, ale možná budete chtít zvážit Otevřená licence písma SIL . Hlavní výhodou této licence je poskytnutí vyhrazeného názvu písma : Ostatní návrháři mají právo měnit vaše písmo, pokud ho jiným způsobem označují. V praxi to znamená, že zločiny proti návrhu ikon nelze provést "ve tvém jménu".
V případě jedné licence byste měli zahrnout verzi do textového souboru, stejně jako vložení oznámení o autorských právech a odkaz na úplnou adresu URL licence v meta písma. Další specifické pokyny naleznete na příslušných licenčních stránkách (výše uvedené).
Konec spuštění CSS
Proč přestat vytvářet obecné ikony pomocí písem SVG? Se schopností vytvářet ikony přichází možnost vytvářet více tvarově specifických stránek, značkových prvků a dekorací. Jako CSS sprites , všechny tyto vizuální prvky mohou být uloženy v jednom souboru, což snižuje volání serveru na jednotnou žádost http . Na rozdíl od CSS sprites, prvky jsou oba resizeable a ne závisí na polohových souřadnicích (
background-position hodnoty), aby se zobrazila správně. To z nich činí vynikajícím způsobem přizpůsobivý design .
Předstíráme, že jsem se rozhodl použít písmo SVG, abych v mém neurčitě pokryla některé základní prvky návrhu steampunk -jako blog . Jednoduché vykreslení tabulky HTML komponent by vypadalo takto:
Jedním z nejlepších věcí tohoto přístupu je všestrannost. Například druhý tvar zubu zleva může být použit jako jak malý kuličkový bod, tak obrovská abstrakovaná dekorace pozadí . Barvení je stejně snadné jako použití color:maroon , ale není třeba dodržovat barevné odstíny; může být použito množství CSS3 efektů pro přidání textury a tactility. Pro trochu inspirace, abyste vás začali, prozkoumejte tuto vynikající galerii webfontů s podporou CSS3 .
Rychlá poznámka o čtečkách obrazovky
Jeden problém s použitím písem pro zobrazování vizuálních prvků tímto způsobem je dopad na čtečka obrazovky výstup. Návštěvník webu, který čte vizuálně, uvidí zuby, šipky a podobně, ale čtečka obrazovky bude trvat na čtení znaků, které označují tyto návrhy. Pro použití dekorativních fontových prvků SVG doporučuji, aby se Coyierův návrh shodoval: Přiřadit vektorům Doplňková oblast pro soukromé použití Unicode. Takové znaky by čtenáři neměli číst.
Webfont ikony pro spolupráci
Jako můj JavaScript mentor, Rupert , poukázal na mě druhý den, pomocí SVG písma k vytvoření sady ikon nabízí zajímavou příležitost pro spolupráci. Vidíte, kód SVG - což je forma XML - je vysoce standardizovaný a snadno čitelný pro lidi. Jedná se právě o druh zdrojového kódu vhodného pro vývoj pomocí služby "sociální kódování" GitHub .
Tato myšlenka rezonovala se mnou kvůli svým sémiotickým důsledkům: Pokud je pochopitelnost ikony určena konsensem , jistě by měl konsensus také hrát roli ve své tvorbě. Spolupráce nad naší ikonou "sign system" by se měly objevit pouze ty archetypální návrhy ikon. Měli bychom být schopni vytvořit slovní zásobu ikon, která skutečně patří komunitám, pro něž by neměli něco znamenat .
Vytvořil jsem veřejný úložiště GitHub, který pomáhá podpořit tento nápad. Volal Ikona Komunity písma , základna kódu úložiště není složitá: Podrobná kontrola předcházejícího výukového úkolu Inkscape a rychlé čtení stránky projektu by vám měl dát vše, co potřebujete, abyste se zapojili. Pokud jste v GitHub nové, zkuste se podívat na jejich stránky nápovědy nebo požádat o sousední techie (to je to, co dělám).