Jak zrobić własną ikonę Webfont
W tym artykule zamierzam przyjrzeć się nauce związanej z tworzeniem udanych ikon interfejsu użytkownika, zanim nauczę cię, jak tworzyć własną czcionkę ikonową .
Od projektowania poszczególnych ikon do ich konwersji @font-face osadzanie, a nawet licencjonowanie ich do dystrybucji, będziemy używać wyłącznie bezpłatnego oprogramowania i usług online. Co ty na to? Nie będziesz musiał polegać na żadnej ezoterycznej wiedzy wymaganej do udanego alfanumerycznego kroju pisma; tylko oko do projektowania rzeczy, które mogą wydawać się bardzo, bardzo małe.
Ostatecznie powinieneś odejść od procesu tworzenia elementów projektu, który wykracza daleko poza tworzenie prostych ikon.
Zanim przejdziemy dalej, należy coś powiedzieć o tym, co dokładnie próbujemy achieve za pomocą ikon w naszych projektach na pierwszym miejscu, i co sprawia, że jedna ikona jest bardziej skuteczna niż następna. Teoria przed złożeniem wniosku. Aby to zrobić, musimy rozważyć rolę ikony jako części semiologii.
Co stanowi dobrą ikonę?
Semiologia , w najszerszym sensie, jest badanie systemów znaków , w jaki sposób przyczyniamy się do ich tworzenia i utrzymania oraz wpływu, jaki wywierają na nasze rozumienie świata wewnątrz i bez nas.
Kiedykolwiek rozważasz część swojej pracy projektowej z perspektywy tego, co ona oznacza - co mówi do odbiorców lub jakie pojęcia im przypomina - rozważasz swój projekt jako semiotyka. Chociaż semiologia, podobnie jak lingwistyka, obejmuje język, na stronie internetowej jest jeszcze więcej rzeczy, które "mówią" coś bez słów, takich jak kolory, kroje pisma i kształty, które nazywamy ikonami . Należy być ostrożnym, że to, co mówią, ma silny wymiar kulturowy. W Chinach Kolor czerwony może oznaczać szczęście, podczas gdy w wielu krajach zachodnich jest używany do oznaczenia zagrożenia.
(Na podstawie obrazu wg ell brązowy )
Termin "ikona" ma szczególne znaczenie w dziedzinie semiologii. Ikona jest artefaktem, który oznacza coś przypominając go. Weź, na przykład, ikonę pinezki mapy . Jako kształt przypominający "prawdziwy" pin mapowy jest w stanie to zaznaczyć. Z kolei prawdziwy pin na mapie przywodzi na myśl różnego rodzaju znaczące pojęcia . Wśród nich są abstrakcyjne pojęcia, takie jak lokalizacja, a także mniej abstrakcyjne pojęcia, takie jak mapa, do której pin może należeć.
Niektóre tak zwane ikony nie są naprawdę ikoniczne. Wszechobecna ikona RSS , z kropką i dwoma koncentrycznymi segmentami koła, nie przypomina podobnego do syndykacji, niż słowa "Really Simple Syndication". Konfiguracja kształtów, które tworzą ikonę RSS, oznacza samą RSS; zgodziliśmy się, że do tego właśnie służą. Ikona RSS jest bardziej poprawnie nazywana symbolem RSS .
Mam nadzieję, że udało nam się ustalić, że skuteczne ikony internetowe powinny spełniać jedno z poniższych dwóch kryteriów:
- Silne podobieństwo do prawdziwej rzeczy, na przykład ikona wydruku, która przypomina rzeczywistą drukarkę
- Ustanowienie, a zatem znajomość jako rozpoznawalny symbol w systemie znaków
Czcionki ikon zyskują popularność
Ikony od dawna uważane są za dobry sposób na ulepszenie projektów interfejsu użytkownika, ponieważ zapewniają wizualny skrót, który pomaga zrozumieć czysto tekstową wiadomość. Arkusze z obrazami ikon krążą po społeczności projektantów stron internetowych, takich jak kontrabanda, a każda z nich obiecuje, że twój projekt będzie bardziej lśniący, bardziej kuszący i bardziej klikalny niż poprzedni.
W porównaniu z obrazami, pomysł użycia osadzonych czcionek dla ikon jest stosunkowo nowym pomysłem. Jednak jest to ten, który zyskuje znaczną trakcję z powodu wielu nieodłącznych zalet w stosunku do obrazu (lub background-image ) metoda. ja napisał o niektóre z tych zalet na moim małym blogu na początku września. Chris Coyier oczywiście miał podobny pomysł, wprowadzając pomysł do (o wiele, dużo ) większej publiczności tydzień później. Opierając się na dwóch postach i innych, skompilowałem tę kompleksową listę funkcji:
- Są one łatwo zmieniane bez degradacji (ponieważ są one w zasadzie wektorami)
- Ponowne kolorowanie ikony jest tak proste, jak zmiana koloru tekstu. Na przykład,
color: orangedla ikony RSS - Wiele ikon jest pogrupowanych w jeden plik, co wymaga tylko jednego żądania http
- Jak wskazuje Chris, są to kształty, które mają przezroczyste "nokauty", które działają w przeglądarkach już w IE6 (w przeciwieństwie do alfa PNG)
- Ikony, które powinny pojawiać się obok tekstu, wyrównanie i zawijanie nie są problemami (ponieważ są tekstem)
- Możesz zastosować efekty CSS3 przez
text-shadowibackground-clip:textz szacunkiem dla kształtu glifu - W przeciwieństwie do SVG obsługa wielu przeglądarek jest łatwa do osiągnięcia
Problemy
Według słów Chrisa, używanie czcionek do ikon jest dobrym pomysłem, mówię ci
. Niemniej jednak status quo dotyczący użycia fontów ikon nie jest idealny. Po pierwsze, większość dostępnych czcionek o wysokiej jakości zwanych takimi jak Pictos , Fico , Klepto, Cheetos, Ponyo i Sailor Moon (Mogłem mieć niektóre z nich źle), są płatne czcionki. W praktyce oznacza to naprawdę dwa problemy :
- Być może będziesz musiał rozstać się z pieniędzmi
- Niezależnie od tego, czy musisz rozstawać się z pieniędzmi, czy nie, musisz zaakceptować czyjeś brudne prace projektowe
Oprócz automatycznych programów indeksujących, zakładam, że to głównie projektanci stron internetowych będą czytać ten artykuł. Sam jestem projektantem i nie sądzę, żebym był sam, nie urażony ideą kompromisu we własnym projekcie, polegając na czyjejś dziele. Oczywiście, jestem jeszcze mniej zakochany w myśli, że zapłacę za ten przywilej. Wiem, jakie ikony chcę użyć i dokładnie wiem, jak chcę je dostosować do mojego ogólnego projektu. Chcę tej kontroli .
Po pewnym poszukiwaniu, w końcu byłem wprowadzony do możliwości z Inkscape Edytor czcionek SVG . Przy odrobinie praktyki za pomocą Inkscape i pomocy konwertera online, aby przekształcić moją czcionkę SVG w TTF, udało mi się stworzyć "Heydings". Ta czcionka jest teraz uwzględniona w Lista Simurai (w powiązaniu z artykułem Coyiera). Nie próbuję sprzedać ci mojej czcionki (i tak jest za darmo), ale uważam, że jest to całkiem niezły dowód na to, że :
Tworzenie glifów ikon za pomocą Inkscape
Konfigurowanie Inkscape
Zacznijmy od ściąganie i instalowanie Inkscape. Powinieneś także użyć mojego szablonu startera czcionek ikon, znajdującego się w folderze zasobów na to repozytorium GitHub (więcej o tym projekcie GitHub później). Po otwarciu tego pliku w nowej instalacji Inkscape powinieneś skonfigurować swój obszar roboczy, otwierając następujące okna z głównego menu:
- OBIEKTY → WYPEŁNIJ I ZAKOŃCZ
- OBIEKTY → WYSTAWIANIE I ROZPOWSZECHNIANIE
- TEKST → EDYTOR CZCIONKI SVG
W okienku edytora czcionek SVG kliknij "Czcionka 1" pod "Czcionka". Twój obszar roboczy powinien teraz wyglądać mniej więcej tak:
Warto podkreślić, że linia podstawowa przewodnik nie jest pomyłką poniżej dolnej granicy obszaru roboczego: z powodów znanych najlepiej komuś, twoje ikony powinny nieznacznie wystylizować dno płótna, jeśli chcesz, aby miały tę samą linię bazową co sąsiednie kroje pisma. Testowałem to z Georgią, Arial i kilkoma czcionkami internetowymi.
Tworząc swój pierwszy glif
Aby zdefiniować glif, kliknij kartę Glify w panelu edytora czcionek SVG , a następnie kliknij przycisk Dodaj glif w dolnej części panelu. Nie jest to od razu jasne po pierwszej kontroli, ale jeśli klikniesz na swoim glifie ("Glyph 1"), pojawi się pole, w którym możesz wpisać postać, do której chcesz przypisać swoją ikonę. Najpierw zrobimy prosty kształt gwiazdy, więc polecam wpisać znaki "s", "S" lub "*":
Teraz, gdy zdefiniowaliśmy odpowiedni charakter glifu, musimy stworzyć sam glif. Ponieważ tym razem właśnie robimy gwiazdę, powinniśmy wybrać pomocne narzędzie Gwiazdy i wielokąty Inkscape z lewego paska narzędzi i narysować gwiazdę na płótnie. Zauważysz, że to narzędzie zawiera opcje umożliwiające zmianę wyglądu gwiazdy. W moim przykładzie wybrałem 5 rogów, współczynnik wypowiadania równy 0,5, a zaokrąglenie 0,1.
Wyśrodkuj gwiazdę poziomo za pomocą panelu Wyrównaj i rozmieść (który może być ukryty poniżej edytora czcionek SVG ) i przeciągnij kształt w dół, aby osiągnąć linię podstawową. Przy wyłączonej siatce płótno powinno wyglądać mniej więcej tak:
Glify w naszej ikonie to tylko kształty; kształty bez kolorów, warstw i gradientów. Aby uczynić naszą gwiazdę uzasadnionym kandydatem do naszej czcionki, musimy przekształcić ją z obiektu w kształt oparty na ścieżce. Aby to zrobić, wybierz gwiazdkę i wybierz PATH → OBIEKTU DO PATH z menu głównego. Teraz, po wybraniu gwiazdy, możemy przejść do naszego edytora czcionek SVG , zaznaczyć odpowiedni "s" glif i nacisnąć przycisk Pobierz krzywe od wyboru :
Po wpisaniu "s" w polu Przykładowy tekst , twoja gwiazda powinna teraz pojawić się jako podgląd, jak na przykład:
Tworzenie bardziej złożonych ikon
Utworzyłeś swój pierwszy skalowalny glif czcionki SVG. Korzystając z opcji w panelu Wypełnienie i obrys , edytując węzły ścieżki i łącząc obiekty i obrysy, można tworzyć znacznie bardziej ambitne projekty ikon. Nie chcę zagłębiać się w samouczek w Inkscape, ponieważ mamy o wiele więcej do omówienia, ale przestrzeganie tych prostych zasad zapewni ci dobrą pozycję:
- Trzymaj się czarnych kresek i wypełnień, jeśli tylko przypomnisz, że ikony są tylko kształtami, a nie złożoną grafiką wektorową. Kolorowanie ikony jest możliwe w ostatecznym produkcie za pomocą CSS.
- Wszystkie obiekty i obrysy (linie) muszą zostać przekonwertowane na ścieżki przy użyciu zmiennej PATH → OBIEKT DO ŚCIEŻKI LUB ŚCIEŻKI → PRZESTROGA DO PATH
- Wiele obiektów i / lub obrysów używanych do utworzenia jednego symbolu ikony należy połączyć ze sobą za pomocą PATH → COMBINE (lub, w niektórych okolicznościach, PATH → UNION)
- Aby wyciąć kształty z kształtów (np. Za pomocą foremki do ciastek), umieść kształt, który stworzy "nokaut" nad głównym kształtem, wybierz oba i wybierz ŚCIEŻKA → RÓŻNICA. Białe obszary na czarno, które wyglądają jak "knockouts", nie wystarczą, ponieważ odkryjesz, kiedy uderzysz Get curves from selection Patrz rule 1.
Przygotowywanie czcionki do osadzania
Wyobraź sobie, że stworzyłeś wiele użytecznych ikon dla twojej czcionki, powtarzając opisaną przeze mnie metodę odpluskowywania glifów i zapisując plik jako myicons.svg . Teraz będziesz chciał przygotować tę bibliotekę ikon do użytku na stronach internetowych.
Konwersja SVG na TTF
Pierwszym krokiem, jaki powinieneś podjąć, jest zamiana @font-face wymagania. Usługi online, które umożliwiają konwersję czcionek między formatami, to http://onlinefontconverter.com/ , http://www.fontconverter.org/ i http://www.font2web.com/ . Moim osobistym faworytem jest jednak http://www.freefontconverter.com/ ponieważ nie dostaję się do kolejki i nigdy nie wiedziałem, że to zwróci jakiekolwiek usterki.
Nie będę patronował ci, wyjaśniając, jak korzystać z tego zasobu. Kolejne pole przesyłania plików, element select i gigantyczny przycisk Convert mówią same za siebie.
Edytowanie meta informacji o czcionce
Teraz, gdy masz w ręce TTF, polecam edytować wygenerowane metadane . Zmiana nazwy, przypisanie i opisanie czcionki w sposób satysfakcjonujący sprawia, że jest ona gotowa do instalacji, osadzenia i dystrybucji . Jest to również sposób na pokazanie, że czcionka jest twoją własną pracą. Czytelnicy korzystający z systemu Windows mają możliwość używania zaskakująco wielkiego brzmienia Microsoft Font Properties Editor lub za darmo za x dni Typograf . Dla użytkowników Apple i Linux, błagam tych lepiej poinformowanych niż ja, aby pomóc w komentarzach.
Nieulękły, ale użyteczny edytor czcionek
Ważna uwaga: Chociaż Edytor cech czcionek firmy Microsoft umożliwia dodawanie autora, opisu i informacji o licencji, wydaje się, że nie umożliwia edycji podstawowych danych, takich jak nazwa czcionki i nazwa postscriptu . Te pola są wyłączone. Jeśli używasz tego konkretnego oprogramowania, musisz zlokalizować i edytować zabronione wartości w kodzie SVG przed konwersją TTF. Otwórz oryginalny SVG w swoim ulubionym edytorze tekstu (używam Notepad ++ ) i edytuj następujące elementy:
Nazwa czcionki: znaleziona w tagu, font-family atrybut
Nazwa Postscriptu: Znalezione w tagu, id atrybut
Opis: W tagu musisz dodać opis (autor, licencja itp.). Należy pamiętać, że nie jest to odpowiednik tekstu opisu TTF i nie zostanie zachowane przez konwersję; musisz osobno dodać opis TTF.
Uczynienie czcionki możliwą do osadzenia
Gdy zainstalujesz TTF w lokalnym systemie i przejrzysz go trochę, aby upewnić się, że nic nie poszło nie tak, nadszedł czas, aby uruchomić go w grze Font Squirrel's @ generator czcionek . Aby kod wyjściowy był jak najbardziej wydajny i efektywny, w trybie eksperckim generatora warto zwrócić uwagę na kilka opcji:
Podzakresowanie: Opcja podzbioru pozwala ci uwzględnić tylko te znaki, które zostały przez Ciebie delegowane, zmniejszając rozmiar pliku.
Usuń kerning: Twoje ikony będą prawie zawsze pojawiać się w izolacji, więc kerning (dodane informacje dotyczące bliskości znaków między sobą) nie jest konieczne. To, rzekomo, zmniejszy również rozmiar pliku.
WebOnly ™ : Jeśli jesteś ewangeliczny w stosunku do osób używających czcionek zgodnie z przeznaczeniem - i nie powracasz do tworzenia obrazów z glifów w Photoshonk - możesz wybrać tę opcję. Może również lepiej pasować do twojego planu licencyjnego. Teraz omówię licencję.
Dystrybucja czcionki
Jeśli jesteś zainteresowany wydaniem czcionki, dobrą praktyką jest udzielenie jej licencji. Wiele stron internetowych czcionek nie będzie nosić twojej czcionki bez niej. Ponieważ do tworzenia ikon używaliśmy darmowego oprogramowania o otwartym kodzie źródłowym, dobrze, że powinniśmy je dystrybuować jako takie.
Dostępnych jest wiele opcji licencjonowania, a ich zbadanie jest czasami kłopotliwe. The Powszechna Licencja Publiczna GNU jest całkowicie do przyjęcia, ale warto rozważyć SIL Open Font License . Główną zaletą tej licencji jest zastrzeżona nazwa czcionki : inni projektanci mogą modyfikować twoją czcionkę, pod warunkiem, że nazywają ją inaczej. W praktyce oznacza to, że przestępstw przeciwko projektowaniu ikon nie można wykonywać "na Twoje nazwisko".
W przypadku każdej z licencji należy dołączyć wersję do pliku tekstowego, a także wstawić informację o prawach autorskich i link do pełnego adresu URL licencji w metacie czcionki. Odwiedź odpowiednie strony z informacjami na temat licencji (link powyżej), aby uzyskać bardziej szczegółowe instrukcje.
Koniec szyderstwa CSS
Dlaczego warto przestać tworzyć ogólne ikony przy użyciu czcionek SVG? Dzięki możliwości tworzenia ikon można tworzyć bardziej specyficzne dla witryny kształty, elementy brandingu i dekoracje. Lubić Sprite CSS , wszystkie te elementy wizualne można przechowywać w jednym pliku, redukując wywołania serwera do pojedynczego żądania http . W przeciwieństwie do duszków CSS, elementy są zarówno zmienne, jak i niezależne od współrzędnych pozycyjnych (
background-position wartości), aby wyświetlić poprawnie. Dzięki temu są one lepiej dostosowane do elastycznego projektowania .
Udawajmy, że zdecydowałem się użyć czcionki SVG, aby w niewielkim stopniu objąć niektóre podstawowe elementy projektu steampunk -lubić blog . Proste renderowanie tabel HTML projektów komponentów wyglądałoby mniej więcej tak:
Jedną z najlepszych rzeczy w tym podejściu jest wszechstronność. Na przykład, drugi kształt zębatki z lewej może być użyty zarówno jako mały punktor, jak i olbrzymia, abstrakcyjna dekoracja tła . Kolorowanie jest tak proste, jak użycie color:maroon , ale nie trzeba stosować się do płaskich kolorów; można zastosować wiele efektów CSS3, aby dodać tekstury i wrażliwość. Dla małej inspiracji, aby zacząć, sprawdź ta wspaniała galeria webfontów z obsługą CSS3 .
Krótka notka na temat czytników ekranu
Jednym z problemów z wykorzystaniem czcionek do wyświetlania elementów wizualnych w ten sposób jest wpływ na czytnik ekranu wydajność. Odwiedzający stronę, która czyta wizualnie, zobaczy cogs, strzałki i tym podobne, ale czytnik ekranu będzie nalegał na odczytanie znaków, które oznaczają te projekty. Do zastosowań elementów dekoracyjnych SVG, które są dekoracyjne, polecam posłuchanie sugestii Coyiera: Przypisywanie wektorów do Uzupełniający obszar prywatnego użytku Unicode. Takie znaki nie powinny być czytane przez czytelników.
Wspólny webfont ikony
Jako mój mentor JavaScript, Rupert , zauważyłem to pewnego dnia, używanie czcionek SVG do tworzenia zestawów ikon stanowi interesującą okazję do współpracy. Widzisz, kod SVG - który jest formą XML - jest wysoce ustandaryzowany i łatwo czytelny dla człowieka. Jest to dokładnie ten rodzaj kodu źródłowego, który nadaje się do rozwoju przy użyciu usługi "kodowania społecznego" GitHub .
Pomysł zrodził się we mnie ze względu na jego semiotyczne implikacje: jeśli zrozumienie ikony jest determinowane przez konsensus , to z pewnością konsensus powinien również odgrywać rolę w jej formowaniu. Współpracując nad ikoną "systemu znaków", powinny powstać tylko najbardziej archetypowe projekty ikon. Powinniśmy móc tworzyć słowniki ikon, które naprawdę należą do społeczności, dla których powinny coś znaczyć .
Stworzyłem publiczne repozytorium GitHub, aby pomóc w promowaniu tego pomysłu. Nazywa Ikona społeczności , baza kodu repozytorium nie jest skomplikowana: Dokładna inspekcja poprzedniego tutoriala Inkscape i szybka lektura strona projektu powinien dać ci wszystko, czego potrzebujesz, aby się zaangażować. Jeśli jesteś nowicjuszem w GitHub, spróbuj spojrzeć na ich strony pomocy lub pytając o twoją technikę sąsiedztwa (to właśnie robię).