Рисунок карандашом икона: Как нарисовать икону карандашом поэтапно

Сортировать по

Дизайн иконок для карандашей бесплатно

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

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

Adobe Pencil

Набор иконок Adobe Pencil, доступных в форматах icns и png.

Значок карандаша

Набор значков карандаша, доступных в следующих размерах: 16 пикселей, 24 пикселей, 32 пикселей, 48 пикселей, 64×64 пикселей, 72×72 пикселей, 96×96 пикселей и 128×128 пикселей.

Набор иконок блестящий карандаш

Набор блестящих значков карандашей, доступных в 10 цветах, с разрешением 512 × 512 пикселей.

Карандаш

Набор значков карандашей, доступных в форматах файлов png и ico, с разрешением 512 пикселей.

Карандаш 2 Icon

Набор иконок размером 48x48px, 64x64px, 128x128px и 256x256px.

Значок карандаша

Набор значков карандашей, которые можно загрузить в следующих размерах: 32px, 64px, 128px и исходный размер.

Карандаш

Набор значков карандашей следующих размеров: 16 пикселей, 48 пикселей, 64 пикселей, 128 пикселей, 256 пикселей и 512 пикселей.

Значок карандаша

Набор иконок, доступных в форматах 16x16px, 32x32px, 48x48px, 128x128px и 256x256px.

Значок приложения «Карандаш»

Набор значков приложений-карандашей, доступных в следующих размерах: 16x16px, 32x32px, 48x48px, 128x128px, 256x256px и 512x512px.

Действия Значок редактирования документа

Набор значков карандаша, доступных в следующих размерах: 16 пикселей, 24 пикселей, 32 пикселей, 48 пикселей, 64×64 пикселей, 72×72 пикселей, 96×96 пикселей и 128×128 пикселей.

Значок Photoshop

Набор значков, доступных в размерах 16x16px, 24x24px, 32x32px, 48x48px, 64x64px, 128x128px и 256x256px.

Бесплатные PSD цветные карандаши Графика

В этот набор включены 18 различных цветовых вариаций, а разрешение составляет 1480 × 1080 пикселей.

Free Blue Pencil Icon

Синий значок карандаша доступен в разрешениях 32 × 32, 16 × 16, 128 × 128, 24 × 24, 256 × 256, 64 × 64, 48 × 48 пикселей и может быть загружен в ico (windows) и png (linux ) форматы файлов.

Карандаши с пометками

Набор из 20 значков цветными карандашами с пометками.

Значок редактирования

Набор значков карандашей следующих размеров: 16 пикселей, 24 пикселей, 32 пикселей, 48 пикселей, 64×64 пикселей и 128×128 пикселей.

Зеленый карандаш Icon

Зеленый значок карандаша доступен в следующих размерах: 24x24px, 32x32px, 48x48px, 64x64px, 128x128px и 256x256px.

Карандаш Shadow 1 Icon

Набор иконок, доступных в 24x24px, 32x32px, 48x48px, 64x64px, 96x96px, 128x128px и 256x256px.

Значок карандаша

Набор иконок в форматах eps и jpg.

Иконки карандашом

Набор иконок в форматах icns и png, доступных в следующих размерах: 16,32,128,256,512 пикселей.

Иконки карандашом

Набор иконок в форматах файлов ico и png.

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

Об авторе: Лицензированный практикующий врач, который явно любит веб-дизайн и бизнес.

Рисование значка карандашом — Smashing Magazine

Об авторе

Ву Тран и Мин Тран — творческие умы, стоящие за Фрекси. Когда они не нажимают на пиксели, им нравится делиться своими идеями в блоге Мина и работать над предстоящим… Больше о Мин. Тран …

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

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

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

Возможно, вы захотите взглянуть на следующие статьи по теме:

Несколько недель назад мы выпустили Bright! Набор иконок (см. Изображение выше), который можно бесплатно скачать с нашего сайта. В этой статье объясняется процесс создания простого значка карандаша , одного из значков в наборе значков. Учебник очень подробный и всесторонний, поэтому мы надеемся, что вы сможете без проблем выполнять каждый шаг.

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

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

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

1. Характеристики значка карандаша

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

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

Мы выбрали второй тип дизайна иконок, потому что в нем есть все необходимые элементы, упрощающие распознавание изображения зрителем . После попытки сделать набросок второго типа, это образец эскиза, который соответствует стилю набора, который мы имеем в виду. Наши любимые инструменты для рисования — маркеры Copic с оттенками серого 10%, 30%, 50% и шариковая ручка. Некоторые важные вещи, которым следует следовать при работе с этим значком:

• Когда значок разработан в большом размере, вам нужно обратить пристальное внимание на детали и убедиться, что используется двухточечная перспектива.Но в этой статье, поскольку значок должен быть сделан и оптимизирован в меньших размерах (64 × 64 пикселей и 48 × 48 пикселей), его концепция должна быть максимально простой, а значок должен быть проиллюстрирован в одноточечной перспективе.
• Свет, используемый в иконке, должен быть согласован.
• Перспектива, используемая для значка, должна быть идентична в наборе значков, чтобы все значки выглядели как принадлежащие одной семье.
• Стиль должен быть немного более мужественным.
• Решающий цвет — зеленый.
• Так как значок должен быть сохранен в файле EPS8, используется только градиент, и все пути должны быть соединены (без открытых путей).Также важно отметить, что здесь нет эффекта прозрачности и не задействовано растровое изображение.

Ладно, перейдем к основной части!

2. Эскизы:

В дизайне наших иконок эскизы всегда на первом месте.

Сканируем эти скетчи в Illustrator.

3. Базовая схема:

3.1. Корпус карандаша

1. Создайте документ размером 64 x 64 пикселей. Перетащите изображение (отсканированный эскиз) на монтажную область нового документа.Перейдите в палитру «Прозрачность» и установите непрозрачность изображения на 50. Заблокируйте этот слой и сохраните документ. Создайте новый слой и начните рисовать на нем контуры.
2. Создайте контур прямоугольника со скругленными углами, используя инструмент Прямоугольник со скругленными углами, а затем щелкните монтажную область, чтобы установить значение радиуса угла равным 10 пикселей. Щелкните ОК.

1. Выберите инструмент «Выделение» (V), щелкните край прямоугольного контура с закругленными углами и перетащите его так, чтобы он плотно прилегал к нарисованному изображению, как показано на рисунке ниже.
   • Выберите круглый прямоугольник и установите для него значение «Нет».
   • Ластик выглядит меньше корпуса, поэтому его нужно переделать. Есть несколько способов перерисовать ластик, например, с помощью инструмента «Перо» (P), но по моему опыту они не дали хороших результатов.
2. Выберите контур прямоугольника с закругленными углами. Дважды щелкните инструмент «Масштаб» и установите флажок «Равномерное» в диалоговом окне «Масштаб». Установите значение шкалы на 96%. Установите флажок Копировать, чтобы создать реплику, как показано на рисунке ниже.
3. Выберите инструмент «Прямоугольник» и нарисуйте новый прямоугольник в месте ластика и поверх контура прямоугольника с закругленными углами.
4. Выберите инструмент «Добавить точку привязки» (+) и щелкните центральную точку прямоугольного контура (нарисованного на шаге 5), чтобы добавить еще одну точку привязки. Затем выберите инструмент «Удалить точку привязки» (-) и удалите 2 точки привязки.
5. Выберите инструмент «Эллипс» и нарисуйте эллипс, как показано ниже:
6. Выберите путь большего прямоугольника с закругленными углами и путь эллипса.Перейдите в палитру Pathfinder и щелкните значок Divide. На палитре слоев появится новая группа. Любой разделенный путь будет принадлежать этой группе.
7. Перейдите в палитру слоев и выберите два пути, расположенные под новой группой, нажмите Command / Ctrl + G, чтобы поместить их в группу и заблокировать эту группу. Сделайте это, чтобы упростить удаление неиспользуемых путей на шаге
8. Разгруппируйте группу с разделенными путями (на шаге 8), выбрав группу и выбрав команду Разгруппировать в контекстном меню.
9. Удаляйте неиспользуемые пути, пока не получите результат, как показано ниже.

3.2. Металлическое кольцо

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

Форма карандаша теперь принята очень принципиально. Я думаю, что мы можем более подробно остановиться на этом шаге. Что нам нужно сделать, так это очистить карандаш.

4. Детали:

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

1. Выберите инструмент «Прямоугольник со скругленными углами» и нарисуйте новый контур прямоугольника с закругленными углами с радиусом угла 4 точки (как на шаге 2B).
2. Сделайте копию этого прямоугольника с закругленными углами, нажав команды «Копировать и вставить на передний план» (Command / Ctrl + F).
3. Переместите дублированный контур вправо.
4. Выберите контуры прямоугольников со скругленными углами и контур тела, а затем разделите их с помощью параметра «Разделить» в палитре Обработки контуров.
5. Выберите группу с разделенными путями и разгруппируйте ее, а затем удалите неиспользуемые пути. Результат должен быть таким:
6. Продолжайте использовать инструмент Прямоугольник со скругленными углами, чтобы нарисовать еще один контур прямоугольника со скругленными углами, а затем используйте параметр «Разделить», чтобы вырезать контур в середине тела карандаша, чтобы сформировать четкую призму. Затем разгруппируйте и разблокируйте все пути на уровне 2, а затем измените их имена. Смотрите результат ниже.

5. Укладка карандаша:

А теперь мы собираемся придать иконке немного очарования.Шаги включают:

5.1. Добавление градиента

1. Выделите все контуры и выберите инструмент «Градиент», а затем перейдите в палитру «Образцы» и выберите радиальный черно-серо-белый градиент.
2. Выберите каждый путь и перетащите инструмент «Градиент» (G) через каждый из них, пока не увидите результат, как на картинке ниже:
3. Выберите все пути и установите для них толщину обводки равной нулю. Цель состоит в том, чтобы предварительно просмотреть карандаш в целом. Что ж, свет, изображенный в корпусе карандаша, выглядит нормально, но металлическое кольцо и заостренный конец нужно немного подкорректировать.
4. Измените тип градиента этого пути на линейный, чтобы создать новый градиент, как показано на рисунке ниже. Надеюсь, вы сможете создать градиент, как у меня. Если у вас не получилось сделать это самостоятельно, просто скачайте прикрепленный исходный файл.
5. Металлическое кольцо должно плотно прилегать к ластику. Для этого используйте инструмент «Добавить точку привязки» (+) и добавьте еще 4 точки привязки к двум концам контура металлического кольца, а затем удалите 2 угловые точки. Результат выглядит следующим образом:>
6. Металлический кольцевой путь также должен быть немного толще.Самый простой способ — использовать команду «Смещение пути». Выделите путь и затем перейдите в Object> Path> Offset Path. В диалоговом окне «Путь смещения» установите значение смещения равным -1pt или меньше. Вы можете проверить предварительный просмотр, чтобы увидеть результат, и нажать ОК. Примечания:
   • Используйте путь смещения, чтобы сделать дубликат поверх металлического кольца; измените градиент металлического кольца (расположенного ниже дубликата), чтобы придать глубину.
   • Всякий раз, когда используется путь смещения, имя дубликата по умолчанию — «путь».
   • Если значение смещения — минус (-), дубликат останется наверху.
7. Примените радиальный черно-серо-белый контур к металлическому кольцу, нажмите G и перетащите инструмент «Градиент» поперек контура, пока не получите результат, как на картинке ниже: Хорошо, металлическое кольцо выглядит приемлемо для глаза. Теперь давайте поработаем с заостренным концом или кончиком карандаша.
8. Отмасштабируйте траекторию кончика карандаша так, чтобы он прилегал к корпусу карандаша.
9. Как и на скетче, здесь для контура карандаша нужен световой элемент, расположенный прямо в его центре, составляющий его форму.Прежде чем сделать это, помните, что значок должен быть сохранен в формате EPS8, и здесь не используются эффекты, режим наложения или регулировка непрозрачности, а используются только контуры или форма наложения. Чтобы упростить задачу, воспользуйтесь инструментом «Перо» и нарисуйте контур поверх кончика карандаша.
10. Измените направление и угол градиента, пока острие карандаша не примет правильную форму.
11. Нарисуйте грифель карандаша с помощью инструмента «Перо».
12. С помощью инструмента «Перо» выделите элемент ластика и измените угол наклона градиента, чтобы обозначить форму ластика.
13. Используйте команду «Смещение контура», чтобы создать копию контура ластика. Измените градиентный тон контура ластика, чтобы контур выглядел резче.

5.2. Настройка цвета

На этом этапе мы поместим каждый элемент карандаша в каждую отдельную группу (корпус, ластик и заостренный конец).

1. Выберите пути тела карандаша (включая 3 пути). Перейдите в меню «Правка»> «Настройка цветового баланса», установите флажок «Предварительный просмотр и преобразование» в диалоговом окне «Настройка», а затем переключитесь в режим RGB.
2. Перетащите ползунок, чтобы изменить значения красного / зеленого / синего (на любой желаемый цвет).
3. Выберите ластик и сделайте то же самое. Шаг 2.
4. Выберите заостренный конец и измените его цвет (проделайте то же самое). Теперь карандаш выглядит более плоским, чем был изначально. Это потому, что градиент потеряет черный цвет после настройки цветового баланса. Что мы собираемся сделать дальше, так это вернуться к трем элементам карандаша и добавить черный цвет к их градиенту, чтобы формы элементов отображались более четко.
5. Возьмите ползунок градиента и переместите основной цвет ближе к белому. В палитре «Цвет» перетащите этот цвет вниз на палитру «Градиент». Выберите только что перетаскиваемый цвет (щелкнув ползунок градиента) и измените его значение на 0-0-0 (убедитесь, что выбран цветовой режим RGB). Вы можете использовать цветовую палитру, чтобы изменить цвет градиента.

6. Более глубокая детализация и согласование стилей

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

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

И результат:

После поворота значка на угол 45 градусов:

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

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

Окончательный результат:

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

В любом случае с Photoshop вы можете сделать следующее:

1. Экспортируйте вектор в PNG, затем откройте его в Photoshop. Измените цвет и уровень освещенности изображения значка, используя «Кривые», «Цветовой баланс» или «Автоуровни» (в меню «Изображение»> «Коррекция») или используя другие методы, которые вы знали в Photoshop.После редактирования сохраните файл изображения.
2. Перетащите отредактированное изображение в Illustrator, затем с помощью инструмента «Глазок» выберите три основных значения цвета — яркость, средний и темный, и после каждого выбора перетащите цвет в палитру «Образцы» для сохранения.
3. Перетащите выбранный цвет в палитру «Градиент», чтобы создать собственные красивые градиенты, а затем примените его к значку. Некоторое время я делал это так, а теперь у меня есть полезная библиотека градиентов, которую я всегда использую для стилизации своих наборов значков.

7. Исходные файлы

Вы можете бесплатно скачать исходные файлы значка в форматах .eps и .ai:

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

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

• Создайте отражение и блики на значке , нарисовав новый путь поверх исходного пути и добавив к нему белый или черный цвет, а затем изменив его непрозрачность. Таким образом, цвет объекта станет серебристо-серым, потеряв прежнюю четкость, но все же можно добиться глянца.
• Используйте яркие модели карандаша и круглого цилиндра , чтобы легко принять форму значка карандаша с помощью только одного градиента. Но рисование значков — это рисование всего самого знакомого и типичного, а также рисование объектов, которые лучше всего отражают действие или жест значка. Значок карандаша круглой формы вряд ли может иметь острые углы и четкие блики.
• Положитесь на градиент , формирующий призму, используя путь для демонстрации тела карандаша, а затем примените градиент, который делает объект похожим на форму призмы к пути.Это может быть простой способ, но его очень сложно редактировать, а градиент имеет тенденцию к искажению.
• Используйте blendshape, чтобы отбросить тень в EPS8, и тень изменится с белого на черный без прозрачности. Когда тень отбрасывается на фон с цветом, отличным от белого, появится белый контур.

Сравнение конструкций

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

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

Рис. 1

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

Рисунок 2

Заключение

Есть много разных подходов к дизайну значков, некоторые используют 3D-приложение, другие используют Firework или Photoshop, но цель разработки значков одна и та же, какие бы инструменты мы ни использовали.