Ikony okien

Ikony okien pojawiają się w wyskakujących okienkach, które proszą użytkownika o interakcję. Wykorzystują jasny gradient i cień wewnętrzny, aby wyróżnić się na ciemnym tle.

Jak opisano w sekcji Dodawanie zestawów ikon do określonej gęstości, należy utworzyć osobne zestawy ikon dla ekranów o małej, średniej i dużej gęstości. Dzięki temu ikony będą wyświetlać się prawidłowo na różnych urządzeniach, na których można zainstalować Twoją aplikację. W tabeli 1 znajdziesz listę zalecanych rozmiarów gotowych ikon w poszczególnych gęstościach. Przeczytaj też wskazówki dla projektantów, by dowiedzieć się, jak pracować z wieloma zestawami ikon.

Tabela 1. Podsumowanie wymiarów ikon zakończonych okna dialogowego dla każdej z 3 uogólnionych gęstości ekranu.

	ldpi (120 dpi) (ekran o małej gęstości)	mdpi (160 dpi) (ekran o średniej gęstości)	hdpi (240 dpi) (ekran o dużej gęstości)	xhdpi (320 dpi) (ekran o bardzo dużej gęstości)
Rozmiar ikony okna	24 x 24 piks.	32 x 32 piks.	48 x 48 piks.	64 x 64 piks.

Ostateczną grafikę należy wyeksportować jako przezroczysty plik PNG. Nie dodawaj koloru tła.

Szablony do tworzenia ikon w Adobe Photoshop są dostępne w pakiecie szablonów ikony.

Wszystkie wersje Androida

Poniższe wskazówki opisują sposób projektowania ikon dialogów dla wszystkich wersji platformy Androida.

Struktura

• Ikony w oknach mają bezpieczną ramkę o szerokości 1 piksela. Podstawowy kształt musi mieścić się w ramce SafeFrame, natomiast antyalias okrągłego kształtu może nakładać się na nią.
• Wszystkie wymiary podane na tej stronie są oparte na wymiarach 32 x 32 piksele w programie Adobe Photoshop. Zachowaj 1 piksel dopełnienia wokół ramki ograniczającej w szablonie Photoshop.

Rysunek 1. Gradient SafeFrame i wypełniania ikon w oknach. Rozmiar ikony to 32 x 32.

Światło, efekty i cienie

Ikony w oknach są płaskie i wyglądają jako skierowane do przodu. Aby wyróżnić się na ciemnym tle, są wykonane z użyciem jasnego gradientu i cienia wewnętrznego.

Rysunek 2. Światło, efekty i cienie w ikonach okna. 1. Przednia część: nakładka gradientowa | kąt 90° dół: r 223 | g 223 | b 223 góra: r 249 | g 249 | b 249 lokalizacja koloru dołu: 0% lokalizacja koloru u góry: 75% 2. Cień wewnętrzny: czarny | przezroczystość 25% | kąt -90° | odległość 1 pikseli | rozmiar 0 pikseli

Krok po kroku Utwórz podstawowe kształty za pomocą narzędzi takich jak Adobe Illustrator. Zaimportuj kształt do narzędzia takiego jak Adobe Photoshop i przeskaluj go, aby pasował do obrazu o wymiarach 32 x 32 piksele na przezroczystym tle. Dodaj efekty widoczne na Rysunku 2, aby utworzyć odpowiedni filtr. Wyeksportuj ikonę o wymiarach 32 x 32 jako plik PNG z włączoną przezroczystością.