Большинство дизайнеров часто используют пиксельные иконки в дизайне сайтов, списков, меню, для вспомогательного иллюстрирования ссылок навигации и т.п. Пиксельные иконки помогают украсить дизайн интерфейса и сделать его более информативным. Такого рода иконки отличаются максимальной четкостью и минимальными размерами. Многие их коллекционируют, некоторые каждый раз пытаются найти нужную в сети, а слабо начать рисовать свои?
Не волнуйтесь, это достаточно легко и не требует большого опыта и усилий, но в то же время значительно улучшает дизайн и повышает его информативность. Для рисования своих пиксельных иконок нам понадобятся всего лишь Photoshop и желание! Попробуем нарисовать иконку космического монстра из старой игры Galaxy.
1. Создаем новый файл
Открываем Photoshop и создаем новый файл (File > New…) c размерами 16x16px.
2. Готовимся к рисованию
В будущем может понадобится поменять цвет, задать прозрачность, скопировать или перекрасить иконку. Потому будет целесообразнее рисовать её на отдельном слое (Layer > New > Layer…). Теперь, когда новый слой готов, приготовим видимую область. Наша иконка очень маленькая (16x16px) и для удобства её рисования стоит увеличить видимую область холста примерно до 800% — 1600% видимости (Повторите несколько раз комбинацию View > Zoom in или же Сtrl++). Теперь можем приступать к рисованию иконки.
3. Рисуем иконку
Для рисования пиксельной иконки нужна кисть размером в один пиксель. В таком случае лучше использовать инструмент Pensil Tool (клавиша B). Выбераем этот инструмент с размером кисти в 1px и назначаем черный цвет.
Далее рисуем иконку монстра как показано на изображении.
На заметку: Для рисования ровных прямых линий удерживайте нажатой клавишу Shift. Для стирания лишних пикселей используйте инструмент Eraser Tool (клавиша E) в режиме Pencil с кистью в 1px.
4. Смотрим на результат
Для просмотра результата необходимо увидеть иконку в размере один к одному. Установите видимую область холста на 100% (View > Actual Pixels). Поздравляем, все готово!
Теперь мы умеем рисовать любые пиксельные иконки по этому принципу.
Действительно полезная статья. Огромное спасибо автору – смогла нарисовать целую серию для своего сайтика!