Как самому рисовать иконки
5 лучших онлайн редакторов иконок
Онлайн редакторы иконок многие не воспринимают всерьез, но на самом деле подобные инструменты значительно облегчают рабочий процесс. Всего пара кликов может избавить вас от часов поиска, просмотров или самостоятельной разработки. Кроме того, нет смысла использовать полноценные графические редакторы когда имеются специальные сервисы с заточенными функциями под данные конкретные задачи.
Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:
В статье мы подобрали пять лучших онлайновых бесплатных редакторов иконок и для сравнения попробовали создать набор в каждом из них.
IconsFlow
IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:
Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.
Вид векторного редактора IconsFlow:
FlatIcons
С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:
Не смотря на то, что пик популярности плоских 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, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.
Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.
Как сделать свой первый набор векторных иконок
Шаг первый: Тема
Определиться с тематикой вашего будущего сэта иконок, например: новы год, какое-то массовое событие, иконки одежды для интернет- магазина или кухонные приборы.
Но можно и не выбирать общую тему и нарисовать самые распространенные иконки, вроде бургербаттона, иконки письма, и остальные…те образы, которые можно встретить почти на всех сайтах.
Шаг второй: Стиль
На dribbble я создал папку под названием “стили иконок” и собираю туда стили, в которых я хочу нарисовать следующий сэт. Так же я показываю ее клиентам которые не знают, какой стиль им нужен.
Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру ( outline icon), сложные или комплексные ( мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.
Шаг третий: Образы
Выбрав тему и стиль, приступаем к отрисовке скетчей; уровень детализации для новичков должен быть максимальным, потом вам будет проще отрисовать все в иллюстраторе.
Опытные чуваки могут вообще не рисовать скетчей, а сделать себе список образов и сразу работать с вариациями.
Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.
Шаг четвертый: Размер
Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.
Шаг пятый: Процес
Создайте документ со значениями
Где Spacing — расстояние между артбордами.
Width и Height — высота и ширина артборда.
Raster Effects — разрешение (ppi) для иконок подойдет 72
Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.
Где можно продавать:
graphicriver.net — свободная площадка для торговли любым цифровым контентом.
creativemarket.com — что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.
thenounproject.com — сайт наверно с самой большой базой иконок, они распространяются на выбор: или бесплатно или за единичный платеж, еще есть функция месячной подписки, но я бы не ставил на этот сервис если вы хотите заработать.
icons8.com — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.
Как создать свои иконки для Windows
Microsoft любит сама решать, как должна внешне выглядеть Windows. Каждая из версий операционной системы имеет свои особенности стиля интерфейса, концепцию которого определяет компания. Мы, пользователи не можем в один клик целостно сменить дизайн системы на кардинально иной, как это можно сделать с Android, запустив сторонний лаунчер. Но поэтапная настройка кое-каких вещей на свой вкус и цвет в среде Windows всё же нам доступна.
В числе этих вещей – смена предустановленных иконок. Системные иконки на свои можем поменять:
• В свойствах папок,
• В свойствах ярлыков,
• В параметрах значков рабочего стола для системных элементов.
Штатный набор иконок Windows оставляет желать лучшего, и чтобы эффектно преобразить систему, наборы иконок нужно брать у сторонних дизайнеров. А можно создать их самостоятельно, используя, к примеру, материалы из личной фотоколлекции. Как, не обладая особым мастерством в сфере графического дизайна, сделать свои иконки для смены приевшегося вида ярлыков и папок Windows?
1. Веб-сервисы иконок
Iconizer.Net является не только хранилищем дизайнерского контента, это, как сами создатели его окрестили, генератор иконок. С помощью функционала этого сервиса выбранные на сайте рисунки перед скачиванием можно редактировать: менять цвета, оттенок, насыщенность, размер, вращать объекты, выбирать фон, выбирать формат файла.
Точно таким же действиям можно подвергнуть не только контент, представленный на сайте, но и загруженный из сети по ссылке или с компьютера.
Так, отправив в редактор Iconizer.Net свою картинку, на выходе сможем получить файл формата «.ico» с нужным размером, скажем, 128х128. Базовые возможности сервиса Iconizer.Net бесплатны.
2. Утилита AveIconifier2
Ждём пару секунд – и иконка готова. По умолчанию утилита будет преобразовывать большие изображения в файлы «.ico» со стандартными размерами 128х128. Но если нужно получить на выходе иконку с меньшими размерами, кликом правой клавиши мыши по левой части окошка утилиты можем открыть перечень доступных размеров и убрать галочки ненужных из них.
Это папка для временного хранения данных, и после каждого преобразования готовые иконки из неё нужно перемещать в другое какое-нибудь место.
3. Штатные средства Windows
Открыв изображение в окне Paint, задействуем прямоугольную область для установки выделения.
Устанавливаем выделение: обрамляем акцентный объект, но так, чтобы он был не прямо по центру, а справа оставалось чуть больше ненужного фона. Жмём кнопку обрезки.
Далее подтягиваем правый край так, чтобы образовался квадрат, и размеры картинки по длине и ширине были примерно одинаковыми.
Жмём «Изменить размер».
Устанавливаем галочку опции «пиксели», вписываем нужные размеры картинки, проверяем, чтобы была активной галочка сохранения пропорций.
В проводнике активируем отображение расширений файлов.
В Windows 10 можно использовать и приведённый выше способ, и другой: изображение отредактировать с помощью штатного приложения «Фотографии», а затем конвертировать это изображение в формат «.ico» утилитой AveIconifier2. Приложение «Фотографии» не позволяет переопределять размеры картинок и сохранять их в другие форматы, зато оно может предложить юзабильный инструментарий для обрезки картинок и наложения эффектов.
Открываем нужную картинку в приложении. Выбираем функцию «Изменить».
Далее – «Обрезать и повернуть».
Устанавливаем пропорции «квадрат». Это маска, с помощью которой далее можно будет выбрать участок для обрезки с идеально ровными пропорциями длины и ширины.
Подтягиваем маску на нужный объект картинки. По итогу нажимаем «Готово».
При необходимости применяем эффекты цветокоррекции, виньетирование, устраняем красные глаза, если это любительское фото, и т.п. В итоге сохраняем копию изображения.
Как нарисовать иконки для лендинга в сервисах Canva и Crello
О ЧЕМ СТАТЬЯ?
Когда пишешь тексты для лендингов, очень часто приходится искать иконки и картинки для оформления.
И, казалось бы, что тут сложного? Идешь на фотосток и выбираешь. Но нет — нам ведь нужно не абы что. Мы ищем те иконки, которые подходят нам по смыслу и совпадают друг с другом по дизайну. И только перелопатив массу страниц, мы понимаем, что прошло уже полдня, а воз и ныне там.
Поэтому я предлагаю научиться РИСОВАТЬ иконки в онлайн-сервисах. Это не требует каких-то особых навыков, зато здорово экономит время и силы.
АВТОР СТАТЬИ
Рисуем иконки в Canva
Если у вас еще нет своего аккаунта в сервисе, то для начала нужно будет сделать два простых шага:
Теперь можно переходить к рисованию.
Первым делом нужно задать размер для будущей иконки. Для этого нажимаем кнопку «Использовать специальные размеры» и вписываем нужные цифры. Я для примера нарисую картинку 256 х 256 пикселей.
Внимание! Указывайте сразу тот размер, который вам нужен. Потому что если потом вы захотите изменить параметры картинки, то сделать это бесплатно не получится. Так можно только в платной версии.
Нажимаем кнопку «Создать» и попадаем на следующий экран. В левой его части находится меню, а в правой — рабочий лист.
Теперь начинаем рисовать. Заходим в меню «Элементы», и видим там целый список разных фигур. Какие-то из них можно использовать бесплатно, а за какие-то нужно платить. Но по этому поводу переживать не стоит — бесплатной версии Canva для работы вполне хватает.
Поэтому выбираем нужную фигуру — круг. Левой кнопкой мыши переносим его на рабочий лист, берем за угол и растягиваем на весь периметр.
Теперь выбираем цвет. Кликом мыши выделяем нашу фигуру и нажимаем на черный квадратик в верхней части страницы. А в открывшемся меню задаем нужный цвет.
В результате цвет меняется не только у нашей фигуры, но и у цветового квадратика. А система еще и запоминает его во внутреннем меню.
Следующим шагом добавляем на рисунок остальные детали. Для этого можно опять полистать раздел с элементами или просто набрать в поиске нужный запрос.
Дальше действуем по той же схеме. Выбираем нужный элемент, перетаскиваем на лист и редактируем. Растягиваем, двигаем, поворачиваем, меняем цвет. Если рисуем сложную композицию (а как раз это мы и делаем), то повторяем всё то же самое с разными элементами.
В итоге получается готовая картинка.
Осталось только ее сохранить. Для этого в верхнем меню нажимаем кнопку «Скачать». Выбираем формат файла и снова нажимаем «Скачать». А в открывшемся окне указываем, в какую папку на компьютере мы хотим сохранить этот файл и как он будет называться.
Важно! В бесплатной версии Canva у вашей картинки будет белый фон. Прозрачный доступен только в платной подписке.
А что же насчет серии иконок?
Нажимаем на эту картинку и опять попадаем на экран редактирования. Теперь, чтобы нарисовать другую иконку, мы просто выделяем ненужные элементы рисунка и удаляем их кнопкой Delete.
Получается вот такой шаблон:
Теперь остается только добавить нужные элементы и сохранить новый файл на компьютер.
Вот и всё. Давайте теперь посмотрим на второй сервис — Crello.
Рисуем иконки в Crello
Начало здесь такое же, как и в предыдущем случае. Регистрируемся в системе, выбираем в настройках русский язык и… всё. Начинаем работу.
В отличие от Canva, здесь размер изображения можно задать прямо на главном экране.
А чуть правее находится поле с последними размерами, которые вы использовали. Это удобно. В следующий раз, когда вы будете рисовать иконки для другого лендинга, сможете просто выбрать формат — к примеру 256 х 256 пикселей — и сразу начать работу.
Но давайте вернемся к нашей иконке. Задаем ее размер и переходим дальше, на рабочий экран.
Здесь всё выглядит почти так же, как и в Canva. Справа — рабочий лист, слева — меню. Но есть и отличия, которые облегчают работу.
Но давайте все-таки начнем рисовать.
Схему работы будем использовать ту же, что и при работе в Canva: брать нужные элементы, перетаскивать на лист и корректировать.
Итак, выбираем в списке элементов круг и переносим его на лист. При этом слева появляется меню, в котором можно:
Последняя опция здорово помогает, если разные элементы рисунка накладываются друг на друга. Когда я рисовала иконку в Canva, сверху оказался слой с большой шестеренкой. И, чтобы подправить другие элементы, мне пришлось сначала сдвинуть ее в сторону. А в Crello можно просто поменять слои местами и сразу редактировать то, что нужно.
Но давайте вернемся к нашей иконке.
Изменяем цвет круга и растягиваем его на весь лист. А дальше в левом меню заходим в раздел «Поиск» и набираем нужный запрос. В появившемся списке выбираем шестеренку и перетаскиваем ее на лист.
Так же, как и в Canva, здесь с фигурами можно делать что угодно — двигать, поворачивать, выбирать нужный цвет и размер. И так же какие-то фигуры можно использовать бесплатно, а за какие-то нужно платить.
Задаем нашей шестеренке нужный цвет, размер и копируем ее два раза. Новые шестеренки тоже подправляем так, чтобы получилась цельная картинка.
Теперь нужно ее сохранить. Нажимаем на кнопку «Скачать» в верхнем меню и выбираем формат.
Самое простое руководство по иконографике
Светлана Шаповалова, коммерческий автор и переводчик, перевела руководство по иконографике от Tidjane Tall, рассказав о самых простых базовых иконках и объяснив, почему иллюстрация стоит тысячи слов.
Сколько в среднем времени надо дизайнеру на создание одной пользовательской иконки? Пару минут? Десять? Час, два или три? А что если мы покажем, как сделать 10 крутых иконок менее чем за 10 минут?
Иконографика — особая форма коммуникации. Она дополняет визуальный язык бренда, поэтому пользовательский набор иконок гораздо выразительнее и привлекательнее стандартного. Многие дизайнеры даже не заморачиваются над изучением иконографики. Причина чаще всего в том, что для этого требуется еще один курс в очень долгом процессе обучения.
Поэтому я создал мегапростое руководство, с помощью которого можно изучить основы иконографики менее чем за 10 минут. И, да, я серьезно.
Умение создавать пользовательские иконки откроет перед вами огромный новый мир образов, которые вы сможете использовать в своих проектах — это выделит вас из толпы и даст конкурентное преимущество перед другими дизайнерами.
Изначально на создание руководства меня вдохновила гифка Моргана Аллана Нутсона, где показывалось, как за пару секунд создать иконку локационной службы. Прием показался мне не избитым, изящным и быстрым.
Я понял, насколько просто можно создавать пользовательские иконки. На самом деле иконка — это всего лишь определенная геометрическая фигура, результат соединения или искажения базовых фигур: прямоугольников, треугольников, окружностей.
Главное в дизайне логотипов или иконок — это ничего не усложнять.
С помощью этого руководства вы сможете создать 10 разных иконок за 10 секунд, использовав при этом простые геометрические фигуры.
Важно: Я использовал Adobe Illustrator, но вы получите такой же результат в любом другом редакторе: Sketch или Figma. Точки на фигуре мы добавляли и удаляли инструментом «Перо» (Pen Tool), выбирали и двигали — «Частичным выделением» (Direct Selection Tool).
Глаз (Eye Icon)
Разместите в центре листа четыре круга на одной оси: от самого крупного до самого мелкого. Маленький круг поместите в чуть больший по размеру и так раз за разом от маленького к самому большому. Затем растяните его за крайние от центра правую и левую точки. Наконец сдвиньте самый маленький (внутренний) круг к краю предыдущего, и у вас получится эффект блика на радужке.
Совет: Чтобы не использоваться белые круги, воспользуйтесь палитрой «Обработка контуров» (Pathfinder) и вычтите две окружности из нижнего круга.
Стрелка (Arrow Icon)
Чтобы получить стрелку, просто добавьте дополнительные точки по краям исходного квадрата.
Совет: Как вариант, просто нарисуйте тонкую линию и придайте ей форму стрелы.
Батарейка (Battery Icon)
Нарисуйте один контурный квадрат и два с заливкой. Поместите один из залитых квадратов внутрь пустого и поиграйте с пропорциями. Второй оставьте снаружи, придав ему форму кончика батареи.
Совет: Попробуйте разные значения толщины контура и отступов, чтобы добиться нужной визуальной гармонии.
Маркированный список (Bullet List Icon)
Начните с обычного квадрата; скопируйте его и разместите копию справа; придайте ему форму удлиненного прямоугольника. Выделите всё вместе и сделайте две копии, разместив их одну под другой с равными промежутками.
Совет: замените квадраты на круги — и вид иконки смягчится.
Облако (Cloud Icon)
Нарисуйте три окружности разных размеров — две одинаковые маленькие и одну большую. Маленькие круги расположите на одном уровне, а крупный — по центру между и над ними. Чтобы получился низ облака, растяните одну из меньших окружностей.
Совет: Чтобы облако выглядело натуральнее, попробуйте разные диаметры кругов.
Перемотка вперед (Forward Play Icon)
Нарисуйте длинный прямоугольник. Поставьте точку по центру левого края, а затем удалите нижнюю и верхнюю точки. Получился треугольник — скопируйте его и поместите справа. Иконка готова.
Совет: Чтобы справиться еще быстрее, сразу нарисуйте треугольник, а не квадрат.
Воронка (Funnel Icon)
Нарисуйте длинный прямоугольник. Добавьте точки по центру левого и правого ребер. Теперь растяните верхний край в ширину. Готово.
Совет: Поставьте два прямоугольника друг на друга и просто растяните край верхнего.
Воспроизведение/Пауза (Play/Pause Icon)
Нарисуйте три длинных параллельных прямоугольника. Самый широкий из них трансформируйте в треугольник.
Совет: Как вариант, сразу нарисуйте треугольник, а за ним два параллельных прямоугольника.
Навигационная стрелка (Position Arrow Icon)
Это видоизмененная иконка локационного сервиса из гифки Моргана. Просто нарисуйте квадрат, а затем потяните за нижний левый угол в направлении противоположного угла.
Совет: Если работаете в Illustrator, зажмите клавишу Shift, чтобы получить строго диагональное направление.
Метка геолокации (Position Pin Icon)
Внутри большего круга создайте маленький, используя палитру «Обработка контуров» (Pathfinder). Опустите нижнюю точку на нужное расстояние и заострите получившийся кончик: переключитесь на инструмент «Перо» (Pen Tool), затем щелкнете по точке, зажав клавишу Shift.
Совет: Можете не заострять угол полностью — просто немного округлите его, выбрав точку и изменив значение «Радиус скругления» (corner radius) в палитре «Трансформирование» (Transform).
Иконка звука (Sound Icon)
Делается точно так же, как и иконка воронки, только с поворотом в 90 градусов.
Совет: Просто скопируйте воронку и разверните её по часовой стрелке.
Волна (Wave Icon)
Нарисуйте прямую линию, затем по всей длине на равных промежутках расставьте точки. Потяните вниз изменяющиеся точки и максимально округлите все углы, пока линия не станет плавной.
Совет: Чтобы линия стала еще мягче, округлите её концы.
Хорошая иконка стоит тысячи слов.
Часто говорят, что иллюстрация стоит тысячи слов. Это особенно справедливо по отношению к иконкам. Замещая собой слова и целые предложения, они оптимизируют визуальное пространство, улучшают юзабилити и эстетическое восприятие.
Умение создавать наборы простых и полезных иконок всегда пригодится. В статье мы как раз показали, как легко и быстро сделать иконки из базовых фигур.
10 правил иконографики:
Совершенствуйте свое мастерство и увидите, что вскоре 10 секунд для создания одной иконки вам покажется много — вы научитесь справляться намного быстрее.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.