Суперполезный гайд по созданию иконок для интерфейсов
Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.
Значок интерфейса может быть близок к одному из основных форм: прямоугольник, ромб, круг, треугольник, квадрат. Размытие показывает, что они имеют равный визуальный вес, потому что они превращаются в более или менее одинаковые капли.
В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.
Чем компактнее значок, тем меньше места ему нужно. Чем более острые края или мелкие детали имеют значок, тем больше занимает пространство для художественной области.
Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.
Чтобы сделать иконки острыми на экранах с сеткой, придерживайтесь пикселей и отдавайте предпочтение двухпиксельным границам для значков строк. Центрированные двухпиксельные границы обеспечивают достаточную толщину и чёткие силуэты.
Если вы выбираете однопиксельные границы для значков, они должны быть либо внешними, либо внутренними, но не центрированными.
Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.
Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.
Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.
Когда значки имеют разные уровни детализации, более резкие привлекают больше внимания пользователя и кажутся визуально более тяжёлыми.
Пространство между соседними элементами значка не должно быть слишком маленьким или непоследовательным во всем наборе. Определите минимальный зазор и держите его повсюду, чтобы избежать «прилипания» контура.
Для значков линий лучше сделать минимальное пространство, равное толщине линии. Линии должны быть либо чётко раздельными либо точно связанными.
В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.
Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.
Это правило также относится к различным дополнениям — рамкам, фону — вокруг иконки. Если они не помогают читать значок, уберите их.
Не смешивайте отображаемый объём с фронтальным изображением в пределах одного набора иконок. Гармония стилей поможет пользователям распознавать значки и понимать, что они имеют одинаковое значение.
Этот же принцип работает с иконками строк и заполненными значками. Если вы их смешиваете, люди могут подумать, что они имеют разное значение или статус. Конечно, если вы этого не хотите. Например, заполненный значок предназначен для команды ключа, а значки строк — для других команд.
Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.
Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.
Перфекционизм — не панацея. Никому не нужны пиксельные совершенные линии ради идеальных линий. Но это важно для правильного, а не искажённого отображения значков в конечном продукте. Имейте в виду минимальное необходимое количество анкеров и отсутствие зазоров между соседними элементами.
Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.
Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.
Смотрите, в Sketch всё выглядит хорошо.
Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.
Вы можете удалить этот мусор и пересохранить иконку.
Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.
Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.
Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.
Маскоты и иллюстрации. Если в вашем интерфейсе есть талисман или иллюстрация, этот тип графики должен быть эмоциональным. В таком случае сложно представить, как дизайнер может изображать персонажа ограниченным выбором форм и придерживаться сетки.
Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.
5 лучших онлайн редакторов иконок
Онлайн редакторы иконок многие не воспринимают всерьез, но на самом деле подобные инструменты значительно облегчают рабочий процесс. Всего пара кликов может избавить вас от часов поиска, просмотров или самостоятельной разработки. Кроме того, нет смысла использовать полноценные графические редакторы когда имеются специальные сервисы с заточенными функциями под данные конкретные задачи.
Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:
- легко и быстро создавать новые материалы;
- придать существующим наработкам завершенный вид;
- сохранять результат в разных форматах (SVG, ICO & PNG);
- создавать иконки для favicons.
В статье мы подобрали пять лучших онлайновых бесплатных редакторов иконок и для сравнения попробовали создать набор в каждом из них.
IconsFlow
IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:
- главного, в котором выбирается палитра, стиль, эффекты;
- редактора формы, где можно изменить текущую форму или нарисовать новую.
Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.
Вид векторного редактора IconsFlow:
FlatIcons
С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:
- Во-первых, вы можете скачивать файлы только в PNG-формате.
- Во-вторых, вам придется создавать каждый объект отдельно, т.к. невозможно разработать целый набор сразу.
Не смотря на то, что пик популярности плоских Flat иконок уже прошел, многие используют их в своих дизайнах. В качестве примера разработчики позволяют скачать бесплатный набор социальных флэт иконок. Результат работы в редакторе FlatIcons:
Launcher Icon Generator
Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:
Android Material Icon Generator
Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.
Начните с выбора картинки из галереи, потом определите цвет, форму заднего фона (круг или квадрат), длину тени, насыщенность, затухание – и ваша иконка готова. Все предельно просто. Для персонального использования сайт полностью бесплатный.
После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:
Simunity
Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.
Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:
Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.
Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.
Как рисовать иконки: с нуля, упрощение, разная степень редкости
Меня зовут Таня Нажимова, я работаю художницей 8 лет. В этой статье поделюсь 3 гайдами, как рисовать иконки разной сложности.
Раньше я рисовала 1 иконку неделю. Я смотрела туториалы по многу раз, собирала сотни референсов и пробовала различные техники рисования, чтобы учиться и успевать к дедлайну. Сейчас же на 1 иконку у меня уходит от 3 до 12 часов в зависимости от сложности. Для этого я переработала свой пайплайн работ и оптимизировала несколько процессов, благодаря которым смогла быстрее рисовать иконки.
В начале думала, что иконки намного проще в реализации, чем иллюстрации и концепты. Но оказалось наоборот — ошибки в простых формах не скрыть высокой детализацией как в больших изображениях. Еще удивило, что иконки могут быть не менее креативными, информативными и простыми для восприятия. Они удерживают внимание зрителя, как большие трудоемкие арты, при этом они не требуют недели или месяца работы. Достаточно четко следовать гайду.
Меня долго волновало, как монструозный мастер вроде Beeple со своим 13-летним EveryDays делает картинку за час или Satoshi Matsuura ежедневно выкладывает концепт персонажей. Все просто — они видят главное и отсекают лишнее, не копаются в деталях, а прямо доносят до зрителя 1 цепляющую мысль. Я попробую объяснить, как достичь похожих результатов.
Опишу разработку игрового арта на примере процессов в нашей команде. Требования и пайплайн такие же, как в разных студиях, но с несколькими особенностями. Если вы заметите расхождения со своей сферой деятельности или хотите поделиться своим опытом, пишите в комментариях к статье.
Разберу 3 основных задания, с которыми обычно сталкивается игровой художник:
- Придумать иконку с нуля
- Упростить большой объект для иконки
- Подготовить набор иконок с нарастающей ценностью
Самый детальный разбор со всеми нюансами я сделаю для первого случая, а остальные два имеют тот же пайплайн, но со своими особенностями.
-
для сбора референсов; для работы с цветом и формами иконок;
- 3D-редактор Blender или SketchUp для быстрого и более точного создания сложных объектов, как замена построению от руки в Photoshop; для интеграции итогового арта в сцену. Например, художники в CM Games сами выгружают арты в движок. Так можно облегчить работу технических художников или программистов, сэкономить время и избежать недопонимания при передаче ассетов.
Работа над иконкой, как и над любой артовой задачей, начинается с технического задания. Для меня оно бывает 2 типов — нестандартные мозговыносящие идеи и обычные предметы, типа сундуков. В первом варианте работа идет своим чередом, а вот для выполнения второго есть хинт — добавить фан в виде интересных деталей, неожиданного решения в дизайне или альтернативных идей реализации. Не всегда получается, но чем чаще пробовать, тем ближе к успеху. В итоге можно пройти путь комментариев от лида “чёт мне ниче не нравится” до “я целýю твои мысли”, когда робкие попытки настоять на своей идее переходят в полное доверие коллег к исполнителю.
Задача. Подготовить пак иконок для окна механики выращивания растений:
- семечко
- саженец
- лейка
- розовый цветок
- лазурный цветок
- бутылочка с лазурной эссенцией
- бутылочка с розовой эссенцией
Чтобы обозначить главные особенности иконок, делаем мудборд. Это могут быть небольшие зарисовки, желаемые детали, другие иконки, референсы или характеристики, которые помогут придерживаться заданного стиля.
Приступаю к поиску форм, чтобы каждая иконка отражала свою функцию. На этом этапе собираю референсы игровых иконок в Pinterest, а еще дополняю их фотками из Google.
Делаю несколько вариантов одной иконки, собираю их на 1 лист и самостоятельно анализирую. Для этого проще обозначить, что не нравится в иконке, перейти к следующей и найти тот вариант, который точно понравится. Если такого не вышло сразу, выбираю самый удачный вариант, меняю в нем элементы и отсекаю лишние детали, затем снова оцениваю. Далее спрашиваю фидбэк у людей, чтобы оценить иконку непредвзято и выбрать лучший силуэт.
Строю иконки в цвете простыми формами, используя Перо и Эллипсы.
Первый векторный слой делаю как общий контур иконки. Следующие векторные слои я создаю с обтравочной маской, чтобы затем обводить с помощью них нужный контур внутри формы. Верхний слой в этой иерархии создаю растровым. Обвожу быстрыми клавишами один из векторных слоев и заливаю растр нужным цветом.
Многие художники придерживаются правила рисовать на большом полотне, чтобы в конце уменьшить картинку и тем самым скрыть дефекты. Хороший подход, но с иконками есть риск потратить больше времени на гипер-проработку. Поэтому делаю их меньше 512х512px и всегда конвертирую слои в 1 смарт-объект, чтобы видеть иконку в нужной сцене в 100% разрешении, а лучше меньше.
2 варианта — пользоваться только векторными инструментами или использовать растровые слои с обтравочной маской на каждом векторе. В первом случае можно увеличить или уменьшить иконку без потери качества. Особенно полезно, если печатать иконку как наклейку, плакат и другую канцелярию. Либо использовать эту иконку в более видном месте игры, где она будет сильно крупнее, чем задумывалось изначально. Но я воспользуюсь вторым вариантом, потому что это экономит время и у меня получаются более живые переходы внутри формы с помощью кисти нежели пера.
От детализации 2 цели — добиться объема и материальности. Объём я получаю светом, полусветом, собственной тенью, полутенью и рефлексом.
Настраиваю цвет у света, тени и рефлекса. Я стараюсь делать свет теплого оттенка, тень менее насыщенной, а рефлекс холодным и средней насыщенности между светом и тенью. В больших иллюстрациях такой приём не всегда работает правдоподобно, но в малых формах необходимо не делать сильного контраста, чтобы избежать провалов в форме и грязного цвета.
Задаю степень отражения в материалах. На блестящих предметах (металлы, стекло, влажные поверхности) рисую блик с четкими краями, а рефлекс делаю относительно ярким с размытыми краями. Матовые материалы (дерево, ткань) наоборот создаю с размытым бликом, если он будет вообще, и с сероватым рефлексом, близким по тону к собственной тени, так же без четких краев.
На прозрачных материалах, например стекле, рисую свет на том месте, где на непрозрачном предмете была бы тень, а тень на месте света. Оба с размытыми краями. Но блик останется неподвижен и с четкими границами, если стекло блестящее или с размытыми, когда стекло матовое.
По таким правилам продолжаю рисовать каждую иконку для садоводства.
Делаю обводку эффектом на каждый цвет и придерживаюсь схожих тонов. Таким образом в маленьком размере будет выглядеть, что это одна цельная обводка с разными оттенками.
Проверяю картинку обводкой на наличие артефактов. Векторные инструменты в свою очередь позволяют избежать их появления. К тому же так легче и быстрее редактировать форму, которая требует четких и плавных краев. А чем меньше иконка, тем важнее этот аспект.
При необходимости можно применить падающую тень. Ее можно сделать эффектом, как обводку, но я чаще настраиваю ее в Unity компонентом Shadow. Это позволяет поставить тень именно в тех окнах, где она нужна, и скрыть, если мешает.
Тень другого характера можно нарисовать вектором и увести в альфу с помощью маски. Но соответственно такую тень нельзя отключить и ее будет видно везде.
Оставляю как можно меньше пустого места внутри картинки. Имя и размер при импорте в игру задаю по договоренности с командой. Я обычно делаю 256х256px и в Unity выставляю сжатие поменьше, если требуется. Контролирую этот момент в каждой картинке через параметр Max Size в меню Inspector.
Задача. Сделать иконку домика оранжереи, сократить элементы, заменить цвет на более чистый и яркий.
Проблема. Исходный объект хорошо выглядит в 3D-сцене, но не выигрышно смотрится в меню магазина.
Сбор референсов здесь опционален, так как у меня достаточно информации для скетчирования. Поэтому открываю 3D-редактор и размещаю готовую модель здания в нужном ракурсе.
Для упрощения иконки выясняю, что первое выделяется в здании, какие элементы отличают его от других, чтобы обозначить главные детали и убрать второстепенные. Решётка на окнах — мелочь, золотые завитки — можно упростить, цветочки на деревьях — ерунда, кирпичики на фундаменте — сокращаю с 8 до 2. Еще можно оставить по 1 камню вместо 3 по бокам, но мне нравится ритм из оригинала, поэтому оставляю.
После разбора у меня получается эскиз из составных простых форм с раскладкой ключевых цветов. Так из исходного зелёного цвета будет другой оттенок зеленого, который подобран в нужном диапазоне палитры.
Из эскиза строю здание, используя простые формы. Как и в первом задании, делаю это при помощи векторных инструментов.
Придерживаюсь метода работы со Смарт-объектами, чтобы сразу понимать, как смотрится иконка во всех необходимых окнах.
Аналогичный этап рисования прослеживается в первом задании. Прорабатываю объем в каждой детали и настраиваю свет.
Задача. Сделать пак из 3 иконок монет в магазин:
- маленький
- средний
- большой
Этот тип иконок делается вместе. Между ними должна четко прослеживаться цепочка развития от самого простого до наикрутейшего. Этого можно добиться степенью детализации, количеством цветов в объекте или качеством цвета/насыщенности, размером по отношению друг к другу. С последним лучше быть аккуратней, потому что есть риск сделать самую простую иконку слишком мелкой по отношению к последней. Такие иконки на некоторых окнах не смогут сочетаться вместе.
Решила делать акцент на количестве монет в каждой иконке, а также на разнообразии цвета и силуэта.
Чтобы придумать образы, я представляю, как монеты используется в жизни. Обычно их бережно складывают в кошелек или копилку, мелочь сбрасывают в стеклянную банку, крупную валюту хранят в сейфе. Первую иконку изображаю несколькими монетами, сложенными в стопку, как покерные фишки. Их вроде немного, но и не слишком мало, чтобы пренебрегать ими. Вторую иконку делаю в кошельке. Он не большой, зато забит до края, а значит сумма там приличная. Красный цвет кошелька приятно сочетается с золотыми монетами и выгодно отличает от первой стопки. Третью иконку рисую в сундуке, чтобы подчеркнуть высокую ценность как в фэнтези сеттинге. Пурпурный королевский цвет подчеркивает его уникальность.
Монеты должны быть одного цвета, а окружающие предметы другого. Так зритель легче отличит главную сущность от обрамления, тем самым сначала увидит монеты, затем кошелек и сундук на втором плане.
Силуэты должны быть разные по ритму композиции. Первый идёт в вертикаль, второй округлый, а третий немного рубленный. Это еще больше усилит различие иконок. Лучше вписывать иконки в квадрат, что поможет без труда ставить их в любое окно игры.
Иконка отражает суть предмета, а декоративность лишь дополняет ее. Например, игрок будет взаимодействовать с монетами, а не рассматривать отдельно каждый изгиб. По этой причине полируем 2 вещи — органичность и читаемость. В данных иконках достаточно добавить след кошачьей лапки как декор, потому что игра про кошек.
Чтобы ускорить процесс рисования, я моделю относительно сложные объекты в Blender или беру их из игры, если есть уже готовые. Например, сундук достаточно выставить в нужном ракурсе и сделать скриншот, чтобы потом вставить в свою иконку.
Как и в предыдущих двух заданиях делаю векторный блокинг иконок, чтобы потом приступить к детализации кистью. В данном случае достаточно сделать одну монету, сконвертировать ее в смарт-объект и размножить. Группировать кучки в одну папку и, где нужно, маской положить падающую тень.
Рисую остальные монеты для пака похожим образом. Если не подходит ракурс, немного редактирую.
Резюмируя, главными правилами в создании иконок будут легко читаемый силуэт, чистота цвета и не контрастный объем. Звучит просто, но чтобы прийти к этому выводу мне потребовались годы практики. Приходили в помощь учителя, друзья, руководители и, конечно, интернет. Но некоторые навыки необходимо наработать практикой.
Например, от скетчирования будет зависеть качество иконки в целом. Ведь зритель должен за секунду понять силуэт микро-картиночки. Раньше я делала столько вариантов одной и той же иконки, сколько позволяло воображение. Со временем это перестало быть необходимым, почти сразу знаю, что и как изобразить. Но период проработки вариантов необходим для правильного мышления. Я научилась комбинировать варианты между собой, отсекать непонравившиеся детали, спрашивать фидбэк и снова рисовать новые скетчи. И в какой-то момент заметила, что трачу на скетч всего несколько минут, быстрее вижу главное и легче доношу свою идею до зрителя.
Жаль только иконки такой безликий женерик, что их от миллиона других не отличишь
Ну никто не заставляет делать 1 в 1. Статья не столько про стиль, сколько про пайплайн.
ну так тут пайплайн как раз на создание таких клонов клонов. набери на пинтересте и тебе миллион похожих вариантов выдаст. Просто смысл рисовать то что уже есть? проще пак купить и немного перекрасить под себя.
Ты же отличишь иконки в скайриме от иконок в асасинах или фаркрае например. А тут спроси из какой игры эта лейка и врядли ктото сможет дать ответ.
Чел, ты можешь поменять стиль. Нужно сделать тени, свет по-другому, другую цветовую гамму, поменять форму линий и у тебя получится иконка в другом стиле.
Ключевое тут — как сделать иконку читабельной и какие стадии должен пройти процесс.
Супер полезная статья! Спасибо!
Очень крутая статья, но возник вопрос. Насколько скажется, если не пользоваться растром?
У меня пока нет возможности осваивать все эти инструменты (рисую в Krita/Aserprite) т.к. я в основном программист, который прошел курсы по рисовке на юдеми. Речь про свой проект который не горит и которым занимаешься в свободное время.
спасибо за отзыв) присоединяюсь к ответам выше. Честно говоря, рисовать растром или вектором выбор каждого. Я знаю художников, которые рисуют только растром, и еще тех, кто сразу в векторе сделает такой же законченный арт. Другими словами можно добиться одинакового результата обоими инструментами. Для меня вектором рисовать иконки в разы быстрее и легче, да и вообще любые малые формы. Как можно увидеть по статье, я рисую в большей степени растром, а вектор только помогает не заезжать кистью за границы формы.
Это, может, не совсем ответ на твой вопрос, но в Krita неплохо работают векторные инструменты, сама пробовала в ней рисовать иконки и казуальную графику по туториалам, и векторные инструменты очень упростили жизнь 🙂 Есть ещё хороший open-source векторный редактор Inkscape. Мне кажется, лучше все-таки освоить вектор хоть на базовом уровне т.к. это просто очень крутой инструмент.
Спасибо, будет время — постараюсь.
не правильно спросил, если не пользоваться вектором конечно.
Вроде понятно, спасибо.
Полистал. Раньше занимался иконками, порой делал их сотнями в паке.
В целом полезная статья про пайплайн.
Силуэты → заливки → детали это удобный и экономный подход.
В фотошопе это всё немного мазохизм (нет многослойного трансформа, заливки, недостаточно развит клипмаскинг)
Есть некоторые замечания.
Визуально отображён, но почему-то не упомянут явно момент с визуальной массой: когда ещё на этапе эскиза и силуэта подбирается такой объём/масса/силуэт, чтобы он был сбалансирован с другими иконками. Одинаков или, как с деньгами, нарастал с объёмом монет. Это не совсем про силуэт.
Монета как смарт-объект для стопки прокатит для мелких иконок, где ортография ок и проблем перспективы нет. Для чего-то масштабного лучше покрасить болванку в 3д, там же уложить стопки и лишь в конце чуть подмазать. Либо накидать болванок и чуть подтянуть 2д под их перспективу.
Например мелкие стопки на фоне сундука слишком явно имеют другую перспективу и вертикаль. Хотя, наверное, большинство не заметит.
По материалам:
Нет такой поверхности, как «крашенный металл». Есть материал краски. И он будет одинаково смотреться и на полированном металле и полированном дереве, если грунтовка не просвечивает. Исключения: металл, просвечивающий через краску или фактура дерева, проступающая через краску.
С подписью «Бронза» картинка меди. Бывает похожая бронза, но она более оранжевая.
Как создать иконку для приложения — поэтапное руководство по созданию иконок для Android и iOS
Если верить данным сервиса Statista, на начало 2022 года общее количество приложений в магазинах Google Play и App Store превышает 5,5 млн. штук. Это говорит нам о том, что конкуренция на международном рынке мобильных приложений невероятно высока. Конечно, в представленных данных есть погрешности, ведь Google и Apple регулярно чистят свои магазины от некачественных продуктов. Однако это не отменяет того, что ежедневно публикуются новые приложения, а конкуренция продолжает расти. Ниже мы расскажем о том, как выделиться на фоне конкурентов, создав оригинальную иконку для своего приложения.
Что собой представляет иконка
Под иконкой принято считать небольшое изображение, предназначенное для привлечения внимания потенциальных клиентов. Другими словами, это визуальный якорь, делающий программный продукт более запоминающимся.
Некоторые пользователи ошибочно полагают, что иконка и логотип – одно и то же. Однако это далеко не так. Главной задачей иконки является демонстрация идеи и концепции программного продукта. С её помощью у клиентов может сформироваться нужное представление о приложении, и они смогут понять, стоит ли его скачивать.
Что же касается логотипа, это один из основных элементов фирменного стиля, отражающий особенности бренда.
Насколько важна иконка для приложения
Как показывает статистика, более 93% людей гораздо быстрее воспринимают визуальную, а не текстовую информацию. Поэтому не стоит удивляться, почему многие пользователи начинают оценивать качество программного продукта банально по иконке в магазине приложений.
Стоит учесть, что качественно разработанный значок играет важнейшую роль в продвижении программы. Как правило, чем привлекательнее изображение, тем больше загрузок соберет ваш продукт.
Вообще, иконка – это первое, что смогут оценить потенциальные клиенты в вашем приложении. И если на этом этапе вы не сможете добиться успеха, то впечатление о продукте сложится негативное.
Также о важности значков говорит статистика, в соответствии с которой более 70% пользователей сети ищут приложения в магазинах, а не по ссылкам в социальных сетях. А так как в магазинах конкуренция огромная, то выделиться на фоне соперников можно только с помощью запоминающего изображения.
Как сделать качественную и эффективную иконку для приложения
Процесс не такой уж сложный, как может показаться с первого взгляда. Главное – своевременно составить план, ознакомиться с рекомендациями мобильных платформ и определиться с инструментом, с помощью которого вы будете рисовать значок.
Заметьте, разработка иконки будет состоять из нескольких этапов.
Этап 1: Готовим концепцию
При разработке идеи следует руководствоваться несколькими правилами. Для начала нужно сделать анализ целевой аудитории и понять, чего они ждут от вашего продукта. Если вы нуждаетесь в большом количестве загрузок, необходимо сделать не просто значок, а маркетинговый инструмент, способный привлекать внимание даже самых требовательных пользователей.
Помочь в разработке концепции может анализ конкурентов. Однако вы должны понимать, что вряд ли сможете сделать запоминающийся значок, если он будет похож на иконку вашего конкурента. При этом всем необходимо убедиться в том, что значок соответствует особенностям вашего бренда. В противном случае вы запутаете или вовсе отпугнете пользователей.
Также при разработке идеи не забывайте руководствоваться визуальным языком. То есть иконка должна быть сделана таким образом, чтобы своим внешним видом рассказать об особенностях приложения. Сделать это можно следующим образом:
- составьте список ключевых слов;
- выберете самые частотные и привлекающие внимание слова;
- визуализируйте эти слова.
Этап 2: Учитываем технические характеристики иконок и рекомендации платформ
Если вы не будете учитывать особенности интерфейса операционной системы, тогда об эффективности иконки можно даже и не думать. Учтите, что у каждой мобильной платформы есть свои стандарты, которые нужно учитывать при разработке небольшого изображения. Особое внимание стоит уделять следующим нормам:
- iPhone: 180px × 180px , 120px × 120px
- iPad Pro: 167px × 167px
- iPad, iPad mini: 152px × 152px
- App Store: 1024px × 1024px
Также перед разработкой иконки рекомендуется ознакомиться с правилами каждого магазина.
Этап 3: Продумываем дизайн
Непривлекательный значок – одна из самых главных причин, по которой многие пользователи не хотят даже пытаться устанавливать приложения на мобильное устройство. Удивительно, но даже функциональный продукт может быть удален только потому, что его иконка не очень гармонично смотрится на рабочем столе смартфона. Следовательно, красивый и привлекательный значок играет важнейшую роль в продвижении программного продукта.
Арбитраж трафика на крипту [2022] — ОПРОС ЭКСПЕРТОВ
При разработке дизайна следует придерживаться некоторых правил. В первую очередь подумайте о масштабируемости. Как правило, значок представляет изображение не только на рабочем столе смартфона. Также иконка будет отображаться в экспресс-панели, диспетчере задач и магазине. Учтите, что во всех этих местах значок будет иметь совершенно разные размеры, поэтому заранее подумайте о качестве отображения.
Так как изображение будет в некоторых случаях уменьшаться, постарайтесь сделать иконку таким образом, чтобы в ней был минимум мелких деталей. Вообще, лучше выбрать дизайн, в котором будет доминировать минимализм, а не обилие сложных элементов. Согласитесь, гораздо приятней смотреть на значок, в котором изображен какой-нибудь символ на приятном фоне. В общем, следуйте правилу «чем проще – тем лучше».
Самое главное при разработке дизайна – выбрать уникальный стиль. Именно это и гарантирует узнаваемость вашего продукта в магазинах приложений. Как правило, чем оригинальней иконка, тем крепче эмоциональная связь будет с пользователями. При этом уникальный дизайн – лучший способ выделиться на фоне конкурентов. Подумайте сами, кто захочет нажимать на иконку, узоры и цвета которой встречаются через каждые 3-4 приложения. Яркий тому пример – какая-нибудь утилита для заметок, у которой на иконке изображена галочка, расположенная в центре квадрата.
Также при разработке дизайна не стоит использовать текст. Во-первых, вам все равно не удастся вместить слово в маленький значок. Во-вторых, даже если бы и удалось, иконка смотрелась бы просто отвратительно. Гораздо проще воспользоваться символами или изображениями, которые в лучшей мере подчеркнут индивидуальность вашего бренда и при этом всем будут отвечать правилам минимализма. Вспомните иконки многих популярных брендов. Взять, например, Facebook* или Netflix, на значках которых стоит первая буква из названия бренда. Согласитесь, это и смотрится красиво, и индивидуальность продукта подчеркивается. А теперь представьте, как бы смотрелись эти иконки на рабочем столе, если бы внутри квадрата была не одна буква, а полное название.
Конечно, для отображения индивидуальности можно использовать не только буквы или цифры. Например, если вы занимаетесь разработкой значка для музыкального приложения, то здесь можно использовать какой-нибудь микрофон, наушники или аудиоколонку. Если же разрабатывается приложение для финансовых переводов, то тут идеально подойдет какая-нибудь монетка или кошелек.
При этом не забывайте уделять особое внимание подбору цветов. Выберите несколько вариантов и протестируйте, воспользовавшись советами друзей и знакомых. Для подбора цветов можно использовать цветовой тест Люшера. Не рекомендуется использовать больше 3 вариантов, так как большое количество оттенков могут негативно повлиять на восприятие
Этап 4: Тестируем и публикуем
Излишне говорить, что перед публикацией иконки необходимо провести тестирование. Ведь только так вы сможете понять, будет ли продукт привлекать и удерживать пользователей. Если у вас есть возможность, подготовьте заранее 2-3 варианта.
Если вы готовите значок для Play Market, тогда можно воспользоваться Google Experiments. Данный инструмент позволяет проверять любые визуальные элемент со страниц. Если же вы работаете с iOS, то можно воспользоваться A/B-тестированием от Facebook*.
Не стоит забывать, что в Google Play и App Store совершенно разная аудитория, поэтому иконки могут отличаться по эффективности.
Несколько полезных советов
Чтобы иконка получилась максимально качественной, рекомендуем соблюдать следующие рекомендации:
- Начинайте разработку с сетки. Это поможет сделать качественную иконку, если у вас мало опыта в работе с графическими элементами. Для начала стоит использовать сетку размером 32х32 пикселя. Также должны быть границы в 2 пикселя. Они нужны для того, чтобы вы знали, где должно заканчиваться изображение значка.
- Подключайте простые геометрические формы. Нет лучше способа отрабатывать навыки, чем работать с простыми фигурами, включая круги, квадраты, прямоугольники и треугольники. Кроме того, если подключить фантазию, можно сделать из одной из фигур оригинальный значок.
- Оптимизируйте пиксели. Если вы работаете со значками маленького размера, здесь потребуется выравнивание по пикселям. Чтобы добавить резкости на углах и кривых, старайтесь выравнивать иконки по сетке.
Никогда не используйте много мелких деталей. Особенно это касается тех случаев, когда вы работаете с маленькими изображениями.
Как создать иконку для мобильного приложения самостоятельно
Есть несколько способов создания иконок для мобильных приложений. Если вам позволяет опыт, попробуйте воспользоваться графическим редактором. В этом случае вы получите действительно оригинальный продукт, не имеющий аналогом на рынке.
Для создания значков можно использовать Adobe Photoshop или Illustrator. В этих программах достаточно инструментов для того, чтобы сделать привлекательное изображение. Плюс использования данного метода – экономия финансовых средств. Благо, представленные программы можно скачать в бесплатном доступе.
Если у вас проблемы с вдохновением или нет опыта в работе с фотошопом, тогда оптимальным вариантом будет использование специальных онлайн-сервисов. Сейчас в сети есть множество различных конструкторов с широким набором готовых шаблонов, благодаря чему создать качественную иконку можно в несколько кликов. Данный способ действительно простой и доступный. Однако учтите, что оригинальность в этом случае может пострадать.
Лучшие сервисы для создания иконок мобильных приложений
Если перед вами стоит задача сделать несколько значков для тестирования, лучше обратите внимание на онлайн-сервис, предоставляющий бесплатный доступ к функционалу. По большей части такие платформы ничем не уступают платным сервисам. Единственное достоинство последних – больше шаблонов и шрифтов. Но если вам нужно получить доступ к эксклюзивным материалам и инструментам, тогда без платного тарифа не обойтись.
Canva
Безусловно, один из лучших сервисов для разработки различных визуальных элементов, включая логотипы, иконки и значки. Стоит сразу отметить, что на данный момент сервис не доступен на территории РФ, так как не поддерживает СВО в Украине. Однако для работы с ресурсом можно воспользоваться VPN.
Главное преимущество в том, что большая часть инструментов предоставляется на бесплатной основе. Если же вам понадобятся дополнительные элементы, тогда потребуется приобрести PRO-аккаунт.
Для разработки значков или логотипов можно использовать заранее подготовленные шаблоны. Также есть возможность создавать контент с нуля. Ещё один плюс в том, что в Canva можно загружать материалы со сторонних ресурсов. То есть вы можете приобрести понравившиеся элементы на каком-нибудь фотостоке и загрузить их в сервис для объединения в одно изображение.
Turbologo
Функциональный онлайн-конструктор, отличающийся удобным интерфейсом. Поддерживается множество бесплатных инструментов, есть библиотека готовых шаблонов для иконок и логотипов. Если у вас нет опыта в работе с подобными сервисами, воспользуйтесь инструкциями, в которых объясняется, как делать те или иные графические элементы.
Одно из достоинств – поддержка более 3 млн. готовых иконок, которые можно менять по своему усмотрению. Также есть различные шрифты и бесплатные логотипы. Чтобы приступить к разработке значка, необходимо зарегистрировать аккаунт. Бесплатного доступа, к сожалению, нет. Стоимость начального тарифа – 520 руб.
Logaster
Простой, но эффективный онлайн-генератор для разработки логотипов и иконок. В этом сервисе можно делать значки для любых целей. Поддерживается возможность сохранения файлов с разрешением png, jpg. Также инструмент позволяет делать и сохранять векторные файлы в pdf, svg.
На сайте есть раздел, в котором предусмотрены советы по созданию логотипов. Также на главной странице можно найти обучающее видео. Для разработки графического элемента необходимо зарегистрировать аккаунт. В начале процесса онлайн-генератор предлагает ввести название вашего бренда, после чего подбирает оптимальные варианты. Понравившийся значок можно сохранить или доработать по своему усмотрению.
Iconsflow
Данный сервис подойдет даже тем, у кого нет вообще никакого опыта в работе с онлайн-редакторами. Принцип действия сервиса предельно прост: система предлагает подходящие под ваши требования варианты, вы выбираете понравившийся значок, потом редактируете его и сохраняете. Есть возможность менять размеры и добавлять различные эффекты. К слову, сервис насчитывает более 200 тысяч значков.
Ещё один плюс – возможность загрузки своих файлов с последующим их изменением и добавлением эффектов. Сохранять готовые материалы можно в svg, png и ico. Радует, что в сервисе предусмотрен бесплатный тарифный план, позволяющий делать до 5 иконок. Стоимость базового пакета составляет $4,99 в месяц.
Вывод
Иконка – это не просто визуальный элемент для представления программного продукта. Это маркетинговый инструмент, выстраивающий отношения между пользователем и приложением. Разрабатывая иконку, вы должны придерживаться принципа «Судят по обложке». Ведь чем привлекательнее и оригинальнее вы сделаете значок, тем быстрее ваш продукт станет популярным. При этом не забывайте делать так, чтобы изображение подчеркивало особенности функционала.
Нужны аккаунты платформ и соцсетей под арбитраж и рекламу? Приглашаем в раздел Продажа аккаунтов.
Интересные возможности для заработка вы можете найти в нашей Бирже Фриланса в разделе Заказы и опубликовать своё портфолио в разделе Услуги.
Нужна постоянная работа? Приглашаем в разделы Вакансии — для просмотра и откликов на объявления и Резюме — для публикации своих резюме.
А в разделе Конференции для вас собрана информация о лучших знаковых событиях в мире интернет-маркетинга, digital-рекламы и арбитража трафика. Не упустите шанс приобрести выгодные знакомства для развития вашего бизнеса!