Как сделать пиксель-арт в Illustrator

Обновлено: 21.11.2024

Я большой поклонник пиксель-арта. В 2004 году я даже баловался этой формой, однако после того, как мою студию ограбили, я потерял диски с резервными копиями, в том числе свои пиксельные работы, и больше никогда не пробовал. В последнее время я слежу за работами Алекса Гриндлинга и некоторыми из его удивительных пиксельных рисунков. Вдохновленный этим, я решил попробовать, хотя я немного упростил процесс, чтобы облегчить себе жизнь в Illustrator.

Итак, в этом уроке я покажу вам, как создать красивый пиксель-арт из существующей фотографии, в моем случае великого Мохаммеда Али. Мы будем использовать Illustrator для большей части урока, и я должен сказать, что весь процесс займет довольно много часов, поэтому обязательно наберитесь терпения.

Шаг 1

Первый шаг — найти изображение, которое вы хотите преобразовать в пиксели.

Шаг 2

Существует множество способов пикселизации растрового изображения. Это хорошо, но не масштабируется как вектор. Одним из моих любимых инструментов для этого является Pixelmator. Поэтому я открываю изображение в Pixelmator, а затем с помощью инструмента Pixelate я использую масштаб 20 пикселей. Это означает, что каждый пиксель будет иметь размер 20 пикселей;

Шаг 3

Откройте изображение в Illustrator, и теперь пришло время воссоздать изображение в векторе. Первое, что нужно сделать, это создать базовый пиксель, в моем случае это квадрат 20x20. Затем продублируйте квадрат, чтобы создать сетку.

Шаг 4

С помощью инструмента «Переход» установите заданное расстояние 20 pt, чтобы начать создание строк.

Шаг 5

После этого начните дублировать строки. Когда у вас есть сетка, вы можете просто подобрать цвета с помощью инструмента «Пипетка» (I);

Шаг 6

Теперь перейдите к настройкам Illustrator и измените настройки Guids&Grid, чтобы отображалась линия сетки через каждые 20 pt и 1 подразделение.

Шаг 7

Вот пример начала иллюстрации с видимой сеткой.

Шаг 8

После сложной и трудоемкой задачи у вас будет красивый векторный объект, готовый делать все, что вы хотите.

Заключение

После редактирования и настройки вы можете создать свой собственный макет, используя пиксельную графику. Я большой поклонник этого стиля, и мне нравится работа некоторых людей, которые с ним работают, однако я не настолько талантлив, и мне сначала нужно использовать инструмент для пикселизации. Результат действительно классный, но времени, необходимого для его достижения, довольно много.

Что вы будете создавать

В этом учебном пособии для начинающих вы научитесь создавать бесконечно масштабируемые пиксельные изображения в Adobe Illustrator. С помощью инструмента «Прямоугольная сетка» и инструмента «Живое ведро с краской» мы создадим простые, симпатичные маленькие пиксельные значки, а затем я покажу вам, как вырвать их из сетки, создавая значки без потерь, паттерны пиксельного искусства. и многое другое.

1. Настройка вашего документа

Шаг 1

Откройте Adobe Illustrator CC 2014 (это руководство можно использовать с другими версиями Adobe Illustrator, но все мои скриншоты взяты из него) и создайте новый документ. Мне нравится работать с квадратным документом размером 800 на 800 пикселей. Вы можете использовать файл меньшего или большего размера, если вам это нужно.

Шаг 2

На панели инструментов выберите инструмент «Прямоугольная сетка» (находится под инструментом «Отрезок линии» (/). Дважды щелкните инструмент, чтобы отобразить его параметры. Введите размер документа для ширины и высоты. Введите 30 для обоих Горизонтальные и вертикальные разделители.

Шаг 3

Убедитесь, что прямоугольная сетка совпадает с монтажной областью. Выберите свою сетку и установите черный цвет обводки или любой другой цвет, который вам больше нравится, чтобы вы могли легко видеть сетку.

2. Рисование контура блокнота

Шаг 1

Выберите сетку и возьмите инструмент "Быстрая заливка" (K) (на панели инструментов под инструментом "Создание фигур" (Shift-M)).

Шаг 2

Вы можете либо щелкнуть по одному пространству сетки за раз, либо щелкнуть и перетащить по сетке, чтобы заполнить несколько пробелов за один раз. Независимо от используемого метода заполните контур прямоугольника шириной 15 пикселей и глубиной 18 пикселей.

Шаг 3

Используя инструмент "Быстрая заливка" (Shift-M), выберите коричневую рамку в нижнем левом углу коричневого прямоугольника и удалите ее. Затем с помощью инструмента «Быстрая заливка» закрасьте три диагональных поля в правом нижнем углу.

Шаг 4

Для спиралей блокнота начните два поля сетки слева и заполните два поля вверху, одно поле по диагонали вверх и два поля внизу. Пропустите один столбец и повторите дважды.

Затем с помощью инструмента «Быстрая заливка» удалите пространство из контура коричневого прямоугольника, чтобы на спиралях вашего блокнота было четыре белых пробела сверху вниз (см. ниже).

Заполните три пробела под контуром блокнота, которые соединяются по диагонали, чтобы закончить спиральные контуры.

3. Заполнение и извлечение блокнота

Шаг 1

Шаг 2

Шаг 3

Шаг 4

После завершения создания пиксельного дизайна выберите сетку, щелкните правой кнопкой мыши и нажмите "Разгруппировать". Затем перейдите в «Объект» > «Быстрая заливка» > «Разобрать», чтобы превратить вашу группу быстрой заливки в объекты. Нажмите «Разделить» на панели «Обработка контуров», чтобы заполненные области были отделены от сетки. Наконец, используйте инструмент Magic Wand Tool, чтобы выбрать обведенную сетку и удалить ее. Мы еще раз повторим этот процесс для других значков в этом руководстве.

4. Создание простого карандаша

Шаг 1

Используйте инструмент "Прямоугольная сетка", чтобы создать еще одну сетку для вашего векторного пиксельного рисунка. Снова используйте инструмент «Быстрая заливка», чтобы начать закрашивать пробелы коричневым цветом.

Заполните четыре диагональных пробела в правом верхнем углу, а затем три диагональных пробела в правом нижнем углу, чтобы создать точку карандаша. Остальная часть вершины карандаша расположена на четыре пробела вниз по обе стороны от острия и на девять пробелов в ширину.

Шаг 2

Сторона карандаша расположены на 19 делений вниз, а основание — на семь делений в ширину. Не забудьте заполнить три верхних ряда для карандашного стержня и два ряда по семь пробелов внизу для металлического наконечника ластика.

Шаг 3

Нам нужно два цвета для каждой части карандаша: дерево, желтый корпус, металлический наконечник и ластик. Более темный цвет заполняет два полных столбца по обе стороны от более светлого цвета, который заполняет три столбца. Цвета следующие:

Шаг 4

Наконец, давайте повторим процесс извлечения вашего векторного пиксельного дизайна из прямоугольной сетки. Выберите сетку, щелкните правой кнопкой мыши и нажмите «Разгруппировать». Затем перейдите в «Объект» > «Быстрая заливка» > «Разобрать», чтобы превратить вашу группу быстрой заливки в объекты. Нажмите «Разделить» на панели «Обработка контуров», чтобы заполненные области были отделены от сетки. Наконец, с помощью инструмента «Волшебная палочка» выберите заштрихованную сетку и удалите ее.

5. Создание небольшого набора маркеров

Шаг 1

Эта схема похожа на карандаш, поэтому я быстро пройдусь по контуру. Настройте линейную сетку так же, как блокнот и карандаш.

Наконечник точеный и начинается с заполнения двух пробелов справа и одного по диагонали.
Наконечник имеет четыре клетки в высоту, четыре клетки в ширину и три по диагонали.
Заполните два пробела по обе стороны от кончика маркера. Затем заполните восемь пробелов в верхней части корпуса маркера.
Заполните верхнюю половину маркера так, чтобы стороны были на семь делений ниже с каждой стороны. Нижняя и верхняя полоса занимают по восемь пробелов каждая.
Наконец, тело маркера расположено на 21 делении вниз с каждой стороны и на восемь делений внизу. На корпусе маркера три ряда коричневого цвета (см. ниже).

Шаг 2

Как и у карандаша, цвета маркера разделены на столбцы.

Шаг 3

В третий и последний раз в этом руководстве давайте рассмотрим этапы извлечения векторной пиксельной графики из прямоугольной сетки:

6. Изменение цветов для альтернативных дизайнов

Шаг 1

Один из способов легкого изменения цветов — скопировать (Control-C) и вставить (Control-V) дизайн сетки, прежде чем извлекать из прямоугольной сетки векторный пиксель-арт. Затем вы можете легко пополнить пробелы Live Paint.

Шаг 2

Кроме того, выберите свой дизайн, выберите «Правка» > «Редактировать цвета» > «Перекрасить иллюстрацию» и измените оттенки выбранного объекта. Я считаю, что это самый быстрый способ изменить цвет объекта.

Обратите внимание, что рисунок был наложен на панель «Перекрасить рисунок», чтобы продемонстрировать его использование.

Шаг 3

Создавайте столько вариантов своих маленьких пиксельных значков, сколько считаете нужным. Убедитесь, что квадраты каждого дизайна сгруппированы (Control-G) вместе. Ниже вы можете сравнить режим предварительного просмотра (Control-Y) и режим контура, показывая все ваши масштабируемые векторные квадраты, составляющие каждый дизайн.

Отличная работа, готово!

Теперь, когда вы освоили технику, вы можете создавать наборы значков, бесшовные шаблоны для печати с помощью панели «Параметры шаблона», ресурсы для мобильных игр и многое другое. Хотя это не чистый пиксель-арт, принцип работы в мелком масштабе тот же, с преимуществом изменения размера изображения в формате без потерь. Поделитесь с нами своими творениями в векторной пиксельной графике в разделе комментариев ниже!

Художественный стиль Final Fantasy и Super Mario World вдохновил новое поколение на создание ретро-цифрового искусства. Пиксельные художники опираются на прошлое, чтобы создавать новые образы и даже создавать собственные игры.

Как начать рисовать пиксель-арт?

Визуальный стиль Atari 2600, Nintendo Entertainment System, Sega Genesis и ранней компьютерной графики повлияли и продолжают влиять на миллионы творческих умов. Пиксель-арт опирается на это влияние и ностальгию. Современное графическое разрешение лучше, чем все, что предлагалось в более ранних игровых системах, но особая эстетика и эмоциональная ассоциация пиксельного стиля по-прежнему привлекательны.

Чтобы сделать пиксельную графику, вам необходимо:

Что такое пиксель-арт?

Пиксель-арт – это не просто изображение из пикселей. Это искусство, напоминающее образы ранних компьютеров и видеоигр. Это включает в себя все, от Pong до Sonic the Hedgehog.

Ранние видеоигры имели более низкое разрешение — было невозможно скрыть крошечные прямоугольники, которые создавали миры Space Invaders и Donkey Kong, поэтому пиксельная графика возникла по необходимости. . Художникам, создававшим видеоигры в 1970-х и 1980-х годах, приходилось вводить новшества и сводить изображения к их сущности. Несколько красных пикселей должны указывать на шляпу Марио, а один или два пикселя — на его руки или лицо.

В эпоху 16-битной графики 1990-х годов пиксельная графика стала более детализированной, но суть осталась прежней. У художников был большой холст для работы, но они по-прежнему работали с отдельными пикселями, каждый из которых играл важную роль в создании общего изображения.

Сложно ли изучать пиксель-арт?

Пиксель-арт прост в освоении, и с ним можно делать неограниченные возможности. Это форма искусства, в которой для создания изображений используются отдельные дискретные цветовые элементы. Вышивка крестом, пуантилизм и процесс Бена Дэя делают одно и то же. Как и другие средства, пиксель-арт легко освоить, и как только вы освоите основы, вам не будет предела в его владении.

Начните рисовать с пикселей.

Пиксель-арт требует особого внимания. В отличие от художника, который буквально использует широкие мазки, пиксель-художник должен сосредоточиться на размещении каждой отдельной единицы изображения. Хороший художник по пикселям может уловить основную форму объекта, при этом упростив его.

Начните работу с пиксельной графикой, изучив пиксельные персонажи, которыми вы уже восхищаетесь в работах прошлых художников. «Отсылки к реальной жизни не так хорошо применимы в пиксель-арте, как в других дисциплинах цифрового искусства», — говорит пиксель-художник Эми Монсеррат. «Вы должны научиться упрощать сложные формы, такие как руки или выражения лица».

Воспроизведение классического пиксельного искусства может быть кропотливым процессом, но следование пути другого художника может быть поучительным. Конечно, вы никогда не должны выдавать то, что вы скопировали, за свое собственное — при работе с уже существующими произведениями искусства указывайте имена создателей соответствующим образом.

Узнайте, как создавать четкие линии и изображения в своих проектах UI/UX, а также в веб-дизайне, экранном и другом цифровом дизайне.

Никогда больше не мучайтесь со сглаженными значками и нечеткой графикой — создавайте контуры, которые автоматически выравниваются по пиксельной сетке по мере их рисования, или выравнивайте графику по пиксельной сетке одним щелчком мыши. Вот как.

Настроить привязку к пикселям

Сначала выберите «Вид» > «Просмотр пикселей». Теперь при увеличении до 600 % или выше вы увидите пиксельную сетку.

Примечание. Предварительный просмотр пикселей позволяет предварительно просмотреть, как будет выглядеть изображение после растрирования. Это особенно полезно, когда вы хотите управлять размещением, размером и внешним видом краев объектов в растровой графике.

Если на монтажной области ничего не выбрано, нажмите кнопку "Привязать к пикселю" в разделе "Параметры привязки" на панели "Свойства".

Каждый раз рисуйте изображение с точностью до пикселя

Теперь, когда вы рисуете, контуры и векторные фигуры с прямыми краями автоматически выравниваются по пиксельной сетке. Представьте, сколько времени вы сэкономите, если будете рисовать четкие и четкие линии с самого начала.

Рисунок остается выровненным по пикселям даже при перемещении

Ваши пути и фигуры выравниваются по пиксельной сетке по мере их перемещения, поэтому вам не нужно беспокоиться об изменении их внешнего вида. Вы также можете исправить сглаженное изображение, просто переместив его.

Совет. Если остались сглаженные края, выберите инструмент "Частичное выделение" и переместите затронутую опорную точку или сегмент пути к ближайшей пиксельной сетке.

Бесстрашно масштабируйте произведение искусства

Опорные точки, сегменты пути и фигуры автоматически выравниваются по пиксельной сетке по мере масштабирования изображения.

Сделайте любую иллюстрацию идеальной до пикселя одним щелчком

Чтобы получить сглаженные значки или изображения с нечеткими краями, просто щелкните правой кнопкой мыши и выберите "Сделать пиксели идеальными".

Примечание. Прямые края рисунка будут выглядеть четче, но кривые и диагональные линии не улучшатся.

Вот оно! Теперь вы можете сделать все свои веб-графики и значки четкими на любом экране.

Читайте также: