Иконка рисование: Поэтапное руководство по созданию иконок / Хабр

Содержание

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

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

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

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

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

Размер

Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 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 имеет окно описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, не делая сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!

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

Когда есть один и тот же значок в разных вk

30 бесплатных сетов иконок, нарисованных от руки

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

Hand Drawn Social Media Icons

Загрузить

____________________________________________

BBD Icons

Загрузить

____________________________________________

Color Stroked Free Hand Icon Set

Загрузить

____________________________________________

Hand Drawn Social Media Icons VDB vol.2

Загрузить

____________________________________________

Back to School Icon Set

Загрузить

____________________________________________

30 Hand Drawn Web Design Icons

Загрузить

____________________________________________

Sketchy Social Media Icons

Загрузить

____________________________________________

Hand Drawn Web Icon Set

Загрузить

____________________________________________

Sketchy Icons

Загрузить

____________________________________________

Red Little Shoes Icon Set

Загрузить

____________________________________________

Colored Pencil Web 2.0 Icons

Загрузить

____________________________________________

Watercolor Free Icon Pack

Загрузить

____________________________________________

Ramshackle Drawn Icons

Загрузить

____________________________________________

Natsu Icon Set

Загрузить

____________________________________________

Hand Drawn Ubo Icon Set

Загрузить

____________________________________________

Hand Drawn Sketch Icons

Загрузить

____________________________________________

Hand-Drawing Icons Set

Загрузить

____________________________________________

Hand Drawn Vector Icons

Загрузить

____________________________________________

Free Hand Drawn Doodle Icon Set

Загрузить

____________________________________________

Sketchy Social Media Icons

Загрузить

____________________________________________

Free Hand-Draw Sketched Icons

Загрузить

____________________________________________

Set of Hand Drawn Social Media Icons

Загрузить

____________________________________________

Free Hand Drawn Drawn Social Bookmarking Icons

Загрузить

____________________________________________

Sketchy Icons

Загрузить

____________________________________________

RM Kute Toolbar Icons

Загрузить

____________________________________________

Hand Drawn Icons

Загрузить

____________________________________________

Hand Drawn Icons

Загрузить

____________________________________________

Black And White Hand Sketched Social Icons

Загрузить

____________________________________________

Social Media Icons

Загрузить

____________________________________________

Sketch Icons

Загрузить

____________________________________________

Автор: Demilked

Перевод: Дежурка

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

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

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

Learn How to Draw a Vector Pencil Icon in Adobe Illustrator

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

Learn How to Draw a Vector Sticky Note in Adobe Illustrator

Learn How to Create a Sketched Logo Effect in Adobe Illustrator

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

Learn How to Draw a Pokeball Icon in Adobe Illustrator

How to Draw a Vector Octopus Icon in Adobe Illustrator

Learn How to Draw a Battery Icon in Adobe Illustrator

Learn How to Draw a Calendar Icon in Adobe Illustrator

Learn How to Draw an Eye Icon in Adobe Illustrator

Learn How to Draw a Home Icon in Adobe Illustrator

Learn How to Draw 3 Hamburger Menu Icons in Adobe Illustrator

Learn How to Draw an Egg Timer Icon in Adobe Illustrator

Learn How to Draw a Lightbulb Symbol in Adobe Illustrator

Learn How To Draw a Cog Settings Icon in Adobe Illustrator

Learn How To Draw a Camera Icon in Adobe Illustrator

Learn How To Draw an Adjustable Speech Bubble in Adobe Illustrator

Learn How To Draw an App Selector Switch in Adobe Illustrator

Learn How To Add Long Drop Shadows in Adobe Illustrator

Learn How To Draw a Refresh Icon in Adobe Illustrator

Learn How To Draw a Map Location Icon in Adobe Illustrator

Learn How To Draw a Letter Logo in Adobe Illustrator

Learn How To Create a Maze Symbol in Adobe Illustrator

Learn How to Draw a Play Icon in Adobe Illustrator

Learn How to Draw an Arrow Icon in Adobe Illustrator

Learn How to Draw an Envelope Icon in Adobe Illustrator

Learn How to Draw a Wireless Signal Icon in Adobe Illustrator

Learn How to Draw a Map Location Icon in Adobe Illustrator

Learn How to Draw Vector Icons in Adobe Illustrator

Learn How to Draw Tick & Cross Icons in Adobe Illustrator

Learn How to Draw a Search Icon in Adobe Illustrator

Learn How to Create a Vector Button in Adobe Illustrator

Learn How to Quickly Create an Infinity Symbol in Adobe Illustrator

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

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

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

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

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

by 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

Как создать иконку ico онлайн

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

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

Как создать иконку ICO онлайн

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

Способ 1: X-Icon Editor

Этот сервис является наиболее функциональным решением для создания ICO-картинок. Веб-приложение позволяет вам детально прорисовать иконку вручную либо же воспользоваться уже готовым изображением. Главным преимуществом инструмента является возможность экспорта картинки с разрешением вплоть до 64×64.

Онлайн-сервис X-Icon Editor

Чтобы создать ICO-иконку в X-Icon Editor из уже имеющейся на вашем компьютере картинки, перейдите по ссылке выше и воспользуйтесь кнопкой «Import».
Во всплывающем окне щелкните «Upload» и выберите нужное изображение в Проводнике.

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

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

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

Способ 2: Favicon.ru

При необходимости сгенерировать значок favicon с разрешением 16×16 для веб-сайта, отличным инструментом также может служить русскоязычный онлайн-сервис Favicon.ru. Как и в случае с предыдущим решением, здесь вы можете как самостоятельно нарисовать иконку, раскрашивая каждый пиксель отдельно, так и создать favicon из готовой картинки.

Онлайн-сервис Favicon.ru

На главной странице ICO-генератора сразу доступны все нужные инструменты: сверху — форма для загрузки готовой картинки под иконку, ниже — область редактора.
Чтобы сгенерировать иконку на основе имеющейся картинки, щелкните по кнопке «Выберите файл» под заголовком «Сделать favicon из изображения».
После загрузки изображения на сайт обрежьте его, если нужно, и нажмите «Далее».
При желании отредактируйте получившуюся иконку в области с заголовком «Нарисовать иконку».

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

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

Как результат, на вашем ПК сохраняется файл с расширением ICO, представляющий собою картинку размером 16×16 пикселей. Сервис отлично подойдет для тех, кому требуется всего лишь конвертировать изображение в маленькую иконку. Впрочем, и проявлять фантазию в Favicon.ru совсем не запрещается.

Способ 3: Favicon.cc

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

Онлайн-сервис Favicon.cc

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

Если вы желаете создать иконку с нуля, можете воспользоваться холстом, занимающим центральную часть интерфейса, и инструментарием в колонке справа.
Ну а для конвертирования уже имеющейся картинки нажмите на кнопку «Import Image» в меню слева.
С помощью кнопки «Выберите файл» отметьте нужное изображение в окне Проводника и укажите, нужно ли сохранить пропорции загружаемой картинки («Keep dimensions») или же подогнать их под квадрат («Shrink to square icon»).

Затем щелкните «Upload».
При надобности отредактируйте иконку в редакторе и, если все устраивает, перейдите к разделу «Preview».

Здесь вы можете увидеть, как будет выглядеть готовый favicon в браузерной строке либо списке вкладок. Все устраивает? Тогда скачайте иконку одним нажатием на кнопку «Download Favicon».

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

Способ 4: Favicon.by

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

Онлайн-сервис Favicon.by

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

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

Выполнив эти действия, вы сохраните готовый ICO-файл в память своего компьютера.

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

Способ 5: Online-Convert

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

Онлайн-сервис Online-Convert

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

Либо же загрузите картинку по ссылке или с облачного хранилища.
Если вам требуется ICO-файл с конкретным разрешением, например, 16×16 для favicon, в поле «Изменить размер» раздела «Дополнительные настройки» введите ширину и высоту будущей иконки.

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

Как видите, создать иконку ICO при помощи сайта Online-Convert совсем несложно, и делается это буквально за пару кликов мыши.

Читайте также:
Конвертируем изображения PNG в ICO
Как конвертировать JPG в ICO

Что же касается того, какой сервис использовать именно вам, здесь есть лишь один нюанс, и заключается он в том, для чего вы намерены использовать сгенерированные иконки. Так, если нужен favicon-значок, подойдет абсолютно любой из представленных выше инструментов. А вот для других целей, к примеру, при разработке ПО, могут применяться картинки ICO совершенно других размеров, поэтому в таких случаях лучше использовать универсальные решения вроде X-Icon Editor или Online-Convert.

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

Помогла ли вам эта статья?

ДА НЕТ

Как нарисовать иконки так, чтобы они были чёткими?

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

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

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

Итак, вот готовая картинка размером 114х114 пикселей.

Вроде выглядит неплохо, но давайте изменим размер на 48х48 пикселей.

Разница особо видна будет если поставить готовую иконку рядом с другими, нарисованными профессионалами. Как можно увеличить резкость? Если увеличим масштаб картинки, то мы увидим, что боковые линии немного размыты. Причина этого в том, что фотошоп — простая бездушная программа, которая изменяет размер картинки математически. Например, граница проходит между двумя пикселями. Мы изменяем размер в двое, Фотошоп делит размеры на два и ставит новую границу в аккурат на половине расстояния. Если это расстояние на два не делится, то граница попадает в межпиксельное пространство. Программа вычисляет «средние» тона и распределяет их между соседними пикселями. На картинке видно, что я имею ввиду:

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

1) размер исходного изображения. В некоторых мануалах даются подробные инструкции по рисованию изображений. Например, для Андроида рекомендуют брать исходный холст размером 864х864 пикселя. Эта рекомендация исходит из того, что итоговая иконка должна быть 72х72, а это как раз ровно в 12 раз меньше, чем исходный холст. Таким образом, если рисовать изображение правильно, то после изменения размера, корректировки будут минимальными

2) рисуем только в Shape! Для этого выбираем фигурку и жмём эту кнопку:

и так получается Vector Mask. Если нужно сделать более сложную пиктограмму, то рисуем Path с помощью «ручки» (Pen Tool), выделяем получившуюся фигуру, делаем клик на правой мышке и выбираем Create Vector Mask

Нужно в итоге получить одну монолитную фигуру (Shape). Посему, если её нельзя выполнить за один подход, то нужно нарисовать несколько path-ов на одном слое, выделить их с помощью Path Selection Tool, которая выделяет всю фигуру целиком,

… и объединить всё, выбрав правильный способ (видете 4 иконки слева от кнопки?) и нажав на кнопку Combine.

Если мы всё сделали правильно, то мы должны получить что-то вроде этого:

Почему именно Shape? А всё очень просто. Нам в любом случае нужно будет делать корректировку их размеров, а таким образом это сделать гораздо быстрее. Конечно можно использовать перевести в растр и сделать Ctrl + T (Transform), но в таком случае края вашей фигуры не будут ровными, так как при изменении пропорций фотошоп будет играть с крайними пикселями пропорционально. Как вы помните, вектор не зависит от размеров холста, его пропорции всегда будут одними и теми же.

3) используйте по максимуму только стили наложения (Layer Style). Это удобно тем, что вы можете двигать слой, а его эффекты будут двигаться вместе с ним (тени, градиенты, обрисовка…)

Итак, вернёмся к нашей иконке. Мы удалили всё и нарисовали квадратики и стрелки заново, используя Shape. Далее, мы сжали картинку до 48 пикселей. После чего мы сделали максимальный масштаб 3200%, чтобы был виден каждый пиксель, и вручную подгоняем все края, используютя этот инструмент:

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

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

Ну теперь можно сравнить как было до и после в натуральную величину:

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

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

Удачи вам!

иконок для рисования — 9,466 бесплатных векторных иконок

Авторы
Пакеты
Дополнительные инструменты Прочие товары
Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации
Инструменты
Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей
Google Workspace
Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
английский Español
английский
Deutsch
Português
한국어
Стать автором
Стоимость
Бесплатная регистрация
Войти
Авторизоваться регистр Фильтры
Тип
Икона
Упаковка
Лицензия
Все
Свободно
Draw Icons — 10 176 бесплатных векторных иконок
Авторы
Пакеты
Дополнительные инструменты Прочие товары
Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации
Инструменты
Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей
Google Workspace
Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
английский Español
английский
Deutsch
Português
한국어
Стать автором
Стоимость
Бесплатная регистрация
Войти
Авторизоваться регистр Фильтры
Тип
Икона
Упаковка
Лицензия
Все
Свободно
иконок для рисования — 9,466 бесплатных векторных иконок
Авторы
Пакеты
Дополнительные инструменты Прочие товары
Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации
Инструменты
Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей
Google Workspace
Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
английский Español
английский
Deutsch
Português
한국어
Стать автором
Стоимость
Бесплатная регистрация
Войти
Авторизоваться регистр Фильтры
Тип
Икона
Упаковка
Лицензия
Все
Свободно
Рисование значка карандашом — Smashing Magazine
Об авторе
Ву Тран и Мин Тран — творческие умы, стоящие за Фрекси.Когда они не нажимают на пиксели, им нравится делиться своими идеями в блоге Мина и работать над предстоящим… Больше о Мин. Тран …
Сегодня мы можем видеть значка везде, от игровой консоли до веб-приложений. Иконки становятся все более популярными и играют важную, возможно, самую важную роль в пользовательских интерфейсах. Однако ресурсы о дизайне иконок не так популярны, поэтому, когда мы сделали наши первые шаги в дизайне иконок, было действительно сложно найти хорошую отправную точку.
Сегодня мы можем видеть значка везде, от игровой консоли до веб-приложений. Иконки становятся все более популярными и играют важную, возможно, самую важную роль в пользовательских интерфейсах. Однако ресурсы о дизайне иконок не так популярны, поэтому, когда мы сделали наши первые шаги в дизайне иконок, было действительно сложно найти хорошую отправную точку.
На эту тему было всего несколько подробных руководств или книг. Вот почему мы хотели бы поделиться некоторыми (надеюсь, полезными) советами о том, как создать простой набор значков.В этом руководстве представлены, конечно, не все, что вам следует знать о том, как освоить дизайн иконок, но мы надеемся, что это поможет вам, особенно если вы только начали учиться или хотите узнать больше о дизайне иконок.
Возможно, вы захотите взглянуть на следующие статьи по теме:
Несколько недель назад мы выпустили Bright! Набор иконок (см. Изображение выше), который можно бесплатно скачать с нашего сайта. В этой статье объясняется процесс создания простого значка карандаша , одного из значков в наборе значков.Учебник очень подробный и всесторонний, поэтому мы надеемся, что вы сможете без проблем выполнять каждый шаг.
Хотя мы рассматриваем базовый пример, принципы, концептуализация и приемы из этой статьи могут быть легко применены к дизайну иконок в целом. Хотя все инструменты, которые мы используем в этом руководстве, очень просты и с ними очень легко работать, ваше знакомство с Adobe Illustrator по-прежнему необходимо.
Это результат , который мы приведем в конце статьи.Вы также можете скачать исходный файл.
Итак, с чего начать? Обычно перед тем, как начать, мы должны собрать несколько карандашных изображений в Интернете, собрать детали и черты этих изображений и смешать их все, чтобы создать стиль для какой-нибудь новой иконки карандаша. Мы всегда начинаем с рисованного эскиза.
1. Характеристики значка карандаша
Рисование значка означает рисование наиболее типичных персонажей объекта, чтобы он мог запечатлеть действие значка или представить концепцию и нюансы.Как вы, возможно, знаете, обычно можно выбрать один из трех видов карандашей:
Корпус в форме призмы с блестящим покрытием на конце.
Корпус в форме призмы с ластиком, прикрепленный к корпусу карандаша ярким белым металлическим кольцом.
Корпус цилиндрической формы без ластика.
Мы выбрали второй тип дизайна иконок, потому что в нем есть все необходимые элементы, упрощающие распознавание изображения зрителем . После попытки сделать набросок второго типа, это образец эскиза, который соответствует стилю набора, который мы имеем в виду.Наши любимые инструменты для рисования — маркеры Copic с оттенками серого 10%, 30%, 50% и шариковая ручка. Некоторые важные вещи, которым следует следовать при работе с этим значком:
Когда значок разработан в большом размере, вам нужно обратить пристальное внимание на детали и убедиться, что используется двухточечная перспектива. Но в этой статье, поскольку значок должен быть сделан и оптимизирован в меньших размерах (64 × 64 пикселей и 48 × 48 пикселей), его концепция должна быть максимально простой, а значок должен быть проиллюстрирован в одноточечной перспективе.
Свет, используемый в иконке, должен быть согласован.
Перспектива, используемая для значка, должна быть идентична в наборе значков, чтобы все значки выглядели как принадлежащие одной семье.
Стиль должен быть немного более мужественным.
Решающий цвет — зеленый.
Так как значок должен быть сохранен в файле EPS8, используется только градиент, и все пути должны быть соединены (без открытых путей). Также важно отметить, что здесь нет эффекта прозрачности и не задействовано растровое изображение.
Ладно, перейдем к основному!
2. Эскизы:
В дизайне наших иконок эскизы всегда на первом месте.
Сканируем эти скетчи в Illustrator.
3. Базовая схема:
3.1. Корпус карандаша
Создайте документ размером 64 x 64 пикселей. Перетащите изображение (отсканированный эскиз) на монтажную область нового документа. Перейдите в палитру «Прозрачность» и установите непрозрачность изображения на 50. Заблокируйте этот слой и сохраните документ.Создайте новый слой и начните рисовать на нем контуры.
Создайте контур прямоугольника со скругленными углами, используя инструмент Прямоугольник со скругленными углами, а затем щелкните монтажную область, чтобы установить значение радиуса угла равным 10 пикселей. Щелкните ОК.
Выберите инструмент «Выделение» (V), щелкните край прямоугольного контура с закругленными углами и перетащите его так, чтобы он плотно прилегал к нарисованному изображению, как показано на рисунке ниже.
Выберите круглый прямоугольник и установите для него значение «Нет».
Ластик выглядит меньше корпуса, поэтому его нужно переделать. Есть несколько способов перерисовать ластик, например, с помощью инструмента «Перо» (P), но по моему опыту они не дали хороших результатов.
Выберите контур прямоугольника с закругленными углами. Дважды щелкните инструмент «Масштаб» и установите флажок «Равномерное» в диалоговом окне «Масштаб». Установите значение шкалы на 96%. Установите флажок Копировать, чтобы создать реплику, как показано на рисунке ниже.
Выберите инструмент «Прямоугольник» и нарисуйте новый прямоугольник в месте ластика и поверх контура прямоугольника с закругленными углами.
Выберите инструмент «Добавить точку привязки» (+) и щелкните центральную точку прямоугольного контура (нарисованного на шаге 5), чтобы добавить еще одну точку привязки. Затем выберите инструмент «Удалить точку привязки» (-) и удалите 2 точки привязки.
Выберите инструмент «Эллипс» и нарисуйте эллипс, как показано ниже:
Выберите путь большего прямоугольника с закругленными углами и путь эллипса. Перейдите в палитру Pathfinder и щелкните значок Divide. На палитре слоев появится новая группа. Любой разделенный путь будет принадлежать этой группе.
Перейдите в палитру слоев и выберите два пути, расположенные под новой группой, нажмите Command / Ctrl + G, чтобы поместить их в группу и заблокировать эту группу. Сделайте это, чтобы упростить удаление неиспользуемых путей на шаге
Разгруппируйте группу с разделенными путями (на шаге 8), выбрав группу и выбрав команду Разгруппировать в контекстном меню.
Удаляйте неиспользуемые пути, пока не получите результат, как показано ниже.
3.2. Металлическое кольцо
Так же, как шаги, проделанные с ластиком, для этого пути мы воспользуемся большим эллипсом и разделим путь корпуса карандаша, чтобы отделил металлическое кольцо от корпуса .
Форма карандаша теперь принята очень принципиально. Я думаю, что мы можем более подробно остановиться на этом шаге. Что нам нужно сделать, так это очистить карандаш.
4. Детали:
Создайте очертания карандаша с заостренным концом, используя инструмент «Прямоугольник со скругленными углами» и палитру Обработка контуров. Все, что нам нужно сделать с этим контуром, — это придать корпусу карандаша форму призмы и выглядеть уже заточенным.
Выберите инструмент Прямоугольник со скругленными углами и нарисуйте новый контур прямоугольника с закругленными углами с радиусом угла 4 точки (как на шаге 2B).
Сделайте копию этого прямоугольника с закругленными углами, нажав команды «Копировать и вставить на передний план» (Command / Ctrl + F).
Переместите дублированный контур вправо.
Выберите контуры прямоугольников со скругленными углами и контур тела, а затем разделите их с помощью параметра «Разделить» в палитре Обработки контуров.
Выберите группу с разделенными путями и разгруппируйте ее, а затем удалите неиспользуемые пути. Результат должен быть таким:
Продолжайте использовать инструмент Прямоугольник со скругленными углами, чтобы нарисовать еще один контур прямоугольника со скругленными углами, а затем используйте параметр «Разделить», чтобы вырезать контур в середине тела карандаша, чтобы сформировать четкую призму.Затем разгруппируйте и разблокируйте все пути на уровне 2, а затем измените их имена. Смотрите результат ниже.
5. Укладка карандаша:
А теперь мы собираемся придать иконке немного очарования. Шаги включают:
5.1. Добавление градиента
Выделите все контуры и выберите инструмент «Градиент», затем перейдите в палитру «Образцы» и выберите радиальный черно-серо-белый градиент.
Выберите каждый путь и перетащите инструмент «Градиент» (G) через каждый из них, пока не увидите результат, как на картинке ниже:
Выберите все пути и установите для них толщину обводки равной нулю.Цель состоит в том, чтобы предварительно просмотреть карандаш в целом. Что ж, свет, изображенный в корпусе карандаша, выглядит нормально, но металлическое кольцо и заостренный конец нужно немного отрегулировать.
Измените тип градиента этого пути на линейный, чтобы создать новый градиент, как показано на рисунке ниже. Надеюсь, вы сможете создать градиент, как у меня. Если у вас не получилось сделать это самостоятельно, просто скачайте прикрепленный исходный файл.
Металлическое кольцо должно плотно прилегать к ластику. Для этого используйте инструмент «Добавить точку привязки» (+) и добавьте еще 4 точки привязки к двум концам контура металлического кольца, а затем удалите 2 угловые точки.Результат будет выглядеть так:>
Металлический кольцевой путь также должен быть немного толще. Самый простой способ — использовать команду «Смещение пути». Выделите путь и затем перейдите в Object> Path> Offset Path. В диалоговом окне «Путь смещения» установите значение смещения равным -1pt или меньше. Вы можете проверить предварительный просмотр, чтобы увидеть результат, и нажать ОК. Примечания:
Используйте путь смещения, чтобы сделать дубликат поверх металлического кольца; измените градиент металлического кольца (расположенного ниже дубликата), чтобы придать глубину.
Всякий раз, когда используется путь смещения, имя дубликата по умолчанию — «путь».
Если значение смещения — минус (-), дубликат останется наверху.
Примените радиальный черно-серо-белый контур к металлическому кольцу, нажмите G и перетащите инструмент «Градиент» по контуру, пока не получите результат, как на картинке ниже: Хорошо, металлическое кольцо выглядит приемлемо для глаза. Теперь давайте поработаем с заостренным концом или кончиком карандаша.
Отмасштабируйте траекторию кончика карандаша так, чтобы он прилегал к корпусу карандаша.
Как и на скетче, здесь для контура карандаша нужен световой элемент, расположенный прямо в его центре, составляющий его форму. Прежде чем сделать это, помните, что значок должен быть сохранен в формате EPS8, и здесь не используются эффекты, режим наложения или регулировка непрозрачности, а используются только контуры или форма наложения. Чтобы упростить задачу, воспользуйтесь инструментом «Перо» и нарисуйте контур поверх кончика карандаша.
Измените направление и угол градиента, пока острие карандаша не примет правильную форму.
Нарисуйте грифель карандаша с помощью инструмента «Перо».
С помощью инструмента «Перо» выделите элемент ластика и измените угол градиента, чтобы обозначить форму ластика.
Используйте команду «Смещение контура», чтобы создать копию контура ластика. Измените тон градиента контура ластика, чтобы контур выглядел резче.
5.2. Настройка цвета
На этом этапе мы поместим каждый элемент карандаша в каждую отдельную группу (корпус, ластик и заостренный конец).
Выберите контуры тела карандаша (включая 3 контура).Перейдите в меню «Правка»> «Настройка цветового баланса», установите флажок «Предварительный просмотр и преобразование» в диалоговом окне «Настройка», затем переключитесь в режим RGB.
Перетащите ползунок, чтобы изменить значения красного / зеленого / синего (на любой желаемый цвет).
Выберите ластик и сделайте то же самое. Шаг 2.
Выберите заостренный конец и измените его цвет (проделайте то же самое). Теперь карандаш выглядит более плоским, чем был изначально. Это потому, что градиент потеряет черный цвет после настройки цветового баланса. Что мы собираемся сделать дальше, так это вернуться к трем элементам карандаша и добавить черный цвет к их градиенту, чтобы формы элементов отображались более четко.
Возьмите ползунок градиента и переместите основной цвет ближе к белому. В палитре «Цвет» перетащите этот цвет вниз на палитру «Градиент». Выберите только что перетащенный цвет (щелкнув ползунок градиента) и измените его значение на 0-0-0 (убедитесь, что выбран цветовой режим RGB). Вы можете использовать цветовую палитру, чтобы изменить цвет градиента.
6. Более глубокая детализация и согласование стилей
После того, как все основные выполнены, переключитесь в режим предварительного просмотра в пикселях из меню «Вид», чтобы увидеть, возникла ли проблема с пикселизацией.
Мы почти закончили. Однако, как видите, грифель карандаша выглядит очень острым, что создает ощущение опасности. Итак, мы должны изменить эту коническую точку на усеченную пирамиду. Кроме того, нам нужно добавить несколько дополнительных путей к корпусу карандаша в качестве выделенных частей (используя команду «Смещение контура»). Это необходимо, потому что внешний корпус карандаша представляет собой очень блестящее покрытие.
И результат:
После поворота значка на угол 45 градусов:
Ну, еще одна вещь, карандаш все еще выглядит настолько темным, что не может соответствовать стилю, который мы хотим иметь, поэтому изменим цвет на .Просто добавьте детали к металлическому кольцу, (1) продублируя путь и немного масштабируйте дубликат, а затем (2) сделайте еще один дубликат и перетащите градиент поверх него, чтобы сделать значок более реалистичным.
Примечание: после использования режима предварительного просмотра пикселей убедитесь, что установлены флажки «Привязка к пикселям» и «Привязка к точке».
Окончательный результат:
Посмотрите на окончательный результат. Хотя направление света идет сверху, нижняя часть корпуса карандаша светлее верхней.Да, это отражение света. Многие полагают, что в Illustrator сложно рисовать значки из-за трудностей с отображением цвета и света. Если у вас хорошее чувство цвета, вы можете изменить цвет и тон градиента с помощью цветовой палитры.
В любом случае с Photoshop вы можете сделать следующее:
Экспортируйте вектор в PNG, затем откройте его в Photoshop. Измените цвет и уровень освещенности изображения значка, используя «Кривые», «Цветовой баланс» или «Автоуровни» (в меню «Изображение»> «Коррекция») или используя другие методы, которые вы знали в Photoshop.После редактирования сохраните файл изображения.
Перетащите отредактированное изображение в Illustrator, затем используйте инструмент «Глазок», чтобы выбрать три основных значения цвета — яркость, средний и темный, и после каждого подбора перетаскивайте цвет в палитру «Образцы» для сохранения.
Перетащите выбранный цвет в палитру «Градиент», чтобы создать свои собственные красивые градиенты, а затем примените его к значку. Некоторое время я делал это так, а теперь у меня есть полезная библиотека градиентов, которую я всегда использую для стилизации своих наборов значков.
7. Исходные файлы
Вы можете бесплатно скачать исходные файлы иконки в форматах .eps и .ai:
Распространенные ошибки
Давайте обсудим некоторые ошибки, которые часто возникают, когда дело доходит до дизайна значков с использованием пример выше.
Создайте отражение и блики на значке , нарисовав новый путь поверх исходного пути и добавив к нему белый или черный цвет, а затем изменив его непрозрачность. Таким образом, цвет объекта станет серебристо-серым, потеряв прежнюю четкость, но все же можно добиться глянца.
Используйте яркие модели карандаша и круглого цилиндра , чтобы легко принять форму значка карандаша с помощью только одного градиента. Но рисование значков — это рисование всего самого знакомого и типичного, а также рисование объектов, которые лучше всего отражают действие или жест значка. Значок карандаша круглой формы вряд ли может иметь острые углы и четкие блики.
Положитесь на градиент , формирующий призму, используя путь для демонстрации тела карандаша, а затем примените градиент, который делает объект похожим на форму призмы к пути.Это может быть простой способ, но его очень сложно редактировать, а градиент имеет тенденцию к искажению.
Используйте blendshape, чтобы отбросить тень в EPS8, и тень изменится с белого на черный без прозрачности. Когда тень отбрасывается на фон с цветом, отличным от белого, появится белый контур.
Сравнение конструкций
Вот некоторые типичные конструкции, которые мы хотели бы представить, и классифицировать их по положительным и слабым сторонам. Окончательный результат выше показывает значки карандашей, выполненные в одноточечной перспективе.Это идеальный дизайн, который содержит все необходимые компоненты: освещение, тень, цвет и композицию, и, в частности, этот дизайн можно масштабировать до любого размера без проблем с пикселизацией.
На рисунке 1 показаны значки карандашей, созданные в двухточечной перспективе . Этот дизайн показывает хорошее освещение, приемлемые тени и приятный цвет и не сталкивается с проблемой пикселизации. Да, такой дизайн выглядит красиво и круто. Однако состав и форма карандашей могут быть не сразу узнаваемы для зрителей, что приводит к нарушению основного принципа дизайна иконок.

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

Рисунок 2
Заключение
Есть много разных подходов к дизайну значков, некоторые используют 3D-приложение, другие используют Firework или Photoshop, но цель создания значков одна и та же, какие бы инструменты мы ни использовали. Нам нужно сохранить единообразие каждого значка в наборе , а также сохранить узнаваемость и простоту. Как мы уже говорили в начале этой статьи, это всего лишь несколько основных шагов и принципов создания красивой и четкой иконки.Надеемся, вам понравится этот урок. Если вы чувствуете необходимость узнать больше, следите за бесплатной книгой по дизайну иконок, которую мы сделаем общедоступной в июле.
Рисунок Значок PNG изображения | Векторные и PSD файлы
линейный рисунок подсолнечника
1920 * 1920
непрерывный рисунок одной линии женщин или девочек в платке под названием хиджаб модный стиль мусульманская девушка
4000 * 4000
непрерывный рисунок линии векторного набора милый кактус черно-белый рисунок комнатных растений, изолированных на белом фоне кактус в горшке одной линии рисованной иллюстрации
4000 * 4000
вектор значок рисования линии телефона
1200 * 1200
открыть дверь черная линия значок рисования
1000 * 1215
значок рисования руки сердца
5000 * 5000
значок рисования линии двуспальной кровати
1000 * 1367
значок рисования линии логотипа кактуса
1200 * 1200
мебель значок рисования линии
1200 * 1200
цифры рука значок рисования
50 00 * 5000
значок рисования руки пузырь речи
5000 * 5000
компьютерная мышь черная линия рисования значок
899 * 1084
значок рисования мультфильма Гавайи
2000 * 2000
рисунок значок
2000 * 2000
значки рисования линий для гурманов
2000 * 2000
значок рисования для вашего проекта
5120 * 5120
компьютерные вычисления значок рисования черной линии
899 * 1084
кисть художника для рисования значка мультяшном стиле
5000 * 5000
рисовать значок для вашего проекта
5120 * 5120
микрофон объявляет значок векторного рисования руки
1200 * 1200
карандашный рисунок значок вектор
1200 * 1200
мультфильм рисунок значок скачать
2000 * 2000
блокировка пароля блокировка черная иконка рисования линии
1000 * 1302
летний веер значок рисования линии
899 * 1084
обучение дизайн рисунок значок круглый
2200 * 2200
мобильный телефон мультфильм черный значок рисования линии
899 * 1084
ключевой тег значок рисования черной линии
1000 * 1215
значок рисования
2000 * 2000
значок рисования
2000 * 2000
открыть дверь черная линия значок
8334 * 8334
сердце рука рисовать значок дизайн
5000 * 5000
значок рисования линии пластыря
1000 * 1344
телескоп значок рисования черной линии
899 * 1084
помидор векторный рисунок значок акварель
6000 * 6000
журавль черный li Значок рисования ne
1000 * 1155
ручная роспись значок рисования линии интерфейса географического разлома
1200 * 1200
набор значков рисования краской стиль контура
5000 * 5000
микрофон значок рисования черной линии
899 * 1084
набор значков рисования стиль контура
5000 * 5000
значок рисования черной линии головки ванны
1000 * 1215
получить значок рисования черной линии беспроводной передачи
899 * 1084
день рождения торт значок рисования черной линией
899 * 1084
рисование значков в GetDrawings | Бесплатно скачать