Многие люди спрашивали меня как был создан мой популярный набор иконок Mini Pixel Icon Pack . На самом деле, это сравнительно просто. Всё что Вам понадобится — это всего лишь базовые навыки работы в Photoshop. Здесь я продемонстрирую как пользуясь инструментом Pencil Tool нарисовать пиксельные иконки, и в последствии повторно использовать их для создания целой коллекции. Эту технику я использую для создания свыше 320-ти окинок в день.
1. Создайте новый документ
В Photoshop, создайте новый документ, размером 14×14px, с прозрачным фоном.
2. Нарисуйте контур фигуры
Для инструмента Pencil Tool выберите в настройках кисть размером 1px. Теперь выберите тёмно-серый цвет и начинайте рисовать контур иконки странички. Чтобы нарисовать прямую линию, сперва кликните на её начальную точку и удерживая клавишу Shift кликнете на её предполагаемую конечную точку.
Если Вы захотите стереть лишние пиксели, воспользуйтесь инструментом Eraser Tool, установив параметру Mode значение Pencil и размер кисти равный 1px.
3. Основной градиент
Выделите пустое пространство внутри контура, при помощи Magic Wand Tool. Создайте новый слой. Установите цвет переднего плана светло-серым, а цвет фона белым. Используя Gradient Tool и удерживая левую кнопку мыши, проведите по диогонали линию, из верхнего угла, к нижнему.
4. Блики и тени
Создайте новый слой. Нарисуйте белую внутреннюю границу, толщиной в 1px, чтобы создать эффект блика. Затем, нарисуйте мягко-серым цветом внутреннюю нижнюю границу.
5. Сгруппируйте все слои
В паллитре слоёв, выделите все слои и нажмите Ctrl+G, чтобы сгруппировать их в одну папку.
6. Нарисуем карандаш
Вновь, начните с рисования контура и только потом залейте внутреннюю область любым однородным цветом или градиентом. После того как сделаете это, сгруппируйте эти слои в отдельную папку.
Если вы хотите создать набор иконок в одной цветовой гамме, по ходу работы, сохраняйте используемые Вами при рисовании цвета в палитре цветов.
7. Повторное использование
Здесь показано как я повторно использовал группы слоёв для создания целой коллекции иконок:
8. Экспорт в web
После того как Вы нарисуете целый набор иконок, включая и выключая свойство Invisible/Visible (Видимый/Невидимый) по отношению к группам слоёв (а точнее папкам, содержащих слои), сохраните каждую иконку через File->Save for Web либо просто нажав Ctrl+Alt+Shift+S.
Ну а если Вы слишком ленивы, чтобы проследовать всеми вышенаписанным шагами самому, можете скачать бесплатный набор иконок здесь
