Даже если вас не было, чтобы испытать чудеса классических видеоигр от 1970 до 1990, никогда не поздно развить понимание уникальной формы искусства, которая эволюционировала для удовлетворения потребностей этих игр. Это искусство, которое мы знаем сегодня как пиксель-арт, и это один из лучших способов заработать свои полосы в компьютерном графическом дизайне 2D.
Причина этого в том, что пиксельная графика предъявляет высокие требования к художнику. Это требует большей дисциплины и является более жестким, чем большинство других видов искусства. Пиксельная графика заставляет вас фокусировать и изолировать то, что наиболее важно в изображении, и использовать только это, не предоставляя более точного контроля, который вы могли бы применить в более детальном стиле рисования. Это подход «меньше значит больше» к рисованию, и он делает вас лучше в рисовании.
Пиксель арт требует времени для освоения. В конце концов, вы создаете свои изображения по одному пикселю за раз, и каждое изображение требует тщательного планирования. Вам нужно научиться работать с ограниченной палитрой и без использования естественных кривых. Вы также будете работать исключительно в среде 2D, где, если вам нужен внешний вид 3D, вам нужно будет создать его, используя такие приемы, как изометрическая перспектива и параллаксная прокрутка.
Обучение анимации спрайтов и фонов также является отличным способом улучшить ваши навыки программирования, если вы сами обрабатываете весь игровой проект. Теперь, когда мобильные устройства более подключены, и им по-прежнему обычно не хватает возможностей для устойчивой игры в 3D, Игры 2D возрождаютсяи вы можете применить эти навыки на практике, чтобы заработать дополнительные деньги, когда дизайнерские работы не доходят до вашей двери.
Пиксель арт не требует специального программного обеспечения. Вы можете создавать пиксельные рисунки в любой базовой программе для рисования. Многие пиксельные художники начинали свое дело с простых инструментов, таких как MS Paint, но лучше использовать более сложное программное обеспечение, которое использует слои и пользовательские сетки, так что вы действительно можете настроить свои проекты до совершенства. Inkscape действительно хорош для этой цели. Он бесплатный, имеет встроенные изометрические сетки и отлично подходит для пиксельной графики.
Что касается аппаратного обеспечения, вы можете использовать мышь, но я считаю, что проще использовать графический планшет, потому что я склонен брать «руки мыши» при выполнении подробных художественных работ, поэтому я бы рекомендовал использовать хотя бы базовый графический планшет.
Почему пиксельная графика идеальна
Слишком много людей используют слова иллюстратор и дизайнер взаимозаменяемо. На самом деле иллюстратор намного ниже уровня дизайнера. Иллюстраторы просто рисуют вещи по запросу своего клиента. Дизайнеры проектируют вещи в соответствии с потребностями своего клиента. Это огромная разница.
Научиться создавать пиксельные рисунки - значит научиться создавать креативные решения для удовлетворения самых специфических потребностей. Это гораздо больше, чем просто рисование. Планирование, внимание к деталям, способность работать в рамках технологических ограничений и разработка стратегии для преодоления этих ограничений - вот что делает великого пиксельного художника также отличным дизайнером.
Мир пиксельной графики
Вопреки тому, что вы можете ожидать, рынок пиксельной графики велик, и он растет. Как правило, ожидалось, что пиксельная графика исчезнет, как только технология достигнет точки, когда станет более практичным и выполнимым использовать векторную графику и 3D CGI. На самом деле спрос на пиксельную графику все еще высок, и он действительно получил более широкое применение. Если когда-то пиксельная графика была в основном ограничена играми, то сейчас она используется в очень широком диапазоне практических приложений.
Некоторые из областей, где продаются пиксельные рисунки:
- Мобильные игры и игры в стиле ретро
- Инфографика
- Дизайн сайта
- Дизайн интерфейса
- Дизайны, используемые на одежде, бирках и т. Д.
- Телевизионная графика (например: The IT Crowd, Good Game)
- Пиксельные художественные комиксы (например: Diesel Sweeties, Kid Radd)
- Фильмы (например: Wreck It Ralph, Pixels)
- Пиксельные художественные выставки и частные коллекции
Могут быть другие потенциальные рынки, которые возникают время от времени. В некотором смысле вы можете даже думать о кубиках Lego как о каком-то пиксельном искусстве, и на самом деле возможно создать пиксельную графику 3D с Lego. Но этого не произойдет, если вы сначала не станете мастером пиксельных мастеров, поэтому давайте узнаем немного больше о том, как вы это делаете.
Начало работы в пиксельном дизайне
Лучший способ попасть в этот мир - это войти в конкурсы пиксельной графики и учиться, как вы идете. Конечно, когда мы говорим о соревнованиях, мы имеем в виду те, которые могут участвовать бесплатно и которые не используют вашу работу в коммерческих целях, требуя, чтобы вы передали все свои права организаторам конкурса.
Соревнования по хорошей пиксельной графике ставят перед собой задачи, которые требуют от вас навыков новаторского дизайнера для достижения цели. Иногда это просто настройка темы, но она также может включать такие правила, как ограничение количества цветов, которые вы можете использовать, или установка максимального количества пикселей. Это все ограничения, с которыми когда-то приходилось работать гейм-дизайнерам. Когда вы изучаете одни и те же методы, в одинаковых условиях, вы развиваете сильные навыки и, надеюсь, лучше понимаете весь процесс проектирования.
обучение
Есть много бесплатных онлайн-уроков, и вы можете приобрести книги по пиксельной графике or дизайн игры чтобы ты пошел. Для более глубокого введения вы могли бы рассмотреть вопрос о курс удэми в пиксельной графике, Всего за $ 35 и преподается опытным художником игры (Марко Вейл, в настоящее время арт-директор в Indot Studios), это очень хорошая ценность.
Пиксель арт процесс
Создание любого произведения пиксельной графики следует линейному процессу от концепции до завершения:
- Идея - вы решаете, что собираетесь создать, или получаете инструкции
- Планирование - вы делаете выбор о том, как вы собираетесь создать образ
- Выбор сетки - вы выбираете правильный тип сетки для изображения, которое вы создаете
- Выбор палитры - вы устанавливаете цветовую палитру для изображения
- Прототипирование - необязательный шаг, чтобы дать вам базовую структуру для контура
- Выделение - вы создаете основные контуры основных частей изображения
- Сглаживание - вы исправляете любые «неровности» или неровности, чтобы создать лучший контур
- Раскраска - вы добавляете цвета к изображению, используя настроенную палитру
- Затенение - вы добавляете блики и тени, чтобы сделать ваше изображение более реалистичным
- Дизеринг - необязательный шаг для воспроизведения истинного ретро-ощущения в ограниченной палитре
- Выборочное выделение - вы применяете сплошные линии к выбранным частям изображения, чтобы дать определение
- Сглаживание - последний этап сглаживания, в котором вы используете цвет для усиления реализма
- Настройка - если изображение, которое вы создали, является небольшой частью большой сцены, вы устанавливаете его настройку.
Некоторые этапы, такие как сглаживание и сглаживание, могут автоматически выполняться программным обеспечением для рисования. Это зависит от того, что вы используете и какие опции вы выбираете.
Идея
Некоторые люди считают это самым сложным шагом в создании новой работы, но на самом деле это, вероятно, не так. Ваша цель - решить, что вы собираетесь создать, или, в некоторых случаях, получить от клиента инструкции относительно того, что он хочет. Вдохновение может прийти из реального окружающего вас мира или из фильмов, игр, книг и всего, что может помочь вам визуализировать объекты, которые появятся на вашей сцене. Для этого примера мы создадим цветочный горшок, который был бы опорой в большой сцене.
Меню
На этом этапе вы уже знаете, что вы собираетесь создать, поэтому теперь вы думаете о том, как вы собираетесь его создать. Первое важное решение будет заключаться в том, собираетесь ли вы создавать плоское изображение или дать ему перспективу 3D. Вы также решите, насколько детальным или реалистичным должно быть изображение, нужно ли оно в ретро-стиле, и тому подобное.
Чем реалистичнее будет изображение, тем больше пикселей и цветов вам понадобится, и тем больше времени потребуется для его создания. Если вы разрабатываете для соревнования, некоторые из этих вариантов уже были сделаны для вас, но вам все равно нужно будет найти лучший способ достичь результата.
Разумной вещью было бы распечатать сетку, с которой вы будете работать, и использовать ее для создания бумажного эскиза готового компьютерного изображения. Это послужит справочным материалом для создаваемого растрового изображения, чтобы помочь вам сохранить согласованность перспективы и масштаба.
Выбор сетки
Это определяется характером работы, которую вы создаете. Для плоских изображений вы будете использовать стандартную сетку, где все линии пересекаются под прямым углом.
В сцене 3D у вас есть выбор между использованием изометрической сетки (наиболее распространенный выбор) или наклонной сетки. Изометрическая сетка имеет линии, которые пересекаются в градусах 30:
Косая сетка имеет линии, которые пересекаются в градусах 45:
Наклонные рисунки хороши, когда вы хотите добавить много мелких деталей, но в целом изометрия обеспечивает лучший обзор и выглядит более реалистично. Это более широко выбранный стиль рисования по уважительной причине.
Выбор палитры
Вы можете оставить этот шаг, пока не будете готовы к раскрашиванию, но на самом деле можете помочь с остальной частью процесса, если вы определите свои цвета на ранней стадии.
Макетирования
Цветочный горшок в этом примере в основном представляет собой искаженную форму конуса, и, как и во всех имитациях конуса в 2D, мы создаем эту базовую форму, используя сложенные эллипсы. Это экономит время, а также демонстрирует ценность использования Inkscape, поскольку в нем есть алгоритмы для получения более плавных линий на изогнутых кромках, чем во многих других программах для рисования. Нам просто нужно убедиться, что эллипсы хорошо совпадают с сеткой.
Затем используйте несколько прямых линий, чтобы соединить их (слегка изогнутые линии будут еще более реалистичными, если у вас хватит терпения их нарисовать).
Излагая
На этом шаге мы рисуем контур изображения, которое мы хотим пикселировать. Если вы сделали прототип изображения, эта часть проста. Сначала создайте новый слой изображения и поместите его поверх другого слоя (в Inkscape новый слой автоматически имеет прозрачный фон). Заблокируйте слой прототипа, затем выберите новый слой и используйте его, чтобы обвести ваш прототип с помощью карандаша. Отключить привязку сетки при трассировке изогнутых линий.
Если вам сложно увидеть новые линии, просто уменьшите непрозрачность слоя-прототипа, чтобы было легче увидеть линии слоя-схемы. Не прослеживайте все линии, только те, которые имеют смысл.
Вы можете удалить слой-прототип после завершения выделения, если хотите, или просто сделать его невидимым.
Сглаживание
Это сложный шаг. Для этого вы увеличиваете кривые на изображении и пытаетесь исправить любые неровные линии, которые делают изображение менее естественным. В зависимости от уровня изображения вам может не понадобиться это делать (если ваше изображение имеет размер 32 × 32 пикселей или меньше, вы можете сделать очень мало, чтобы улучшить его с помощью сглаживания.
Способ выполнения первого прогона сглаживания состоит в увеличении изображения, чтобы вы могли видеть, где кривые нечетко определены, или где есть сплошные разрывы (разрывы). Любые пробелы вызовут цветное кровотечение, если вы используете заливку из ведра, так что это хорошая идея - устранить пробелы. Помните, что вы просто делаете один пиксель за раз, и планшет делает работу намного проще, чем мышь.
Окраска
Это то, что вы делали для развлечения, когда вам было пять лет, но теперь это намного проще. Вы можете заполнить большие области цвета заливкой, и многие программы для рисования позволяют вам установить градиент, который может дать или не дать реалистичный вид. В противном случае это то же самое, что и сглаживание: увеличивайте и устанавливайте пиксели по одному. Не создавайте отдельный цветной слой, потому что ваше программное обеспечение может не распознавать границы другого слоя при выполнении заливки.
затенение
Сплошные цвета легко, но чтобы получить реалистичный вид, вам нужно использовать затенение. Затенение на больших изображениях проще, потому что у них больше пикселей для работы. Первый шаг в затенении - выяснить, как свет попадает на ваш объект или сцену, а затем реалистично применить блики и тени. Поначалу это будет сложно, но с опытом и отзывами коллег-артистов вы поймете это. Здесь я только заштрихую заднюю стенку горшка, но было бы лучше нанести некоторые блики на переднюю стенку.
Смешение
Имея ограниченную палитру, вы не всегда можете получить все оттенки и цвета, которые вам нужны, а тонкие изменения между смежными областями затруднены без размывания. Это не то, что требуется для современного оборудования, но оно часто применяется в ситуациях, когда вам нужен внешний вид ретро-90 или когда по разным причинам вам необходимо работать с ограниченной палитрой. Некоторое программное обеспечение может автоматически обрабатывать дизеринг для вас, или вам может потребоваться создать собственное дизеринг. Это изображение слишком простое, чтобы вызывать размытие, но вот учебник это объясняет, как создать поддельный эффект сглаживания в Inkscape.
Выборочное изложение
Это означает замену черных контуров на внутренних областях более естественным цветом и выделение только тех частей, которые необходимо выделить для определения. В реальной жизни вены на листе не черные, поэтому их не должно быть и на вашем рисунке.
Сглаживание
Это похоже на сглаживание, за исключением того, что вы смотрите более внимательно на те области цвета, которые могут нуждаться в «выпуклости», чтобы немного смягчить линии, чтобы они казались более реалистичными. Изменение цвета означает только выбор цветового оттенка для пикселя между цветами пикселей по обе стороны от него. Преднамеренное размытие делает линии менее резкими. Как и в случае с дизерингом, ваше программное обеспечение может автоматически применять для вас сглаживание.
настройка
Помещение готового объекта в большую сцену называется установкой. Вам не нужно делать это со спрайтами персонажей или подвижными объектами. Вы можете сделать это позже с кодом. Используйте настройки для неподвижных объектов, которые не двигаются. Анимированные объекты должны быть преобразованы в спрайты, что является темой для другого дня.
Что делать, если ваше изображение недостаточно пикселей
Одна из проблем заключается в том, что Inkscape и подобные векторные программы слишком хорошо справляются с работой по заливке, поэтому цвета выглядят действительно плавно и эффектно. Если вам нужен пиксельный вид, вам нужно экспортировать изображение в png, открыть его в GIMP и применить фильтр Pixelize, который вы найдете в разделе «Размытие». Это даст вам такой результат (который может понадобиться для сглаживания):
Заключительные замечания
Пиксельная графика далеко не мертва, и хорошие пиксельные художники по-прежнему пользуются большим уважением в сообществе дизайнеров от тех, кто понимает самоотверженность, необходимую для того, чтобы стать мастером. Умение создавать изображения попиксельно делает вас лучшим дизайнером и, возможно, лучшим инженером. Рыночный спрос на пиксельную графику все еще высок, и на местах существует относительно немного талантливых пиксельных художников, которые удовлетворяют эту потребность. Вы можете зарабатывать деньги в пиксельной графике или просто использовать их как способ улучшить свои навыки. В любом случае, это весело и полезно, стоит того.
