Ву Мин Тран и Tran
В настоящее время мы можем видеть icons везде, от игровой приставки к веб-приложениям.Иконы становятся все более и более популярными, и играют важную роль, может быть, самая важная роль в пользовательских интерфейсах.Тем не менее, ресурсы о дизайне иконок не так популярны, поэтому, когда мы сделали первые шаги в дизайне иконок, это было действительно трудно найти хорошую отправную point.
Были только несколько в глубине учебники или книги по этой теме.Поэтому мы хотели бы поделиться некоторыми (надеюсь, полезный) советов о том, как создать простой набор иконок.Этот учебник представляет, конечно, не все, что вы должны знать о том, как освоить дизайн иконок, но мы надеемся, что он поможет вам, особенно если вы только начали учиться, или вы хотите узнать больше о иконку design.
Несколько недель назад мы выпустили Яркий!Иконка Set (см. изображение выше), которая доступна для свободного скачивания с нашего веб-сайта.Эта статья объясняет процесс разработки простого карандаша icon, одна из икон набор иконок.В учебнике очень подробно и в глубину, так что вы, мы надеемся быть в состоянии следовать каждому шагу без problems.
Хотя мы рассмотрим простой пример, принципы, conceptialization и техники из этой статьи могут быть легко применены на иконку дизайн в целом.Хотя все инструменты, которые мы используем в данном руководстве, являются очень просто и очень легко работать, ваше знакомство с Adobe Illustrator еще requisite.
Это result которые we’ приду с в конце статьи.Вы можете скачать исходный file как well.
Так как же нам начать?Обычно, прежде чем начать, мы должны собрать некоторые карандаш фотографии в Интернете, и подобрать детали и черты из этих фотографий и смешать их все, чтобы создать стиль для свежего значок карандаша.Мы всегда начинаем с рисованной sketch.
1.Характеристики карандаш icon
Рисование значок означает, привлечь наиболее типичные символы объекта, так что он может захватить действие объекта или представляют концепции и нюансов.Как вы знаете, там, как правило, три вида карандашей, чтобы выбрать из:
- Призма-образный корпус с глянцевым покрытием глазурью end.
- Призма-образный корпус с резинкой крепится к телу карандашомярко-белый металл ring.
- Цилиндрические тела без eraser.
Мы выбрали второй натурой на дизайн иконок, потому что у него есть все необходимые элементы, делает его легче для зрителя, чтобы признать image.После попытки наметить некоторые после второго рода, это образец эскиза, который соответствует стилю набор, который мы имеем в виду.Наши любимые инструменты рисования маркерами Copic с 10%, 30%, 50% серых тонов и шариковой ручкой.Некоторые важные вещи, которые следует соблюдать, как работать над этой иконы:
- Когда икона выполнена в большом размере, необходимо обратить пристальное внимание на details, и убедитесь, что двухточечной перспективе не используется.Но в этой статье, потому что икона должна быть сделана и оптимизирована в меньших размерах (64× 64px и 48× 48px), его концепция должна быть как можно более простым, и икона должна быть показана в одной точке перспективу.
- Свет используется в значок должен быть harmonized.
- Перспективы для иконы должны быть идентичными в набор иконок, делая все иконки выглядят как находясь в family.
- Стиль должны быть немного более мужественным-looking.
- Решающий цвет green.
- С икона должна быть сохранена в файл EPS8, только градиент используется, и все пути должны быть подключены (нет открытых путей).Важно также отметить, что в стране нет прозрачных эффект и не растровых изображений invovled.
! Хорошо, давайте перейдем к основной части
2.Эскизы:
В нашем значок эскизы всегда приходят first.
Мы будем проверять эти эскизы в Illustrator.
3.Основные контуры:
3.1.Карандаш body
- Создать 64 х 64px документа.Перетащите изображения (отсканированный эскиз) в монтажной области нового документа.Перейти в палитре Transparency и установите непрозрачность изображения до 50.Заблокируйте этот слой и сохраните документ.Создайте новый слой и начать делать наброски it.
- Создайте прямоугольник с закругленными углами путь с помощью Rounded Rectangle Tool и нажмите на монтажной области, чтобы установить значение Угловой радиус 10px.Нажмите кнопку ОК.
- Выберите инструмент Selection Tool (V) и нажмите на край округлый путь прямоугольник и перетащите его и сделать его плотно на набросал изображение, как на рисунке ниже.
- Выбрать прямоугольника со скругленными углами и установить их цвет none.
- Ластик выглядит меньше, чем тело, поэтому она должна быть реформирована.Там может быть несколько способов, чтобы перерисовать ластик, как с помощью Pen Tool (P), но из моего опыта, они не дают хорошегоresults.
- Выберите округлый путь прямоугольник.Дважды щелкните по шкале инструмента и проверить равномерной шкалы в диалоговом окне.Установите значение шкалы на 96%.Проверьте Копировать для создания копии, как показано на рисунке ниже.
- Выберите инструмент Прямоугольник и нарисуйте прямоугольник в новую позицию ластик и более округлый путь прямоугольник.
- Выберите Добавить опорную точку () и нажать на центральную точку прямоугольника пути (нарисованные в шаге 5) добавить еще одну опорную точку.Далее, выберите Delete Anchor Point Tool (-) и удалите 2 очка якорь.
- Выберите инструмент Эллипс и нарисуйте эллипс, как показано ниже:
- Выберите большую округлую пути прямоугольник и пути эллипса.Перейдите на палитру Pathfinder и нажмите на иконку Divide.Новая группа появится в палитре слоев.Любой разделить путь будет принадлежать к этой группе.
- Перейти к палитре слоев и выберите два пути, расположенные ниже новую группу, нажмите Command / Ctrl G, чтобы поместить их в группу и зафиксировать эту группу.Сделайте это, чтобы сделать его легче удалить неиспользуемые пути в шаге
- Разгруппировать группу разделили пути (в шаге 8), выбрав группу и выбрать команду Разгруппировать из меню правой кнопки мыши.
- Удалить неиспользуемые пути, пока результат достигается, как показано ниже.
3.2.Металл ring
Как шагов делается с ластиком, для этого пути we’ будем использовать больший эллипс и разделить путь карандашом тело отсоединения металлическое кольцо с body.
Форма карандаша сейчас были приняты очень в принципе.Я думаю, что мы можем пойти в деталях от этого шага дальше.Что мы должны сделать, это очистка pencil.
4.Подробная информация:
Создать контуры для карандаша с заостренным концом, используя инструмент Rounded Rectangle и палитры Pathfinder.Все, что мы имеем дело с такой путь сделать карандашом тело в форме призмы и посмотреть, уже будучи sharpened.
- Выберите инструмент Rounded Rectangle и нарисуйтеновые прямоугольник с закругленными углами путь с 4pt радиус угла (как в шаге 2B).
- Сделать дубликат этого прямоугольник с закругленными углами путь, нажав кнопку “Копировать и Вставить перед” команд (Command / Ctrl + F)
- Переместите дубликат путь с правой стороны.
- Выбрать как прямоугольник с закругленными углами путей и телом путь, а затем разделить их с помощью Divide опцию в Pathfinder palette.
- Выберите группу с разделенными дорожками и разгруппировать, а затем удалить неиспользуемые пути.Результат должен быть примерно такой:
- Продолжить помощью инструмента Rounded Rectangle рисовать еще округлые пути прямоугольника, а затем использовать опцию Divide, чтобы сократить путь в середине карандаша тела, чтобы сформировать ясный призмы.Далее, разгруппировать и разблокировать все пути в Layer 2, а затем изменить их имена.Смотрите результат ниже.
5.Стилизация карандашом:
И теперь мы собираемся дать значок некоторый шарм.Шаги включают в себя:
5.1.Добавление gradient
- Выбрать все пути и выберите инструмент Градиент, а затем перейдите к палитре Swatches и выберите радиальный черно-серо-белой gradient.
- Выбор каждого пути и перетащить инструмент Gradient Tool (G) по каждой из них, пока не увидите результат, как на картинке ниже:
- Выбрать все пути и установить их обводки к нулю.Цель состоит в том, чтобы просмотреть карандашом в целом.
Ну, свет изображенные на карандаш тело выглядит прекрасно, но металлическое кольцо и заостренным концом должны быть скорректированы bit.
- Изменить тип градиента этого путь к линейной, чтобы создать новый градиент, как показано на рисунке ниже.Надеясь можно создать градиент, как у меня.В случае, если вы не смогли сделать это самостоятельно, просто скачайте прилагаемый источник file.
- Путь металлическое кольцо должно охватывать резинку плотно.Чтобы сделать это, используйте Добавить опорную точку () и добавить еще 4 о …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров