Jak tworzyć niestandardowe czcionki: 7 kroków i 3 studia przypadków

Spojrzmy prawdzie w oczy; istnieją kroje pisma, których my, projektanci, uwielbiamy nienawidzić. Właściwie słowo „nienawiść” może nie być wystarczająco silne. Biczować? Przekleństwo? Plaga? Odchody? Słyszałem, że każdy z nich obrażał nieożywione litery, cyfry i symbole, których używamy do przekazywania idei, i całkowicie to rozumiem. Widziałem (i popełniałem) przestępstwa tak poważne, że nawet najbardziej dziwaczny biuletyn biurowy byłby zawstydzony.

A gdybym ci powiedział, że najbardziej ohydne kroje pisma naszego pokolenia mogą być najlepszym przyjacielem projektanta marki? A gdybym pokazał ci, jak zamienić nijakie formy liter w soczyste logotypy, które klienci pokochają (i za które zapłacą)? Czy zechciałbyś radykalnie zmienić sposób patrzenia na czcionkę i otworzyć się na nieskończenie rozszerzający się wszechświat kreatywnych opcji? Gotowy do stworzenia własnej czcionki?

Jeśli tak, czytaj dalej, ponieważ mam zamiar wprowadzić prosty proces, dzięki któremu możesz natychmiast przekształcić dowolny krój czcionki, aby lepiej utworzyć czcionkę. Aby pokazać, jak skuteczny jest ten proces, zademonstruję każdy krok za pomocą trzech krojów pisma, które są namiętnie pogardzane przez projektantów na całym świecie.

Po pierwsze, Jokerman , zwariowana kolekcja postaci przypominających klauny, które zwykle można znaleźć na banerach urodzinowych i „kapryśnych” wizytówkach.

Następnie mamy Papyrus , pieczołowicie skopiowany ze ścian grobowca króla Tuta i preferowany wybór menu kawiarni, poważnych artystów i Jamesa Camerona.

Wreszcie fajny i niewzruszony zwyczajny banita typograficzny, którego nie trzeba przedstawiać – jedyny, Comic Sans .

Z tej nieprawdopodobnej grupy nauczę cię widzieć skarb tam, gdzie inni wołają „śmieci!” i tworzyć niestandardowe logotypy najwyższego kalibru.

Prosty i niezawodny proces

Wybierzmy się w podróż od ohydnego kroju pisma do oszałamiającego logotypu i nauczmy się tworzyć czcionkę. Zaczniemy od czegoś złego, skończymy na czymś dobrym i za każdym razem będziemy podążać tymi samymi siedmioma krokami. Jakie są siedem kroków? Za chwilę omówię szczegóły, ale najpierw kilka uwag o narzędziach, których będziesz potrzebować do tego rodzaju pracy.

Zalecana konfiguracja

Projektanci wizualni mają dostęp do wielu nowych i niedrogich narzędzi do projektowania. Urządzenia z ekranem dotykowym i zaawansowane rysiki, takie jak ołówek Apple, sprawiają, że uchwycenie pomysłów i przejście do cyfrowego obiegu pracy jest łatwiejsze niż kiedykolwiek. Eksperymentuj swobodnie i trzymaj się tego, co dla ciebie działa. To powiedziawszy, wolę wypróbowane i prawdziwe podejście z zaufanymi narzędziami Adobe i Wacom:

• Photoshop — służy do manipulowania krojami pisma i tworzenia warstwowych szkiców udoskonalających.
• Illustrator — służy do wektorowego śledzenia końcowych szkiców udoskonalających i szybkiego dodawania elementów stylu, takich jak kolory, gradienty, tekstury, wzory itp.
• Tablet Wacom — używany do rysowania cyfrowego w programie Photoshop.

Jokerman — od zgrubnego do eleganckiego

Jokerman to krój pisma Jim Carrey: nigdy subtelny, głośny pod każdym kątem, ale dziwnie przemawiający do mas. To śmieszne i przesadne, a dokładnie taki krój, dla którego został stworzony ten samouczek. Zwariowane kroje pisma, takie jak Jokerman, są wypełnione ciekawymi elementami projektu, ale brakuje im powściągliwości wymaganej do gustownego logotypu. Jako projektanci musimy kierować się rozsądkiem, a to często oznacza rezygnację ze szczegółów na rzecz jaśniejszej komunikacji.

To prosty, siedmioetapowy proces, który przenosi nas od niepożądanego kroju pisma do wysokiej klasy logotypu. W grę wchodzi kilka prostych rysunków, ale jeśli potrafisz napisać swoje imię i narysować obrazek, masz wszystkie umiejętności, których potrzebujesz, aby nauczyć się tworzyć własną czcionkę. Zaczynajmy.

1. Przejrzyj krój pisma

W Photoshopie wybierz krój pisma (w tym przypadku Jokerman), wpisz nazwę firmy, której potrzebujesz dla swojego logotypu, i szybko przeanalizuj każdą literę, aby wyczuć możliwości projektowe, takie jak skala, proporcje, waga litery itp.

2. Pomysł

Korzystając z tabletu Wacom, zrób luźny szkic swojego logotypu. Nie trzeba być tutaj dokładnym. Po prostu naszkicuj coś szybkiego i łatwego, co posłuży jako szkielet Twojego projektu.

3. Zniekształcić krój pisma

Używając wybranego kroju pisma, skaluj, rozciągaj, pochylaj i ściskaj każdą literę na górze szkicu ideacji. Na tym etapie nie musisz robić rzeczy perfekcyjnie. Dopracujesz to później, więc po prostu idź dalej.

4. Szkic korekcyjny

Teraz zrób szybki szkic nad swoimi zniekształconymi literami. Tutaj zaczynasz poprawiać niedociągnięcia oryginalnego kroju pisma i dodawać własne szczegóły projektu.

5. Szkic wyrafinowania

To ostatnia faza szkicowania i udoskonalania w Photoshopie. Oczyść wszystko, co nie działa, i wypełnij litery, aby lepiej zrozumieć formę i relacje spacji między literami.

6. Śledzenie wektorowe

Upuść swój szkic dopracowujący do programu Illustrator, wyłam narzędzie pióra i ostrożnie klikaj, aby uzyskać piękne krzywe Beziera.

7. Wykończenie akcentów

Po zakończeniu śledzenia wektorowego dodaj efekt wizualny dzięki przemyślanym szczegółom, takim jak kolory, cienie, światła, kontury itp.

Papirus — subtelna transformacja

Spowiedź: Lubię Papirus i nie obchodzi mnie, kto wie. Poważnie, nie wszystkie kroje pisma, które my, projektanci lubimy, są tak złe. Nadużywane? Być może. Kiczowaty? OK, tak. Ale tylko dlatego, że krój pisma sprawia, że ​​ktoś czuje, że jej niedojrzały dokument projektowy ma godność, nie oznacza, że ​​jest zły. I tak właśnie myślę o Papyrusie. Jest jak koszula, którą kupiłam w Old Navy: dobrze pasuje i sprawia, że ​​prezentuję się na specjalne okazje.

To powiedziawszy, moja koszula nie ma celowo postrzępionych brzegów. Zobaczmy więc, czy uda nam się zachować ładne części liter Papyrusa, jednocześnie sprawiając, że ogólny wygląd będzie nieco bardziej współczesny.

1. Przejrzyj krój pisma

Ponownie zaczynamy w Photoshopie. Wybierz swój krój pisma (Papyrus) i wprowadź nazwę logotypu. Przyjrzyj się każdej literze, notując potencjalne szczegóły projektu.

2. Pomysł

Rozłóż tablet Wacom i szybko naszkicuj kilka pomysłów na kompozycję. Nie przemyśl tego kroku. To jak gryzmolić swoje imię w notatniku.

3. Zniekształcić krój pisma

Tak jak w przypadku Jokermana, skaluj, rozciągaj, pochylaj i zgniataj każdą literę na górze stworzonego szkicu ideacji. Będzie bałagan, ale nie martw się!

4. Szkic korekcyjny

Ze wszystkich kroków może to wydawać się najbardziej zniechęcające, ale nie stresuj tego.

Nie budujesz od zera. Korzystasz ze struktury oryginalnego kroju pisma, dodając własne ulepszenia w miarę postępów.

Ten szkic może być bardzo okropny i brzydki. Piękno warstw w Photoshopie to możliwość wykonywania wielu przejść, z których każde zbliża się do Twoich prawdziwych intencji projektowych.

5. Szkic wyrafinowania

To nasz ostatni krok w Photoshopie. Bądź ze sobą szczery, jeśli chodzi o części swojego projektu, które nie działają. Pomaga również pokolorować litery, dzięki czemu można zobaczyć, jak wyglądają obok siebie i wykryć wszelkie nieprawidłowości w formie.

6. Śledzenie wektorowe

Umieść szkic doprecyzowujący w programie Illustrator i zacznij swój ślad wektorowy za pomocą narzędzia Pióro.

7. Wykończenie akcentów

Po ukończeniu śledzenia wektorowego ożyw swój logotyp, dodając szczegóły, takie jak kolory, cienie, światła i kontury.

Comic Sans — jak prasowanie pomarszczonej koszuli

Odmawiam ośmieszenia Comic Sans. Jasne, pojawia się w nieodpowiednich momentach, wyglądając na trochę rozczochraną, jakby właśnie obudziła się z drzemki. Ale spełnił wytyczne projektowe i może być po prostu najbardziej znanym krojem pisma na świecie.

Z czysto estetycznego punktu widzenia w Comic Sans nie ma zbyt wiele do lubienia. Jest przysadzisty, nierówny, a małe zagięcia i gałki w literach są dość rozpraszające. Mimo to ma kilka interesujących dziwactw, które mogą dobrze pasować do logotypu, a jego ogólne postrzeganie jako najgorszego kroju pisma wszechczasów sprawia, że ​​jest to idealne wyzwanie dla naszej siedmiostopniowej techniki udoskonalania.

Tym razem mniej skupię się na mechanice i na każdym kroku będę dawał więcej wglądu w mój kreatywny proces myślowy.

1. Przejrzyj krój pisma

Na tym etapie pomyśl o sobie jako o rodzicu niezręcznego dorastającego chłopca. Nie można zaprzeczyć, że wygląda na chytrego wyglądającego głupka, ale jesteś w stanie przejrzeć to wszystko do dnia, w którym będzie przywiązanym, dobrze zbudowanym młodym mężczyzną.

2. Pomysł

Ideation to czas na uwolnienie artystycznej strony podejmowania ryzyka. Możesz później bezwzględnie edytować siebie, ale na razie zaryzykuj.

Kiedy recenzowałem Comic Sans, zauważyłem rodzaj skocznej zabawy, którą starałem się włączyć do moich szkiców ideacji.

3. Zniekształcić krój pisma

Może jesteś taki jak ja… masz obsesję na punkcie porządkowania warstw i wykorzystywania nieniszczących technik edycji w Photoshopie. Nie bądź taki na tym etapie!

Wpisz swoje słowo, rasteryzuj czcionkę i zniekształcaj te litery.

4. Szkic korekcyjny

Tak jak powiedziałem, małe nieregularności Comic Sans doprowadzają do szału, więc na tym etapie skupiłem się na prostowaniu linii i wygładzaniu krzywych.

5. Szkic wyrafinowania

Najdłużej przechodziłem bezpośrednio z kroku korekty szkicu w Photoshopie do śledzenia wektorowego w programie Illustrator. Ale kiedy po raz pierwszy zobaczyłem wypełnione litery wektorowe, zawsze wyglądały trochę dziwnie.

Ten krok udoskonalenia to świetny sposób na upewnienie się, że litery są odpowiednio rozmieszczone. W końcu kształty tworzone między literami są równie ważne jak same litery.

6. Śledzenie wektorowe

Używanie narzędzia Pióro może być łatwe do wyłączenia mózgu. Zaczynasz wskazywać, klikać i przeciągać uchwyty i przestajesz szukać sposobów na ulepszenie swojego projektu.

Nie rób tego! Kiedy szkicujesz ręcznie, nieustannie podejmujesz decyzje i poprawki w ułamku sekundy. W podobny sposób należy używać narzędzia Pióro.

7. Wykończenie akcentów

Byłem zadowolony ze sposobu, w jaki powstał ślad wektorowy, więc zdecydowałem się na prosty cień blokowy i kilka wewnętrznych linii akcentujących.

Idealnie, Twoje formularze będą mogły stać samodzielnie bez żadnych ozdób. Wykończenie ma na celu urozmaicenie projektu, ale należy uważać, aby nie dodać zbyt wielu efektów specjalnych.

Szansa na niepożądane rzeczy

My, projektanci, mądrze jest trzymać się trendów, narzędzi i sposobów myślenia istniejących w naszym zawodzie. Uczymy się i rozwijamy jako społeczność, a jeśli duża część naszej dziedziny postrzega coś źle, powinniśmy starać się zrozumieć, dlaczego.

Powinniśmy jednak również oprzeć się pokusie całkowitego odrzucenia praktyk projektowych, zwłaszcza pod wpływem kaprysu powszechnej opinii. Kiedy natkniemy się na coś, co jest postrzegane jako złe, na przykład użycie Jokermana, dobrze jest dowiedzieć się, dlaczego inni projektanci myślą w ten sposób, ale wyrzucanie potencjalnie cennego zasobu do śmietnika jest krótkowzroczne.

Zamiast tego zachowaj w pamięci tyle, ile możesz. Rób notatki, rób obserwacje, kategoryzuj rzeczy, które lubisz i których nie lubisz, i przechowuj różnorodne opinie innych projektantów.

Nigdy nie wiadomo, pewnego dnia możesz zrobić niewyobrażalne i ryzykowne ośmieszenie społeczności projektantów, używając Comic sans jako podstawy pięknego nowego logotypu twojego klienta.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika