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

Содержание

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

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

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

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

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

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

Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 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

Разработка иконок в Москве — YouDo

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

Что такое иконка?

Иконка — визуальный образ, который, как правило, рисуется в виде трехмерного цветного изображения. Создание иконки для сайта является трудоёмкой работой. Дизайнеру понадобится много времени, если цель – уникальность и привлекательность. В определённых случаях, иконка – небольшое изображения, которое находится во вкладке в браузере при открытии того или иного сайта и имеет расширение ісо (называют favicon.ico).

Индивидуальная иконка – личный стиль сайта

Для начала, иконка – это:

  • индивидуальность;
  • привлекательность;
  • помощник в раскрутке сайта;

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

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

В «Избранном» или в «Закладках» а также в адресной строке любого нынешнего браузера, уникальная иконка всегда будет выделяться среди многих других. Это, конечно же, подтолкнёт каждого на посещения сайта снова и снова. Для разработки иконки такого вида используется favicon – изображение, разрешение которого 16 х 16 пикселей.

Какой должна быть иконка?

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

Роль фрилансера

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

оформлении сайтов. Его профессия является творческой, но он также предоставляет другие услуги, как:

  • оформление сайтов;
  • написание статей;
  • поиск бизнес-партнёров;
  • поддержка сайта.

В общем, услуги фрилансера – это успех сайта. Заказать иконки для сайта можно у этого «разнорабочего» на бирже Юду.

Стоимость работ

Всё зависит от оригинальности и пожелания заказчика. Чем интересней иконка и больше её разрешение, тем выше стоимость. Цена в зависимости от сложности работы и сроков может варьироваться от 5 до 50 долларов.

 

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

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

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

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

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

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

Разработка иконок приложений

Предварительный анализ. Мы рассматриваем приложение, как среду с собственной экосистемой стилей. Мы отмечаем характеристики UI-дизайна и пишем ТЗ для художника по иконкам. Если задача — разработать иконки для Андроид или другую мобильную платформу, то мы учитываем сенсорность смартфонов и делаем иконки крупнее.  

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


От изображения к символу. Иконка — это специальный рисунок. Здесь дизайнер работает с маленькими — 64×64, 32×32 размерами. При таком разрешении, детали просто шумят — разбивают общий контур рисунка и усложняют его восприятие. Поэтому художественные концепты разбиваются на геометрические примитивы — круги, треугольники и квадраты. Крупные элементы вписывается в них, а незначительные детали — удаляются. Обычно, остаются только 1-2 крупных ярких деталей, которые запомнятся — это важно, когда разрабатываются иконки для андроид и других портативных ОС.  

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

Тестирование на фокус-группе. Иконки оцениваются по критерию распознавания — считывает ли пользователь иконку как символ функции, которая она подразумевает. Другой критерий — оценка эстетичности, мы так и спрашиваем у аудитории —  «нравятся ли вам эти иконки». Мы приглашаем тестировать иконки для Android и iOS пользователей, который предпочитают одну из платформ и в жизни.  

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

Создание иконок сайтов для iOS и Android

iOS, Дизайн

Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.

Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.

iOS Размеры иконки

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

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

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

Установка иконок

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

<link rel="icon" href="favicon.ico" type="image/x-icon"/>

Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.

Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.

<link rel="apple-touch-icon" href="apple-icon-57x57.png" />

<link rel="apple-touch-icon" href="apple-icon-72x72.png" />

<link rel="apple-touch-icon" href="apple-icon-114x114.png" />

<link rel="apple-touch-icon" href="apple-icon-144x144.png" />

Специальные эффекты

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

Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:

<link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»apple-icon-114×114-precomposed.png» />

 Android и остальные устройства

Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android  и  Blackberry, а так же всех остальных.

Design tips

Несколько моментов, которые следует держать в голове, когда придумываете favicons. Во-первых,  Apple всегда самостоятельно добавляет определённые эффекты самостоятельно: тени, скруглённые края и глянец. Советую при разработке учитывать это и анализировать как иконка будет выглядеть с такими эффектами.

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

Иконки для вдохновления

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

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

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

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

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

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

Цветы и трава выглядит очень реалистичными.

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

Навигация по публикации
↑ Наверх

Иконки для сайта — заказать создание иконок GUSAROV

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

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

Почему стоит обратиться к нам?

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

  • Подготовка концепции: обсуждение с клиентом формата и стилевого оформления.
  • Мы разработаем дизайн иконок для сайта любого содержания в следующих размерах: 32*32; 64*64; 128*128; 256*256; 512*512; 1024*1024.
  • Создание эскиза для дальнейшего согласования с заказчиком.
  • Внесение правок и изменений и проект, утверждение.
  • Изготовление иконки (для мобильного приложения, для интернет-ресурса).
  • Сдача работы.

Если дизайн не будет принят с первого раза, над его доработкой мы работаем бесплатно. Цена заказа не фиксирована и зависит от объема работ и сложности. Стартовая стоимость от:

  • BYN — 90
  • RUB — 2 615
  • USD — 45
  • EUR — 38

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

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

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

Заказать создание иконок

Как Создать и Добавить Иконку для Сайта — Favicon

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

В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

1. Какие требования к размеру и формату иконки

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

Рекомендуемые форматы изображений для иконки:

  • .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
  • .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.

Можно использовать и другие форматы? например, jpeg или gif. Из-за особенностей браузеров и разных ОС мы рекомендуем выбирать ico. Самый каноничный формат, с которым точно не ошибетесь.

Рекомендуемые размеры для иконок:

  • 16 на 16 px
  • 32 на 32 px
  • 192 на 192 px
  • 512 на 512 px

2. Как и где создать иконку для сайта

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

https://icons8.com — отличный сервис с большим выбором иконок и удобным поиском. Вам достаточно просто отыскать понравившуюся иконку и скачать её.

https://iconsflow.com — на этом сайте кроме большого выбора макетов вы также можете отредактировать иконку: изменить её форму, добавить фон, стиль отображения и пр.

3. Как добавить иконку на сайт

Есть несколько вариантов добавить иконку на сайт.

Вариант 1Загрузить иконку в формате favicon.ico в корневой каталог сайта. Все браузеры автоматически распознают этот файл и отобразят изображение в качестве иконки на вкладке. Файл нужно загрузить в корень сайта через файловый менеджер или FTP, формат файла обязательно должен быть ico.

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

<link rel=»shortcut icon» href=»/images/favicon.png» type=»image/png»>

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

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

FREE Icon Maker — создавайте стильные плоские иконки всего за несколько минут. Экспорт SVG, PNG, ICO

FREE Icon Maker — создавайте стильные плоские иконки всего за несколько минут. SVG, PNG, экспорт ICO

Текущий план подписки

Бесплатно


Основная информация


Полный список функций

  • 2 Максимальное количество наборов иконок
  • 5 Максимальное количество иконок в наборе
  • 32 пикс.
  • PNG Экспорт
  • 20 Максимальное количество наборов иконок
  • 10 Максимальное количество иконок в наборе
  • до 128 пикселей
  • PNG Экспорт
  • Встроить код
  • Предварительный просмотр и поделиться ссылка
  • 50 Максимальное количество наборов иконок
  • 50 Максимальное количество иконок в наборе
  • до 256 пикселей
  • PNG Экспорт
  • SVG Экспорт
  • ICO Экспорт
  • Встроить код
  • Предварительный просмотр и публикация ссылка
  • 9999 Максимальное количество наборов иконок
  • 1000 Максимальное количество иконок в наборе
  • до 512 пикселей
  • PNG Экспорт
  • SVG Экспорт
  • ICO Экспорт
  • Встроить код
  • Предварительный просмотр и публикация ссылка

Все еще не уверены, какой план вам подходит?

Сравнить все функции

Вам нужно еще больше? Связаться с нами Узнать больше.

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

Краткое резюме ↬ Каждый набор значков, представленный в 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-пиксельном пространстве над белой отметкой на лице корги. Обратите внимание, однако, что у нас все еще есть некоторые элементы из «предыдущей» версии, например, простой нос. Мы рассмотрим это на следующем шаге.

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

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


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

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

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


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

Заключение

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

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

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

(ах, мл, ал, ил)

Лучшие советы по созданию собственных иконок

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

Иконки мощны, потому что содержат краткие заявления. Мозг обрабатывает визуальные подсказки намного быстрее, чем текстовые, поэтому значок может передавать сообщение намного быстрее, чем написанное слово. «Хороший способ подумать о силе визуальной коммуникации — это подумать о самой важной информации, с которой вы сталкиваетесь ежедневно, а именно о здоровье и безопасности», — говорит Эдвард Боутман, соучредитель Noun Project и инструктор Skillshare. Оригинальный дизайн значка : создание пиктограмм с целью . «Эта информация почти всегда передается визуально с помощью пиктограмм, потому что эти маленькие изображения могут иметь огромное влияние. Они невероятно могущественны ».

Изображение из Skillshare Original

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

Создание значков, побуждающих к действию

Соучредитель проекта Join Noun Project Эдвард Боутман помогает пользователям создавать иконки с помощью Adobe Illustrator в своем Skillshare Original.

В поисках правильной идеи

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

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

Студенческий проект Рикардо Кабрита

Часто дизайнеры создают набор иконок, соответствующих различным продуктам или идеям. Когда вы беретесь за подобный проект, начните с рассмотрения общей темы и того, какие отдельные элементы вы можете включить. «Я составляю список в своем рабочем файле Illustrator», — говорит дизайнер Адам Уиткрофт, который делится советами в своем Skillshare Original Icon Design: Create a Cohesive Icon Set . «Этот список — просто свалка идей по теме.Я делаю это с каждым своим проектом. Это действительно помогает мне думать о будущем ». Хотя отдельные значки должны стоять сами по себе, вам также нужно, чтобы набор плавно сливался и плавно сливался. Подумайте, как можно использовать шрифт, форму или цвет, чтобы связать набор значков вместе.

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

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

Создание набора значков в Photoshop

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

Составление плана

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

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

Изображение предоставлено DKNG Studios

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

Как создать серию значков

Погрузитесь в дизайн иконок вместе с соучредителями DKNG Studios Дэном Кукеном и Натаном Голдманом.

Создание вашей иконки

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

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

Adobe Illustrator

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

Adobe InDesign

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

Adobe Photoshop

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

Canva

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

Corel Draw

Corel Draw в основном предназначен для создания значков и логотипов, что делает его идеальным выбором для пользователей, желающих создавать векторные рисунки и графику.Corel Draw с такими инструментами, как контроль электропитания, соединители и рисование, помогает как начинающим, так и опытным дизайнерам создавать четкие и яркие логотипы. Эта программа не интегрируется с Adobe Suite, но может быть надежным автономным вариантом.

Microsoft Publisher

Многие пользователи уже установили Publisher на своих компьютерах как часть Microsoft Office Suite, и хотя программа требует немного больше навыков, чем ее сетевые аналоги, освоить ее довольно легко.Тем не менее, возможности Publisher несколько ограничены, и настройка графики может стать проблемой, если у вас есть что-то конкретное. Думайте о программе как о промежуточном варианте, который может выполнить работу, если у вас нет навыков, потребностей или ресурсов для более продвинутого варианта.

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

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

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

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

Изображение предоставлено учителем Skillshare Кевином Мораном

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

Например, сохранение возможностей редактирования Illustrator может добавить еще 400 КБ к файлу среднего размера. Во многих случаях может быть лучше создать отдельный файл .ai, который будет под рукой для будущих изменений, и удалить из файла SVG возможности редактирования в программе.

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

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

Создание пользовательских значков для вашего личного бренда

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

Заключение Логотипы

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

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

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

Как создать значок веб-сайта в CorelDRAW

  1. Обучение
  2. Практические руководства
  3. Сделайте значок веб-сайта

Веб-значок, также известный как значок, значок сайта или значок веб-сайта, представляет собой небольшое изображение или логотип на вкладке веб-сайта.Дизайн значков так же прост, как настройка страницы, добавление иллюстраций и использование параметра «Экспорт» в CorelDRAW для создания файла .ICO. Веб-значки используются везде, от рабочего стола Windows до устройств iOS, OSX или Android, и все они имеют определенные особенности. требования.

1. Установите размер страницы

Размер документа зависит от размера изображения.В диалоговом окне «Новый документ» ( File> New ) в поле Name : введите имя файла как ‘4Sale’ . Затем из раскрывающегося списка Preset destination выберите Web . Вы заметите, что это изменило единицу измерения на пиксели и разрешение рендеринга с на 96 точек на дюйм. В разделе «Размер» установите для ширины значение 130 и высоту , и значение 130. Щелкните OK .

2.Добавление графических элементов

Из ( Файл> Импорт ) перейдите туда, где находится логотип, и импортируйте его. Разместите логотип на странице и увеличьте его размер до 128 x 128.

3. Экспортируйте значок

При экспорте изображения, которое будет использоваться в качестве значка, рекомендуется использовать файл .ICO, хотя есть некоторые приложения, которые принимают другие форматы.Выберите дизайн и из ( File> Export ). В раскрывающемся списке Save as type выберите ICO — Windows 3.x / NT Icon Resource (* .ico; *. Exe; *. Dll . Убедитесь, что существует отметьте галочкой параметр Выбрано только . И нажмите Экспорт . Откроется диалоговое окно «Преобразовать в растровое изображение ». В диалоговом окне «Преобразовать в растровое изображение» примите значения по умолчанию и нажмите ОК . Следующим открывается диалоговое окно Диалоговое окно «Преобразовать в палитру». Здесь вы можете выбрать тип палитры, которая должна быть реализована при создании файла ico.Убедитесь, что в раскрывающемся списке «Палитра» выбрано значение Optimized . Это обеспечит максимально плавные переходы между цветами.

CorelDRAW не просто создает значки веб-сайтов

Ознакомьтесь с некоторыми другими функциями графического дизайна в CorelDRAW Graphics Suite, такими как «Как сделать этикетку», «Как сделать флаер», «Как создать плакат» и многое другое! Создавайте высококачественные дизайны с помощью увлекательного и простого в использовании программного обеспечения для графического дизайна и сделайте свою работу ярче, чем когда-либо.

Как сделать брошюру Как сделать подарочный сертификат Как сделать свой собственный календарь Как сделать инфографику

11 лучших сайтов для получения бесплатных иконок — Gist

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

1. ICONMNSTR

Наш любимый сайт с быстрыми, легкими и настраиваемыми значками. Максимальный размер пикселей для PNG ограничен 240 × 240 пикселей, но вы всегда найдете здесь хороший выбор основных значков.

Лицензия: Бесплатные векторные иконки для коммерческого или личного использования с кредитом.

2. FLATICON

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

Лицензия: Бесплатные векторные иконки для коммерческого или личного использования с кредитом.

3. DRYICONS

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

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

4. MR.ICONS

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

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

5.ГРАФИЧЕСКИЙ БУРГЕР

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

Лицензирование: Бесплатные векторные иконки для любого количества личных и коммерческих проектов.

6. PIXEDEN

Pixeden Premium продается по цене 6 долларов в месяц, но у них есть страница, полная загружаемых иконок без лицензионных отчислений. Каждый бесплатный набор иконок поставляется в формате PNG размером до 512 × 512 пикселей.

Лицензия: Бесплатные векторные иконки для коммерческого или личного использования.

7. ICONFINDER

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

Лицензирование: Бесплатные векторные иконки для коммерческого или личного использования (при правильной фильтрации), но всегда не забывайте проверять каждый значок или набор значков.

8. ИКОНА КАПИТАНА

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

Лицензия: Бесплатные векторные иконки для коммерческого или личного использования.

9. ХОРОШИЕ МАТЕРИАЛЫ, БЕЗ БУМАГИ

22+ бесплатных набора значков, организованных в полезные темы без указания авторства.

Лицензия: Бесплатные векторные иконки для коммерческого или личного использования.

10. БЕСПЛАТНАЯ ОШИБКА

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

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

11. DESIGNBEEP

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

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

Спасибо за чтение! Поставьте нам лайк на Facebook и дайте нам знать, какие веб-сайты вы используете для бесплатных иконок.

Чтобы узнать больше, узнайте, как сайты бесплатных стоковых фотографий могут улучшить ваш контент-маркетинг:

THAT SOCIAL AGENCY

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

Нас ведет любовь к жизни, предпринимательству, людям и возможностям.

Свяжитесь с [email protected], если хотите поболтать!

Первоначально опубликовано на www.thatsocialagency.com .

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, блог, в котором есть полезные руководства, идеи и сообщения о том, как стать дизайнером-фрилансером. Подписывайтесь на нее в Твиттере.

7 Основы дизайна иконок

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

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

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

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

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

1. Постоянный визуальный вес 💁🏻‍♂️

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

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

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

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

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

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

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

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

2. Простота и минимализм ✅

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

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

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

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

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

3. Создание значков с помощью единообразного голоса бренда 👏🏼

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

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

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

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

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

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

4. Создание значков с достаточным свободным пространством 💻

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

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

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

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

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

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

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

5. Pixel-Perfect Design 😍

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

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

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

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

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

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

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

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

6. Контрастность и цветовые палитры 🎨

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

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

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

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

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

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

7. Геометрические формы имеют большее влияние 👏🏼

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

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

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

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

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

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

The Bottom Line 👈🏽

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


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

Добавить комментарий

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