Najbardziej poprawna instrukcja. Jak stworzyć ikonę aplikacji do projektowania materiałów

Jeśli zastanawiasz się, jak stworzyć ikonę aplikacji w stylu Material, to trafiłeś we właściwe miejsce!

Ta instrukcja jest najdokładniejszym przewodnikiem po tworzeniu ikony. aplikacje Android w stylu Material Design, zebranym z różnych źródeł, które udało mi się znaleźć w sieci.

Ikona aplikacji jest tworzona w edytor graficzny Adobe Illustrator CC. Instrukcje są dość krótkie. Jeśli wiedza redaktora nie wystarcza do powtórki, zapoznaj się z filmem z poniższych materiałów (s. 3)

Do napisania instrukcji użyto następujących materiałów

1. Wskazówki dotyczące projektowania materiałów Google: https://www.google.com/design/spec/style/icons.html
2. Czego Google pominęło w swoich wytycznych dotyczących ikonografii Material Design: https://goo.gl/5SpsVn
3. Jak utworzyć ikonę projektu materiału w programie Adobe Illustrator: https://youtu.be/GzXq6ouGTpE

Pliki źródłowe

Musisz pobrać kilka plików, które pomogą w rozwoju

1. Material Design Color Palette: https://goo.gl/EVxUSx — skopiuj plik Material Palette.ase z archiwum do katalogu palet Adobe Illustrator (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches )
2. Czcionki: https://goo.gl/GQbKob - zainstaluj czcionki w systemie, a także skopiuj pliki czcionek do C:\Program Files\Common Files\Adobe\Fonts i C:\Program Files (x86)\Common Pliki\ foldery Adobe\Fonts
3. Siatka do wygodna obsługa z ikonami (Arkusz naklejek z ikonami produktu): https://goo.gl/CYE2jV - zawiera 4 szablony ikon aplikacji

Przygotowanie do działania

Skopiuj plik palety kolorów do biblioteki Adobe Illustrator, a następnie wybierz otrzymaną paletę z listy Biblioteki próbek w panelu Próbki. Zainstaluj czcionki i sprawdź, czy są dostępne w programie Adobe Illustrator. Jeśli czcionka Roboto Regular nie jest dostępna, skopiuj pliki czcionek do katalogów wymienionych powyżej w plikach źródłowych. Rozpakuj pliki siatki i otwórz je w programie Adobe Illustrator. Wybierz ten, który najbardziej Ci odpowiada, zamknij resztę. W tych szablonach prawidłowe cienie i podświetlenia są już zorganizowane - ich wartości można przyjąć za podstawę. Zacznijmy.

Tworzenie ikony w stylu materiału

W tym samouczku stworzymy najprostszą ikonę jednego z geometrycznych kształtów opisanych w samouczku. Szablon ikony ma rozmiar 192×192 pt, co jest bardzo przydatne do manipulowania wartościami rozmiaru. Geometryczne wymiary samej ikony, w zależności od jej typu, przedstawiają się następująco:

• ikona kwadratowa: 152×152 pt
• prostokątny: 176×128 pt
• okrągły: ⌀176 pkt

Zaokrąglanie rogów kwadratowej i prostokątnej ikony: 12 pt

Rozważ przykład tworzenia kwadratowej ikony

Po wykonaniu wszystkich manipulacji powinieneś zobaczyć coś takiego:

Następnym krokiem jest utworzenie obszaru podświetlenia i cienia dla tła.

To kończy pracę w tle.

Stworzenie ikony znaku

Aby uprościć opis procesu, w tle umieszczamy symbol alfabetu „B”

Tworzenie długiego cienia na znak

• Na warstwach zaznacz kształt z symbolem (przełącznik po prawej stronie) i skopiuj (Ctrl + C) i wklej dwa razy z przodu (Ctrl + F). W rezultacie powinieneś otrzymać trzy identyczne kształty „Symbol”. Będziemy kontynuować pracę z dwoma nowymi postaciami
• Przełącz się na górny kształt „Symbol” i przytrzymaj Klawisz Shift przesuń kształt poza płótno pod kątem 45° w prawo i w dół - jest to półfabrykat do tworzenia długiego cienia
  
  
• W rezultacie kształt środkowy i dolny na liście warstw powinien być wyśrodkowany na tle, a górny powinien znajdować się poza kanwą w prawym dolnym rogu. Nie dotykamy jeszcze dolnej liczby.
• Teraz wybierz dwa kształty „Symbol” prawym przełącznikiem - górny i środkowy, przejdź do menu Obiekt - Mieszanie - Opcje mieszania, włącz tryb Określone kroki, określ 200 kroków i kliknij OK, a następnie wykonaj polecenie menu Obiekt - Mieszanie - Tworzenie. Na podstawie tych dwóch kształtów powstanie jeden w formie przepływu pomiędzy dwoma starymi.
  
• Bez usuwania zaznaczenia z wynikowej figury wykonaj akcję w menu Obiekt - Rozwiń ... i kliknij OK - przepływ zostanie podzielony na oddzielne wielokąty
• Wykonaj scalanie wieloboków (zjednocz)
  
• Zmień nazwę powstałego kształtu Z przyszłym cieniem w „Long Shadow”
• Teraz stwórzmy maskę. Skopiuj kształt tła (Ctrl+C) i wklej w miejscu (Shift+Ctrl+V). W rezultacie kształt z tłem zostanie wstawiony na wszystkie kształty w warstwie.
• Wybierz odpowiedni przełącznik właśnie wklejony „Tło”, który znajduje się na samej górze, oraz kształt „Długi cień” i przytnij Przytnij. W rezultacie otrzymujemy grupę figurek zawierające wiele kształtów
• Usuń wszystkie kształty Z wyjątkiem samego cienia - jest on całkowicie biały i najprawdopodobniej znajduje się nad resztą Zrzut ekranu pokazuje kształt, który należy usunąć z grupy
  
• Przemianować w „Długi cień” i umieść go pod kształtem „Symbol”
  
• Przełączamy się na kształt „Długi cień”, następnie w panelu Gradient wybieramy Linear type, kąt -45°, kolor początkowy i końcowy taki sam jak wybrałeś dla cienia tła – w naszym przypadku jest to Indygo 900(Wybierz kolor z tabeli „Odcień, odcień i wartości cienia” pod linkiem: https://goo.gl/8Vkg33), krycie po lewej stronie 20%, krycie po lewej stronie po prawej 0% i pozycja w punkcie środkowym 33%
  
• Teraz musisz oczyścić kształt cienia z „kroków”, które powstały podczas blendowania (kształty płynne). Aktywuj kształt Long Shadow i powiększ go na tyle, aby docenić krawędź kształtu
  
• Wybierz narzędzie Lasso i wybierz punkty, aby nie dotykać skrajnych, jak pokazano poniżej
  
• Usuń dodatkowe punkty za pomocą narzędzia Usuń wybrane punkty kontrolne
  

Tworzenie strefy podświetlenia i cienia dla znaku

Tworzenie wyróżnienia dla całej ikony

• Skopiuj kształt tła „Tło”, utwórz nową warstwę i wklej na nią kształt tła. Wyłącz wypełnienie kształtu. Zmień nazwę warstwy na „Oświetlenie”
• Utwórz wypełnienie gradientowe kształtu na nowej warstwie o następujących parametrach: typ Radial, kolor początku i końca gradientu to biały, krycie początku gradientu to 10%, koniec gradientu to 0% , pozycja punktu środkowego wynosi 33%
• Używając narzędzia Gradient (G), utwórz gradient od lewego górnego rogu tła do prawego dolnego rogu, a następnie zmień kąt gradientu w ustawieniach na -45°

Tworzenie ogólnego cienia dla całej ikony

Jesteś programistą lub projektantem stron internetowych i chcesz być na bieżąco? Następnie darmowe ikony projektowania materiałów- to po prostu must-have!

Co to jest projektowanie materiałów

wygląd materiału- Jest to projekt oprogramowania od Google, zaprojektowany w celu połączenia wszystkich produktów i usług w jednym uniwersalnym interfejsie, aby uczynić go wygodniejszym dla użytkowników.

Kluczową ideą Material Design jest zapewnienie użytkownikom intuicyjnego poczucia pracy z rzeczywistymi obiektami fizycznymi.

Ikony projektowania materiałów

Dziś zwracam uwagę na ponad 900 darmowych ikon Material Design, które możesz swobodnie używać na własnych stronach internetowych.

Te ikony są proste, przyjazne i nowoczesne. Każda ikona jest tworzona przez projektantów przy użyciu wytycznych projektowych Google, aby w prostych i minimalnych formach przedstawić uniwersalne koncepcje powszechnie stosowane we wszystkich interfejsach użytkownika.

Ikony Material Design zapewniają łatwą czytelność i przejrzystość w dużych i małych rozmiarach, zoptymalizowanych pod kątem odpowiedniego wyświetlania na wszystkich popularnych platformach i rozdzielczościach ekranu.

Darmowe ikony Material Design są dostępne w formatach SVG i PNG, a także jako czcionka internetowa.

Najłatwiejszym sposobem wykorzystania ikon Material Design jest użycie fontu podłączonego z samego serwera Google. Bardzo łatwo to zrobić:

Jak połączyć ikony Material Design

I w plik css dodać odpowiedni zestaw reguł dla klasy .material-icons, z którą będziemy korzystać z ikon:

ikony-materiałów (
rodzina czcionek: „Ikony materiałów”;
grubość czcionki: normalna
styl czcionki: normalny
rozmiar czcionki: 24px; /* Preferowany rozmiar ikon */
wyświetlacz: inline-block
wysokość linii: 1;
transformacja tekstu: brak;
odstępy między literami: normalne
zawijanie słów: normalne;
spacja: nowrap;
kierunek:ltr;
/* Wsparcie dla wszystkich przeglądarek WebKit. */
-webkit-font-smoothing: wygładzanie;
/* Wsparcie dla Safari i Chrome. */
renderowanie tekstu: optymalizacjaLegibility;
/* Wsparcie dla Firefoksa. */
-moz-osx-font-smoothing: skala szarości;
/* Wsparcie dla IE. */
ustawienia funkcji czcionki: "liga";
}

Jak korzystać z ikon projektowania materiałów

Korzystanie z ikon jest bardzo proste. Wklej następujący kod w odpowiednim miejscu na stronie:

Twarz

Tutaj słowo twarz oznacza nazwę ikony z zestawu. Wszystkie nazwiska można znaleźć na tej stronie. W tym samym miejscu, po kliknięciu dowolnej ikony, poniżej pojawi się podpowiedź, jak wstawić tę ikonę na swoją stronę.

W powyższym przykładzie ikony po prostu używają swojej nazwy. Nie wszystkie przeglądarki obsługują automatyczne zastępowanie nazwy samą ikoną. Jeśli chcesz, aby stare przeglądarki odpowiednio wyświetlały ikony, użyj ich liczbowego odpowiednika. Możesz go również znaleźć na powyższej stronie, klikając dowolną ikonę i wybierając Czcionka ikony.



Stylizacja ikon projektowania materiałów

Na zmianę wygląd zewnętrzny W przypadku ikon Material Design możesz użyć następujących reguł CSS:

/* Zasady ustalania rozmiaru ikony. */
.material-icons.md-18 (rozmiar czcionki: 18px; )
.material-icons.md-24 (rozmiar czcionki: 24px; )
.material-icons.md-36 (rozmiar czcionki: 36px; )
.material-icons.md-48 (rozmiar czcionki: 48px; )
/* Zasady używania czarnych ikon na jasnym tle. */
.material-icons.md-dark ( kolor: rgba(0, 0, 0, 0.54); )

/* Zasady używania białych ikon na ciemnym tle. */

Chociaż wszystkie ikony można ustawić na dowolny rozmiar, nadal zaleca się przestrzeganie zasad projektowania i użytkowania materiałów podane wymiary 18, 24, 36 lub 48px. Domyślnie ikony są wyświetlane w rozmiarze 24px.

Jak ustawić własny kolor ikon Material Design

Jeśli postępujesz zgodnie z wytycznymi Material Design, wówczas ikony powinny być używane tylko w czerni i bieli. biały kolor z odpowiednio 54% i 100% krycia. Za nieaktywne ikony - odpowiednio 26% i 30%.

Material-icons.md-dark ( kolor: rgba(0, 0, 0, 0.54); )
.material-icons.md-dark.md-inactive ( kolor: rgba(0, 0, 0, 0,26); )
.material-icons.md-light ( kolor: rgba(255, 255, 255, 1); )
.material-icons.md-light.md-inactive ( kolor: rgba(255, 255, 255, 0.3); )

Jednak nic nie stoi na przeszkodzie, aby zastosować własne kolory do ikon:

Pobierz bezpłatne ikony projektowania materiałów

Możesz również pobrać ten zestaw ikon dla siebie i używać go w układach projektowych lub podczas tworzenia różnych interfejsów. Możesz pobrać darmowe ikony w stylu Material Design (~60MB).

Nie tak dawno Google wprowadziło swoją nową koncepcję interfejsy użytkownika uprawniona . Jest to pomysł na tak dużą skalę, że po prostu nie da się o nim mówić w ramach jednego artykułu. Nie będziemy próbowali ogarniać ogromu, ale spróbujemy spojrzeć na niego z punktu widzenia jego bardzo ważnego komponentu - obiektów graficznych, często dla zwięzłości i tradycyjnie nazywanych ikonami.

W koncepcji Google Material Design stanowią integralną i bardzo ważną część doświadczenia użytkownika, niezależnie od tego, czy jest to strona internetowa, czy aplikacja komputerowa. Zgodnie z tą koncepcją użytkownik powinien mieć intuicyjne poczucie pracy z rzeczywistymi obiektami fizycznymi w środowisku cyfrowym. Przy stosunkowo niewielkich rozmiarach powinny być wyraźne i wyraźne, mieć harmonijną kolorystykę i zachować pewną równowagę między liczbą wolna przestrzeń i drobne szczegóły. Ponadto należy pamiętać, że sieć powinna wyglądać równie atrakcyjnie na różne urządzenia i systemy operacyjne.

Dzisiaj przyjrzymy się niektórym, naszym zdaniem, udanym próbom podążania za koncepcją Material Design właśnie w zakresie tworzenia elementów interfejsu, takich jak .

Projekty ikon materiałów internetowych

Ikony usług studia internetowego w stylu

Ikony Material Design dla dostawcy hostingu

Ikony projektowania materiałów kątowych

Izometryczne ikony w stylu projektowania materiałów