Как сделать красивую иконку

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, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.

Источник

Как создать отличную иконку для приложения

Перевод статьи от студии Gapsy «How to Design a Great App Icon» о советах, правилах и принципах, которых стоит придерживаться при разработке очередной иконки для мобильного приложения.

А вы знали об этом шокирующем факте? Теперь пользователи проводят более 90% своего времени со смартфонами, используя мобильные приложения. У каждого из нас на телефоне установлено более десяти программ, и это число с каждым годом только растет. Чтобы быть на шаг впереди своих конкурентов, создайте уникальную иконку приложения, которая повысит узнаваемость вашего бренда. О том, как это сделать, мы расскажем в этой статье. Воспользуйтесь нашими советами о том, как сделать отличную иконку для вашего мобильного приложения.

Что такое иконка приложения?

Иконка мобильного приложения — это небольшое изображение, представляющее приложение на рынке, таком как Google Play или App Store. Небольшое изображение, которое пользователи видят на экране телефона, является одним из самых важных элементов идентичности вашего проекта. Иконка поможет вам выделиться, запомнить бренд и раскрыть суть вашего уникального делового предложения.

Согласно статистике, в настоящее время в Google Play Store доступно более 2,9 миллиона приложений, а в Apple App Store — почти 4,4 миллиона. Поэтому ваша задача — создать иконку приложения, которая мгновенно привлечет внимание и заставит пользователя захотеть узнать, что стоит за изображением.

В чем разница между иконкой и логотипом?

Некоторые люди думают, что нет большой разницы между логотипом и иконкой. Но главное отличие заключается в следующем:

Иконки:

Логотипы:

Категории иконок

В дизайне существует два типа иконок — иконки для операционной системы Android и операционной системы IOS. Хотя на первый взгляд они очень похожи, они отличаются многими техническими нюансами, которые следует учитывать при разработке.

Советы о том, как создать отличную иконку для вашего приложения

Углубляясь в тему создания иконок для мобильного приложения, мы предлагаем вам несколько советов о том, как создать классную иконку, которая понравится вашей целевой аудитории.

а) Сделайте значок вашего приложения уникальным

Не забывайте, что вы делаете иконку для конкурентноспособного рынка, и будете соревноваться с самыми разными другими иконками мобильных приложений. Вот почему, если хотите, чтобы вас выбрали, вам нужно выделиться и быть уникальным, не таким, как все. Нужно, чтобы ваша аудитория обратила на вашу иконку внимание и использовала ваше приложение изо дня в день.

Вам нужно проанализировать конкурентов, чтобы оценить дизайн их иконок и определиться на этом основании со своей. Исследуйте самые популярные мобильные приложения в вашей нише, посмотрите на их иконки, какие у них есть особенности, есть ли у них что-то общее, отличное, какие цвета они в основном используют, и подумайте о том, как вы можете выделиться среди них. Возможно, создать иконку с противоположным цветом или использовать другой графический дизайн, чтобы ваша иконка выделялась из толпы. Но будьте осторожны с экспериментами, ведь ваша главная задача — удовлетворить вкусы целевой аудитории, поэтому, прежде всего, вы должны детально изучить ее вкусы и понять, что ее привлекает и нравится в целом.

б) Придерживайтесь простоты

Пусть ваша иконка будет простой, но продуманной до мельчайших деталей. Не используйте слишком сложные конструкции. Во-первых, ваша иконка малюсенькая; мало кто сможет увидеть в ней какой-либо текст или детали. Чем больше деталей, тем труднее будет пользователю распознать и правильно воспринять ее. Ваша иконка должна легко масштабироваться на разных носителях и быть легко узнаваемой, будь то экран телефона, магазин приложений, или панель управления.

Давайте возьмем в качестве примера несколько иконок известных мобильных приложений. Учиться и черпать вдохновение у успешных брендов — это отличная идея!

Посмотрите на большинство приложений на вашем телефоне — все иконки будут максимально простыми и понятными, выражающими главную идею приложения.

в) Используйте условные обозначения, а не слова

Для большего привлечения внимания пользователя лучше использовать условные обозначения, а не текст. Текст всегда затрудняет для аудитории восприятие иконки. Точно так же лучше не использовать фотографию в качестве значка, так как это тоже запутает пользователей. Для большей вовлеченности используйте эмблему, которая лучше всего описывает вашу компанию или бренд.

Чтобы правильно определить, какая эмблема лучше всего описывает ваш бренд, составьте список вещей, которые ассоциируются у вас с продуктом. Это значительно облегчит поиск нужной эмблемы и превращение слов в изображение. Взгляните на логотип одного из наших проектов в качестве примера. Эмблема с самолетом дает нам понять, что приложение предназначено для бронирования авиабилетов. Всего одна картинка вместо тысячи слов.

г) Работайте в корпоративной стилистике бренда

Все пользователи ценят, когда созданный дизайн продуман до мельчайших деталей. Убедитесь, что ваша иконка отражает суть вашего мобильного приложения. Вот почему смешивание контента и дизайна — один из вернейших способов установить связь с вашей аудиторией и создать визуальную идентичность.

Используйте корпоративные цвета, формы и текстуры, чтобы убедиться, что ваша иконка соответствует вашему брендингу. Если, к примеру, у вашего приложения есть геометрия или градиент, попробуйте вставить это в иконку.

Также стоит сочетать дизайн иконок и функциональность. Когда пользователи впервые видят иконку вашего приложения, они должны с первого взгляда понять, для каких целей это приложение используется. Например, приложение Airbnb.

Они использовали самолет в дизайне своих иконок, что сразу дает понять пользователям, что это приложение связано с туриндустрией.

e) Подумайте о цвете

Поскольку для многих цвет может быть определяющим фактором при выборе приложения, выбор цветовой темы для иконки должен быть сделан тщательно. Вот несколько советов по использованию цветов для вашей иконки:

ж) Протестируйте свою иконку и продолжайте ее улучшать.

Тестирование иконки — это как проверка карта перед гонкой. Лучше потратить несколько минут на проверку перед началом, чем потратить много времени и денег на исправление ошибок позже.

Чтобы создать эффективную иконку для приложения, которая будет не только хорошо смотреться среди конкурентов, но и также повышать конверсию, ее необходимо подвергнуть двум этапам тестирования:

Техническое тестирование иконки может разделяться на этапы:

Этот аспект всегда нужно тестировать в контексте.

Во-первых, задайте себе следующие вопросы и сделайте эвристический анализ:

После этого вы сможете понять, сколько времени потребуется новым пользователям, чтобы найти ту или иную иконку. Во время тестирования попросите людей, незнакомых с вашим сайтом или приложением, выполнить определенное действие и запишите следующую информацию:

Подведем итоги

Итак, давайте вкратце подытожим, каким должен быть дизайн иконок для вашего мобильного приложения:

Пленительная простота

Найдите элемент, который передает суть приложения, и облеките его в простую, запоминающуюся форму. Тщательно добавляйте детали. Слишком сложное содержание или форма иконки трудно различать, особенно при уменьшенных размерах.

Резкий фокус

Создайте иконку приложения с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

Никто не будет анализировать икону, чтобы понять ее значение.

Например, изображение конверта традиционно используется в качестве иконки для почтового приложения, которое ассоциируется с почтой. Если вам нужна хорошая иконка, потратьте время на разработку привлекательной и понятной абстрактной эмблемы.

Никаких фотографий, скриншотов или элементов интерфейса.

Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии трудно разглядеть, когда они маленькие. Скриншоты не расскажут вам о цели приложения. Элементы интерфейса в пиктограмме вводят пользователя в заблуждение.

Проверьте значок на разных обоях

Люди выбирают разные обои для своих домашних экранов, поэтому, когда вы делаете иконку приложения, вы должны протестировать его на разных фонах.

Вот и все! Мы желаем Вам удачи и много красивых иконок для ваших приложений.

Источник

Как создать свои иконки для 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. Приложение «Фотографии» не позволяет переопределять размеры картинок и сохранять их в другие форматы, зато оно может предложить юзабильный инструментарий для обрезки картинок и наложения эффектов.

Открываем нужную картинку в приложении. Выбираем функцию «Изменить».

Далее – «Обрезать и повернуть».

Устанавливаем пропорции «квадрат». Это маска, с помощью которой далее можно будет выбрать участок для обрезки с идеально ровными пропорциями длины и ширины.

Подтягиваем маску на нужный объект картинки. По итогу нажимаем «Готово».

При необходимости применяем эффекты цветокоррекции, виньетирование, устраняем красные глаза, если это любительское фото, и т.п. В итоге сохраняем копию изображения.

Windows 10 никак не препятствует произвольному размещению ярлыков программ на рабочем столе, правда, с небольшой Читать далее

Среди неполадок в Windows встречаются и такие, которые не нарушают работу самой операционной системы и Читать далее

Найти в интернете оригинальную иконку приложения обычно не составляет труда, но есть и исключения. Предположим, Читать далее

Похоже на то, что Microsoft никогда не перестанет экспериментировать с меню Пуск, по крайней мере, Читать далее

Источник