Trend projektowania: tekst i typografia w plasterkach
Puryści twierdzą, że nigdy nie powinieneś zmieniać typografii. Napis powinien wyglądać zgodnie z zamierzeniami projektanta czcionek lub należy wybrać inną czcionkę. Chociaż jest to w większości prawdą, wyjątkiem jest trend dotyczący tekstu w plasterkach.
Sprytny efekt sprawia, że elementy tekstu wyglądają, jakby zostały wycięte za pomocą precyzyjnego narzędzia i mogą zwiększyć zainteresowanie logotypami, nagłówkami i prostymi blokami tekstu. Efekty tekstu na plasterkach mogą się różnić od bardzo subtelnych (takich jak brakująca litera) do znacznych części brakujących słów.
Podczas korzystania z tekstu w plastrach należy pamiętać, że słowa muszą być zawsze czytelne - co innego? - i powinieneś zwrócić szczególną uwagę, aby nie powstały niezamierzone kombinacje liter lub słów z powodu krojenia. Oto spojrzenie na to, jak to zrobić, z kilkoma przykładami projektów, które robią to dobrze.
Poznaj elementy Envato
Plasterek „tradycyjny”
Tekst w plasterkach zawiera prawie warstwowy wygląd z jednym elementem tekstowym, takim jak słowo lub mała grupa słów, który jest wycinany i nakładany na dwie płaszczyzny. Ten efekt tworzy głębię i może sprawić, że prosty zestaw postaci będzie interesujący wizualnie.
Resoluut wykorzystuje ten efekt w połączeniu ze znakiem ampersand, aby przyciągnąć użytkowników do centrum projektu. Tekst w plasterkach odzwierciedla komunikat poniżej, że firma koncentruje się na „cyfrowym designie z nastawieniem”, ponieważ tekst w plasterkach oddaje pewną ostrzejszą atmosferę, taką jak napis.
Ta technika działa najlepiej, gdy zestawy znaków są proste (najpierw należy pomyśleć bez kroju pisma szeryfowego), a słowa mają naturalny punkt przerwania, w którym można je wyciąć i zachować czytelność.
Pokrój tekst i zdjęcia
Efekt warstwowy nie ogranicza się do kombinacji czcionki i spacji. Projektanci mogą również używać obrazów i tekstu, aby stworzyć fajny efekt plastra, na przykład powyższy przykład z Shift.
Skośne kombinacje pojedynczego obrazu (również w plasterkach) z napisem przyciągają użytkownika do projektu.
Chociaż niektóre słowa są nieco trudniejsze do rozpoznania na początku, między animacjami jest wystarczająco dużo czasu, aby z łatwością zrozumieć wiadomość.
Trend ten dobrze sprawdza się w agencjach cyfrowych i witrynach portfolio, ponieważ pozwala zaprezentować nowoczesny wygląd i styl, a także podkreślić kreatywne produkty.
Plasterek z animacją
Tekst w plasterkach można łączyć z innymi modnymi elementami projektu. Łączenie krojenia z animacją może dać przyjemny element wizualny.
W powyższym przykładzie każdy z pociętych elementów tekstowych to tak naprawdę nawigacja. Użytkownicy mogą kliknąć dowolny element, ale bardziej imponująca jest akcja najechania myszą, która ponownie łączy wycięty tekst.
Do logotypów
Tekst w plasterkach może być świetnym sposobem na utworzenie logo, gdy jedynymi elementami, z którymi musisz pracować, są tekst. Zabawny logotyp może być czymś więcej niż znakiem rozpoznawczym marki; może być również wysoce graficznym elementem do wielu zastosowań, takich jak projekt koszulki powyżej.
Podczas pracy z tekstem w plasterkach poszukaj naturalnego kształtu i nachylenia do krojenia, dzięki czemu można go ciekawie oglądać, zachowując jednocześnie łatwość czytania.
Zwróć uwagę na sposób, w jaki krojenie tworzy białe miejsca. Powyższy projekt wykorzystuje w sobie szeroki fragment dodatkowych informacji. Częściej stosowane krojenie jest często cienką linią, ale podejścia (jak widać z przykładów w tym poście) mogą się znacznie różnić.
Stwórz interaktywność
Zezwól użytkownikom na krojenie własnego tekstu za pomocą interaktywnej kombinacji tekstu i pędzla, na przykład w powyższym przykładzie. Chociaż tekst nie jest dokładnie pocięty, efekt jest tworzony w procesie tworzenia grafiki.
Wszelkie narzędzia, które pozwalają użytkownikom zmieniać projekt, mogą powodować dłuższe przebywanie w witrynie ze względu na interaktywny komponent.
Krojone pionowe kreski
Plasterki pionowe są zwykle krótsze, ponieważ każde cięcie jest częścią jednej litery. Podczas gdy większość projektantów wydaje się używać trendu w ten sam sposób z wycinkiem zorientowanym poziomo, cięcia mogą być również pionowe.
Plasterki pionowe są zwykle krótsze, ponieważ każde cięcie jest częścią jednej litery. Sztuką, aby plastry pionowe działały, jest spójność. Sposób wykonywania cięć powinien naśladować się nawzajem, aby litery wyglądały tak, jakby pasowały do siebie. Ta metoda krojenia powinna wyglądać, jakby była prawie zamierzoną częścią kroju pisma. (Nie w powyższym przykładzie plastry mają tę samą szerokość od litery do litery, a te same litery mają te same plasterki).
Ustanowienie przepływu wizualnego
Cięcia prawie tworzą poczucie pilności czytania, dzięki czemu można błyskawicznie przesuwać litery i przejść do głównej grafiki na ekranie. Jedną z konsekwencji wycinanego tekstu - zamierzonego lub nie - jest to, że tworzy wizualny przepływ. Oko użytkownika podąży za kierunkiem wycinka i otaczającej go białej przestrzeni.
Spójrz na logotyp w powyższym przykładzie. Z przekrojami w R i O w Robocath (plus normalna brakująca część c) występuje oczywiste kierunkowe przesunięcie po ekranie od lewej do prawej.
Ciągnięcie jest silniejsze niż to, co kojarzysz z normalnym czytaniem (również od lewej do prawej), ponieważ plastry szybko popychają cię przez postacie. Cięcia prawie tworzą poczucie pilności czytania, dzięki czemu można błyskawicznie przesuwać litery i przejść do głównej grafiki na ekranie.
Dodaj nacisk na literę
Ostatnim - i być może najbardziej przekonującym - powodem zastosowania trendu projektowania tekstu na plasterki jest podkreślenie liter lub wiadomości. Krojenie może być dowolną modyfikacją liter, w której brakuje części znaku w projekcie.
MJND powyżej wykorzystuje bardziej efekt warstw do ukrywania lub krojenia liter, aby podkreślić nacisk na wiadomość. Obraz może z łatwością wykonać całą komunikację tutaj, ale ten efekt pomaga przywrócić użytkownika do głównej wiadomości. Połączenie jest proste, skuteczne i interesujące wizualnie.
Zasoby edukacyjne
Istnieje kilka sposobów tworzenia efektów tekstowych w plasterkach dla projektów, w zależności od tego, co próbujesz utworzyć. Najpopularniejsze opcje obejmują ręczne tworzenie efektu tekstowego za pomocą oprogramowania do edycji lub CSS do tworzenia efektu dla projektów internetowych.
Oto samouczki dla każdej z tych opcji, dzięki którym możesz spróbować stworzyć modny efekt tekstu w plasterkach:
- Wideo: Jak tworzyć plasterki tekstu w programie Adobe Illustrator
- Wytnij tekstowy fragment kodu za pomocą CSS
Wniosek
Korzystanie z trendu tekstu pociętego na plasterki może być nieco trudne, ponieważ wymaga zmiany elementów typu. Ważne jest, aby przy tym efekcie nie utracić czytelności lub aby użytkownik mógł stracić użytkowników.
Jednak pokrojone efekty tekstowe mogą być zabawnym rozwiązaniem i pomóc w generowaniu punktu centralnego. Dodanie odrobiny animacji może również pomóc przenieść ją na wyższy poziom. (Wiele przykładów zawartych w tym poście właśnie to robi; koniecznie odwiedź te strony i kliknij.)
