Tworzenie ikon produktów nie jest tak trudne, jak mogłoby się wydawać na pierwszy rzut oka. Dowiedz się więcej o projektowaniu od podstaw pierwszej ikony aplikacji na Androida!
Bez względu na rynek lub usługę, za pośrednictwem której aplikacja jest dystrybuowana, jej ikona jest pierwszą rzeczą, którą zauważy potencjalny użytkownik. Pierwsze wrażenie ma ogromne znaczenie, gdy próbujesz przyciągnąć nowych użytkowników, co oznacza, że ikony są kluczowymi elementami każdej aplikacji. Niezależnie od przeznaczenia aplikacji, stworzenie pięknej ikony aplikacji powinno być ważną częścią fazy rozwoju każdej aplikacji. Chociaż wielu twórców aplikacji technicznych pozostawia grafikę oddanym projektantom, zrozumienie Podstawy projektowania i ich stosowania to coś, co może zrobić każdy, kto ma talent do eksperymentowania i analiza. Ikony aplikacji nie są wyjątkiem!
W tym przewodniku opisano tworzenie adaptacyjnej ikony dla przykładowej aplikacji na Androida przy użyciu oprogramowania typu open source. Chociaż wynik końcowy może nie mieć wymaganego formatu, wiele z omówionych tutaj wskazówek projektowych będzie obowiązywać na wielu platformach.
Po wydaniu „ikon adaptacyjnych” dla Androida Oreo ikona aplikacji może składać się z trzech podstawowych warstw: nieprzezroczysta warstwa tła, warstwę pierwszego planu z wsparcie przejrzystości, oraz maska który określa kształt ikony. Wszystkie te warstwy mają rozmiar 108 x 108 dp, chociaż dla użytkownika widoczna może być tylko wewnętrzna część 72 x 72 dp; drugi region, wycięty przez maskę na górze, służy do efektów specjalnych w interfejsie użytkownika, dzięki czemu ikona wygląda dynamicznie. Dla niewtajemniczonych, dp Lub piksel niezależny od wyświetlacza oznacza jednostkę miary całego interfejsu Androida i jest definiowana jako równa wielkości jeden piksel na wyświetlaczu o rozdzielczości 160 punktów na cal.)
Nick Butcher z Google mówi o kole o 66 dp w środku ikony, której żadna maska nie może odciąć, zwana „bezpieczną strefą”. To tutaj będą znajdować się główne elementy naszego projektu ikony później, kiedy przejdziemy do faktycznego projektowania. Wszystko, co przekracza ten promień 33 dp, może nie być widoczne na ikonie, jeśli ma ona włączoną maskę kształtu.
Ponieważ ikony lepiej są obrazami wektorowymi ze względu na skalowanie interfejsu użytkownika, do stworzenia naszej ikony będziemy potrzebować edytora grafiki wektorowej. Inkscape jest oprogramowaniem typu open source i świetną alternatywą dla droższego oprogramowania, dlatego zostanie to nasz wybór na potrzeby tego samouczka. Zaprojektowałem także plik projektu dostępny tutaj która ma zaznaczoną bezpieczną strefę i linię kluczową projektu Google, a także fajną maskę warstwy, która pozwala nam podejrzeć kształt ikony.
Po otwarciu pliku projektu w Inkscape i pliku Wypełnij i obrysuj (Shift+Ctrl+F), Eksportuj obraz PNG (Shift+Ctrl+E) i Warstwy (Shift+Ctrl+L) otwierają się, możemy zaczynać. Panel Warstwy to miejsce, w którym znajduje się sedno projektu Pierwszoplanowy I Tło warstwy przeznaczone do przechowywania ich tytułowych elementów oraz Wytyczne I Maska należy je włączać i wyłączać (klikając małą ikonę oka obok nich) w celach informacyjnych.
Ikona jest wyrazem tożsamości aplikacji. W związku z tym musi uwzględniać zarówno charakter aplikacji, jak i wytyczne projektowe specyficzne dla platformy, takie jak te stosowane w systemie Android. Język projektowania materiałów ma do zaoferowania. Na potrzeby demonstracji załóżmy, że pracujemy nad aplikacją pogodową korzystającą z elementów Material. Moglibyśmy użyć klasycznego motywu słońca i chmur, aby poinformować użytkownika o przeznaczeniu aplikacji i umieścić trochę wykorzystaj ten podstawowy projekt, używając cieni i geometrii, aby dobrze komponował się ze środowiskiem Androida.
Tło
Zacznijmy od ustawienia tła, które będzie składać się z błękitnego nieba i żółtego słońca w centrum. Obrócenie Maska niewidoczne, wybieram i czynię widocznym Warstwa tła, wypełnij całe płótno Twórz prostokąty i kwadraty (F4) i ustaw kolor wypełnienia prostokąta Wypełnij i obrysuj do 64B5F6FF (jasnoniebieski) zgodnie z pkt Paleta kolorów materiału. Następnie wybieram Twórz okręgi, elipsy i łuki (F5) i trzymając Shift i Ctrl, narysuj okrąg od środka linii kluczowej do drugiego co do wielkości okręgu i ustaw jego kolor na FFEE58FF, co daje nam ciepłe, małe słońce. Przy każdym projektowaniu zawsze dobrze jest trzymać się podstawowej geometrii, a język projektowania Androida szczególnie zachęca do prostoty. Aby zachować zgodność z wytycznymi dotyczącymi materiałów, daję również słońcu subtelny cień Filtry → Cienie i poświaty → Cień.
Pierwszoplanowy
Zbliża się do Pierwszoplanowy, Rysuję grupę chmur wokół słońca, rysując okręgi z obwodów innych okręgów i nadaję im kolor wypełnienia EEEEEEFF. Następnie odpowiednio grupuję okręgi, klikając prawym przyciskiem myszy wiele obiektów i wybierając Grupai uruchom generator cienia na dwóch końcowych kształtach, które uzyskam na końcu. Obrócenie Wytyczne niewidoczny i przełączalny Pierwszoplanowy I Tło alternatywnie można zobaczyć warstwy składowe ikony naszej aplikacji pogodowej. Jeśli kiedykolwiek przeciągniesz ikonę aplikacji na ekran główny, chmury będą spadać kaskadą na tle nieruchomego słońca!
Wynik
Maska można teraz ustawić jako widoczne i modyfikować Edytuj ścieżki według węzłów (F2), aby spróbować symulować maski o różnych kształtach. Ponadto obie warstwy można wyeksportować oddzielnie za pomocą narzędzia Eksportuj obraz PNG Panel do użytku w Androidzie Studioi razem dla Ikona Google Play.
Tworząc ikonę produktu, zawsze dobrą praktyką jest przyjęcie celu aplikacji, przekształcenie go w najbardziej abstrakcyjną formę wizualną i przedstawienie tego za pomocą prostej geometrii. Im prostszy jest dowolny element projektu, tym zwykle działa lepiej i bardziej niezawodnie, co dotyczy również projektowania graficznego. W większości przypadków kształt obiektu na pierwszym planie i jednolity kolor lub wzór w tle (lub odwrotnie) działa dobrze, ale podobnie jak w naszym przykładzie, można użyć kolejnej warstwy obiektów, jeśli są filcowe niezbędny; zbyt duże układanie lub użycie cieni tylko skomplikuje projekt ikony.
Więcej o projektowaniu ikon możesz przeczytać w dziale Interfejsy materiałowe na oficjalnej stronie Materiałowa strona internetowai pobierz darmowe ikony systemowe do wykorzystania w projektowaniu ikon ta sama strona internetowa.