Jak szybko zamienić nudne ikony w oryginalne arcydzieła?

Ikony są integralną częścią naszych projektów. Są wizualnymi wskazówkami wskazującymi różne działania i mogą nadać produktowi niepowtarzalną tożsamość. Ale zbyt często decydujemy się uczcić ich znaczenie, pobierając te same zestawy ikon i sprawiając, że każda ikona dla każdej witryny wygląda mniej więcej tak samo. Co za sposób na potraktowanie czegoś tak ważnego.

Aby rozwiązać ten problem, stworzyłem przewodnik, który pomoże projektantom dodać wizualną głębię do ich ikon i uczynić je unikalnymi dla produktu, który reprezentują. Ten samouczek jest w dużej mierze zainspirowany wpływowym projektem Google Material.

Zasady Google dotyczące projektowania materiałów

Jak mówi Google, „materiał jest metaforą”. Pożycza wizualne wskazówki ze świata fizycznego i tworzy nowy język wizualny, aby ujednolicić wszystkie ich interfejsy. Zasady projektowania materiałów są dostępne i można je szybko zastosować w celu poprawy atrakcyjności interfejsów i doświadczenia użytkownika.

1. Używaj prostych geometrycznych kształtów i odważnych kolorów

Trend projektowania płaskiego zainspirował Material Design, który również opiera się na podstawowych płaskich kształtach. Ostrożnie wybierz kształt, który najlepiej reprezentuje element, który przedstawia ikona.

2. Dodaj głębię dzięki subtelnemu cieniowaniu

Cień to dobry sposób na oszukanie oka i dodanie głębi projektowi, ponieważ stymuluje efekt padania światła na obiekt.

Zwróć uwagę, że naturalne światło jest często symulowane jako padające z górnego, lewego rogu.

3. Użyj odcieni kolorów, aby zastąpić cienie

Każdy kolor jest używany w wielu odcieniach, aby symulować głębię wizualną. Na przykład w ikonie Gmaila widać, że w kształcie litery M zastosowano różne odcienie czerwieni, a pod pokrywą koperty zastosowano ciemniejszy odcień szarości.

Jak Ty też możesz to zrobić: demonstracje krok po kroku

Zastosujemy uproszczoną wersję stylu Material Design, a dla każdej ikony użyjemy tylko trzech odcieni tego samego koloru i utrzymamy płaskie i krótkie cienie, zamiast zwykłego efektu „długiego cienia”.

Zasoby

• Sprawdź pełny bezpłatny zestaw ikon od Google tutaj.

Zacznijmy.

1. Ikona śruby

Przełam oryginalną ikonę na dwie części i spraw, aby górna część wyglądała na uniesioną. Możesz to osiągnąć, tworząc efekt cienia na przecięciu tych dwóch kształtów. Użyj trzech odcieni żółtego - jaśniejszego na górze, ciemniejszego na dole i zachowaj najciemniejszy odcień dla cienia.

2. Ikona czatu

Na oryginalnej ikonie mamy podpowiedź efektu cienia w przerwie między dwoma bąbelkami, w tym miejscu utworzysz cień.

Na dolnym kształcie wybierz punkt tworzący kąt prosty w przerwie i przesuń go w górę w lewo, aż utworzysz kąt prosty w lewym górnym rogu.

Zduplikuj górny dymek i przesuń kopię w dół iw prawo. Wybierz kopię i dolny kształt bąbelka, użyj „Wyszukiwarki ścieżek”, aby utworzyć podział i zachowaj tylko przecięcie z poprzednią kopią.

Teraz możesz nałożyć trzy odcienie niebieskiego i nadać najjaśniejszy na wierzchu, najciemniejszy na środku, a drugi najciemniejszy na dole.

3. Ikona zaznaczenia

Stworzymy efekt złożonego papieru.

Powiel ikonę i usuń dodatkowe dwa punkty w prawym górnym rogu, a następnie w skrajnym lewym, aby wyciągnąć dwa kawałki.

Zduplikuj lewą zakładkę i przesuń ją na prawą.

Przetnij dwa kształty, aby uzyskać efekt cienia. Następnie nałóż trzy odcienie koloru, zachowując najciemniejszy dla cienia, drugi najciemniejszy dla dłuższego kawałka i jaśniejszy dla górnej części.

4. Ikona flagi

Zacznij od zaokrąglenia krawędzi, a następnie wyciągnij podstawę flagi.

Aby stworzyć efekt składania, narysuj dwie linie przecinające się po przekątnej. Używając „Pathfinder”, podziel kształt flagi liniami i zastosuj trzy odcienie zieleni na fladze, zachowując szarość podstawy.

5. Ikona serca

Powiel ikonę serca.

Wyizoluj lewą połowę kształtu.

Prześledź ukośną linię w dół, wychodzącą z prawego górnego punktu.

Nałóż powstały kształt na serce, a następnie przesuń go w prawo, aby odjąć kształt cienia. Zastosuj swoje trzy odcienie różu.

6. Ikona gór

Pusta przerwa wewnątrz oryginalnej ikony wskazuje, gdzie możemy umieścić cień.

Stwórz dwa trójkątne kształty z każdego wyboru.

Przesuń kopię mniejszej w prawo i wyodrębnij powstałe przecięcie jako kształt cienia.

Zastosuj trzy odcienie brązu, trzymając najjaśniejszy z lewej strony, drugi najjaśniejszy z dużym trójkątem, a najciemniejszy z cieniem pośrodku. Zastosuj trochę promienia narożnika, aby zmiękczyć wynik.

7. Ikona ludzi

Wybierz i zduplikuj dolną część osoby po lewej stronie. Wyrównaj tę kopię z osobą po prawej stronie. Teraz wybierz trzy nakładające się kształty i zastosuj narzędzie „Podziel” z panelu „Odnajdywanie ścieżek”. Teraz zaimplementuj kolory, aby zakończyć.

8. Ikona pływającego kwadratu

Wybierz dolny kształt i przesuń jego środkowy górny punkt w górę, aż będzie wyglądał jak diament.

Powiel górny kształt rombu i przesuń kopię w dół o 10 lub 20 pikseli.

Wybierz dwa dolne kształty i zastosuj narzędzie „Podziel” z panelu „Odnajdywanie ścieżek”.

Z wynikowych przecinających się kształtów zachowaj tylko dwa dolne elementy i usuń wszelkie dodatkowe punkty.

Zawiń go, nakładając trzy odcienie czerwieni, przypisując najciemniejszy środek.

9. Ikona listu

Za pomocą „Narzędzia zaznaczania bezpośredniego (A)” wybierz drugi wyższy punkt kształtu obwiedni.

Dodaj punkt na segmencie po jego prawej stronie za pomocą narzędzia „Pióro”.

Teraz, gdy masz dodatkowy punkt, możesz przekształcić tę ujemną przestrzeń, aby wyglądała jak papier, podnosząc dwa górne punkty i przesuwając je w prawo iw lewo, jak pokazano.

Wybierz wszystko i zastosuj podział z panelu „Pathfinder”. Oddziel górny kształt papieru od koperty, a następnie skopiuj część koperty na wierzchu papieru, aby wyciąć kształt cienia przed nałożeniem trzech odcieni niebieskiego.

10. Ikona ciasta

Wyizoluj zduplikowaną wersję dolnej części ciasta.

Zawęź jego szerokość, przesuwając lewą i prawą krawędź do wewnątrz.

Przesuń wynikowy kształt na oryginalną ikonę i rozciągnij wyższe punkty, aby nałożyły się na kształt lodu.

Utwórz podział wszystkich nakładających się kształtów za pomocą „Pathfinder” i usuń dodatkowe punkty obok wąskiej podstawy ciasta, którą utworzyłeś wcześniej.

Uzupełnij swoje ciasto, nakładając jasnopomarańczowy na lukier i świecę, ciemniejszy odcień na podstawę i jeszcze ciemniejszą pomarańczę na kształt płomienia i krawędź cienia.

Popraw wygląd i styl swojego zestawu ikon

Tworzenie ikon w stylu Material można osiągnąć z łatwością. Potrzebujesz tylko dobrego połączenia przemyślanych geometrycznych kształtów, odważnych odcieni kolorów i efektu cienia.

Dobrą wiadomością jest to, że nie musisz nawet tworzyć wszystkich ikon od zera, tak jak to zrobiliśmy w tym samouczku. Możesz zacząć od istniejących darmowych, płaskich ikon i zastosować proste techniki, których się właśnie nauczyłeś.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania i ich znaczenie
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Odkrywanie zasad projektowania Gestalt
• Adobe XD kontra Sketch – które narzędzie UX jest dla Ciebie odpowiednie?
• 10 elementów UX, z których korzystają najlepsi projektanci