Инструкция

Создайте несколько изображений различных разрешений для будущей пиктограммы. Используйте растровый графический редактор на свой выбор. Это может быть Photoshop, GIMP или Paint, входящий в дистрибутив Windows.

Разрешения изображений могут быть любыми. Однако имеет смысл создавать , имеющие стандартные разрешения пиктограмм в операционных системах. Так, мелкие значки обычно имеют размеры 16x16 пикселей, а крупные и большие - 32x32 и 48x48 соответственно. Также иногда используются пиктограммы разрешением 22x22 (для панелей инструментов), 64x64 и 128x128 (в качестве изображений диалогов, но весьма редко) пикселей.

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

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

Создайте новую пиктограмму в IconPro. В главном меню приложения выберите пункты File и New Icon.

Добавьте несколько форматов изображений пиктограммы. В меню IconPro кликните по пунктам Edit и "Add Format...". В отобразившемся диалоге Add New Icon Format выберите разрешение растра пиктограммы и глубину его цвета. Добавьте форматы, соответствующие параметрам созданных на первом и втором шагах изображений.

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

Импортируйте изображение, соответствующее выбранному формату, из файла. В меню выберите пункты Edit и Import BMP. В отображенном диалоге перейдите в каталог, куда были сохранены изображения на втором шаге. Выделите нужный файл, нажмите кнопку «Открыть».

От Оллина Боэра Боана, а теперь публикуем перевод его статьи, присланный нашим читателем CrossFire.

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

Речь о значках вроде этих:

Чаще всего в таком стиле создают пиктограммы размером 32px (которые и рассматриваются с статье), однако в некоторых случаях иконки в 16px, 24px, 48px, или даже 128px рисуются схожим образом.

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

Стиль

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

Давайте рассмотрим несколько примеров:

Ну и мой набор по вселенной Legend of Zelda, созданный специально для настоящей публикации

Основываясь на этих, и многих других примерах (в Интернете полным-полно замечательных образцов), мы можем выделить черты, присущие хорошей иконке в 32 пиксела.

Вот их краткий список:

Организуйте свое рабочее пространство

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

Выделю несколько моментов такой организации:

• Пиктограммы рисуются в удвоенном разрешении, используя сетку в 2px. Это дает уверенность, что получившаяся иконка будет сглаженной, без зазубрин и лесенок, позволяет не беспокоиться о правильности заливки некоторых пикселов. Можно работать несколько небрежно в укрупненной версии, получая отличный результат в целевом разрешении.
• Следующий прием, о котором я хотел рассказать - использование холста с широкими отступами, и меньшим, отключаемым темным квадратом, ограничивающим иконку. Хитрость появилась потому, что пикселы контура часто «прилипают» к краям холста, а используя дополнительные отступы мы получаем представление о том, как пиктограмма будет выглядеть при использовании. Темный квадрат - нечто такое, что можно отобразить при рисовании контура, чтобы убедиться что размер иконки не превышает намеченного.
• Я использую отдельное, неотвлекающее окно, показывающее уменьшенную на 50% копию рисуемой иконки. Создать такое можно с помощью [ View>New View ] в GIMP, или [ Window>Arrange>New Window of… ] в Photoshop. Данный прием избавляет от необходимости каждый раз уменьшать масштаб, чтобы посмотреть, что получилось после редактирования.

Распространенные ошибки

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

Вот несколько советов, как их избежать:

• Либо забывают нарисовать тень, либо делают ее слишком темной. Это одна из самых распространенных ошибок. Тени - необходимая деталь, делающая иконку как бы прикрепленной к фону, и если эту деталь упустить, она выглядит наклеенной на подложку. С другой стороны добавление слишком темной тени, так же ухудшает результат. Иконка должна быть крайне прозрачной, при этом иметь непрозрачные области в местах прилегания к подложке. Плохой идеей является попытка сделать одну тень на весь набор иконок, так не получится.
• Непрозрачные края. Из-за них иконка плохо смотрится на подложках разных цветов. Никогда не делайте таких, за исключением случаев, когда необходимо получить границу темнее внутреннего цвета.
• Не выставляйте источник света по центру иконки, добавляя ненужные круговые градиенты, и т.д. Затенение иконок должно быть крайне простым в 90% случаев. Некоторые материалы, такие как металл, требуют более детальной проработки, однако большинство других могут быть изображены с использованием лишь линейных градиентов, и границ со светлой внутренней тенью.
• Уродливые, блеклые цвета. Я постоянно замечаю такие, особенно когда они находятся на границе, сугубо нуждающейся в насыщенном цвете. Привлекательность иконок в 32 пиксела зиждится на ярких, соблазнительных цветах - внимательно отнеситесь к выбору. В следующей статье я надеюсь подробнее описать приемы, позволяющие получить красивые, живые цвета - а пока просто запомните, что «мягкий» свет и перекрытие - ваши лучшие друзья.
• Замыленные или ступенчатые края. Лучшее решение, позволяющее избежать этой ошибки - рисовать иконку в двойном размере, используя сетку в 2px, а потом объединять слои и сжимать ее до целевого разрешения. Выравнивание деталей по сетке - крайне важно для создания качественной пиктограммы, не поленитесь потратить время на это.

Процесс создания иконки в реальном времени.

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

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

• легко и быстро создавать новые материалы;
• придать существующим наработкам завершенный вид;
• сохранять результат в разных форматах (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, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

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

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

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

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

Форма

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

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

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

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

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

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

Сетка

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

Стороны

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

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

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

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

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

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

УГЛЫ

В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.

КРИВЫЕ

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

ЗАКРУГЛЕНИЕ УГЛОВ

Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.

СГЛАЖИВАНИЕ ПИКСЕЛЕЙ

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

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

ТОЛЩИНА ЛИНИИ

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

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

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

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

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

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

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

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

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

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

Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями

Где Spacing - расстояние между артбордами.

Width и Height - высота и ширина артборда.

Raster Effects - разрешение (ppi) для иконок подойдет 72

Align New Objects… - эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о .
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать:

graphicriver.net  - свободная площадка для торговли любым цифровым контентом.

creativemarket.com  - что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.

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

icons8.com  - ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.