Иконка нейросетью: самокат с продуктами против одного пакета
Иконка приложения нейросетью: что пришло на короткий запрос, почему самокат с продуктами теряется на экране и как попросить один символ на ровном фоне.
Евгений
Дизайнер-партнёр LibraChat
5 мин чтения
Иконка — единственная картинка приложения, которую человек видит каждый день. Он смотрит на неё долю секунды, среди двух десятков соседей, размером с ноготь. За эту долю секунды она должна сказать, что внутри.
Я придумал приложение доставки продуктов и попросил для него иконку дважды. Иконки нейросетей рисуют охотно и красиво, это я увидел сразу. Но рабочей оказалась только вторая, и разница уложилась в четыре условия: один символ, однотонный фон, квадрат на весь кадр без скруглений, никаких надписей и мелочей.
Проверка у меня тоже простая. Мысленно ставлю картинку на домашний экран между почтой и картами и смотрю, что от неё осталось.
Первая иконка рассказала целую историю
Первый запрос был коротким:
Нарисуй иконку для приложения доставки продуктов.
Самокат, продукты, метка на карте и скругления: красивая иллюстрация, но на экране телефона мелочи сольются
Красиво и по теме. Тёмный самокат с коробкой на багажнике. Из коробки торчат апельсин, брокколи и бутылка молока. Над всем этим метка геолокации. Зелёный фон с мягким переходом, лёгкие тени.
Здесь сказано всё сразу: доставка, продукты, скорость, место на карте. И в этом беда. Иконка, которая говорит четыре вещи сразу, на экране телефона не успевает сказать ни одной.
Я уменьшил её на экране до настоящего размера. Самокат остался тёмным пятном. Апельсин превратился в оранжевую точку, брокколи и молоко слились. Метка стала зелёной каплей на зелёном фоне и почти пропала.
Ещё одна мысль пришла, когда я представил экран целиком. Зелёный — очень частый цвет у приложений доставки. Среди нескольких зелёных квадратов детали первой иконки окончательно растворятся, и выручить её сможет только сильный простой силуэт, которого здесь нет.
Есть и техническая деталь, которую видно только дизайнеру. Скруглённые углы и белые поля нарисованы прямо в картинке. А телефон скругляет иконку сам. Получится квадрат со своими скруглениями, внутри которого ещё один скруглённый квадрат с белыми уголками.
Ругать ответ мне не за что. Я попросил иконку, не сказал, где и в каком размере она живёт, и получил иллюстрацию в форме иконки.
Что нужно было сказать?
Четыре условия, которые я вписал
Сначала я выбрал один символ. Не самокат с продуктами, а то, что человек узнает за долю секунды.
Кандидатов было несколько. Тележка из супермаркета понятна, но у неё колёса, решётка и ручка, и в маленьком размере она превращается в штриховку. Морковка слишком узкая и говорит скорее про овощную лавку. Коробка — это скорее посылка, чем ужин. Остался пакет с ручками: из магазина приносят пакет, его силуэт простой, и он понятен без подписи.
Потом цвет. Однотонный яркий фон, без переходов и теней. Переходы красивы крупно, а в маленьком размере превращаются в грязное пятно.
Третье — форма. Квадрат на весь кадр, без своих скруглений и рамок: остальное сделает телефон.
И последнее — чего не надо. Ни надписей, ни мелких деталей. Название приложения телефон пишет под иконкой сам.
Вторая иконка: один пакет на зелёном
Вот запрос целиком, его можно брать за основу. Символ и цвет замени на свои:
Нарисуй иконку приложения доставки продуктов для экрана телефона: простой белый силуэт бумажного пакета с ручками на ярко-зелёном однотонном фоне, без теней, текстур и надписей, крупно, квадрат на весь кадр.
Один белый символ на ровном зелёном фоне: иконка читается и в крупном, и в самом маленьком размере
Белый пакет с ручками на ровном ярко-зелёном квадрате. Ни теней, ни переходов, ни своих скруглений. Пакет занимает примерно две трети высоты, вокруг достаточно воздуха.
Уменьшаю до настоящего размера — пакет на месте. Белое на зелёном, контраст сильный, силуэт простой. Среди соседей на экране эта иконка найдётся быстрее первой.
Я представил её на тёмных обоях, потом на светлых. Ярко-зелёный квадрат держится на любом фоне, а белый пакет внутри не спорит ни с какой картинкой за спиной. С первой иконкой так не выйдет: на пёстрых обоях её мелкие детали смешаются с чужими.
Придирок у меня две. Нижние углы пакета срезаны неровно: слева и справа скосы разной формы. Крупно это заметно, мелко нет, но в финальной версии я бы попросил симметричные углы.
Вторая серьёзнее. Пакет говорит «магазин», а не «продукты». Такой же иконкой может пользоваться магазин одежды. Я бы добавил одну деталь: веточку зелени, выглядывающую из пакета. Одну, не четыре, иначе вернёмся к первой версии.
Правку можно написать в том же чате следующей репликой: добавь из пакета веточку зелени, углы сделай симметричными, остальное не меняй. Хвост «остальное не меняй» тут не для вежливости. Без него вместе с веточкой может поменяться оттенок зелёного или толщина ручек, а мне нравится то, что уже есть.
Обе иконки пришли в LibraChat обычной просьбой в чате. Готовую картинку можно скачать. Если иконка пойдёт в магазин приложений, качество важно: на бесплатном тарифе картинка упрощённая и с водяным знаком, HD без знака выдают полные платные тарифы.
Что я теперь пишу первым
Перед запросом я задаю себе вопрос: что человек должен понять за долю секунды? Ответ обычно укладывается в одно слово. Это слово и становится символом.
Всё остальное в запросе описывает, как этот символ выживет на маленьком экране: ровный фон, сильный контраст, квадрат без рамок, ни одной надписи.
Иконка и логотип часто путаются, хотя задачи у них разные: логотип живёт на вывеске и в документах, иконка — на экране. Про смысл знака подробнее в статье про нейросеть для логотипа, а про остальную графику приложения — в статье о том, как помогает нейросеть в дизайне.
Возьми своё приложение, канал или проект и назови его одним словом, которое поймут без подписи. Нарисуй этот символ в голове белым на цветном квадрате: узнаёшь его среди соседей на экране?
иконки нейросетейкартинки и видеоиконка приложениядизайн интерфейса
