Створити значки товарів не так складно, як може здатися на перший погляд. Дізнайтеся більше про створення своєї першої піктограми програми Android з нуля!
Незалежно від того, через який ринок чи службу розповсюджується програма, її значок програми – це перше, на що зверне увагу майбутній користувач. Перше враження є надзвичайно важливим для залучення нових користувачів, а це означає, що значки є ключовими компонентами будь-якої програми. І, незалежно від мети програми, створення красивої піктограми програми має бути важливою частиною етапу розробки кожної програми. Хоча багато розробників технічних додатків залишають графіку спеціальним дизайнерам, розуміючи Основи дизайну та їх застосування — це те, що може зробити кожен, маючи хист до експериментів і аналіз. Значки додатків не виняток!
У цьому посібнику розповідається про створення адаптивної піктограми для прикладу програми Android за допомогою програмного забезпечення з відкритим кодом. Хоча кінцевий результат може бути не в тому форматі, який вам може знадобитися, багато порад щодо дизайну, які тут обговорюються, стосуватимуться різних платформ.
Після випуску «адаптивних піктограм» з Android Oreo піктограма програми може складатися з трьох основних рівнів: непрозорий фоновий шар, шар переднього плану з підтримка прозорості, і a маска що визначає форму значка. Усі ці шари мають розмір 108 x 108 dp, хоча лише внутрішній 72 x 72 dp може бути видимим для користувача; інша область, відрізана маскою зверху, використовується для спеціальних ефектів в інтерфейсі користувача, щоб зробити піктограму динамічною. Для непосвячених, dp або незалежний від дисплея піксель виступає як одиниця вимірювання для всього інтерфейсу Android і визначається як розмір один піксель на дисплеї 160 точок на дюйм.)
Нік Батчер з Google говорить про коло 66 dp у центрі значка, який не може відрізати жодна маска, називається «безпечна зона». Саме тут будуть розташовані основні елементи нашого дизайну значків пізніше, коли ми перейдемо до фактичного проектування. Усе, що виходить за радіус 33 dp, може бути невидимим на піктограмі, доки на ній увімкнено маску форми.
Оскільки піктограми краще бути векторними зображеннями через масштабування інтерфейсу користувача, нам знадобиться векторний графічний редактор, щоб створити нашу піктограму. Inkscape має відкритий вихідний код і є чудовою альтернативою дорожчому програмному забезпеченню, тому ми виберемо його для цілей цього підручника. Я також створив файл проекту доступний тут який має безпечну зону та виділену ключову лінію власного дизайну Google, а також чудову маску шару, яка дозволяє нам попередньо переглянути форму значка.
Відкривши файл проекту в Inkscape і Заливка та обведення (Shift+Ctrl+F), Експорт PNG зображення (Shift+Ctrl+E) і Шари Панелі (Shift+Ctrl+L) відкриті, ми готові розпочати роботу. Панель «Шари» — це місце, де знаходиться суть проекту разом із Передній план і Фон шари, призначені для розміщення їхніх титульних компонентів, і Настанови і Маска призначені для вмикання та вимикання (клацанням піктограми маленького ока поруч із ними) для довідки.
Піктограма є вираженням ідентичності програми. Таким чином, він повинен включати в себе як характер особистості програми, так і специфічні для платформи вказівки щодо дизайну, як-от ті, які є в Android Мова матеріального дизайну може запропонувати. Для демонстрації припустімо, що ми працюємо над програмою погоди, яка використовує елементи Material. Ми могли б використати класичний мотив із сонцем і хмарами, щоб повідомити користувача про мету програми, і додати трохи попрацюйте над цим основним дизайном, використовуючи тіні та геометрію, щоб він добре вписувався в середовище Android.
Фон
Почнемо з налаштування фону, який буде складатися з блакитного неба і жовтого сонця в центрі. токарні Маска невидимий, я вибираю та роблю видимим Фоновий шар, заповніть усе полотно Створення прямокутників і квадратів (F4) і встановіть колір заливки прямокутника Заливка та обведення до 64B5F6FF (світло-блакитний) згідно з Палітра кольорів матеріалу. Потім я вибираю Створюйте кола, еліпси та дуги (F5) і, утримуючи Shift і Ctrl, намалюйте коло від центру ключової лінії до другого за величиною кола та встановіть його колір на FFEE58FF, що дає нам тепле сонечко. Завжди добре дотримуватися базової геометрії в будь-якому виді проектування, а мова дизайну Android особливо сприяє простоті. Щоб відповідати вказівкам щодо матеріалів, я також створюю тонку тінь від сонця Фільтри → Тіні та світіння → Тінь.
Передній план
Підходячи до передній план, Я малюю групу хмар навколо сонця, малюючи кола з окружностей інших кіл і надаю їм усім колір заливки EEEEEEFF. Потім я відповідним чином групую кола, клацаючи правою кнопкою миші кілька об’єктів і вибираючи Група, і запустіть генератор тіні на двох остаточних формах, які я отримую в кінці. токарні Настанови невидимий і перемикаючий Передній план і Фон або можна побачити складові шари піктограми програми погоди. Якщо піктограму програми коли-небудь перетягувати головним екраном, хмари будуть каскадом спати проти нерухомого сонця!
Результат
Маска тепер можна зробити видимим і налаштувати Редагувати шляхи за вузлами (F2), щоб спробувати імітувати різні маски форм. Крім того, два шари можна експортувати окремо за допомогою Експорт PNG зображення панель для використання в Android Studio, а разом для a Піктограма Google Play.
Створюючи піктограму продукту, завжди корисно спробувати взяти мету програми, перевести її до найбільш абстрактної візуальної форми та представити це за допомогою простої геометрії. Чим простіше будь-який компонент у дизайні, тим краще та надійніше він зазвичай працює, і це також стосується графічного дизайну. Для більшості цілей форма об’єкта на передньому плані та суцільний колір або візерунок на задньому плані (або навпаки) працює просто чудово, але, як і в нашому прикладі, можна використовувати інший шар об’єктів, якщо відчувати необхідний; надмірне накладання або використання тіней лише ускладнить дизайн значка.
Ви можете прочитати більше про дизайн іконок у Material interfaces на офіційному сайті Сайт матеріаліві безкоштовні системні піктограми для використання в дизайні значків той самий сайт.