Создание иконок: Создавайте иконки онлайн – Бесплатные иконки в редакторе для мобильных и десктопов

Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

{«id»:50515,»url»:»https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»title»:»\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&title=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&text=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&text=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432&body=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

21 841

просмотров

1. Используйте оптическую сетку

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

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

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

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

2. Учтите пиксельную сетку

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

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

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

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

3. Сохраняйте определённый уровень детализации

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

4. Контролируйте минимальный размер зазора

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

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

5. Удалите повторяющиеся части

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

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

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

8. Следите, чтобы силуэты были чистыми и точными

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

9. Очистка SVG от мусора

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

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.

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

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

Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.

Полное руководство по созданию интерфейсных иконок

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

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

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

Основные элементы значков

Размер

Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями. Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32.

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

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

Значок магазина в размерах 24×24, 40×40 и 80×80

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

Цвет

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

Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.

Сетки

Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически). Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь. Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне.

Слева: объекты на пиксельной сетке

Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.

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

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

Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально.

Доминирующий объект (прямоугольник) находится в центре

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

Штрихи и заливки

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

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

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

Расстояние между штрихами должно по возможности быть равным ширине штриха

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

Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.

Выбор стиля

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

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

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

Вот подборка как продуктов, так и маркетинговых значков, которые представляют посыл и стиль визуального бренда компании:

Рисование значков

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

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

Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).

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

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

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

Естественные формы

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

Углы

Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.

Угловой радиус

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

Отличный образец концентрических радиусов в этом портфеле

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

Закрашенные объекты

Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.

Метафора

Метафоры важны в значках-мы
используем их постоянно, даже не задумываясь. Значок дома обозначает домашнюю
страницу. Насекомое означает ошибку. При масштабировании значков для создания
уменьшенных версий, я предпочитаю помнить про метафору(смысл), которую я использую
для передачи смысла значка.

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

Перспектива

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

Верхний ряд: плоский. Нижний ряд: в перспективе.

Шрифт (избегайте!)

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

Подсказки

Операции Boolean

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

Группы Boolean обрабатываются
как единый слой формы и имеют общие свойства заливки и обводки и могут
комбинироваться с другими булевыми группами посредством последующих логических
операций.

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

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

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

Исключение: является противоположностью пересечения. Исключение показывает только те
области его подслоев, которые не перекрываются.

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

Сеть вектор

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

Как использовать иконки в
системе дизайна

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

Организация

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

Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.

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

Чтобы помочь своим
инженерам, вы захотите использовать как фреймы, так и страницы. Страницы
представляют наиболее удаленную группу (поэтому мне нравится сортировать их по
размеру). Затем фреймы помогут вам сузить содержание, как в примере ниже.
Система именования этого значка имеет размер>
категория> имя файла.

Когда есть один и тот же
значок в разных вариациях, вот как мне нравится обрабатывать их.

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

Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.

Слева: кофе / контурный. Справа: кофе / закрашенный

Скорректированные изображения: если у вас есть значок с визуальным вариантом (например, с несколькими вариантами валюты), вы также можете использовать наименование, чтобы помочь дифференцировать, используя тот же метод, что и закрашенные и контурные значки.

Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»

Управление вашими
активами

Когда вы закончили работу
над своими знчками, вы хотите, чтобы они были максимально чистыми для
наилучшего экспорта. Используйте логические операции, чтобы упростить вашу
работу (помните, наш друг Объединение?). Избегайте лишних линий или форм.
Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы
другой человек посмотрел на все ваши значки и дважды проверил чистоту.

Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте. Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.

Передача ваших значков в другие
руки

Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт. Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть. Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.

Другие источники

• Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
• Я люблю thenounproject.com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)

https://www.figma.com/file/v8WczgltywYcWbZyAqChfX/Design-Systems-Icon-Guide/duplicate?node-id=0%3A1

33 урока по созданию иконок в Adobe Illustrator

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

Чтобы подтянуть уровень владения программой Adobe Illustrator для создания иконок, сделали подборку полезных уроков всех уровней сложности: от создания примитивной стрелочки до качественного образа предмета.

Learn How to Draw a Vector Pencil Icon in Adobe Illustrator

Dansky Learn How to Draw the YouTube Play Symbol in Adobe Illustrator

Learn How to Draw a Vector Sticky Note in Adobe Illustrator

Learn How to Create a Sketched Logo Effect in Adobe Illustrator

Learn How to Draw an Icon Badge and Long Shadow in Adobe Illustrator

Learn How to Draw a Pokeball Icon in Adobe Illustrator

How to Draw a Vector Octopus Icon in Adobe Illustrator

Learn How to Draw a Battery Icon in Adobe Illustrator

Learn How to Draw a Calendar Icon in Adobe Illustrator

Learn How to Draw an Eye Icon in Adobe Illustrator

Learn How to Draw a Home Icon in Adobe Illustrator

Learn How to Draw 3 Hamburger Menu Icons in Adobe Illustrator

Learn How to Draw an Egg Timer Icon in Adobe Illustrator

Learn How to Draw a Lightbulb Symbol in Adobe Illustrator

Learn How To Draw a Cog Settings Icon in Adobe Illustrator

Learn How To Draw a Camera Icon in Adobe Illustrator

Learn How To Draw an Adjustable Speech Bubble in Adobe Illustrator

Learn How To Draw an App Selector Switch in Adobe Illustrator

Learn How To Add Long Drop Shadows in Adobe Illustrator

Learn How To Draw a Refresh Icon in Adobe Illustrator

Learn How To Draw a Map Location Icon in Adobe Illustrator

Learn How To Draw a Letter Logo in Adobe Illustrator

Learn How To Create a Maze Symbol in Adobe Illustrator

Learn How to Draw a Play Icon in Adobe Illustrator

Learn How to Draw an Arrow Icon in Adobe Illustrator

Learn How to Draw an Envelope Icon in Adobe Illustrator

Learn How to Draw a Wireless Signal Icon in Adobe Illustrator

Learn How to Draw a Map Location Icon in Adobe Illustrator

Learn How to Draw Vector Icons in Adobe Illustrator

Learn How to Draw Tick & Cross Icons in Adobe Illustrator

Learn How to Draw a Search Icon in Adobe Illustrator

Learn How to Create a Vector Button in Adobe Illustrator

Learn How to Quickly Create an Infinity Symbol in Adobe Illustrator

Суперполезный гайд по созданию иконок для интерфейсов | by Writes

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя — всё это расскажем ниже.

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

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

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

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

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

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

Сцентрированные однопиксельные границы делают значок размытым в масштабе 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. Оригинал тут.

Источник

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

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

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

Пакеты иконок разного размера.

Во время работы не будет лишним составить набор PNG-файлов разного размера: от 29 × 29 до 1024 × 1024 пикселей. Такой набор вы сможете использовать в разных контекстах операционной системы, когда пользователи будут взаимодействовать с иконкой (iOS App Store, Google Play, панель настроек, результаты поиска и главный экран устройства).

Иконки приложений можно сделать практически в любой программе, которая воспроизводит растровые файлы. Photoshop, Illustrator или Sketch. На сайте Apply Pixels множество PSD-шаблонов.

Небольшой ролик, в котором показано, как обращаться с шаблонами на Apply Pixels

5 ключевых аспектов

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

1) Масштабируемость

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

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

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

Как улучшить масштабируемость

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

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

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

Иконка может быть детализированной или простой; главное, чтобы в точности передавала замысел ее создателя.

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

Как сделать иконку заметнее

Банальные, слишком усложненные иконки вредят узнаваемости. Лучше убирать все лишние детали, до тех пор, пока общая идея будет сохраняться. Иконка стала заметнее?

Поэкспериментируйте с несколькими вариантами дизайна. Разместите их сеткой, отметьте, какие детали заметнее.

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

3) Целостность взаимодействия

Как с самим приложением, так и с его иконкой. Хорошая иконка служит продолжением интерфейса. Если это условие соблюдено — приложение запомнится.

Общие черты иконки и UI важны в смысле визуального нарратива.

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

Как добиться единообразия

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

Еще один способ — связать символику иконки непосредственно с функциональностью приложения. Хотя это удается не всегда.

4) Уникальность

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

В категории Productivity App Store можно видеть, что разработчики не всегда учитывают такой нюанс, как уникальность.

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

Как повысить уникальность

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

Один-единственный глиф на однотонном фоне — скользкий путь. Так сложно добиться уникальности. Экспериментируйте с цветами и композициями, пытайтесь найти новые и понятные визуальные метафоры.

Цвет — хороший способ внести изменения в концепт.

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

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

5) Важно не использовать слова

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

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

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

«Но Facebook же использует ’f’ в своей иконке»! Если присутствует только одна буква, она теряет свое «словесное» выражение и становится частью иллюстрации. А вообще это исключение из общего правила.

Логотип компании и название, втиснуть в канву иконки, нельзя назвать подходящим вариантом дизайна. Вы когда-нибудь видели символ или глиф, который хорошо смотрится в условиях ограниченного пространства? Если нет, тогда лучше выбрать что-то другое. Помните: иконка и логотип — разные вещи. И уместны они в разных контекстах.

В App Store и Google Play много примеров непродуманного дизайна иконок. Иконка — посредник между приложением и его пользователем. Это первое, что человек видит в App Store, и то, с чем он взаимодействует, всякий раз открывая приложение. Когда пользователь думает о приложении, в его сознании всплывает образ иконки.

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

Как сделать свой первый набор векторных иконок

Статья с поэтапной инструкцией для создания вашего первого набора векторных иконок.

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

Шаг первый: Тема

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

by Oliver’s Creative Agency

by Justas Galaburda

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

by Cole Bemis

Шаг второй: Стиль

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

Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру (outline icon), сложные или комплексные (мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.

Шаг третий: Образы

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

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

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

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

Это вообще самое важное: определиться с минимальным размером.

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

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

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

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

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

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

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

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

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

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

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

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

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

Лекции на тему создания иконок

Тарас Шипка — «Иконочки: как делать все четко и красиво»

Дмитрий Новиков — «Основы создания иконок в Adobe Illustrator»

Источник: medium

Создание иконок. Мелкие, но противные

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

Давным-давно

На самом деле иконки люди начали рисовать гораздо раньше. Фактически рисунки — это «прилизанная» и расширенная иконка. Древний человек никогда не ставил своей задачей нарисовать шедевр для потомков «Я — красивый и успешный неандерталец — верхом на любимом носороге в лучах заката». Он рисовал иконки. «Здесь нет рыбы». «Охотиться на мамонта сподручнее толпой и с камнями». «Колдун соседнего племени — наглый и жадный чувак».  И так далее.

Когда человек «подрос», он стал писать иконками. В Китае, например, кто-то умный устал рисовать человека и стал его изображать так: 人.  Вот так 日он нарисовал немного квадратное солнце, а так 月– луну, неслучайно там изгиб как у убывающего месяца. И дальше, как говорится понеслось: иконкой солнца китаец стал обозначать понятия: день, светло, а если их изображал две 日日, то любому становилось понятно, что автор говорит «каждый день». Шумеры, вавилоняне и египтяне шли тем же путем, мы не будем перегружать статью примерами.

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

История шла, грамотных людей становилось больше, а иконок меньше, тогда смысл стал передаваться текстом. И вот наступил XX, а за ним и XXI век! Поголовная грамотность, появился огромный объем информации для передачи, причем срочной передачи. Но пришли две большие беды: лень и нехватка времени на чтение, и так иконки получили второе дыхание. Они, как и графический символ, нужны не для любования, а для передачи смысла.

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

Так ли они просты в создании?

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

• можно немного поиграть со стилем традиционной формы (как на примере 1),
• можно иконку залить (пример 2, конечно, если позволяют обстоятельства),
• можно поэкспериментировать с формами и перспективой (пример 3),
• можно раскрасить и придать объем (пример 4).

С чего начать?

Создание иконок обычно начинается после утверждения ТЗ. Главное — это понять :

1. Какой смысл должна нести данная иконка.

2. В каком стиле она должна быть выполнена.  

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

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

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

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

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

Иконки для приложения

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

6 супертрендов для создания логотипов в 2019 году

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

Иконки для приложений должны создаваться по установленным гайдам, иначе зачем? Также существуют иконки для Tab Bar, навигации, toolbar, поиска, статуса и прочее. Они также имеют свои размеры.

For Fun

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

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

А может, уже и появилась. Я-то не знаю, я просто продолжаю рисовать, вот и все.

Как создать значок в Windows 10 [Полное руководство]

Все, что вам нужно для создания собственных значков, — это одно приложение для художественного (или графического) дизайна.

Windows 10 включает приложения для 3D-дизайна Paint и Paint. Вы можете установить новые значки с помощью любого программного обеспечения. Однако Paint 3D — это более оснащенный пакет, поскольку он позволяет пользователям добавлять к своим значкам трехмерные формы и наклейки.

Как сделать собственный значок в Windows 10?

1. Создайте значок с помощью Paint 3D

Настроить холст

1. Сначала нажмите кнопку Start .
2. Щелкните Paint 3D в указателе программного обеспечения меню «Пуск».
3. Щелкните Новый в Paint 3D.
4. Выберите Canvas, чтобы открыть параметры, показанные непосредственно ниже.
5. Введите 32 в оба поля Ширина и Высота, чтобы изменить размер холста до 32 x 32.
6. Прокрутите колесико мыши, чтобы увеличить масштаб и развернуть холст.
7. Включите опцию Прозрачный холст .

Дизайн иконы

1. Вы можете нарисовать изображение на холсте значка, выбрав Кисти .Вам нужно будет выбрать Marker или Pixel Pen с толщиной 1 пиксель.
2. Чтобы добавить линии и двухмерные фигуры, выберите вкладку 2D-фигуры. Затем выберите там линию, кривую или форму.

Вкладка «3D-фигуры»

3. Paint 3D включает в себя множество вариантов добавления трехмерных фигур и моделей к вашему значку. Щелкните 3D-фигуры, чтобы открыть эту вкладку.
4. Выберите параметр 3D-объекта или модели на боковой панели. Затем, удерживая левую кнопку мыши, перетащите курсор вправо, чтобы развернуть выбранную фигуру так, чтобы она поместилась на холсте вашего значка.
5. Щелкните фигуру на холсте, чтобы открыть параметры ее поворота, как на снимке ниже.

Настройте свой значок с помощью стикеров

1. Paint 3D также включает относительно небольшую коллекцию наклеек, которые можно использовать для значков. Перейдите на вкладку «Наклейки».
2. Выберите наклейку для значка.
3. Щелкните за пределами области холста значка в левой части окна, чтобы добавить выбранный стикер.
4. Щелкните левой кнопкой мыши в верхнем правом углу наклейки и перетащите мышь влево, чтобы уменьшить изображение до размеров холста.
5. Выберите изображение и, удерживая кнопку мыши, перетащите его на холст.
6. Нажмите кнопку Make 3D , чтобы применить 3D-эффект. Наклейку можно вращать так же, как 3D-фигуры.
7. Вы можете нажать Пользовательские наклейки > Добавить наклейки , чтобы выбрать загруженные картинки для ваших значков.

Настройте свой значок с помощью 3D-объектов

1. Paint 3D также содержит коллекцию 3D-изображений, которые вы можете добавить к своим значкам.Щелкните Библиотека 3D, чтобы просмотреть различные категории изображений.
2. Щелкните изображение, чтобы добавить его на холст.
3. Возможно, вам потребуется значительно уменьшить масштаб выбранного изображения, чтобы оно поместилось на холсте значка. Чтобы уменьшить изображение, щелкните его верхний правый угол, удерживайте левую кнопку мыши и перетащите курсор влево.

Сохранить дизайн иконки как изображение

1. Когда вы закончите дизайн значка, нажмите Меню > Сохранить как > Изображение .
2. Если вы добавили 3D-модель к своему значку, откроется предварительный просмотр изображения, как на снимке ниже. Выберите PNG в меню Сохранить как тип .
3. Нажмите кнопку Сохранить .
4. Выберите папку для сохранения изображения PNG.
5. Выберите 2D — PNG в качестве формата файла.
6. Введите заголовок для изображения и выберите опцию Сохранить .

Хотите упростить процесс создания иконок? Ознакомьтесь с нашим 6 лучшим руководством по программному обеспечению для создания иконок

2.Как преобразовать JPEG в значок в Windows 10?

1. Файлы PNG, JPEG и JPG можно преобразовать в значки на веб-сайте Online-Convert. Итак, откройте страницу онлайн-преобразования изображений на этом веб-сайте в браузере.
2. Щелкните Выберите файлы , чтобы выбрать значок PNG, который вы установили в Paint 3D.
3. Нажмите кнопку Начать преобразование .
4. Затем нажмите кнопку Загрузить .

3. Как добавить новые значки на рабочий стол

1. Теперь вы можете добавить новый значок на рабочий стол Windows 10.Для этого щелкните правой кнопкой мыши по ярлыку, уже находящемуся на рабочем столе, и выберите Properties .
2. В открывшемся окне выберите вкладку «Настроить».
3. Нажмите кнопку Изменить значок .
4. Нажмите кнопку Обзор в окне «Изменить значок».
5. Затем выберите файл ICO в папке, в которую он загружен.
6. Нажмите кнопку Открыть .
7. Нажмите ОК в окне «Изменить значок».
8. Наконец, выберите опцию Применить .
9. Нажмите ОК , чтобы закрыть окно.
10. Теперь ваш собственный значок заменит оригинальный на рабочем столе. Значок сердца на снимке ниже был создан с помощью Paint 3D.

Итак, вот как вы можете создавать свои собственные значки с помощью Paint 3D.

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

В нашем руководстве по созданию значков содержится подробная информация о лучшем программном обеспечении для создания значков для Windows 10.

6 простых шагов к лучшему дизайну иконок — Smashing Magazine

Об авторе

Скотт Льюис — руководитель отдела контента Iconfinder.com, а также профессиональный дизайнер иконок. Скотт получил степень в области графического дизайна в Восточной Каролине.
Больше о
Скотт
↬

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

В этой статье рассматривается набор рекомендаций по проектированию в шесть этапов. Шаги соответствуют основам дизайна звуковых иконок, включая последовательность, разборчивость и ясность. Принципы эффективного дизайна значков подробно обсуждались дизайнером иконок Джоном Хиксом из Hicks Design в его книге «Справочник по значкам», а также Google в его рекомендациях по материальному дизайну для системных значков. Шесть шагов, обсуждаемых в этой статье , следует рассматривать как руководство, а не как догматический список правил .Чтобы стать великим дизайнером, нужно научиться, когда нарушать правила, а когда им следовать, как мы продемонстрируем здесь.

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

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

Дополнительная литература по SmashingMag:

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

Переделка значка

В примерах изображений, которые следуют в этой статье, шесть обсуждаемых шагов будут применены к переработке значка собаки (точнее, корги), который был недавно отправлен Iconfinder пользователь по имени Кем Бардли. У иконы был потенциал, но она была недостаточно отполирована, чтобы считаться «премиальным качеством».«Мы дали Кему несколько простых советов, которым нужно следовать, и после небольшой доработки его значки были готовы к утверждению в качестве премиального набора значков. На изображении ниже показаны версии значка Кеми до и после. В следующих разделах мы объясним, как методично переходить от «до» к «после».

На изображении слева вверху показан исходный значок. На изображении справа показан обновленный значок, реализующий принципы, изложенные в этой статье. (Изображение: Кем Бардли)

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

Три атрибута эффективного дизайна значков

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

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

Форма

Форма — это основная структура значка или способ ее создания. Если вы проигнорируете детали значка и проведете линию вокруг основных фигур, образуют ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Основные геометрические формы — круг, квадрат и треугольник — создают визуально стабильную основу для дизайна иконок.В нашем примере с корги Кем Бардли голова собаки состоит из двух треугольников и двух эллипсов. Точно так же, как если бы кто-то начал рисовать с наброска самых больших и простых форм, а затем уточнял их в сторону большей и большей детализации, можно начать иконку с самых простых форм, а затем добавить больше деталей — но только столько деталей, сколько необходимо для передачи концепции. быть представленным, будь то объект, идея или действие.

Ключевые линии на этом изображении показывают основные лежащие в основе формы, которые определяют форму дизайна.(Изображение: Кем Бардли)

Aesthetic Unity

Элементы, общие для одного значка и для набора значков, представляют собой то, что мы называем эстетическим единством. Это такие элементы, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. Д.), Ограниченный и постоянный вес линий (2 пикселя, 4 пикселя и т. Д.), Стиль (плоский, линейный, заполненный линия или глиф), цветовую палитру и многое другое. Эстетическое единство набора — это набор элементов дизайна и / или вариантов, которые вы повторяете на протяжении всего набора, чтобы визуально связать его в единое целое.Обратите внимание, что в приведенных ниже примерах каждая из трех собак из набора Кем имеет общие элементы, такие как закругленные углы на 2 пикселя, обводка толщиной 2 пикселя вокруг морд собак и носы в форме сердечек.

Эти три иконки с собаками имеют общие элементы дизайна и стиля, создавая эстетическое единство. (Изображение: Кем Бардли)

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

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

Уникальные качества каждой собаки делают ее индивидуально узнаваемой, а общий дизайн и элементы стиля делают ее узнаваемой как единое целое. (Изображение: Кем Бардли)

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

Шесть шагов

Всегда начинайте с сетки

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

Здесь мы видим сетку размером 32 × 32 пикселя с 2-пиксельной границей (или «запретной зоной») для передышки.

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

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

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

Выравнивание круглых значков с сеткой и ключевыми линиями (Изображение: Скотт Льюис)

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

Выравнивание и размер круглых и квадратных значков относительно сетки (Изображение: Скотт Льюис)

Внутри 32-пиксельного квадрата вы увидите вертикальный и горизонтальный прямоугольники размером 20 × 28 пикселей. Мы свободно следуем этим прямоугольникам для значков, которые имеют горизонтальную или вертикальную ориентацию, и пытаемся сделать размеры любых значков ориентированными таким образом, чтобы они соответствовали размерам этих прямоугольников 20 × 28 пикселей.

Выравнивание и размер вертикально и горизонтально ориентированных значков относительно сетки (Изображение: Скотт Льюис)

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

Выравнивание и размер диагонально ориентированного значка относительно сетки (Изображение: Скотт Льюис)

Помните, что вам не нужно каждый раз точно следовать сетке и направляющим.Сетка предназначена для того, чтобы помочь вам сделать значки согласованными, но если вам нужно выбрать между улучшением значка и соблюдением правил, нарушайте правила — просто делайте это экономно. Как сказал Хеммо де Йонге, более известный под ником Dutch Icon:

Сущность отдельной иконы перевешивает важность сплоченности.

Начните с простых геометрических фигур

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

Вот основные геометрические фигуры, два треугольника и два эллипса, которые составляют иконку Корги.

В цифрах: кромки, линии, углы, кривые и углы

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

Углы

В большинстве случаев придерживайтесь углов в 45 градусов или кратных им. Сглаживание под углом 45 градусов равномерно ступенчато (активные пиксели выровнены встык), поэтому результат получается четким, а идеальная диагональ этого угла представляет собой легко узнаваемый узор, который очень нравится человеческому глазу. Этот узнаваемый узор обеспечивает согласованность набора значков и единство в рамках одного значка. Если ваш дизайн требует нарушить это правило, попробуйте сделать это пополам (22.5 градусов, 11,25 и т. Д.) Или кратные 15 градусам. Каждая ситуация индивидуальна, поэтому решайте ее индивидуально. Преимущество использования половин в 45 градусов заключается в том, что сглаживание по-прежнему будет довольно равномерным.

Крупный план обычного сглаживания под углом 45 градусов

Кривые

Одна из наиболее заметных областей, которые могут ухудшить качество значка, и это может означать, что разница между профессиональным и любительским видом меньше -чеме совершенные кривые.В то время как человеческий глаз может обнаруживать очень незначительные отклонения в точности, зрительно-моторная координация не всегда может обеспечить высокий уровень точности. Чтобы создавать кривые как можно больше, полагайтесь на инструменты фигур и числа, а не на рисование их вручную. Когда вам действительно нужно нарисовать кривую вручную, используйте клавишу-модификатор ограничений Adobe Illustrator (или вашего векторного программного обеспечения) (клавишу Shift) или, что еще лучше, используйте VectorScribe и InkScribe от Astute Graphics для еще более точного управления кривыми Безье.

Рисование углов вручную дает худшие результаты.(Изображение: Кем Бардли)

Как мы видим на изображении «до», нарисованные от руки линии создают неправильные кривые, которые снижают качество дизайна.

Эти очень точные кривые были созданы с помощью инструментов Безье в Illustrator, а не рисовались вручную.

Углы

Обычное значение закругленного угла (или радиуса) составляет 2 пикселя. В значке размером 32 × 32 пикселя радиус в 2 пикселя достаточно велик, чтобы его можно было ясно увидеть как закругленные, но он не настолько смягчает углы, чтобы изменить индивидуальность дизайна (придавая ему вид «пузыря»).Значение, которое вы выберете, будет зависеть от индивидуальности, которую вы хотите придать дизайну. Использование закругленных углов — это эстетическое решение, которое необходимо принять с учетом общей эстетики набора.

Точно скругленные углы

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

Прогресс нашего переработанного значка Corgi

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

Pixel-Perfection

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

Как уже упоминалось, лучше всего подходят углы в 45 градусов (после прямых линий), потому что пиксели, используемые для определения угла, сгруппированы или расположены ступенчато, вплотную друг к другу по диагонали.То же самое и с углами и кривыми: чем они точнее математически, тем четче будет сглаживание. Однако обратите внимание, что совершенство пикселей менее актуально, по крайней мере, для сглаживания, при больших размерах и на экранах с более высоким разрешением, таких как дисплеи Retina.

Весы лески

Когда дело доходит до веса лески, идеально подходят две, но иногда необходимы три. Цель состоит в том, чтобы обеспечить визуальную иерархию и разнообразие, не привнося слишком много разнообразия и, таким образом, разрушая согласованность набора.Более трех и набор может потерять связность. Преимущество 2- и 4-пиксельных весов линий заключается в том, что они кратны 2 и, следовательно, легко масштабируются вверх и вниз с равными приращениями. В большинстве случаев избегайте очень тонких линий, особенно в глифах и плоских значках. Если вы намеренно не создаете значки «стиля линии», полагайтесь на свет и тень, а не на линии, чтобы определить форму.

Этот значок iPhone демонстрирует одинаковый вес линий. (Изображение: Скотт Льюис)

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

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

Использование общих элементов дизайна (Изображение: Dutch Icon)

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

Использование общих элементов дизайна с нашими значками собак (Изображение: Кем Бардли)

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

Использование общих элементов дизайна в наших пиктограммах с собаками, но с другим стилем (Изображение: Kem Bardly)

Используйте детали и украшения с осторожностью

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

Минимальная детализация сообщает, что это за объект. (Изображение: Кем Бардли)

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

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

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

Нос в форме сердца на корги делает эту икону уникальной и индивидуальной. (Изображение: Кем Бардли)

На последнем изображении «после» мы видим уникальный штрих в форме сердца, который придает дизайну нотку новизны и беззаботности.

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

На изображении слева вверху показан исходный значок. На изображении справа показан обновленный значок, реализующий принципы, изложенные в этой статье. (Изображение: Кем Бардли)

Заключение

Мы поделились основами создания значков премиум-качества. Эти основы — технические навыки; каждый может изучить и освоить их с практикой. Помните, что для создания лучших иконок начните с общего (форма) и двигайтесь к конкретному (узнаваемость). И сохраняйте свои значки внутренне согласованными, а также согласованными во всем наборе, обращая внимание на общие элементы (эстетическое единство) значка или набора.Освоив технические основы, вы можете сосредоточить свою энергию на том, что действительно выделяет значок: на своем уникальном творческом видении.

У вас есть собственные методы, советы или основы, которыми вы хотели бы поделиться? Оставляйте их в комментариях ниже.

Дополнительная литература

(ah, ml, al, il)

Создание значков — загрузка в векторном формате, PNG, SVG, GIF

Создание значков — загрузка в векторном формате, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Поиск

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Анимированные

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создавать

+
Коллекция

Создать иконку

+
Коллекция

Создать иконку

+
Коллекция

Как: создать значок или другое изображение

• 15.02.2019
• 10 минут на чтение

В этой статье

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

Значки и курсоры: ресурсы изображений для устройств отображения

Значки и курсоры — это графические ресурсы, которые могут содержать несколько изображений разных размеров и цветовых схем для разных типов устройств отображения. У курсора также есть активная точка — это место, которое Windows использует для отслеживания его положения. И значки, и курсоры создаются и редактируются с помощью редактора изображений Image Editor , а также растровые изображения и другие изображения.

Когда вы создаете новый значок или курсор, Image Editor сначала создает изображение стандартного типа. Изображение изначально заполняется экранным (прозрачным) цветом. Если изображение представляет собой курсор, горячая точка изначально находится в верхнем левом углу с координатами 0,0 .

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

Создать образ устройства (значок или курсор)

Когда вы создаете новый значок или ресурс курсора, Image Editor сначала создает изображение в определенном стиле (32 × 32, 16 цветов для значков и 32 × 32, монохромный для курсоров).Затем вы можете добавлять изображения разных размеров и стилей к исходному значку или курсору и при необходимости редактировать каждое дополнительное изображение для различных устройств отображения. Вы также можете редактировать изображение, используя операцию вырезания и вставки из существующего типа изображения или из растрового изображения, созданного в графической программе.

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

Диалоговое окно New Image Type позволяет создать новый образ устройства указанного типа.Чтобы открыть диалоговое окно Новое изображение <устройство> , перейдите в меню Изображение > Новый тип изображения . Включены следующие свойства: Target Image Type и Custom .

Свойство Target Image Type перечисляет доступные типы изображений, в которых вы выбираете тип изображения, который хотите открыть:

16 x 16, 16 цветов
32 x 32, 16 цветов
48 x 48, 16 цветов
64 x 64, 16 цветов
96 x 96, 16 цветов

16 x 16, 256 цветов
32 x 32, 256 цветов
48 x 48, 256 цветов
64 x 64, 256 цветов
96 x 96, 256 цветов

16 x 16, монохромный
32 x 32, монохромный
48 x 48, монохромный
64 x 64, монохромный
96 x 96, монохромный

Примечание

Любые существующие изображения не будут отображаться в этом списке.

Свойство Custom открывает диалоговое окно Custom Image , в котором вы можете создать новое изображение с нестандартным размером и количеством цветов.

Диалоговое окно Custom Image позволяет вам создать новое изображение с нестандартным размером и количеством цветов. Включены следующие объекты недвижимости:

Используйте диалоговое окно Open Image , чтобы открывать образы устройств в проектах C ++. В нем перечислены существующие образы устройств в текущем ресурсе (изображения, которые являются частью текущего ресурса).Следующее имущество включено:

Чтобы создать новый значок или курсор

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображений в .rc , например, курсора, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый . Для значков это действие создает ресурс значка с 16-цветным значком 32 × 32. Для курсоров создается монохромное (2-цветное) изображение размером 32 × 32.

   Если знак плюса ( + ) отображается рядом с типом ресурса изображения в диалоговом окне Вставить ресурс , это означает, что доступны шаблоны панели инструментов.Щелкните значок плюса, чтобы развернуть список шаблонов, выберите шаблон и выберите Новый .

Чтобы добавить изображение для другого устройства отображения

1. Перейдите в меню Image > New Device Image или щелкните правой кнопкой мыши на панели Image Editor и выберите New Device Image .

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

Чтобы скопировать образ устройства

1. Перейдите в меню Изображение > Откройте образ устройства и выберите изображение из текущего списка изображений. Например, выберите 16-цветную версию значка 32 × 32.

2. Скопируйте текущее отображаемое изображение значка ( Ctrl + C ).

3. Откройте другое изображение значка в другом окне Image Editor . Например, откройте 16-цветную 16-цветную версию значка.

4. Вставьте изображение значка ( Ctrl + V ) из ​​одного окна Image Editor в другое. Если вы вставляете больший размер в меньший, вы можете использовать маркеры значков, чтобы изменить размер изображения.

Для удаления образа устройства

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

Примечание

Когда вы нажимаете клавишу Del , изображения и цвета, которые вы нарисовали на значке, удаляются, но значок остается, и теперь вы можете изменить его дизайн. Если вы по ошибке нажали Del , нажмите Ctrl + Z , чтобы отменить действие.

Для создания прозрачных или инверсных областей на изображениях устройств

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

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

Примечание

Диалоговые окна и команды меню, которые вы видите, могут отличаться от описанных в Help в зависимости от ваших активных настроек или выпуска. Чтобы изменить настройки, перейдите в меню Инструменты > Импорт и экспорт настроек . Дополнительные сведения см. В разделе Персонализация интегрированной среды разработки Visual Studio.

Для создания прозрачных или инверсных областей

1. В окне Цвета выберите селектор Цвет экрана или Инверсный цвет .

2. Примените экранный или инвертированный цвет к изображению с помощью инструмента рисования. Дополнительные сведения об инструментах рисования см. В разделе Использование инструментов рисования.

Для изменения цвета экрана или инвертирования

1. Выберите либо селектор Screen-Color , либо селектор Inverse-Color .

2. Выберите цвет из палитры Цвета в окне Цвета .

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

Использовать 256-цветовую палитру

С помощью редактора изображений Image Editor значки и курсоры могут быть большого размера (64 × 64) с 256-цветной палитрой на выбор. После создания ресурса выбирается стиль образа устройства.

Для создания 256-цветного значка или курсора

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображений в .rc , например, курсора, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый .

3. Перейдите в меню Изображение > Новое изображение устройства и выберите нужный стиль 256-цветного изображения.

Выбор цвета из 256-цветовой палитры для больших значков

Чтобы рисовать с выбором из 256-цветовой палитры, необходимо выбрать цвета из палитры Цвета в окне «Цвета».

1. Выберите большой значок или курсор или создайте новый большой значок или курсор.

2. Выберите цвет из 256 цветов, отображаемых в палитре Цвета в окне Цвета .

   Выбранный цвет станет текущим цветом в палитре Цвета в окне Цвета .

   Примечание

   Исходная палитра, используемая для 256-цветных изображений, соответствует палитре, возвращаемой Windows API CreateHalftonePalette .Все значки, предназначенные для оболочки Windows, должны использовать эту палитру, чтобы предотвратить мерцание во время реализации палитры.

Для установки активной точки курсора

Активная точка курсора — это точка, на которую Windows ссылается при отслеживании положения курсора. По умолчанию активная точка устанавливается в верхнем левом углу курсора с координатами 0,0 . Свойство Hotspot в окне «Свойства» показывает координаты горячей точки.

1. На панели инструментов редактора изображений выберите инструмент Установить точку доступа .

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

   Свойство Hotspot в окне Properties отображает новые координаты.

Для создания и сохранения растрового изображения в формате .gif или .jpeg

При создании растрового изображения изображение создается в формате растрового изображения (.bmp). Однако вы можете сохранить изображение в формате GIF, JPEG или в других графических форматах.

Примечание

Этот процесс не применяется к значкам и курсорам.

1. Перейдите в меню Файл > Откройте , затем выберите Файл .

2. В диалоговом окне New File выберите папку Visual C ++ , затем выберите Bitmap File (.bmp) в поле Templates и выберите Open .

   Растровое изображение открывается в редакторе изображений .

3. При необходимости внесите изменения в новое растровое изображение.

4. Пока растровое изображение все еще открыто в редакторе изображений , перейдите в меню Файл > Сохранить имя файла .bmp As .

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

6. Выберите Сохранить .

Для преобразования изображения из одного формата в другой

Вы можете открывать изображения в формате GIF или JPEG в редакторе изображений и сохранять их как растровые изображения. Кроме того, вы можете открыть файл растрового изображения и сохранить его в формате GIF или JPEG.Изображения, с которыми вы работаете, не обязательно должны быть частью проекта для редактирования в среде разработки (см. Автономное редактирование изображений).

1. Откройте изображение в редакторе изображений .

2. Перейти в меню Файл > Сохранить имя файла как .

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

4. Выберите Сохранить .

Чтобы добавить новый ресурс изображения в неуправляемый проект C ++

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображения в файле .rc , такой как курсор, вы можете просто щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите тип ресурса изображения, который вы хотите создать (например, Bitmap ), затем выберите New .

   Если знак плюса ( + ) отображается рядом с типом ресурса изображения в диалоговом окне Вставить ресурс , это означает, что доступны шаблоны панели инструментов. Щелкните значок плюса, чтобы развернуть список шаблонов, выберите шаблон и выберите Новый .

Чтобы добавить новый ресурс изображения в проект на языке программирования .NET

1. В обозревателе решений щелкните правой кнопкой мыши папку проекта (например, WindowsApplication1 ).

2. В контекстном меню выберите Добавить , затем выберите Добавить новый элемент .

3. На панели Категории разверните папку Локальные элементы проекта , затем выберите Ресурсы .

4. На панели Templates выберите тип ресурса, который вы хотите добавить в свой проект.

   Ресурс добавляется в ваш проект в Solution Explorer , и ресурс открывается в редакторе изображений.Теперь вы можете использовать все инструменты, доступные в редакторе изображений Image Editor , для изменения вашего изображения. Дополнительные сведения о добавлении изображений в управляемый проект см. В разделе Загрузка изображения во время разработки.

Требования

Нет

См. Также

Редактор изображений для значков
Практическое руководство. Редактирование изображения
Практическое руководство. Использование инструмента рисования
Практическое руководство. Работа с цветом
Клавиши акселератора

Руководство дизайнера пользовательского интерфейса по дизайну значков приложений (бесплатный набор значков)

Важность иконографии

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

Иконки — важная часть нашей повседневной жизни. Посмотрите вокруг, и вы увидите столько же инструкций, сколько и иконографию. Это настолько важная часть нашего мира, что даже в фильмах есть правдоподобные системы иконок. Посмотрите Typeset In The Future: The Alien Edition.

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

Что вы узнаете

Это руководство создано, чтобы помочь дизайнерам создать свой собственный набор значков, который поможет им реализовать свое видение. Он наполнен полезными советами, передовыми методами и руководствами по тому, как мы делаем что-то в Headway.

‍

Перед тем, как начать

Какие значки вам нужны для успеха?

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

Создаете или находите набор иконок?

Создание полного набора значков поможет вам добиться единообразия во всем приложении. Если вы не хотите создавать его с нуля, существуют инструменты, которые помогут вам найти полные наборы значков. Noun Project и Iconfinder — отличные ресурсы, если вы ищете полный пакет. Если вы не хотите создавать набор, приведенный ниже, все же есть несколько отличных моментов, на которые стоит обратить внимание в пакете.

Получите бесплатный набор значков

здесь 🤙🏼

‍

Идеи для набросков и сборка наборов

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

Если вы ищете вдохновения, загляните в такие места, как Dribbble, Iconfinder и Noun Project, чтобы узнать, что делают другие.Эти ресурсы бесценны, поэтому используйте их. Когда дело доходит до Noun Project или Icon Finder, если у вас есть подписка, вы также можете захватывать значки и размещать их в своем наборе в качестве заполнителей, пока не закончите свой набор. Подобный выбор комплектов поможет вам начать думать о своей системе в целом.

Ресурсы для вдохновения при разработке значков

‍

Стили значков

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

Давайте рассмотрим три элемента дизайна, которые влияют на стиль иконок.

Штрих

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

Заливка

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

Цвет

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

‍

Рекомендации по дизайну значков

Анатомия хорошей системы значков и значков

Хорошая система значков согласуется не только друг с другом, но и с общим дизайном их окончательного размещения.

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

Принципы создания значков в материальном дизайне

Руководства по значкам и изображениям iOS

‍

Размер значка

При создании значков должны соблюдаться некоторые основные рекомендации по размеру. Примите во внимание устройство, на котором будут отображаться эти значки, и способ взаимодействия (мышь или прикосновение, а в большинстве случаев и то, и другое). Придерживаясь значка 24×24 пикселей, можно начать с середины значка дороги.Если вы хотите что-то меньшее, значок 20×20 пикселей также хорош и отлично работает для плотных дисплеев, где мышь будет основным методом взаимодействия.

‍

Сетка значков

Сетка значков, независимо от того, как вы ее создаете, должна быть сеткой в ​​1 пиксель. Начиная с квадрата 24×24 пикселей, вы сможете создавать иконки независимо от платформы. Большинство инструментов дизайна позволяют экспортировать ресурсы в 2 раза, чтобы вы могли легко достичь минимума 48×48 пикселей, установленного Apple. Если вам нужны значки меньшего размера на платформе, такой как Интернет, вы также можете попробовать сделать значки плотными и настроить сетку на 20×20 пикселей.

‍

Область содержимого

Сохранение периметра в 2 пикселя внутри базовой сетки не дает значкам тесноты. Например, ваш контент на значке 24 пикселей не должен превышать 20 пикселей. Точно так же на более мелком / плотном значке они не должны превышать область содержимого 18 пикселей. Это также уменьшит размер цели, но создаст более крупный хит-бокс и поможет с некоторой базовой точностью выбора.

‍

Padding

В вашем значке этот периметр 2 пикселя действует как отступ, встроенный прямо в сам значок.

‍

Размещение и области касания

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

Например, если у вас значок 24 пикселей, сенсорные области должны иметь размер 48 пикселей. Если у вас есть значок 20 пикселей, сенсорная область должна быть 40 пикселей. Эта сенсорная область может быть встроена непосредственно в ваши значки при создании системы значков для удобного размещения или может быть частью вашего набора пользовательского интерфейса в вашем компоненте значков.

‍

Лучшие практики для дизайна иконок

Вот несколько лучших практик, которые мы определили как команда в Headway.

Обводка

• Ширина обводки — Всегда сохраняйте одинаковую толщину обводки, обычно мы выбираем обводку 1 или 2 пикселя.
• Размещение обводки — Сохранение обводки по центру позволит сохранить согласованность дизайна между закрытыми векторными формами и открытыми.
• Пиксельные направляющие — Когда у вас есть пиксельная направляющая, следите за тем, чтобы мазок находился в центре пикселя, это поможет вам избежать размытых линий на самых маленьких размерах PNG.Поскольку он не пытается рисовать между 2 пикселями.
• Интервал — между элементами должен быть примерно одинаковой ширины. Придерживаясь промежутка в 2 пикселя, вы сохраните хорошее пространство для негативного пространства и сохраните видимость.
• Колпачки — Большинство инструментов позволяют выбрать, какой тип колпачков вам нужен. Вы можете закруглить концы или оставить их квадратными. В зависимости от стиля, который вы выберете, каждый из них будет работать, просто помните, что при добавлении кепки вы добавляете заливку примерно на один пиксель в конец каждого вектора.
• Углы — Каждый инструмент позволит вам изменить способ работы углов. Вы можете оставить их по умолчанию, которые будут производить жесткие углы 90 градусов, есть также закругленные и угловые.

Заполнено

• Интервал — Когда дело доходит до значков с заливкой, самое важное, на что следует обращать внимание, — это использование отрицательного пространства. Сохранение зазора в 2 пикселя в большинстве пятен поможет создать красивое негативное пространство.
• Уловки со смещением — Такие уловки, как смещение линии, могут помочь сохранить негативное пространство на одной стороне, и вам не придется беспокоиться о том, чтобы использовать слишком много места.(прорезанный глаз)

Цвет

• Одноцветный — Лучше всего использовать один цвет для ваших значков. Если вам нужно иметь разные состояния, лучшим вариантом будет создание второго набора с изменениями. Поскольку мобильный телефон по-прежнему использует файлы PNG, вам придется экспортировать все состояния ваших значков.
• Многоцветный — Использование многоцветных значков может помочь создать иерархию между вашими значками, например, добавление некоторого цвета к стрелке на значке отправки может привлечь внимание к этому значку, когда он находится среди набора значков.

Размер и масштабирование

• Обводка по сравнению с вектором — когда дело доходит до уменьшения размера значков или увеличения их размера, нужно подумать о двух вещах. Если вы хотите, чтобы обводка всегда была равномерной, независимо от размера, вы можете установить для линий значение обводки в выбранном вами инструменте. Если вам не нужны одинаковые веса, вы можете свернуть фигуры в векторный объект или использовать .svg. Тогда вес линии будет масштабироваться в соответствии с размером фигуры.

Экспорт

PNG

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

• Прозрачность — мы должны убедиться, что фоны прозрачны, чтобы мы могли легко размещать эти объекты
• Цвет — если наши значки меняют цвета для состояний, нам нужно убедиться, что мы экспортируем каждый вариант этого значка .
• Размер — при экспорте файлов PNG на мобильное устройство потребуется несколько размеров.
• iOS потребует 3 общих размера.
• 24×24 @ 1x
• 48×48 @ 2x
• 72×72 @ 3x
• Android потребует всего 5 размеров.
• 48 × 48 (mdpi)
• 72 × 72 (hdpi)
• 96 × 96 (xhdpi)
• 144 × 144 (xxhdpi)
• 192 × 192 (xxxhdpi)

‍

SVG

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

Контрольный список подготовки SVG, который поможет вам подготовить значки к экспорту.

‍

Условные обозначения для значков

Наше стандартное соглашение об именах соответствует этому основному формату:

ico — имя глифа — модификатор @ масштабный коэффициент. Формат файла

Пример: ico-search-dark @ 2x.svg

‍

Почему мы следуем этому соглашению об именах

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

• Ico — сообщает команде, что это файл значка
• Имя символа — описательное имя значка
• Модификатор — Чем этот значок может отличаться от базовой версии
• Это очень важен для мобильных устройств, поскольку в настоящее время мы все еще используем файлы .PNG на мобильных устройствах.
• Коэффициент масштабирования — ваши инструменты должны автоматически добавлять его в конец файла, когда вы настраиваете несколько экспортов. Это позволит устройствам выбрать нужный размер значков и будет экспортировать значки с этим коэффициентом масштабирования.Например, версия @ 2x значка 24px будет экспортировать с разрешением 48×48 пикселей
• Формат файла — Ваш инструмент также добавит это к имени файла, когда вы выберете, какой тип значка вы экспортируете. Просто помните, что .PNG — это файл растрового изображения, а .SVG — векторный.

‍

Работа в Figma — создание и управление значками

Использование фреймов

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

Сетки

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

Векторная сеть

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

Сворачивание фигуры

Если вы создаете сложную форму значка и используете маски и несколько векторных фигур, вы можете свернуть свою фигуру, нажав CMD + E.

Обводка

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

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

‍

Free Icon Pack — Загрузите

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

👉 Получите бесплатный Icon Pack

🤙🏼

‍

Следующие шаги — от значков до наборов пользовательского интерфейса

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

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

‍

/ глава: Создание значков / INKSCAPE

Inkscape: CreateIcon

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

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

Создать новый файл значков

Сначала откройте Inkscape и создайте новый файл. Щелкните меню файла F и выберите « N ew», а затем «icon_32x32».

Затем откроется новый пустой файл с сеткой в ​​этом примере:

Сетка представляет собой блочную сетку 32×32, такого же размера, как и многие значки, которые вы найдете на своем компьютере.Линии в этой сетке не появятся, когда окончательное изображение будет экспортировано в файл другого типа, например JPEG или GIF. Сетка предназначена только для того, чтобы помочь вам создать квадратный значок со стандартными размерами 32×32 пикселей. Можно добавить или удалить сетку с помощью меню ‘V iew> G rid’ .

Сохранить файл

Перед началом работы рекомендуется сначала сохранить файл. Несмотря на то, что содержимое файла пустое, рекомендуется всегда сохранять файл перед запуском, чтобы можно было легко сохранить изменения по мере продвижения.Таким образом вы не потеряете свою работу, если ваш компьютер выйдет из строя или непреднамеренно выключится. Сохраните файл, нажав « F ile» и «Сохранить как …»:

Откроется диалоговое окно. Стиль вашего диалога может отличаться от следующего:

Вы можете изменить имя файла на любое другое, чтобы облегчить его идентификацию (в приведенном выше примере это «drawing.svg»). Убедитесь, что при сохранении имя файла имеет в конце .svg.Вы также можете щелкать по папкам на вашем компьютере с помощью этого диалогового окна, пока не найдете папку, в которой вы хотите сохранить файл. Когда у вас появится нужное место, нажмите «Сохранить».

Использование окна предварительного просмотра значков

Если вы собираетесь экспортировать изображение в растровую версию и использовать его по нескольким причинам, может быть важно знать, как оно будет выглядеть в виде значка в процессе создания. Поэтому Inkscape имеет дополнительную функцию предварительного просмотра растровых изображений.Это окно позволит вам увидеть, как будет выглядеть ваш значок в видах с обычным размером 16×16, 24×24, 32×32, 48×48 и 128×128. Находится в меню через: View> Ico n Preview …

Начать работу

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

Начнем с создания круга на заднем плане.Выберите инструмент круга на панели инструментов слева от Inkscape:

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

У вас может быть темная линия за пределами круга. Если вы это сделаете, мы скоро рассмотрим, как это удалить. А пока изменим цвет круга на желаемый.Я выберу цветовой код HTML # ff7f00. Вы можете выбрать другой цвет. Чтобы изменить цвет круга, вы должны щелкнуть правой кнопкой мыши по кругу и выбрать «Заливка и обводка»:

Должен появиться следующий диалог:

Я знаю, что цветовой код HTML эквивалентен коду RGB + ‘ff’. Поэтому я добавлю ff7f00ff в поле RGBA внизу:

Если вы знаете свой цветовой код HTML, добавьте его сюда. В противном случае вы можете использовать ползунки RGB для выбора цвета.При изменении значений вы увидите, что цвет круга одновременно изменится. Если при создании у вас была линия вокруг внешней части круга, теперь вы можете удалить ее, щелкнув вкладку «Stroke st y le» и установив в поле «Ширина» (вверху вкладки) значение 0. (ноль) пикселей. Когда вас устраивает цвет круга, просто переместите диалоговое окно «Заливка и обводка» в сторону (если у вас достаточно места на экране) или закройте его. Мы будем использовать его еще раз чуть позже.

Мой цветной круг теперь выглядит так:

Теперь мы хотим добавить радио в середину нашего круга.Сначала мы добавим черный ящик с закругленными углами в середину круга. Нажмите на инструмент «Квадрат и прямоугольник» слева:

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

Теперь вернитесь в диалоговое окно «Заливка и обводка» и измените значение поля RGBA (на вкладке «Заливка») на «000000ff»:

Теперь квадрат должен стать черным:

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

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

Щелкните по кругу, когда он красный, и перетащите его вертикально вниз, и при перетаскивании вы измените все углы черного ящика на закругленные. Когда вас устраивает размер округления, отпустите кнопку мыши:

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

Теперь нам нужна антенна вверху справа. Мы воспользуемся карандашом, который вы также найдете на левой панели инструментов:

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

Теперь мы хотим придать антенне красивый круглый кончик, поэтому мы возвращаемся в диалоговое окно «Заливка и обводка» и смотрим на вкладку «Стиль обводки».Вы заметите здесь раздел «шапка»:

Щелкните по средней рамке в этом разделе, и ваша антенна мгновенно округлится:

Экспорт в PNG

Теперь мы экспортируем это в PNG. Вы можете использовать другой формат графического файла, однако Inkscape поддерживает экспорт только в PNG. Чтобы преобразовать изображение в другой формат, вам потребуется программное обеспечение для работы с изображениями, такое как GIMP .

Выберите « F файл» и «Экспорт растрового изображения»… ‘:

Вы увидите следующее диалоговое окно:

Если вы прямо сейчас нажали «Экспорт», вы бы экспортировали PNG 32×32 в папку «/ home / folder». Вы можете изменить любой из этих параметров. Чтобы изменить размеры изображения, щелкните стрелки рядом с восемью полями W idth и H . Чтобы изменить имя файла и место, куда вы хотите экспортировать файл, вы должны нажать кнопку « B rowse».

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

Несмотря на то, что существует множество наборов шрифтов значков (например, Font Awesome и Iconic), которые вы можете легко использовать в своих проектах пользовательского интерфейса, бывают случаи, когда вы можете захотеть создать свой собственный пользовательский значок шрифта. Например, у вас могут быть значки, которые вы разработали, которые вы хотите преобразовать в набор шрифтов значков, или, возможно, вы хотите объединить значки из различных наборов шрифтов значков.

К счастью, создать иконочные шрифты довольно просто. Вот несколько бесплатных генераторов шрифтов значков , которые позволяют создавать собственные шрифты значков.

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

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

3. Icon Vault

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

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

Когда вы перейдете в Glyphter, вы увидите слева сетку символов. В правой части экрана, называемой «полкой значков», вы найдете бесплатные значки и панель поиска.Просто перетащите значки, которые хотите использовать, с полки значков в одно из полей сетки. Вы также можете загрузить свои собственные файлы значков SVG, щелкнув поля в сетке. Вы можете бесплатно использовать до 88 значков в своем шрифте значков. Если вам нужно больше значков, вам, , нужно будет зарегистрировать премиум-аккаунт.

Чтобы создать собственный шрифт значков с помощью Fontastic, выберите значки из доступных бесплатных наборов значков (например, Streamline Icons и Entypo) и / или загрузите свои собственные значки SVG.Когда все будет готово, перейдите на вкладку «Опубликовать», где у вас будет возможность разместить свой шрифт значка в облаке значков Fontastic или загрузить шрифт значка. Для доступа к генератору шрифтов Fontastic требуется регистрация учетной записи.

Читать далее

Адриенн Эрин — писатель-фрилансер и дизайнер. Она основала Design Roast, блог, в котором есть полезные руководства, идеи и сообщения о том, как стать дизайнером-фрилансером. Подписывайтесь на нее в Твиттере.

.