В этом уроке я покажу вам, как создать несколько 8-битных иконок с использованием ограниченной палитры в Adobe Photoshop. Впрочем, вы можете также с лёгкостью создать их в MS Paint.
Лайн-арт иконки
Шаг 1
Мы будем работать в Adobe Photoshop CC 2014 (хотя другие варианты, как и MS Paint, тоже подойдут). Создайте New Document. Моя рабочая площадь (для обоих наборов иконок) составила где-то 113 на 13 пикселей.
1.Используйте Pencil Tool (B). Установите размер кисти на 1 пиксель. Увеличьте Zoom (Z) изображение на 1600% и нарисуйте в ряд 3 пикселя, а под ними ещё по одному с каждой стороны по диагонали.
2.Под ними нарисуйте в ряд ещё 7 пикселей.
3.Чтобы сделать горлышко у бутылки добавьте 3 пикселя в форме перевёрнутой буквы V.
4.Для основной части бутылки нарисуйте по столбцу из 4 пикселей с каждой стороны.
5.Между столбцами ещё 2 ряда по 7 пикселей в каждом, чтобы сделать полоску-этикетку.
6.Финальная срока включает 7 пикселей, расположенных под столбцами.
Шаг 2
Чтобы сделать лайн-арт меча, мы разделим наш процесс на две части:
1.Начните с кончика меча. Нарисуйте вертикально 3 пикселя и перпендикулярно к ним ещё 2 с правой стороны. С этого момента мы будем работать по диагонали: 2 линии по 14 пикселей.
2.Нарисуйте справа от первой диагонали 3 пикселя вверх. Затем ещё 3 вправо над второй диагональю.
3.В центр меча добавьте 3 пикселя в форме буквы V. Затем вправо от правого конца 2 пикселя и столько же вверх от левого.
4.Продолжите левую сторону, проведя ещё 3 пикселя влево и один вниз. Соответственно, справа 3 пикселя вниз и 1 влево.
Шаг 3
Теперь давайте закончим гарду и рукоять меча:
1.Начните с центра меча и нарисуйте 9 пикселей по диагонали слева направо. Добавьте по 1 пикселю между первыми и последними двумя в диагонали, чтобы лучше обозначить верхние точки гарды. Соедините эту линию диагоналями из 2 пикселей слева и справа.
2.Рукоятка состоит из букв V, плотно скреплённых между собой по диагонали. В сумме всего 7 колонок.
3.От кончика рукоятки нарисуйте 1 пиксель вправо и от него 3 по диагонали вниз. Это начало цепи, подвешенной к рукояти. Добавьте ещё 2 пикселя по диагонали от центра линии, которую вы только что нарисовали.
4.Чтобы закончить цепь, нарисуйте 3 V, состоящих из 3 пикселей, расположенных по диагонали.
Шаг 4
Последний лайн-арт невероятно прост.
1.Нарисуйте горизонтальную линию из 10 пикселей. Затем ещё по 2 пикселя с каждой стороны вниз по диагонали.
2.Добавьте 8 пикселей по вертикали с каждой стороны. Между ними должно быть расстояние в 12 пикселей.
3.Затем нарисуйте горизонтальную линию на расстоянии 6 пикселей от верха сундука. Плюс по пикселю в каждый нижний угол.
4.Проведите линию из 3 пикселей от середины крышки сундука к его центру. Теперь нарисуйте коробочку размером 4 на 3 пикселя, перекрывая центральную горизонталь. Сотрите 2 пикселя в центре коробки при помощи Eraser Tool (E). Наконец, дополните крышку сундука линиями из 4 пикселей с обеих сторон. Хотя это не обязательно.
Монохромная ограниченная палитра
Шаг 1
Перечислю цвета, использующиеся ниже, слева направо: мятный (Mint (#e0f8d0), зелёный (Green (#88c070), тёмно-лесной (Forest Green (#306850) и тёмно-зелёный (Dark Green (#081820).
1.Поверх лайн-арта бутылки создайте Новый слой (New Layer).
2.Сделайте кальку поверх внешней линии арта тёмно-лесным цветом.
3.Заполните «содержимое» бутылки зелёным и также закрасьте чёрные горизонтальные линии тёмно-лесным.
4.Используйте мятный цвет для создания бликов на бутылке, закрасив участки 3 на 2 пикселя в центре сверху и снизу, а также парочку слева (см. ниже).
5.В завершении разбросайте парочку тёмно-зелёных пикселей по углам иконки.
Шаг 2
И снова те же цвета слева направо: мятный (Mint (#e0f8d0), зелёный (Green (#88c070), тёмно-лесной (Forest Green (#306850) и тёмно-зелёный (Dark Green (#081820).
1.Создайте новый слой поверх лайн-арта меча.
2.Используя тёмно-лесной, закрасьте левую диагональ меча, затем пропустите одну и сделайте то же самое с диагональю посередине. Повторите с правой стороной, на этот раз используя тёмно-зелёный.
3.Заполните клинок мятным с левой стороны и зелёным с правой. На внешние края гарда добавьте пиксели тёмно-лесного и тёмно-зелёного цветов.
4.Продолжите заполнять гарду тёмно-лесным, а её первую диагональ залейте мятным цветом.
5.Оставшееся пространство должно быть зелёным, а окантовка гарды – тёмно-лесной. В центр рукоятки добавьте этого же цвета.
6.Её правую сторону залейте тёмно-лесным, а просто зелёный используйте с левой стороны. Фактически эта часть меча состоит из трёх диагоналей, идущих от светлого цвета к тёмному.
7.Правую сторону цепи закрасьте зелёным. В центр каждого звена добавьте мятного цвета и ещё немного тёмно-лесного наверх цепи. Наконец, тёмно-зелёного между каждым звеном.
Шаг 3
Цвета используйте те же.
1.Поверх маленького сундука с сокровищами создайте новый слой.
2.Внешний контур закрасьте тёмно-лесным.
3.Используйте тёмно-зелёный для центральной горизонтальной линии и низа замка-застёжки. На верх замка добавьте 4 тёмно-лесных пикселя.
4.В нижних углах сундука нарисуйте 3 пикселя того же цвета. Зелёным обозначьте вертикальные полоски в нижней части сундука. Расстояние между полосками должно быть в 2 строки.
5.Заполните эти пробелы мятным и добавьте по пикселю на каждый угол под крышкой сундука.
6.Линии по бокам крышки закрасьте (ненавистным переводчику) тёмно-лесным. Также добавьте на крышку мятных бликов.
7.Остальное залейте зелёным.
Четырёхцветная палитра
Шаг 1
Эта палитра отличается оттенком: кроме тёмно-лесного цвета из прошлого набора она включает также кремовый и лаймовый. Эти цвета слева направо: кремовый (Cream (#f8dd92 ), лаймовый ( Lime ( #9bbb0e ), цвет шалфея (Sage (#73a067), и тёмно-зелёный лесной (Dark Forest Green (#0f380e).
1.Создайте новый слой поверх оригинального лайн-арта бутылки.
2.Внешние контуры закрасьте тёмно-зелёным лесным.
3.Используя Pencil Tool или Paint Bucket Tool (G) закрасьте бутылку кремовым.
4.Внутренний край горлышка и горизонтальную полосу залейте цветом шалфея.
5.Над ней закрасьте полосу лаймовым цветом.
6.Этим же цветом выделите блики на этикетке и тени на донышке бутылки.
Шаг 2
И снова те же цвета: кремовый (Cream (#f8dd92 ), лаймовый ( Lime ( #9bbb0e ), шалфейный (Sage (#73a067), и тёмно-зелёный лесной (Dark Forest Green (#0f380e).
1.Новый слой поверх контура меча.
2.Чтоб ускорить процесс, используйте Magic Wand Tool (W) для выделения оригинального лайн-арта и, при помощи Fill Bucket Tool (G) залейте выделение на новом слое.
3.Заполните лаймовым цветом центры звеньев цепи, верхний край гарды и центральную диагональ клинка.
4.Цветом шалфея – правую сторону клинка и оставшееся место на гарде.
5.Наконец, используйте кремовый на верхней стороне лезвия.
Шаг 3
Цвета не изменились: кремовый (Cream (#f8dd92 ), лаймовый ( Lime ( #9bbb0e ), шалфейчик (Sage (#73a067), и тёмно-зелёный лесной (Dark Forest Green (#0f380e).
1. Новый слой поверх лайн-арта сундучка с сокровищами.
2. Внешний контур и горизонталь в центре залейте тёмно-зелёным лесным.
3. При помощи Fill Bucket Tool заполните сундук лаймовым, а центр застёжки – кремовым.
4.Используйте Pencil Tool ещё раз (это же наш главный инструмент в данном уроке) и добавьте кремовых пикселей вдоль левого и верхнего краёв сундучка. Затем «растушуйте» цвет, пропуская каждый второй пиксель.
5.Вертикальные линии и точки вкруг замка нарисуйте цветом шалфея.
Отличная работа!
Мы начали использовать ограниченные палитры в пиксель-арте и получили результат: три иконки в двух вариантах. Подумайте, что ещё можно создать, используя только эти цвета? Какие ещё цветовые комбинации можно подобрать? О своих результатах пишите в комментариях!
