Простые правила для создания дизайна иконки.

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

Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:

  • легко и быстро создавать новые материалы;
  • придать существующим наработкам завершенный вид;
  • сохранять результат в разных форматах (SVG, ICO & PNG);
  • создавать иконки для .

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

IconsFlow

IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:

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

Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.

Вид векторного редактора IconsFlow:

Примеры работ:

FlatIcons

С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:

  • Во-первых, вы можете скачивать файлы только в PNG-формате.
  • Во-вторых, вам придется создавать каждый объект отдельно, т.к. невозможно разработать целый набор сразу.

Не смотря на то, что пик популярности уже прошел, многие используют их в своих дизайнах. В качестве примера разработчики позволяют скачать бесплатный набор социальных флэт иконок. Результат работы в редакторе 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 — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

Начните с выбора картинки из галереи, потом определите цвет, форму заднего фона (круг или квадрат), длину тени, насыщенность, затухание – и ваша иконка готова. Все предельно просто. Для персонального использования сайт полностью бесплатный.

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

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

Всем привет. С Вами NataLime и сегодня мы своими руками сделаем значки в стиле Tumbler, которыми можно украсить рюкзак, куртку, сумку и все что угодно. Их делать довольно просто и понадобится нам пластиковый контейнер. В них обычно продаются всякие печененки, кулинария и так далее. Ну а для того, чтобы выбрать подходящий контейнер, нам нужно обратить внимание на упаковку. Здесь должен быть знак PS-06.

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


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


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


Все фигурки готовы. И теперь нам нужен противень, который предварительно мы застелили пергаментом. Выкладываем на него фигурки и отправляем в предварительно разогретую до 180 градусов духовку. Что с ними происходит? Сначала они все скручиваются и кажется, что вместо значков достанешь пластиковые трубочки, но, к счастью, потом они выравниваются. Достаем из духовки наши заготовки как только они станут ровными. Пластиковые значки уменьшились в размере примерно втрое, как и предполагалось, и значок стал очень плотным, как будто бы его делала не я сама, а профессионалы на заводе. Все фигурки получились классными!
А теперь время вдохнуть в них жизнь с помощью красок! Я взяла акриловые краски и покрасила каждый элемент заготовки со внутренней стороны. До полной готовности осталось совсем немного — приклеить специальные булавки для значков на горячий клей.




Наши значки готовы и теперь они могут украсить и разнообразить любой Look. Их можно прикрепить на рюкзак, кофту, джинсы, а еще куда только душа пожелает. Эти значки получились просто восхитительными. Они яркие, молодежные, стильные, супер-пупер классные. Мне они очень понравились, я надеюсь так же они понравились и вам. их делать неоень сложно, но долго надо сидеть и кропотливо все прорисовывать. А так их делать довольно легко и результат получается просто потрясающий!


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

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

Способы изготовления

Как сделать значок своими руками дома? Это зависит от того, какими навыками и материалами обладает мастер. Самые простые варианты - значки из картона. Несложны в изготовлении и деревянные модели, а вот с металлическими придется повозиться - это одни из самых сложных вариантов.

Картонные, бумажные, фантазийные

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

Свадебные украшения для свидетелей

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

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

Из картона вырезать 2 круга нужного размера (диаметр - 5-6 см). Подготовить надписи, которые можно сделать самостоятельно либо распечатать на принтере найденные в интернете. Надпись должна соответствовать размерам картонной заготовки. Наклеить надписи или картинки на один из картонных кружков.

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

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

Значки из заготовок

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

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

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

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

Море вариантов

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

Более сложными вариантами являются деревянные значки. В магазинах для творчества можно найти специальные заготовки, которые могут служить основой для будущего изделия. Также можно самостоятельно распилить нетолстый фрагмент из пластины толщиной 0,5-1 см и отшлифовать. На них красками наносится рисунок или пишется надпись. Можно с помощью выжигателя нанести изображение. Вариантов масса.

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

Алюминий и свинец - основа для работы

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

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

Декорирование - полет фантазии

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

Такие изделия ручной работы точно не останутся незамеченными. Это простой и доступный способ самовыражения в творчестве.

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

Для использования одного из представленных ниже пакетов иконок вам необходимо установить и активировать какую-либо из сторонних оболочек. Вы можете выбрать любой из таких замечательных лаунчеров, как Nova, Apex, ADW, Go Launcher, Holo Launcher или Action Launcher Pro. После того, как вы установите понравившийся вам пакет иконок, откройте настройки лаунчера и выберите там нужные значки.

MIUI 5 Icons

Этот пакет значков предлагает более 1900 бесплатных иконок, которые повторяют дизайн используемый в MIUI ROM, про который мы писали . Огромное количество иконок позволяет обеспечить большинство установленных у вас приложений новыми значками.

DCikonZ Theme

DCikonZ является бесплатной темой, которая включает в себя колоссальные 4000+ иконки выполненных в одном стиле. Этот пакет отличается не только количеством, но и превосходным качеством проработки каждого значка.

Holo Icons

Это иконки из операционной системы Android, которые могут вам пригодиться в том случае, если вы мечтаете вернуться к каноническому holo-стилю системы.

Square Icon Pack

Square Icon Pack превращает все ваши иконки, в том числе и круглые, в идеальные квадраты. Значки здесь выглядят как маленькие плитки из Windows Phone и Windows 8.1. Бесплатная версия не предлагает столько значков как платная, но и ее вполне достаточно для успешного использования.

Rounded

Если вам не нравятся квадратные, то может быть круглые значки придутся по вкусу. Разработчики темы говорят, что они были вдохновлены дизайном новой Firefox OS от Mozilla.

Crumbled Icon Pack

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

Dainty Icon Pack

Если вы устали от буйства красок, то обратите внимание на эту изысканную тему, предлагающую стильные серо-белые иконки для более чем 1200 приложений. Они идеально смотрятся на каком-либо однородном фоне.

Simplex Icons

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

Min Icon Set

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

Elegance

Elegance на фоне предыдущих комплектов выглядит несколько переполненным большим числом деталей и градиентов. Эти значки, а всего их более чем 1200, выглядят настоящими произведениями искусства, почти как полноценные картины.

А какие шедевры иконописи любите вы? Кидайте ссылки в комментариях.


Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com . Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.

Три основных составляющих хорошего дизайна иконки

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

Форма

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

Эстетическое единство

Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными.
Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.

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

Узнаваемость является главным критерием, это сущность иконки. Узнаваемость включает в себя те свойства, которые человек обычно ассоциирует с тем или иным объектом, с той или иной идеей, но так же может включать в себя что-то неожиданное – это и создаёт уникальность, например, недоведённая обводка и округлые блики.

Это были три основные составляющие эффективного дизайна иконок. Далее мы детально рассмотрим шесть шагов для решения этих задач.

Сетка

Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:

Стороны

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

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

Геометрические формы

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

Цифры: Края, линии, углы, кривые

Чтобы дизайн не выглядел механическим и скучным, углы, линии, края и кривые должны быть математически точными. Другими словами, следите за цифрами и не пытайтесь нарисовать на глаз и от руки, когда дело касается деталей. Несогласованность в этих элементах может снизить качество иконки.
УГЛЫ
В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.
КРИВЫЕ
Это самые заметные области, которые могут ухудшить качество иконки. Благодаря им можно отличить профессионала от любителя. Так как человеческий глаз способен обнаруживать мелкие неточности, то рисование от руки не поможет вам достичь целей. Положитесь на инструменты, формы и цифры, чтобы создавать кривые.
ЗАКРУГЛЕНИЕ УГЛОВ
Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.
СГЛАЖИВАНИЕ ПИКСЕЛЕЙ
Идеальное выравнивание пикселей имеет важное значение для дизайна иконок маленьких размеров. Сглаживание углов на таких иконках может сделать значок размытым и нечётким. Пространство между линиями, которое не приводится в соответствие с пиксельной сеткой будет сглаживаться и станет нечетким. Как упоминалось выше, 45 градусные углы и кратные им сглаживаются лучше.

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

ТОЛЩИНА ЛИНИИ
Вообще лучше всего использовать в одной иконке не более двух вариантов толщины линии, но иногда и три варианта просто необходимы. Ваше цель состоит в том, чтобы визуально обеспечить иерархию и разнообразие без разрушения целостности всего сета. Использование более чем трех толщин линий может разрушить структурированность и сплоченность. Что касается самой ширины линии, то лучше брать опять кратные двум и четырём пикселям, их легко масштабировать и делать ровные шаги. Старайтесь избегайте очень тонких линий, особенно в базовых значках и плоских иконках, но это правило не действует, если вы намеренно создаете иконки из тонких линий.

Используйте повторяющиеся элементы дизайна и акценты в сетах иконок

Например, Хеммо де Йонг известный голландский дизайнер во всех своих иконках использует повторяющийся элемент - острый угол.

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

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

Сделайте иконку уникальной

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

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

Сет иконок, которые были использованы на