Пиксельная графика в реальной жизни — уроки фотошоп

Курс пиксель-арта

Это перевод публикации «Les Forges Pixel Art Course».

pdf на английском.

Часть 1: Правильные инструменты

Часть 2: Линии и кривые

Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание Часть 7: Текстуры и размытие Часть 8: Мир тайлов

Предисловие

Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован.

Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так).

Он ограничен инструментами такими как «карандаш» и «заливка». Тем не менее не скажешь, что пиксель-арт или не-пиксель-арт графика — более или менее красива. Справедливее сказать, что пиксель-арт другой, и он лучше подходит для игр стиля «ретро» (как Супер Нинтендо или Гейм Бой).

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

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

— Я также хочу указать, что только некоторые из изображений, использованные в этом руководстве увеличены. Для изображений которые не увеличены, будет хорошо, если вы найдёте время скопировать эти изображения так, чтобы вы могли изучить их детально. Пиксель-арт — это суть пикселей, изучать их издалека бесполезно.

— В конце концов, я должен поблагодарить всех художников, кто присоединился ко мне в создании этого руководства так или иначе: Шина, за его грязную работу и штриховые рисунки, Ксеногидрогена, за его гений цветов, Лунна, за его знания перспективы, и Панду, сурового Ахруона, Дайо, и Крайона за их щедро предоставленные работы, для иллюстрации этих страниц. Так, позвольте вернуться к сути дела.

Часть 1: Правильные инструменты

Плохие новости: вы не нарисуете ни единого пикселя в этой части! (И это не причина пропускать её, так ведь?) Если есть поговорка которую я терпеть не могу, это «нет плохих инструментов, только плохие работники».

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

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

1.Некоторые старые вещи

Когда выбираешь ПО для создания пиксель-арта, люди часто думают: «Выбор ПО? Это безумие! Всё что нам нужно для создания пиксель-арта, это paint!(видимо игра слов, рисование и программа)» Трагическая ошибка: Я говорил о плохих инструментах, это первый.

Paint имеет одно преимущество (и только одно): он уже есть у вас, если вы запустили Windows. С другой стороны, у него куча недостатков. Это (неполный) список: * Вы не можете открыть более одного файла одновременно * Нет управления палитрой.

* Нет слоёв или прозрачности * Нет непрямоугольных выделений * Мало горячих клавиш * Ужасно неудобно Вкратце, вы можете забыть про Paint. Сейчас мы посмотрим настоящее ПО.

2. В конце концов..

Люди тогда думают: «Ладно, Paint слишком ограничен для меня, так я буду использовать моего друга Photoshop (или Gimp или PaintShopPro, это одно и то же), которые имеют тысячи возможностей.

» Это может быть хорошо или плохо: если вы уже знаете одну из этих программ, вы можете делать пиксель-арт (отключив все опции для автоматического антиалиасинга, и выключив многое из продвинутого функционала). Если вы ещё не знаете эти программы, тогда вы потратите много времени, изуччая их, даже хотя вам не нужна вся их функциональность, что будет пустой тратой времени.

Вкратце, если вы уже используете их долгое время, вы можете создавать пиксель-арт (я лично использую Photoshop по привычке), но иначе, много лучше использовать программы, которые специализируются на пиксель-арте. Да, они существуют.

3. Сливки

Программ предназначенных для пиксель-арта много больше, чем кто-то может подумать, но здесь мы рассмотрим только лучшие. Они все имеют очень похожие характеристики (управление палитрой, предпросмотр повторяющихся тайлов, прозрачность, слои, и так далее). Различия у них в удобстве… и цене.

Charamaker 1999 — хорошая программа, но распространение, кажется, приостановлено.

Graphics Gale намного более интересна и легка в использовании, и она идёт по цене около $20, что не так уж плохо. Добавлю, пробная версия не ограничена по времени, и идёт с достаточным набором, чтобы сделать достаточно хорошую графику. Только она не работает с .

gif, что не такая уж проблема, поскольку .png в любом случае лучше.

ПО более часто используемое пиксельными художниками, это ProMotion, которая (явно) более удобна и быстра чем Graphics Gale. А, да, она дорогая! Вы можете купить полную версию за скромную сумму… 50 евро ($78).

Позвольте не забыть наших друзей на Mac! Pixen хорошая программа, доступная для Macintosh, и она бесплатна. К несчастью я не могу сказать вам больше, потому что у меня нет Mac. Заметка переводчика (с французского): пользователи Linux(и другие) должны попробовать JDraw, и GrafX2. Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое. Продолжение следует…

Заметки переводчика с французского на английский

Это большое руководство по пиксель арту, написано Филом Разорбаком с LesForges.org. Большое спасибо Филу Разорбаку за разрешение OpenGameArt.org перевести эти руководства и поместить их здесь. (От переводчика на русский: я разрешения не спрашивал, если кто имеет желание, можете помочь, не имею достаточного опыта общения на английском и тем более французском).

Заметка переводчика с английского на русский

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

Оригинал на французском где-то здесь www.lesforges.org

Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course Я переводил с английского, потому что французский не знаю.

И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять?

Источник: https://habr.com/post/241666/

Впечатляющий пиксель арт в своем разнообразии

8 мая 2008 | Опубликовано в графика | 10 Комментариев »

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

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

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

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

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

Возможно, вам придется немного подождать, так рисунки могут долго грузиться.

Праздник пиксель арта

Эйнштейн в Швейцарском бюро патентов 
Швейцарский сыр выглядит очень аппетитно. Большое внимание к деталям: швейцарский сыр действительно на вид очень вкусный. Эта реклама для SIM Global Education была создана пиксельными художниками из eBoy— признанными мастерами данного стиля. Пиксельная анимация получившаяся в результате.

Lovepixel 
Пиксели сошли с ума. Джейсон Хуанг (Jason Huang), дизайнер и иллюстратор из Тайваня создал… прямо скажем, необычную сплэш-страницу для сайта со своим портфолио. Размер данного пиксельного города более 10 Мб. Разрешение: 10.000×10.000 пикселей. Действительно, на это ушло реально МНОГО пикселей. Слов нет, мы просто потрясены.

Пиксель арт Polyfonken’s 
Пиксель арт иллюстрации выполненные Туука (Tuukka) из Финляндии, Хельсинки, который также известен как Polyfonken of Ghost Monkey. Отличные тени и освещение.

Rubikcubism 
Сочетание пиксель арта и кубика Рубика. Также не забудьте взглянуть на еще один замечательный постер Рубика Кубрика.

Пиксель арт Рода Ханта (Rod Hunt) 
Иллюстрации Рода Ханта реалистичны и обладают яркими красками. Художник комбинирует векторную графику и пиксель арт.

Читайте также:  Рисунок из фотографии - уроки фотошоп

Burp! 
Блоггеры из Бразилии и Германии Тиаго, Пи, Джоджо и Марианна (Thiago, Pi, Jojo,Mariana) представили себя виде дружелюбных и смеющихся человечков состоящих из пикселей.

Пятница иллюстраций: Зеленая тема 
Как насчет того, чтобы использовать пиксель арт для работы над реальным живым проектом? “Данная иллюстрации появилась на свет для того, чтобы показать, как будет выглядеть наша крыша сзади дома, когда все будет закончено. Она была создана пиксель за пикселем, а затем мы добавили рамку из растровой графики, а также тени, чтобы она выглядела немного более ностальгичной и антикварной”.

Обои для рабочего стола в стиле пиксель арт 
Это произведение искусства было создана Хуаном Мануэлем Дапорта (Juan Manuel Daporta) (Каракас, Венесуэла) в MSpaint и на него в целом ушло около 8 месяцев. Очень впечатляет.

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

Постер Adobe Air 
Пиксельный постер, созданный для рекламы Adobe Air. Так много деталей на одном рисунке. Кстати, вы видите обезьянку где-нибудь на этом рисунке?:)

Здоровье человека: Боль в спине 
Интересно как бы вы истолковали данный рисунок?

Город сумасшедших кукол 
Данная иллюстрация выполнена при помощи векторной графики, но тоже выглядит как пиксель арт. Прикольная идея.

Кекс Кирби 
Еще одно полотно в стиле пиксель арт. Оно создано Эшли Андерсон (Ashley Anderson).

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

Король Генри 
Живописная иллюстрация театральной сцены и короля Генри со своими придворными. Анимированный вариант

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

Игровая площадка 
Космические захватчики, Марио и Пакмэн на пиксельной картинке. Черный кот просто супер!

Пиксельный город 
Обратите внимание на отличное использование перспективы. Например, логотипы Sony и Coca-Cola перпендикулярны друг другу.

Госпожа Пекмэн 
“Это часть свадебного подарка, который я сделал для своих двух хороших друзей. Угадайте, как выглядит вторая часть картины” Создано Эшли Андерсон (Ashley Anderson).

Эйнштейн на фоне доски 
Обратите внимание на то, как хорошо используются тени. И кажется, что кофе еще даже не остыл. Да, кстати, формула закона эквивалентности массы-энергии на самом деле — E = mc2.

Статуя Христа-Спасителя 
Знаменитая статуя из Рио-де-Жанейро в пикселях. Похоже, что парень наверху статуи реально крутой перец.

Виртуальный город 
Еще одна пиксельная панорама. iPod-ы без ума от счастья. Шесть птичек тоже.

Дарт Вейдер 
Вот эта картинка действительно удивительна. Ее создал Хосе Эдуардо Контрерас из Moral designs (José Eduardo Contreras ).

Картинка с пандой 
На самом деле мы не уверены в том едят ли панды клубнику. По-видимому, таки едят. Простой, но очень милый пиксельный рисунок.

Сияние города 
Комбинация векторной графики и пиксель арта. Многопанельный графический стенд на остановке метро возле площади Единения в Японии. Интересное художественное решение. Создано Чихо Аошима (Chiho Aoshima).

Не забудьте починить свой Полароид 
Антикварный вариант пиксель арта. Креативный подход.

Пиксель арт — 1px Solid 
“Решил поэкспериментировать с пиксель артом. Это я сижу в одиночестве на своем Маке”.

Воин света 
Да, это настоящий пиксель арт. Переходы цвета и теней невероятно плавные. Использовалась палитра всего из 32 цветов.

Обложка для альбома 
Пиксельная обложка для альбома “Get Down”группы Groove Armada

Местонахождение неизвестно 
36 цветов, 40 часов работы: ошеломляющий результат. Обратите внимание на то, как хорошо переданы тени. А здесь вы можете увидеть пошаговое описание того, как создавался данный рисунок.

Зал ожидания 
Естественно, художники, занимающиеся пиксель артом, в своих офисах имеют такие же пиксельные обои. Например: Израильская студия пиксель дизайна “Three Squared”.

Постер FooBar 
Сочетание Web 2.0 и пиксель арта. На этом рисунке просто ОГРОМНОЕ количество деталей. Здесь iPod-ы уже не так счастливы, как на предыдущей картинке.

8BitBuddy V01 
“Рендеринг был сделан в Cinema 4D, часть моего 8-ми битного приятеля, вдохновившего создание 8-ми битных человечков в 3d”.

BerlinKiosk 
BerlinKiosk – это игра в которой, нужно собрать более 300 пиксельных продуктов, чтобы получить полный вид киоска в берлинском метро. Для того, чтобы пикселировать 300 наименований продуктов дизайнеру из Берлина, Германия понадобилось две недели.

Пиксель арт — Sky TV 
Пиксельная реклама для телеканала Sky TV.

Пиво 
Даже пиво теперь переведено в пиксельный форматJ.

Пиксель арт в реальной жизни

Иногда пиксели покидаю пределы монитора компьютеры, в тех случаях, когда дизайнеры экспериментируют с «пикселированием» своего собственного окружения. Такой подход выглядит немного отличным от других, но в нем есть своя привлекательность. Возможно, потому что мы все еще прекрасно помним игры в братьев Марио и Космических захватчиковJ.

Дизайн стены в штаб-квартире телеканала BNN/ 101 TV 
570 5.25″ раскрашенных флоппи-дисков приклеенных к стене. “Дизайн стены был создан вместе с моим другом Formaddict. Дизайн интерьера (еще не закончен на этом фото) выполнен студией Workshop of Wonders.”

Обои в стиле пиксель арт 
Прекрасно подходят для упаковки подарков и дизайна интерьеров.

Вишивка с пандой 
Пиксельная вышивка. Мы ведь с вами уже встречали панду и клубнику.

Готовим вместе с OXO 
Мы все когда-то встречали такие книги. “Пиксель арт” родом из 40-х годов.

Baldomero el cocinero 
Пиксель арт и конструкторы Lego.

Татуировки в стиле пиксель арт 
Красиво и необычно.

Пиксель арт из бисера 
Пиксельные персонажи видеоигр собранные из бисера.

Пиксельный диван: как насчет необычной мебели для настоящих пиксельных ниндзя? Выпускник Королевского колледжа искусств (Великобритания) Кристиан Зузунага (Cristian Zuzunaga) разработал ткань на основе «пиксельной» концепции, которая производится датским производителем Kvadrat и продается через Moroso. Пока цена на нее не известна. [via]

Потоп 
Пиксель арт в архитектуре.

Пиксель в шоколаде 
У этого шоколадного батончика тоже есть свое “социальное” послание.

Пиксельное окно Рихтера в соборе г. Кельн 
Жерар Рихтер (Gerhard Richter) недавно реконструировал окно кельнского собора площадью 113 кв. метров. Окно в буквальном смысле пикселировано, так как оно состоит из тысяч кусочков цветного стекла. “Пиксель арт” крупного калибра.

Космические захватчики 
А вот и космические захватчики, прямо перед вами и мной.

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

Завершающие штрихи

Пиксель арт Аржана Вестердипа 
Это видео отображает создание большой и чрезвычайно детализированной иллюстрации. Работа выполнена Аржаном Вестердипом (Arjan Westerdiep), который нарисовал картинку в MS Paint, что в итоге заняло у него 560 часов. Вебсайт Аржана позволяет кликнуть на всем рисунке и увидеть процесс его создания пиксель за пикселем.

Move Your Feet — Junior Senior 
Музыкальный видеоклип в стиле пиксель арт. Олдскульный пиксель арт. Просто отлично!

Игра окончена 
“Игра окончена” это арт проект, разработанный швейцарским художником Гильомом Реймодом (Guillaume Raymod). Состоит из серии совместных анимационных фильмов, которые дают вторую жизнь самым первым видеоиграм. Пиксели заменяются живыми людьми, которые передвигаются с места на место на протяжении от 4 до 6 часов.

Ссылки и ресурсы

Автор- smashingmagazine



Источник: http://www.dejurka.ru/graphics/pixel-art/

Введение в пиксельную графику (Pixel Art) для игр

Итак, чем же подкупает Pixel Art:

  1. Восприятие. Pixel Art выглядит потрясающе! Можно многое рассказывать о каждом отдельном пикселе в спрайте.
  2. Ностальгия. Pixel Art возвращает большое ностальгическое чувство для геймеров, которые выросли, играя Nintendo, Super Nintendo, или Genesis (как я!)
  3. Простота обучения. Pixel Art — одно из самых простых для изучения видов цифрового искусства, особенно если вы скорее программист, чем художник ;]

Итак, вы хотите попробовать свои силы в Pixel Art? Тогда следуйте вместе со мной и я покажу вам, как сделать простого, но эффектного игрового персонажа, которого вы сможете использовать в вашей собственной игре! Кроме того, в качестве бонуса, мы рассмотрим как интегрировать его в iPhone игры!

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

Что такое Pixel Art?

Прежде чем начать, давайте внесем ясность что же такое Pixel Art, ведь не так очевидно, как вы могли бы подумать. Самый простой способ определить что является Pixel Art, — это указать что им не является, а именно: все, где пиксели создаются автоматически. Вот несколько примеров:

Градиент — это не Pixel Art

Градиент: выбор двух цветов и расчета цвета пикселей, находящихся между ними. Выглядит круто, это но не Pixel Art!

Размытие — это не Pixel Art

Инструмент Размытие: определение пикселей и тиражирование/редактирование их, чтобы сделать новую версию предыдущего изображения. Снова не пиксельная график.

Читайте также:  Как нарисовать человеческий череп в огне - уроки фотошоп

Сглаживание — это не Pixel Art

Инструмент Сглаживание (в основном, генерирующих новые пиксели в различных цветах, чтобы что-то сделать «гладким»). Вы должны избегать их!

Некоторые скажут, что даже автоматически генерируемые цвета не Pixel Art, поскольку предполагают наличие слоя для смешивания эффектов (смешивания пикселей между двумя слоями по заданному алгоритму).

Но, так как большинство устройств в настоящее время имеет дело с миллионами цветов, — это утверждение можно проигнорировать.

Тем не менее, использование небольшого количества цветов — хорошая практика в Пиксельной графике.

Другие инструменты, такие как line tool (линия) или paint bucket tool (ведро с краской) также автоматически генерирует пиксели, но, поскольку вы можете настроить их на не сглаживание крев заполняемых пикселей, считается что эти инструменты дружественны к Pixel Art.

Таким образом, мы выяснили, что Pixel Art требует большого внимания при размещении каждого пикселя в спрайт, чаще всего вручную и с ограниченной палитрой цветов. Давайте теперь примемся за работу!

Начало работы

Прежде чем начать делать свой первый Pixel Art ассет, вы должны знать, что Pixel Art нельзя масштабировать. Если вы попытаетесь его уменьшить, все будет выглядеть смазанно. Если вы попытаетесь его увеличить, все будет выглядеть приемлимо до тех пор, пока вы используете масштабирование кратное двум (но, конечно, четкости не будет).

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

К примеру, если Вы хотите, чтобы игра выглядела увеличенной вдвое на экране iPhone 3GS (“Да, я действительно хочу придать пиксельного ретро-вида своей игре!”), разрешение экрана которого – 480х320 пикселей, то работать надо с разрешением, вдвое меньшим, в данном случае это будет 240х160 пикселей.

Откройте новый документ Photoshop (File → New…) и установите такой размер, каким будет размер вашего игрового экрана, после чего выберите размер для вашего персонажа.

Каждая ячейка 32×32 пикселя!

Я выбрал размер 32×32 пикселя не только потому, что он отлично подходит для выбранного размера экрана, а еще и потому, что 32×32 пикселей также кратны 2, а это удобно для движков игрушек, (размеры тайлов часто кратны 2, текстуры выравниваются кратно 2 и т.д.

Рисуем Pixel Art персонажа

Pixel Art, как известно, — это четкая и легко читаемая графика: вы можете определить черты лица, глаза, волосы, части тела с помощью нескольких точек.

Тем не менее, размер изображения усложняет задачу: чем меньше ваш персонаж, тем труднее их нарисовать. Чтобы подойти к задаче более практично, выберите то, что будет самой маленькой по размеру из черт характера.

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

В Photoshop выберите Pencil tool (Инструмент Карандаш). Если вы не можете найти его, просто нажмите и удерживайте инструмент Brush Tool (Инструмент Кисть) и вы сразу же его увидите (он должен быть вторым в списке). Вам просто нужно будет изменить его размер, сделав его равным 1px (вы можете нажать на панели параметров инструмента и изменить его размер или просто удерживайте клавишу [).

Также вам понадобится Erase tool (Инструмент Ластик), так что нажмите на него (или нажмите клавишу E) и измените его настройки, выбрав из выпадающего списка Mode: (Режим:) Pencil (Карандаш) (т.к. в этом режиме нет сглаживания).

А теперь начнем пикселить! Нарисуйте брови и глаза как показано на изображении ниже:

еу! Я пиксельный!!

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

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

Попробуйте сделать нечто подобное серым цветом:

На данном этапе не нужно быть профи

После того, как вы закончите силуэт, настанет время Lineart. Теперь вы должны быть более аккуратными с размещением пикселей, так что пока не беспокойтесь насчет одежды, доспехов и пр. Для подстраховки, вы можете добавить новый слой — так вы никогда не потеряете свой оригинальный силуэт.

Если вы чувствуете, что инструментом Карандаш слишком медленно рисовать, вы всегда можете использовать Line tool (Инструмент Линия), просто помните, что расположить пиксели так же точно, как с помощью карандаша, не получится. Вы должны будете настроить Line tool так, как показано ниже:

Выберите Line tool, нажав и удерживая Rectangle tool (Инструмент Прямоугольник)

Перейдите к панели параметров инструмента, в выпадающем списке Pick Tool Mode (Режим Вычерчивания Контура) выберите Pixel, изменить Weight (Толщина) на 1px (если это уже не сделано) и снимите флажок Anti-alias (Сглаживание). Вот как у вас должно быть:

Применяем цвета и тени

Теперь вы готовы, чтобы начать раскрашивать нашего персонажа. Не беспокойтесь о выборе правильных цветов, их очень легко будет изменить позже, просто убедитесь, что у каждого «свой цвет». Воспользуйтесь цветами по умолчанию на вкладке Swatches (Window → Swatches).

Раскрастьте вашего героя как на рисунке ниже (но не стесняйтесь проявить творчество и использовать свои собственные цвета!)

Хороший, контрастный цвет улучшает считываемость вашего ассета!

Не стоит тратить время на закрашивание каждого пикселя.

Чтобы ускорить работу используйте линии для одинакового цвета, или Paint bucket tool (Инструмент Ведро с краской), чтобы заполнить пробелы. Его, кстати, тоже придется настроить.

Выберите Paint bucket tool на панели инструментов (или просто нажмите клавишу G) и изменить Tolerance (Допуск) на 0, а также снимите галочку с Anti-alias (Сглаживание).

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

Если у вас нет времени и желания ее изучать, вы можете пропустить этот шаг и перейти к разделу «Придаем пикантность вашей палитре», ведь, в конце концов, вы можете просто сделать ваше затенение таким же, как на моем примере!

Используйте такой же источник света для всего ассета

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

Используйте тот же источник света при затенении

А теперь, как я и обещал небольшой гид по свету и теням:

Придаем пикантность вашей палитре

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

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

Затем, в окне Color Picker, просматривайте правую боковую панель, чтобы выбрать цвет и главную область, чтобы выбрать нужную яркость (светлее, или темнее) и насыщенность (сочнее, или скучнее).

Как только вы найдете нужный, нажмите кнопку ОК и перенастройте инструмент Ведро с краской. Не волнуйтесь, Вы потом сможете просто снять отметку с квадратика ‘Contiguous’ (Смежные пиксели), и, когда Вы будете рисовать новым цветом, все новые пиксели с таким же фоновым цветом тоже будут закрашены.

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

Снимите флажок «Contiguous» (Смежные пиксели) чтобы закрасить выбранные пиксели тем же цветом

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

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

Советы по редактированию пикселей в Photoshop

Как вы могли уже видеть, я выключил сглаживание во всех инструментах, которые я использовал до сих пор. Не забудьте это сделать и в других инструментах, например, Elliptical Marquee (Овальная область выделения) и Lasso (Лассо).

Читайте также:  Сладкий текст из печенья - уроки фотошоп

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

Чтобы сделать это, используйте любой инструмент выделения (или нажмите клавишу M), чтобы выбрать область, щелкните правой кнопкой мыши и выберите Free Transform (Свободное трансформирование), или просто нажмите Ctrl + T.

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

Тем не менее, Photoshop автоматически сглаживает все, что отредактировано с помощью функции Free Transform, поэтому перед редактированием перейдите к Edit → Preferences → General (Ctrl + K) и измените Image Interpolation (Интерполяция изображения) на Nearest Neighbour (Ближайший сосед). В двух словах, при Nearest Neighbour новая позиция и размер вычисляются очень грубо, при этом не применяются никакие новые цвета или прозрачности и сохраняются цвета, которые вы выбрали.

Интегрирование Pixel Art рисунка в игры на iPhone

В этом разделе вы узнаете как интегрировать наш пиксельный рисунок в игру на iPhone, используя игровой фреймворк Cocos2d. Почему я рассматриваю только iPhone? Потому что, благодаря циклу статей про Unity, (например: 2D игра на Unity.

Подробное руководство, или Игра в стиле Jetpack Joyride в Unity 2D) вы уже умеете работать с ними в Unity, а из статей про Crafty (Браузерные игры: Змейка) и Impact (Введение в создание браузерных игр на Impact) вы узнали как вставлять их в холст canvas и создавать браузерные игры.

Если вы новичок в Cocos2D, или в разработке приложений под iPhone в целом, советую вам начать с одного из учебников под Cocos2d и iPhone. Если у вас есть Xcode и установлен Cocos2d, читайте дальше!

Создайте новый проект iOS → cocos2d v2.x → cocos2d iOS template, назовите его PixelArt, и выберите в качестве устройства iPhone. Перетащите созданный пиксель арт, например: sprite_final.png в ваш проект, а затем откройте HelloWorldLayer.m и заменить метод инициализации на следующий:

-(id) init { if( (self=[super init])) { CCSprite * hero = [CCSprite spriteWithFile:@»sprite_final.png»]; hero.position = ccp(96, 96); hero.flipX = YES; [self addChild:hero]; } return self; }

Мы позиционируем спрайт в левой части экрана и повернули его так, что он смотрит вправо. Скомпилируйте, запустите, и тогда вы увидите на экране ваш спрайт:

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

hero.scale = 2.0;

Ничего сложного, не так ли? Скомпилируйте, запустите и… постойте, наш спрайт размыт!

Это потому, что по умолчанию Cocos2d сглаживает рисунок, когда масштабирует его. Нам это не нужно, поэтому добавьте следующую строку:

[hero.texture setAliasTexParameters];

Эта строка конфигурирует Cocos2d на масштабирование изображений без сглаживания, поэтому наш паренек по-прежнему выглядит «пиксельным» Скомпилируйте, запустите и… да, это работает!

Обратите внимание на преимущества использования Pixel Art графики — мы можем использовать меньшее по размеру изображение, чем то, что отображается на экране, экономя много текстурной памяти. Нам даже не нужно делать отдельные изображения для retina-дисплеев!

А что же дальше?

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

  • Всегда старайтесь избежать использования сглаживания, градиентов, или большого количества цветов для ваших ассетов. Это для вашего же блага, особенно если вы еще новичок.
  • Если вы ДЕЙСТВИТЕЛЬНО хотите подражать ретро-стилю, обратите внимание на изображения в 8-битных, или 16-битных консольных играх.
  • Некоторые стили не используют темные контуры, другие не учитывают влияние света или тени. Все зависит от стиля! В нашем уроке мы не стали рисовать тени, но это не значит, что вы не должны их использовать.

Новичку Pixel Art видится самой легкой в освоении графикой, но на самом деле она не так проста, как кажется. Лучший способ для прокачки ваших навыков — это практика, практика, практика.

Я настоятельно рекомендую разместить вашу работу в Pixel Art форумах, чтобы другие художники дать вам совет — это отличный способ улучшить свою технику! Начните с малого, много тренируйтесь, получайте обратную связь и вы можете создать удивительный игру, которая принесет вам много денег и радости!

Источник: http://websketches.ru/blog/vvedenie-pixel-art-dla-igr

курс «пиксельная графика»

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

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

Формальные ограничения дают возможность не думать о технике и сосредоточиться на содержании.

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

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

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

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

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

лекция 1. Вводный курс, основные понятия по пиксельарту, настройка инструментов в Photoshop. Рисование линий, кривых. Контуры, заливка, светотень. Техника dither. Вспомогательные инструменты Photoshop (автоконтур, заливка паттерном, рисование по маске).

лекция 2. Основы проекции (30, 45 градусов). Настройка вспомогательной сетки. Рисование объемных примитивов (контуры, заливка, светотень). Линии, окружности, кривые в проекции.

лекция 3. Создание пиксельных объектов, предметов, фронтальной проекции и объемных объектов.

лекция 4. Рисование пиксельных портретов, персонажей.

лекция 5. Создание изометрической сцены (комнаты) с объектами и персонажами.

лекция 6. Отрисовка пиксельного здания и окружения в проекции. Набросок, композиция, выбор общего направления освещения.

лекция 7. Иллюстрация пиксельного города (часть 1).

лекция 8. Иллюстрация пиксельного города (часть 2).

лекция 9. Анимация персонажа, портрета. Анимация сцены.

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

Кто будет преподавать

  • Сергей Костик — иллюстратор, цифровой художник из Тулы. Несколько лет посвятил созданию графики для мобильных платформ и консолей для таких компаний, как Visualmedia, Zeptolab, Vogster.

    Иллюстрации в пиксельной технике на постоянной основе начинал делать для журналов F5, Men's Health, GQ, Forbes, а в дальнейшем — для Сбербанка, Яндекса, Mail.ru и других компаний.

    В настоящий момент создает иллюстрации и работает с отечественными и зарубежными агентствами и клиентами — Bang! Bang!, Artlebedev, Lemonade, Kotetkat.

Преподаватель считает

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

Преподаватель работал для

Примеры работ преподавателя

Работы студентов

Мнения выпускников

Васильева Екатерина

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

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

Введение в анимацию — бесценно!) Но самое крутое, на мой взляд, это довольно жесткий режим работы: урок-задание.

То есть то, что на первом месте практика, и практика эта заставляет попотеть!) Может со стороны и кажется что мне все далось легко, но часов было затрачено по неопытности — огого! Еще один бонус — реальные работы, которые и не стыдно в портфолио запихнуть. В общем, подводя итог, все правда было круто.

Елена Рюмина

Курс получился очень внятный, очень практичный и увлекательный. До этого я время от времени что-то читала о пиксельарте — какие-то обрывки уроков, форумы — но сообщество пиксельных художников мне всегда казалось несколько снобским, не подступиться, поэтому, узнав об этом курсе от Bang! Bang!, решила брать.

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

Спасибо! Было очень и очень здорово.

Дмитрий Анохин

Обожаю пиксельную графику с детства! После пройденного курса я превратился в пиксельный инстаграм: что вижу — то пикселизирую. Спасибо за пинок к мечте!

в bang bang education учатся студенты из компаний

и многих других

Новости курса

Источник: https://bangbangeducation.ru/pixel

Ссылка на основную публикацию