Как создать мини-иконки
Многие люди просили меня научить создавать мои пиксельные иконки. Фактически их относительно просто создавать. Все, что вам нужно, это иметь базовые навыки Photoshop. Я покажу вам, как использовать Pencil для создания пиксельных иконок, и затем использовать этот инструмент повторно для создания коллекции. Я использую эту технику для создания более 320 иконок в день.
![]()
Приблизительное время выполнения: 5 минут
1. Создайте новый документ
Создайте новый документ в Photoshop, размером 14 x 14 пикселей с прозрачным фоном.
![]()
2. Нарисуйте контур фигуры
Выберите Pencil tool и размер кисти1 пиксель из палитры. Выберите темно-серый цвет и начните рисовать контур иконки. Чтобы нарисовать прямую линию, кликните там, где хотите начать, затем зажмите shift и кликните на конечной точке.
![]()
Совет: Каждый раз, как вы хотите стереть пиксель, выбирайте Eraser tool, у него — режим Pencil mode и размер кисти 1 пиксель.
3. Базовый градиент
Выделите пустую белую область при помощи Magic Wand tool. Создайте новый слой. Поставьте цвет переднего плана на светло-серый и фоновый цвет на белый. Используйте Gradient tool, протяните из верхнего угла в нижний угол по диагонали.
![]()
4. Свет и тень
Создайте новый слой. Нарисуйте внутреннюю границу белого цвета вверху шириной один пиксель, чтобы создать эффект освещения. Затем нарисуйте серую внутреннюю границу внизу.
![]()
5. Сгруппируйте все слои
В палитре слоев выберите все слои и нажмите Cmd+G, чтобы сгруппировать все слои в папку.
![]()
6. Нарисуйте карандаш
Снова начните рисовать сначала контур и затем залейте всю внутреннюю область одним цветом либо градиентом. Когда закончите, сгруппируйте эти слои в отдельную папку.
Совет: Если вы хотите одинаковые цвета во всех иконках в наборе, сохраняйте цвета в палитре.
![]()
7. Используйте слои повторно
Тут я показал, как использовать группы слоев повторно, чтобы создать коллекцию
![]()
8. Экспортируем для веба
После того, как закончите, примените toggle (invisible / visible) к группам слоев и сохраните их для веб. (Cmd+Alt+Shift+S).
![]()
Источник: How to Design Mini Icons
Смотрите также:

Неплохо,у меня получилось
КЛАСС
Ноябрь 8th, 2008
Один из наиболее бестолковых уроков на сайте. Но может и пригодится кому то.
Март 13th, 2009
Было бы интересно посмотреть урок рисования какой-нибудь favicon для сайта. Там тоже с пикселями возиться приходится.
Апрель 2nd, 2009
Отлично!!!
Только вот хотелось бы чё нить покрупнее Щас прою3аем сайт можат чё и найдём
))))
Апрель 15th, 2009
Урок супер!
Всё чётко и ясно написано.
Осталось самому придумать свою собственную иконку для сайта.
Май 15th, 2009
Отличный урок, отличный туториал, пригодится.
Сентябрь 20th, 2009
Я сначало рисую в большом формате, потом уменьшаю до размеры иконки.. вот и все))
Ноябрь 15th, 2009
как сохранить?
Декабрь 24th, 2009
Июнь 22nd, 2010
Спасибо, за урок! У меня всё получилось. Это была моя самая маленькая работа в Photoshop.
Февраль 20th, 2011
Объяснять научись ничего не понятно
пиши подробнее
Июль 30th, 2011