Пользователь
0,0
рейтинг
27 октября 2014 в 19:09

Разработка → Курс пиксель-арта

Это перевод публикации «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. Сливки

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

image

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

image

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

image

ПО более часто используемое пиксельными художниками, это 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
Я переводил с английского, потому что французский не знаю.
И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять?
@lucid
карма
29,0
рейтинг 0,0

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (44)

  • +1
    На всякий добавлю, там местами мои комментарии, где я не уверен в переводе был.
  • 0
    Отвечая на ваши вопросы в конце, мне кажется, что подойдет обычный стиль (как в этой статье) — заголовки, текст, картинки. Обычно разные части уроков и статей оформляют в виде разных постов, а не обновлений первого. И, вы уж меня извините, но на русском тоже много ошибок. Попробуйте сначала в Word текст вставить, уж «потому-что» он точно выделит.
  • –3
    «должны будете быть способны»
    Очень крутой оборот, мне он даже нравится, но всё же я бы заменил это на нечто в духе «вы будете способны».

    И, кстати, в пайнте у семёрки есть и произвольное выделение и прозрачность (прозрачная вставка, если точнее), пусть они и не так хорошо реализованы, как в том же фотошопе.
    • +1
      Может просто «вы сможете»?
    • 0
      Пэйнт в семерке омерзителен.

      Ему не хватает возможностей для полноцветного рисования, и в то же время в нем невозможно делать пиксель-арт, потому что он использут антиалиас. Зато он умеет вставлят стрелочки и талкбабблы. А еще у него крайне неудобный для графического редактора интерфейс ribbon.

      У меня специально сохранен пэйнт из ХР, он вполне подходит для простейших картинок, в том числе и пиксельных. Кстати, там много скрытых хоткеев, есть замена произвольного цвета и есть произвольное выделение.

      Разумеется, серьезный пиксель-арт я делаю в фотошопе, но для десятиминутного скетча пэйнт вполне подходит.
      • 0
        Там есть инструмент карандаш без всяких антиалиасов, абсолютно аналогичный ХРшному. Интерфейс, соглашусь, не самый удобный, но это вообще говоря вопрос привыкания.

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

        Лично мне принципиально не хватает в нём только двух вещей — полноценной поддержки прозрачности и градиента. Про фотошоп, очевидно, конечно, но иногда это как из пушки по воробьям.
        • 0
          >Ваше же замечание похоже больше на замечания людей, которые элементарно не любят менять старое на новое (это психология и явление весьма частое).

          Похоже, но это не синдром утёнка.

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

          Про возможности — убраны многие пиксельные возможности, зато добавлены типа-живописные. При этом там даже третьего цвета нет!(Ctrl-click). Нет возможности рисовать кистью / без антиалиаса. Нет инструмента многоугольник. Нет перекоса — из которого получается неплохой rotate. Зато имеется плохо антиалиасенные имитации кисти и мелка, и несколько векторных шейпов.
          • 0
            Да, еще в пейнте W7 не работают паттерны.
            В палитре они есть, но рисовать ими нельзя.
          • 0
            А чем карандаш большого диаметра отличается от кисти без антиалисинга?

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

              в W7 есть и преимущества — можно двигать выделение стрелками.
              А еще из W7 убрали пульверизатор.
              • 0
                Пульверизатор есть — теперь это тип кисти. По поводу третьего цвета — даже в фотошопе два, мне вот всегда двух в паинте хватало. В целом не убедили. Получается что из того что реально может понадобиться, убрали только «перекос».
                • 0
                  Да, пульверизатор есть.

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

                  Еще они испохабили работу с «прозрачным цветом».
                  • 0
                    Не вижу никакой кромки. У вас что-то не так значит.

                    habrastorage.org/files/cd8/55c/7aa/cd855c7aa15246719835a9f976663e12.jpg
                    • 0
                      Но по дефолту там стоит кисть с антиалиасом.
                      И поэтому у все новичков — а Пэйнт используют в основном они — получается что-то в этом роде:
                      i.imgur.com/DbfkvLG.png
                      И они даже не замечают этого.
                      И вырвиглазные картинки в стиле Sweet bro and Hella Jeff ползут по интернетам, вызывая глазное кровотечение у всех, кто их видит.
                  • 0
                    Лет пять делал в пейнте графику для своих поделок, и только сейчас узнал, что там был третий цвет o_O You've ruined my childhood.
      • 0
        А, кстати, вспомнил ещё один косяк, который меня раздражает. Я так и не смог достоверно выявить причины появления этого бага, но иногда он всплывает.

        При редактировании больших картинок (>3000px) если пытаешься обрезать холст потянув за квадратики, обозначающие середину или угол холста, картинка обрезается не только по той стороне за которую тянешь, но и по другой. Причём в некоторых случаях баг не проявляется, например если создаёшь большую картинку с нуля. А вот если редактируешь большой файл, то этот косяк появляется почти всегда.
      • 0
        А на XP я сохранял пейнт из Win3.x (== paintbrush) и из MSOffice (там свой, странный форк). И руководствовался теми же соображениями: проще, удобнее…
        • 0
          В 3.х paintbrush был хорош, (хотя в 9х и ХР улучшился), а на что похож форк из MSOffice?
  • +1
    Кому интересен пиксель-арт, могу посоветовать перевод серии статей So You Want to Be a Pixel Artist.
    • 0
      Спасибо, я искал статьи по словам pixel art и tile, но на эту серию не наткнулся почему-то.
    • 0
      Шикарное руководств по пиксельарту. Кто не читал, советую.
  • +4
    Зачем Вам дефлектор капота для Lexus LX570?
  • +7
    Что? О.о
    • +3
      Это не его LC200, он просто разместил объяву
    • 0
      Само добавилось. Попробовал убрать, снова добавилось. Видимо фишка Хабра. Иначе не знаю как объяснить.
      • +10
        SEO 80lvl. Само добавилось.
    • 0
      Уфф, вроде на этот раз удалось убрать.
      • 0
        Выяснил что это было. Короче плагин Ace Stream'а в Хроме выключил и пропало. Какой-то троян рекламные ссылки вставлял мне повсюду. Видимо встроен в Ace Stream.
  • 0
    В английском переводе выкинули часть картинок и текста, сбили нумерацию частей и не перевели последнюю часть.
    • 0
      Про последнюю часть я в курсе, видел её, но она на французском, я такое только гугл-транслейтом прочитать могу :) А вот про картинки и часть текста, не знал, но что делать? Нужен знаток французского, который возможно перевёл бы остальные части вместо меня. Есть желающие?
  • +3
    Очень сыро. Комментариев разработчика и благодарностей автора больше, чем содержания, которое тоже сплошные блуждания вокруг да около.
    • 0
      Так это только вступление, остальные 7 частей вроде полезнее. Я правда не читал целиком, только полистал, и сразу к переводу приступил, подумал иначе не удастся обратить на эти статьи внимание своих друзей.
      • 0
        Переводить не владея до конца темой втройне тяжело. Увы, это очень заметно по переводу. Я бы посоветовал привлечь к переводу ваших друзей в качестве корректоров. И перевод получшеет и материал из статьи, если он там хороший, лучше усвоите. :)

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

        • 0
          Ну да, местами слабовато, но в общем-то нормально для непереводчика? Я замечал давно такую проблему, читаешь, вроде всё понятно. А как нужно озвучить для других, так возникают проблемы с подбором слов, формулировок и так далее.
          • +1
            Не очень нормально — сложные вопросы типа degraded machines вывалены на читателя, а должны были быть решены при переводе. Формулировать конечно сложно! Основная проблема не понять что хотел автор сказазать, это и по гугл-транслейту можно, а написать съедобный текст на русском. Это серьёзная работа, ничего не поделаешь.
            • 0
              Так что такое degraded machines? Мне так и не удалось выяснить, а в комментариях пока никто не подсказал.
              • 0
                Скорее всего применение пикселизирующих фильтров к не пиксель-арт картинкам. Иногда отличить ручной пиксель-арт от машинной обработки фотографии можно только по наличию истории создания рисунка.
                • 0
                  Интересно было бы на такое посмотреть.
                  У меня есть несколько техник имитации пиксель-арта, пользуюсь ими когда нужна скорость в ущерб качеству, но идеальными я бы их не назвал.
  • 0
    Спасибо за статью, жду продолжения!
    Пиксель-арт вообще интересная штука. Кажется простой, но на деле, конечно же, не совсем.
    Есть пара интересных курсов на эту тему, к слову (не сочите за рекламу, всё можно найти):
    От Concept Cookie
    От digitaltutors.com
    • 0
      Да, конечно интересуют и другие курсы. Я вообще всё подряд про это собираюсь изучить, а также приобщить товарищей. Просто решил наконец создать пару простеньких игр, но не понимаю как создавать тайлы и персонажей. И не знаю как объяснить друзьям которые умеют рисовать, что мне нужно. Думаю пиксель-арт вполне правильное направление, ибо до этого я вообще не представлял куда мне двигаться, разве что воровать арт у других, но это как-то неправильно.
      • 0
        Ну, что же, успехов)
        Ждём что-нибудь вроде этого)
        habrahabr.ru/post/198626/
        • 0
          «Этого» судя по всему не дождемся tjournal.ru/paper/pashanin-airbnb
          • 0
            О-о-о… Внезапно! Вот тебе и мастера современного пиксель-арта)
  • +1
    Вы, когда всё перевели, просто закройте оригинал, и, не глядя на него, прочитайте перевод, тогда будут более заметны всякие косяки. Это же не художественное произведение какое, не обязательно писать подстрочник. Порой стоит объединить несколько предложений в одно, или наоборот разбить одно на несколько, смысл не изменится, а читать легче.

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