Машина арт пиксель: Авто Пиксель арт, пиксель, автомобиль, цвет, транспортное средство png — DesignLessons – все о дизайне

Содержание

машина Color By Number: Pixel Art машина для Андроид

Цвет автомобиля по номеру для взрослых и детей. Удивительная игра-раскраска для взрослых и детей.

Car Color By Number — это новая захватывающая игра-раскраска. Выбирайте из множества супер интересных изображений автомобиля Pixel Art и следуйте номерам, чтобы оживить их. Окраска никогда не была такой легкой! Игра Pixel Art Color By Number — лучшая игра Pixel Art.

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

Этот автомобиль Color By Number book — лучший бесплатный автомобиль Color By Number для взрослых и детей на Android. Каждый поклонник автомобилей будет любить эту классную игру Pixel Art.

Картина для автомобилей Книга содержит десятки страниц для рисования автомобилей для всех. Если вы фанат автомобилей, вам обязательно нужно попробовать эту расслабляющую игру! автомобиль раскраски абсолютно БЕСПЛАТНО! Не требуется подключение к Интернету, просто установите его, расслабьтесь и наслаждайтесь раскрашивающими машинами!

Pixel Art Car Sandbox не требует каких-либо навыков окраски, эта игра Color By Number очень проста в выборе цвета по числу, даже маленькие дети могут ее использовать, содержит много изображений автомобилей: авто, грузовик, автомобиль, гоночный автомобиль …

Лучшие автомобильные игры Pixel Art:
• Игра для окраски автомобилей для взрослых и детей от 3 до 100 лет!
• Cute & Cool design
• Хорошо для отдыха и творчества
• Содержит более 60 автомобильных раскрасок: авто, грузовик, автомобиль, гоночный автомобиль …
• Различные уровни сложности, от очень простых автомобильных изображений до довольно подробных автомобильных раскрасок
• Чрезвычайно прост в использовании для всех!
• Адаптировано для smArtphones и планшетов, любое разрешение экрана
• Все автомобильные раскраски предоставляются бесплатно!
• Удивительная книга для окраски автомобилей для всех.

Автомобильная игра Pixel Art очень проста в использовании!
• Выберите цветную страницу для раскраски
• Выберите цвет по номеру, который вам нравится
• Нажмите и выберите цвет по числу
• При необходимости масштабируйте и перемещайте изображение
• Сохраняйте и рассылайте свои раскраски автомобиля через facebook, твиттер, instagram или другие социальные сети или отправляйте по электронной почте, whatsapp или другому мессенджеру.
• Пиксельная камера: возьмите себя или используйте свои фотографии, чтобы превратить их в Pixel Art!
• Преобразуйте любое изображение с телефона или планшета в пиксельную версию и покрасьте ее по номеру прямо в игре!

Relax и Color By Number с лучшей машиной Color By Number для детей и взрослых!

Скачайте сейчас и наслаждайтесь игральным автомобилем Color By Number: лучшая игра для окраски автомобилей.

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

Рисуем в Фотошоп улицу в стиле пиксель арт / Creativo.one

Финальный результат:

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

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

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

Изометрический пиксель арт в Фотошоп
Рисуем дом в стиле пиксель арт
Машина в стиле пиксель арт

Если вы готовы, можем начинать!

1.

Собираем исходные материалы

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

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

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

Вот так выглядит наш набор элементов:

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

2. Меняем цвета

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

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

Шаг 1

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

У нас есть один основной цвет примерно с четырьмя оттенками, поэтому давайте увеличим масштаб и выберем их. Для этого используется инструмент Волшебная палочка (Magic Wand Tool). При этом нужно снять галочку Смежные пиксели (Contiguous tool). Я предпочитаю устанавливать параметр Допуск (Tolerance) на 0%, это позволяет выделить все необходимые области.

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

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

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

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

Шаг 2

Теперь при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) выберите одну из крыш, а затем измените настройки оттенка, насыщенности и/или яркости на свой вкус. Для этого перейдите в меню Изображение > Коррекция > Цветовой тон/насыщенность… (Image > Adjustments > Hue/Saturation…). Это намного проще, чем заполнять все новым цветом, который может выглядеть не так хорошо, как изначально задумывалось. Если цвета, получившиеся в итоге выглядят хорошо, но текстуры и контраст немного теряются, попробуйте отрегулировать яркость и контраст, перейдя в меню

Изображение > Коррекция > Яркость/Контрастность. .. (Image > Adjustments > Brightness/Contrast…) или используйте Палитру цветов (Color Mixer) и инструмент Заливка (Paint Bucket), чтобы вручную улучшить каждый цвет.

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

Шаг 3

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

Шаг 4

Теперь двери.

Теперь можно объединить все эти слои в один, чтобы закончить с разукрашиванием домов.

3. Планируем расположение

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

Давайте вернемся назад и пока сфокусируемся на одном здании, чтобы создать разметку поверхности.

Шаг 1

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

Они должны быть достаточно длинными, чтобы могла уместиться машина.

Шаг 2

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

Шаг 3

Теперь давайте добавим еще немного линий, чтобы ограничить наше имущество.

Нарисуем еще одну линию для заднего двора.

Теперь мы полностью определили границы для двора.

Шаг 4

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

Шаг 5

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

4. Разделяй и умножай

Пора добавить что-нибудь для разделения земли между соседями: мы нарисуем забор вокруг заднего двора.

Шаг 1

Нам будет необходимо сделать это на двух разных слоях; один из них будет над слоем с домом, другой — под ним.

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

Шаг 2

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

Шаг 3

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

Шаг 4

Нам нужно добавить блики к соответствующим зонам: верхним граням и самому переднему углу.

Шаг 5

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

Шаг 6

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

Шаг 7

Теперь нам необходимо нарисовать забор на оставшейся части заднего двора. Мы сделаем это на новом слое, который разместим под слоем с домом.

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

Передние части забора, касающиеся дома, должны быть на одинаковом уровне.

Шаг 8

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

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

Шаг 9

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

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

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

5. Заканчиваем поверхность

Теперь нам необходимо придать всем элементам вид одного единого окружения.

Шаг 1

Начнем с удаления всех ненужных разделяющих линий (то есть линии на стыке поверхностей).

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

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

Шаг 2

Чтобы смягчить линии между травой и бетоном нам лучше закруглить эти углы:

Шаг 3

Мы можем придать траве тонкую подсветку, чтобы выглядело так, как будто она растет немного выше уровня бетона. Это можно легко сделать, если выбрать темную обводку травы при помощи инструмента Волшебная палочка (Magic Wand Tool), затем передвинуть выделение вверх на один пиксель и в итоге заполнить его светлым зеленым цветом (галочка Смежные пиксели (Contiguous tool) инструмента Заливка (Paint Bucket tool) должна быть снята).

Шаг 4

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

Нарисуйте несколько чередующихся темных (или светлых) пикселей. Если вы можете захотеть увидеть, как они смотрятся в готовом виде перед определением узора, посмотрите на скриншот ниде. Рисунок, который я использую, прост:

Чтобы создать его, необходимо выделить часть узора как показано выше (одна грань начинается там, где заканчивается противоположная), а затем перейти в меню Редактирование > Определить узор… (Edit > Define Pattern…)

Затем, чтобы применить его, используйте инструмент Заливка (Paint Bucket tool) и выберите Регулярный (Pattern) вместо Основной цвет (Foreground). Выберите новосозданный узор среди остальных и заполните им зону травы (галочка Смежные пиксели (Contiguous tool) должна быть снята).

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

Машинам потребуется помощь, чтобы добраться до подъездных дорожек. Нам необходимо сделать для них уклоны.

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

Шаг 9

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

Шаг 10

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

Шаг 11

Скопируйте и вставьте уклон для всех домов.

Шаг 12

Пора добавить дороги: сначала заполним фон асфальтовым цветом. Лучше всего сделать это на новом фоновом слое.

Шаг 13

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

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

Готово!

Квартал закончен. Если вы хотите размножить кварталы, можете выбрать все, убрать видимость слоя с асфальтом и копировать все (Ctrl + Shift + C), а затем вставить, выровнять и корректно упорядочить слои, после чего повторять этот процесс до получения необходимого количества улиц.

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

Надеюсь, вам понравилось, удачи!

Автор: René Alejandro Hernández

Переводчик: Шаповал Алексей

Как начать делать пиксель арт #4 (RUS) | by Кирилл Евстигнеев

Базовый шейдинг

Эту статью поддержали на моем Patreon! Если вам нравится то, что я делаю, подумайте о том, чтобы немного поддержать и меня! 🙂

А, еще это третья часть моего гайда. Остальные вы можете прочитать по ссылкам:
1 — Базовые знания пиксель артинга
2 — Руководство по кластерному скетчингу
3 — Базовая анимация в Aseprite

Все части в оригинале можно почитать здесь: Pixel Grimoire.

Эта статья получилась немного дольше и содержательней, чем остальные, так что соберитесь!

Как работает свет

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

Блокировка света и перпендикулярное освещение

Еще один аспект, который не так очевиден — угол наклона света тоже имеет значение, и перпендикулярное освещение всегда будет темнее.

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

Базовая структура

Во время шейдинга важно следовать некой структуре, основанной на понятиях. Далее я написал некий глоссарий с кратким объяснением каждого термина.

Собственная тень: Самый основной тип теней — собственная, обычно очень мягкая. Появляется в результате блокировки объектом света из-за своего объема.

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

Отбрасываемая тень: Результат проекции тени одного объекта на другой. Обычно очень резкая и заметная.

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

Свет: Светлая часть объекта. Представьте, что это противоположность тени.

Подсветка: Когда свет идет из другого источника, расположенного сзади, он выглядит почти как очень яркая обводка. Этот свет и создает подсветку.

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

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

Работа с фото референсом

А теперь давайте попрактикуемся и нарисуем вот это фото:

Наш референс

Для начала, создадим новый файл. Я буду рисовать в поле 48х48 и использовать палитру AAP-64. Я рекомендую вам тоже сфоткать что-то простое и сделать то же, что и я, ну или просто использовать эту же фотографию.

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

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

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

Ну а теперь поэтапно:

Начните с основных цветов и теней. Мне удобнее начинать с тени и потом добавлять свет, но это личное предпочтение.
Рисуйте основные тени внутри объекта, и пока держите кол-во цветов низким.
Нарисуйте отбрасываемые тени.
Рисуйте детали, выступы и другие маленькие части предмета.
Исправляйте тени, усиливая контрасты.
Закончите обводкой и смягчите, если необходимо.

Если вы все еще недовольны своей работой, не расстраивайтесь, а пробуйте еще. Попробуйте что-то проще, сфокусировавшись на основных деталях и убирая лишние.

О гранях

На нашей следующей работе попробуем что-то другое. Будем шейдить вот этот вот маленький спуск:

малюсенький спуск :3

И опять рисуем в палитре AAP-64 с разрешением 48х48. Главная наша цель — передать эту сцену как надо. Основное отличие этого изображения от прошлого в наличии плоских граней, сочетающихся с круглыми.

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

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

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

Моя версия

Первоe, что я сделал — поменял фон и нарисовал отбрасываемую тень для ориентации в общем настроении изображения.

Шаг 1

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

Шаг 2

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

Шаг 3

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

Последний шаг!

Распространенные ошибки

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

Мягкие грани

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

Пиллоушейдинг (буквально “Подушечные тени”)

Пиллоушейдинг

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

Плоские тени

Другая ошибка состоит в игнорировании формы объекта. Помните, что вы рисуете 3Д объект, и если вы не знаете, как ставить тени, лучше поискать фото референс.

А что теперь?

А теперь практика! Запаситесь фотографиями и иллюстрациями и рисуйте. Также попробуйте маленькие палитры — сможете ли вы показать один цвет совершенно другим? Учитесь через наблюдения, приближайте фотографии и смотрите внимательно, как там расставлены тени.

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

Удачи!

Пиксель Арт (часть 5)

Тренинг по пиксельарту.
Групповая анимация.

Пока у меня не было интернета, я малость подумал.
И решил сделать еще один тренинг по пиксельарту.
Я парой сам себе удивляюсь как легко мне дается пиксельарт.
Потому я попробовал взаимодействовать в анимации одновременно два объекта…
Это Чара и Машину.
Тренинг довольно сложный, хоть я и давно рисовал машины для XP…
Но всеравно сложный…

Для удобства, пункты написанные здесь, соответствуют цифрам, в примере…

Et-to…
Для начала научимся рисовать саму машину.
1) Основа машины, так сказать её кости.
2) Далее был долгий и мучительный процесс с высчитыванием в геометрических фигурах.
Точнее я просто придал машине некоторый объём.

Так советую вам разобрать машину по частям.
Это нам понадобиться для того что бы создать маленькую анимацию.
(Заметьте я стараюсь во все пихнуть анимацию… может из-за того что я люблю более реалистичные игры ?)

Один из сложный частей тренинга.
Мы будем рисовать открывающуюся дверь машины.
(По скольку у Дэлориана двери открываются вверх, то мы не будем уклоняться от реальности… и так же анимируем их вверх.)
В верхней полосе видно последовательность открывающейся двери.
Ниже стекла для этих дверей.
(Заметьте, что стекла и двери отдельно… не поверите, но это так и надо ! не совмещайте их пока что.)

Теперь вспомним прошлые тренинги по пиксельарту, и повторим их на более сложной практике.
Тут мы видим водителя Дэлорина…
Кажеться какой то странной анимация ?
Ни чего подобного, я не рисовал его сидячим за рулем…
Это он у нам вылезает и залезает в машину.
И вставленное стекло, умещаем в двери.
Обычно данную операцию я провожу на белом фоне, потому ни куда не денусь, но белые квадраты оставшиеся от копированного стекла нужно убирать.
Делается это просто:
Свободное лассо + обводка + «Очистить» (Очищать дважды не придеться если с двух сторон белый фон… просто удерживая шифт обводите вторую область белого поля…)
Все… окно в двери… но оно пилять не прозрачное !!!
Что же делать ?
Ну в таких случаях можно обратиться к функции не «прозрачность слоя»…
Заметься (по умолчанию панель внизу с право…) в панели слоев, прибавился еще один слой, когда мы вставили стекло через Ctrl+V…
Чуть выше и правее есть шкала, которую можно уменьшить на параметр 50… ну или 70 если хотите более тонированое стекло )))
Далее объединяем слои, и сохраняем рисунок.
После не забудьте очистить осветления из-за «Обрезания» кхм… белого фона.
Ну думаю не важно… сами надеюсь с этим разберетесь.
«Настройки градиента» там палитры типа мутно голубой с переливанием на мутно зеленый.
(Я про свой пример на Дэлорине)…

Еще момент… по скольку я не анимировал колёса машины, ощущение в движении всеравно должно присудствовать… и я решил пойти обходным путем… это в утреннее время суток анимировать колеса, а в ночное время суток добавить отблеск на кузове машины от света у фонарей.
Та муть которая показана на примере, делается не сложно…
Всего на всего PhotoShop… комбинирование слоев и не большой градиент.
Как это делать можно догадаться самостоятельно…
Я рассказывать это пока что не буду.
Так как это либо еще примеров 10 делать, либо рассказывать по шагам…
Процесс долгий, а мне еще анимацию рисовать…
Расскажу об этом эффекте позже.

Собственно, не садитесь в не трезвом состоянии за руль авто !

Писал статью, и рисовал: ™Porshe
© Все права нарушены, и преследуется в не закона…

Старая школа пиксель арт стиль НЛО аркада машины игры кабинета Клипарт

Старая школа пиксель арт стиль НЛО аркада машины игры кабинета Клипарт Изображение

iStock ID 93612557
Размер файла 586,8 КБ
Автор dmitriylo

Описание

Подобные клипарты

как умение писать код влияет на профессию — Дизайн на vc.ru

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

{«id»:217008,»url»:»https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu»,»title»:»\u0422\u0435\u0445\u043d\u043e\u0434\u0438\u0437\u0430\u0439\u043d: \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu&title=\u0422\u0435\u0445\u043d\u043e\u0434\u0438\u0437\u0430\u0439\u043d: \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu&text=\u0422\u0435\u0445\u043d\u043e\u0434\u0438\u0437\u0430\u0439\u043d: \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu&text=\u0422\u0435\u0445\u043d\u043e\u0434\u0438\u0437\u0430\u0439\u043d: \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0422\u0435\u0445\u043d\u043e\u0434\u0438\u0437\u0430\u0439\u043d: \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e&body=https:\/\/vc.ru\/design\/217008-tehnodizayn-kak-umenie-pisat-kod-vliyaet-na-professiyu»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

1539 просмотров

Мы спросили у коллег из разных компаний, какие навыки необходимы, чтобы успевать за развитием рынка. Своим опытом поделились специалисты из DD Planet, «СберСервиса», Byndyusoft, «РашенСофт», Polarr и Usetech.

Технологические тренды в дизайне

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

Автоматизация и упрощение процессов

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

Даниил Вершинин, старший разработчик программных продуктов компании Polarr:

«Цифровизация ускоряет дизайн-процессы в компаниях: итерации проходят быстрее, а дизайнеры пользуются средствами прототипирования со встроенной обратной связью, чтобы прийти к качественному финальному результату».

Юлия Голева, ведущий дизайнер в «СберСервис»:

«Даже такое, казалось бы, творческое направление, как дизайн, стремится автоматизировать многие рутинные задачи. Если, скажем, лет десять назад 3D-визуализация была чем-то невероятно сложным, то сейчас появилось множество достаточно простых редакторов, которые с легкостью позволяют решить базовые задачи».

Сегодня если вы что-то делаете долго, значит, вы делаете это неправильно. В девяти случаях из десяти есть способ это упростить или автоматизировать.

Егор Денисов, Senior UX\UI-дизайнер в компании Usetech:

«Стремление к упрощению отражается во всех аспектах нашей жизни — от программирования (Python по сравнению с Java) до ИИ в маркетплейсах.

Если рассматривать этот тренд с позиции дизайна, считается, что лучший дизайн — это когда его совсем нет или он незаметен. Век ярких и кричащих картинок с бешеным количеством анимации закончен. На плечи дизайнеров в последние годы ложатся и генерация кода, и автоматизация, и оптимизация, и компетентность — все это идет параллельно с развитием дизайна. И, конечно же, не стоит забывать про методологию БЭМ от Яндекса, которой в этом году исполнится 15 лет».

Генеративный дизайн и AI

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

Андрей Шапиро, арт-директор в Byndyusoft:

«Появляются усилители дизайнера, инструменты сотворчества: Prizma, Artisto и т. д. Их основные задачи — автоматическая генерация единообразной по стилю графики, постобработка изображений, расстановка элементов в гармоничную композицию за счет рандомизации или каких-то физических законов.

Кроме брендированных решений развивается интерес к написанию собственных.

Сам я пользуюсь несколькими самописными генераторами паттернов, творческими разбрасывателями частиц или элементов в макете. Основные среды для генерации графики: Processing, DrawBot, NodeBox. Из специфичных и близких для сферы 3D: TouchDesigner, Houdini».

Александр Обанин, арт-директор digital-интегратора DD Planet:

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

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

Интерактив: анимация, 3D, видео

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

Роман Полищук, арт-директор в «РашенСофт»:

«Откройте презентацию любого продукта на сайте Apple. По мере прокрутки страницы на вас то и дело будут выезжать модели современных гаджетов, яркие, динамичные образы, которые иногда даже можно покрутить и „пощупать“. В далеком 2012-м большинство современных на тот момент браузеров стали поддерживать язык разметки HTML5, и статические фотографии сменились на захватывающее и непредсказуемое интерактивное шоу. С тех пор можно внедрять видео в iFrame, 3D-элементы, а устоявшийся в 2011 году CSS3 предоставляет широчайшие возможности для анимации.

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

Звук

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

Александр Обанин, арт-директор digital-интегратора DD Planet:

«Здесь могу выделить два направления, которые активно растут и набирают популярность: голосовые интерфейсы и подкасты. Они позволяют человеку быть многозадачным, можно ехать на авто и слушать подкаст с новостями, собираться на работу и на ходу узнать погоду. Благодаря их развитию появляются новые области в дизайне и даже новые профессии, например, voice interface designer.

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

В интересах ли дизайнера уметь писать код?

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

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

Против

Юлия Голева, ведущий дизайнер в «СберСервис»:

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

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

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

За

Андрей Шапиро, арт-директор в Byndyusoft:

«Часто спрашивают нужно ли дизайнеру уметь программировать. Здесь важно понять, вы хотите развиваться больше в эстетическую часть, в графический дизайн, или в проектирование и инженерию. Если второе, если вы про UX/UI, то без понимания технологических возможностей, во-первых, будете обделены в классных средствах решения задач, во-вторых, не сможете противостоять аргументам разработчика о том, что что-то невозможно или трудно исполнимо. UX чаще всего в позиции защиты интересов человека, использующего продукт, а разработка может защищать позиции системной целостности, стоимости поддержки, личного удобства разработчика (писать код, как проще мне, а не пользователю). Между ними порой неизбежен конфликт, и без компетенций в технологиях и навыках написания программ дизайнер будет чуть-чуть беззубым».

Роман Полищук, арт-директор в «РашенСофт»:

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

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

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

Как это использовать в работе

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

Генераторы для внутрикорпоративных задач

Александр Обанин, арт-директор digital-интегратора DD Planet:

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

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

Презентации оформляются в генераторе, созданном с помощью JavaScript-фреймворка PptxGenJS. Он с помощью JSON собирает готовый PowerPoint-файл.

Чтобы автоматизировать создание визиток, я выбрал две библиотеки:

PDF Kit для PDF. Может работать в рамках Node.js или просто в браузере, это и был подходящий вариант.
EasyQRCodeJS для QR кодов».

Андрей Шапиро, арт-директор в Byndyusoft:

«В дизайн-цехе Byndyusoft программирование практикует треть дизайнеров. Основные языки программирования: R, Python, JavaScript. Сферы применения: обработка и визуализация данных для прототипирования будущих приложений, генерация паттернов и повторяющихся лейаутов.

Из готовых скриптов мы повторно используем генераторы, созданные на проекте, когда нужно наплодить новую тысячу-миллион изображений, например, аватарок. Никакие скрипты не пишутся с абсолютного нуля, они используют среды, библиотеки для манипуляции графическими элементами графиков (ggplot2, D3.js) и физические движки (Box2D).

Для Sketch App, одного из популярных приложений проектирования интерфейсов, я написал и активно использую набор плагинов Efficiency, чтобы автоматизировать работу с текстом и элементами макета. На горячих клавишах „висят“ типограф, расстановщик мягких переносов, управление разрядкой, интерлиньяжем, межстрочным расстоянием и кеглем. Все для того, чтобы максимально быстро управлять текстом с клавиатуры. Там же есть разбрасыватель элементов по макету. Удобно, когда нужно быстро сделать красивую россыпь.

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

Верстка

Катерина Дробина, Senior UX\UI-дизайнер в компании Usetech:

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

{ «name»: «Estate», «type»: «record», «doc»: «Estate from ad», «fields»: [ {«name»: «uuid», «type»: «string»}, {«name»: «agent_uuid», «type»: «string»}, {«name»: «action», «type»: [«null», «string»], «default»: null}, {«name»: «type», «type»: [«null», «string»], «default»: null}, {«name»: «renovation», «type»: [«null», «string»], «default»: null}, {«name»: «square», «type»: [«null», «int»], «default»: null}, {«name»: «price», «type»: [«null», «int»], «default»: null}, {«name»: «address», «type»: «Address»} ], «indexes»: [ «uuid», «agent_uuid» ], «relations»: [ { «name»: «agent», «to»: «Agent», «count»: «one», «from_fields»: «agent_uuid», «to_fields»: «uuid» } ] },

Чаще всего в работе я взаимодействую с кодом, когда выдаю правки по верстке фронтенду. Зачастую намного легче залезть в код (инспектор в браузере) и на созвоне быстро показать коллеге, что не нравится и что он сделал не так. Это намного продуктивнее, чем правка „верстка сделана не по макету“. Куда быстрее сказать, что вот здесь лишние 10 пикселей, которые сильно портят картину».

Создание анимации

Егор Денисов, Senior UX\UI-дизайнер в компании Usetech:

«В своей работе я использую многочисленные скрипты. Например, беру идеи визуализации с помощью кода на сайте Codepen и по необходимости корректирую под свои нужды. Использую библиотеку по UI-элементам с исходниками Code my UI. В ближайшее время планирую изучить Flutter для разработки нативных приложений и Nodes.

С 2017 года использую Lottie (bodymovin) от Airbnb — экспорт анимации в формате JSON. Легкие по весу JSON можно использовать на Android, iOS и React Native. Анимации уже не нужно отрисовывать пошагово, можно просто воспользоваться плагином и получить полноценный продукт. Для этого есть Anima, Spirit, Principle. Кстати, таких полезных плагинов с каждым годом становится все больше. Несколько лет назад я планировал самостоятельно заняться написанием плагинов — не успел, но это и к лучшему. Сейчас практически любой плагин можно найти на просторах интернета, а также в Figma».

Плюсы для карьеры

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

Развитие мышления

Егор Денисов, Senior UX\UI-дизайнер в компании Usetech:

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

Катерина Дробина, Senior UX\UI-дизайнер в компании Usetech:

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

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

Взаимопонимание с разработчиками

Даниил Вершинин, старший разработчик программных продуктов компании Polarr:

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

Катерина Дробина, Senior UX\UI-дизайнер в компании Usetech:

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

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

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

Умение объяснить и направить в нужном направлении

Роман Полищук, арт-директор в «РашенСофт»:

«Вот и ответ на вопрос, что побудило меня пойти на курсы верстки пять лет назад. Пинки от верстальщиков и повторные согласования макетов. Видите ли, так сделать не сможем. И ты винишь себя, не понимаешь, действительно ли реализовать то, что ты просишь, нереально, или верстальщик просто привык выполнять легкие задачи. И знаете, что мне дали курсы по верстке? Теперь с уверенностью могу сказать: „Сможешь. Хочешь, покажу, как?“. И это доставляет огромное удовольствие!

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

Открываю макет, открываю верстку, проверяю через консоль разработчика. Пишу: «Сделай здесь padding-bottom 30px, line-height 15, animation-delay 5s». Done!

Повышение качества продукта

Александр Обанин, арт-директор digital-интегратора DD Planet:

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

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

А что с зарплатой?

Андрей Шапиро, арт-директор в Byndyusoft:

«Что касается возможности повлиять на свою зарплату — мне не видится прямой такой связи. Мол, вы пришли, заявили, что умеете в дизайне вот это и вот это, да еще и программировать, и вам сразу предлагают больше оклад. Нет, так не работает. Но обычно люди с более широкой компетенцией в целом и лучше общаются, и эффективнее задачи решают. И вот если вы „тащите“, регулярно элегантно справляетесь с трудностями, подвижны в мышлении, что отражается на результате, тогда, конечно, вас будут ценить больше и рублем».

Как начать программировать

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

Андрей Шапиро, арт-директор в Byndyusoft:

«Ресурсов невероятно много, но большая часть на английском языке. Я бы рекомендовал начинать с бесплатных курсов на той же Coursera, если владеете английским, или с курсов на Stepik.org, это русскоязычные курсы.

Почему с бесплатных. Сейчас очень перегрета тема информационных технологий, и под эту дудочку возникла масса русскоязычных курсов, где вам за деньги будут обещать чудесное научение. Узнать такие курсы можно по отдельному сайту, красивой „упаковке” и обещаниям гарантий. Таких я бы сторонился.

Учит нас только реальная практика решения задач. Многие, многие часы практики.

И учиться я рекомендую не абстрактно отдельному программированию в отрыве от всего. Лучше ставить перед собой понятные задачи или мини-проекты и брать все то, чего не хватает для их реализации. Тогда будет и мотивация, и усвоение. Например, возьмите сначала чей-то готовый скрипт, посмотрите, как он работает, загляните внутрь, испугайтесь, выдохните, снова вернитесь к нему, попробуйте что-то поменять, упритесь в непонимание какой-то части — и только затем начинайте искать, что вам нужно изучить, движимые конкретной потребностью».

Роман Полищук, арт-директор в «РашенСофт»:

«Не пытайтесь охватить программирование полностью, даже самым закоренелым ботаникам с математическим складом ума это не под силу. Изучайте только то, от чего напрямую зависит реализация ваших идей, а именно фронтенд-разработку. Благо на YouTube есть огромное количество материалов на эту тему, и это будет хорошим стартом. Если вы уже работаете в команде — почаще заглядывайте в отдел программистов.

Общайтесь, интересуйтесь, какими методами происходит внедрение ваших идей, не возникают ли трудности в процессе.

Если вы работаете удаленно — попросите разработчика записать с экрана все этапы реализации вашего дизайна.

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

Александр Обанин, арт-директор digital-интегратора DD Planet:

«Есть много полезных ресурсов, из простых могу посоветовать The Coding Train, Matthew Epler, Tim Rodenbröker. Найти полезные для себя инструменты можно на сайтах:

Processing — библиотека для работы с изображениями на Java.
P5.js — JS-библиотека для креативного кодинга, вдохновленная Processing.
ML5.js — библиотека для машинного обучения: создание модели и последующее использование в JS.
TensorFlow — библиотека для машинного обучения в JS.

Для вдохновения советую посмотреть работы аргентинского художника Manolo ide — он использует Processing, художника из Нью-Йорка Joshua Davis и оценить 3D-мейкап от ines.alpha».

Катерина Дробина, Senior UX\UI-дизайнер в компании Usetech:

«Мне кажется, сейчас курсов так много, что было бы только желание. Отличные курсы есть у сервиса „Яндекс.Практикум“, а также Skillbox и Geekbrains. Но это вовсе не значит, что нужно бежать сразу туда и проходить все курсы.

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

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

На NFT-токенах сейчас зарабатывают миллионы — но что это вообще такое

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

{«id»:669563,»url»:»https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe»,»title»:»\u041d\u0430 NFT-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u2014 \u043d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435″,»services»:{«vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe&title=\u041d\u0430 NFT-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u2014 \u043d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe&text=\u041d\u0430 NFT-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u2014 \u043d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe&text=\u041d\u0430 NFT-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u2014 \u043d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041d\u0430 NFT-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u2014 \u043d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435&body=https:\/\/dtf.ru\/gameindustry\/669563-na-nft-tokenah-seychas-zarabatyvayut-milliony-no-chto-eto-voobshche-takoe»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

13 567 просмотров

В феврале этого года заработанная на NFT сумма выросла до 340 миллионов долларов. Это больше, чем заработок на всех цифровых аукционах за прошлый год. Благодаря NFT певица Граймс заработала почти 6 миллионов долларов за 20 минут, а художник Beeple — 69 миллионов всего за одну картину.

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

Но у этого есть и обратная сторона.

Что такое NFT

Технология NFT (Non Fungible Token — невзаимозаменяемый токен) — часть блокчейна (blockchain) или цепочки блоков. Блокчейн — система, которая хранит в блоках информацию обо всех предыдущих операциях внутри цепочки. Это нужно для хранения данных: из такой системы нельзя просто так изъять отдельный блок, не разрушив всю цепочку.

Блокчейн работает вот так.

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

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

Как работает NFT

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

Наглядная схема разделения на заменяемые и незаменяемые токены. Non-fungible — это невзаимозаменяемые товары, fungible — взаимозаменяемые, Intangible — нематериальные, а tangible — материальные

Именно благодаря таким токенам любой желающий может легко закрепить права на уникальный цифровой объект — картинку, видео или предмет в игре. Иными словами, NFT позволяет купить не сам товар, а право собственности на него, прикрепив токен с данными о владельце к файлу.

Любой художник, желающий прикрепить токен к своей работе, может использовать площадки OpenSea или Rarible. Примечательно, что OpenSea создает NFT-токены только после того, как на них найдётся покупатель. В таком случае автору не нужно платить комиссию блокчейну Ethereum. Площадка Rarible, наоборот, создает токены сразу после загрузки работы в сервис и берёт с автора комиссию.

Логотип OpenSea.

Кто использует NFT

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

Художник из Южной Каролины Майк Винкельман a.k.a Beeple, о котором мы упоминали выше, выставил на аукционе Christie’s огромный коллаж из 5 тысяч цифровых изображений, которые он ежедневно рисовал на протяжении 13 лет. Для знаменитого аукционного дома продажа полностью цифрового арта оказалась первой за всю историю существования Christie’s. 11 марта коллаж продали за рекордные 69 миллионов долларов.

Работа Beeple под названием Everydays: The First 5000 Days

Так же NFT-токены активно используют в играх с внутренними покупками для того, чтобы подтвердить владение виртуальными предметами — комплектами брони, оружием, зданиями и скинами. Это нужно, в первую очередь, для того, чтобы игроки могли переносить предметы между своими аккаунтами, перепродавать их, а также с помощью токенов заявлять о владении. При этом у игроков нет авторских прав на эти предметы, они всё ещё находятся у компании-разработчика, однако NFT-токен подтверждает неоспоримое право собственности внутри системы.

Entropia Universe.

Но самый необычный способ использовать NFT-токены продемонстрировала компания Injective Protocol. Она купила работу Morons (White) художника Бэнкси за 95 тысяч долларов и во время трансляции в Твиттере сожгла картину. После этого компания привязала невзаимозаменяемый токен к цифровой версии уничтоженной работы.

Картина Бэнкси под названием Morons (White)

Теперь Morons (White) существует только в цифре и принадлежит Injective Protocol. Компания объявила, что пошла на такой шаг для того, чтобы создать из физической работы полноценный крипто-арт, который существует только в цифровом пространстве.

Процесс сожжения.

Помимо картин и музыки, благодаря NFT на аукционе смогли продать и полноценный мем. В прошлом месяце из под молотка ушёл популярный в десятых годах Nyan Cat — пиксельный кот, который летит сквозь космос под веселую чиптюн-мелодию. Мем стоил будущему обладателю около 580 тысяч долларов.

Десятичасовая версия Nyan Cat

Зачем NFT художнику

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

По версии CoinDesk, за февраль 2021-го пользователи потратили около 100 миллионов долларов на крипто-товары, не существующие физически. Благодаря этому многие художники без мирового имени стали зарабатывать гораздо больше. Например, арт-директор Halo Infinite Николя Бувье продал свой крипто-арт почти за 35 тысяч долларов, а бывший художник DC Хосе Дельбо заработал около двух миллионов долларов на рисунках Чудо-женщины.

Зачем NFT покупателю

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

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

Будущее NFT

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

Цифровая картина художника SloppyJ44 под названием Bubblegum Crisis. Сейчас стоит 2 тысячи долларов.

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

Проблемы NFT

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

Фото из статьи Жани Лемерсье

Художник Жани Лемерсье даже отменил продажу своей крипто-картины через площадку NiftyGateway. Он заявил, что не будет ничего продавать таким образом, пока не будет решена проблема экологии.

На этом графике Жани Лемерсье сравнивает расход электроэнергии в своей студии за несколько лет и сопоставляет цифры с созданием всего шести NFT-токенов

Большинство NFT-токенов связаны с криптовалютой Ethereum. Её сервера, по оценкам экспертов, за год потребляют больше энергии, чем Исландия. Создатели Ethereum уже много лет обещают перейти на более экологичный способ работы, но пока безрезультатно.

Результат воздействия выработки электроэнергии на окружающую среду

Из-за негативного влияния на природу в сети поднялся скандал. Многие пользователи отказывались поддерживать такую систему и активно просили блокчейн-компании приостановить пагубное воздействие.

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

Белый мишка поддерживает Жани Лемерсье и решение ArtStation

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

Мошенники. После ажиотажа вокруг продажи и покупки крипто-арта многие художники подверглись атакам, в результате которых их работам, находящимся в публичном доступе, незаконно присваивались NFT-коды. Таким образом мошенники присвоили много разных работ, грубо нарушив авторские права. После этого воры стали активно продавать украденные картины.

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

Как художнику себя обезопасить

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

Сохранять на оффлайн-носителе оригинальный файл .psd (или любой другой) с исходником вашего арта.
Не заливать исходные файлы в сеть. Возможность продемонстрировать процесс вашей работы — самое главное доказательство авторства.
Размещать большие вотермарки на арте в публичном доступе. Так мошенникам будет труднее украсть и продать вашу работу.
Закрыть все свои заброшенные аккаунты (или скрыть в них все работы), чтобы мошенники не смогли вытащить из них контент и выдать его за свой.
Если у вас есть Твиттер, нужно забанить аккаунт бота @tokenizedtweets и ему подобных. Если бот уже привязал токен к вашему арту, оспорить авторство можно на сайте tokenizedtweets.com.
Пользователи Твиттера давно составляют списки подобных ботов и энтузиастов-мошенников. Ознакомиться можно вот тут.

Текст написал Владимир Шумилов, автор в Smirnov School. Мы готовим концепт-художников, левелартистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

ПИКСЕЛЕЙ: LED ART | Платформа для LED Pixel Art

Рамка PIXEL LED Art Frame — это экран с ностальгическим дизайном, на котором отображается выбранная вами анимированная пиксельная светодиодная графика, что дает вам место для просмотра дизайнов в ретро-стиле. Он управляется через Bluetooth через приложение для iOS или Android и оснащен 1024 сверхъяркими светодиодами, что обеспечивает эффективное разрешение 32 на 32 пикселя. PIXEL также полностью взломан и включает в себя интеграцию с Raspberry Pi для производителей.

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

Для производителей и домашних мастеров, желающих выполнить индивидуальную установку, наш комплект PIXEL 2.5 Maker поддерживает множество различных размеров светодиодных панелей: 32 × 16, 64 × 16, 128 × 16, 32 × 32, 64 × 32 и 132 × 32, а также внешние датчики. Комплект PIXEL 2.5 Maker поддерживает Android, Raspberry Pi и iOS (32 × 16 и 32 × 32 только на iOS)

Наш самый большой дисплей, комплект SUPER PIXEL 64 × 64, включает 4096 светодиодов размером 15 ″ x 15 ″.

	Пол Робертсон — художник из Мельбурна, окончил факультет медиаискусства RMIT в 2002 году.Он снял несколько короткометражных фильмов и работал над такими играми, как Scott Pilgrim Vs the World, Adventure Time, Scribblenauts, Wizorb, Mercenary Kings, а также работал над анимацией для Disney и Adult Swim. Его вдохновляют видеоигры, японская анимация, боевики, фильмы ужасов, демоны, боги, математика, наука и вселенная.
	Джейкоб Джордано (King * Kaiju) — художник-фрилансер, иллюстратор и аниматор. С любовью к пиксельной графике и юмору он основал KingKaiju.com, предлагающий искусство, поздравительные открытки и другие забавные вещи.
	Валенберг — пиксельный художник и дизайнер из Германии, работающий в различных областях, таких как анимация, игры и комиксы. Он также является одним из основателей комиксов Jet Plastic Comic-Anthology jetplastic.net
	Хермиппе — художник-пиксельщик, иллюстратор и схемотехник из Японии.
	Дэн Фарримонд (Иллартерате) — мультимедийный художник из Соединенного Королевства.Профессиональный дизайнер телетекста, его работы выставлялись в таких разных местах, как Германия, Финляндия и Новая Зеландия, на телевизорах, компьютерных мониторах и мобильных игровых устройствах.
	Карл Дуглас (Аргайл) — фрилансер, занимающийся цифровым искусством, из Огайо, США. Карл любит свою работу больше, чем любые художественные ракообразные, которых когда-либо знал мир.
	Дэвид Канавезе — скульптор и художник-пиксель из Сан-Хосе, Калифорния.
	Кирк Барнетт (Pixel PileDriver) — программист и художник из Сиэтла, США. В технологическом институте Digipen он изучал производство произведений искусства, программирование моделирования в реальном времени и много математики. В настоящее время он инди-разработчик игр и соучредитель BlockLight.
	Фернандо Кристи (Кю) — графический дизайнер и художник по играм. Он увлекается разработкой видеоигр, а работает художником-фрилансером, живущим в Сантьяго, Чили.
	Клемент Свеннес (Атнас) — художник-фрилансер и аниматор, живущий в Филадельфии, США. Он программист-любитель и дизайнер.
	Бертран Дюпюи (DaLK) — художник по пикселям и дизайнер видеоигр из Франции. Он разработал игры для консолей Gameboy, а в последнее время — для Nintendo DS и мобильных устройств.
	Франсиско Сифуэнтес (Метару) проживает в Чили и уже десять лет занимается пиксельной графикой, работая над разнообразными медиа, от видеоигр до музыкальных клипов, а также исполняя роли в сообществе, такие как директор галереи deviantART. .

приложений | ПИКСЕЛЬ: LED ART

Приложение PIXEL iOS работает только с кадрами PIXEL, приобретенными после сентября 2017 года, и наборами PIXEL 2.5 Maker, приобретенными после февраля 2018 года. Приложение PIXEL iOS поддерживает только разрешение 32 × 32 или используйте это приложение для разрешения 32 × 16.

Приобретенные ранее рамки

PIXEL и PIXEL Maker’s Kit или разрешения выше 32 × 32 должны продолжать использовать приложения PIXEL для Android.

Приложения

PIXEL для Android бесплатны и доступны по запросу «ledpixelart» в Google Play.

Для приложений, требующих работы из командной строки, таких как управление PIXEL с безголового (без монитора или клавиатуры) Raspberry Pi или интеграция PIXEL в сценарии оболочки bash. Приложение командной строки также работает в Windows, Mac и Linux и требует Java JRE 8 или выше.

Инструкции

Инструкции по установке Raspberry Pi

BeagleBone Black Инструкции по установке

Инструкции по установке Linux

Приложение с графическим интерфейсом, PIXEL для LINUX 4.0.1 (не поддерживается)

Примечание. Вы должны использовать только прошивку Android с PIXEL 2.5 Maker’s Kit для приложений Raspberry Pi.

Добавьте Raspberry Pi или подключите PIXEL к своему ПК или MAC через USB и управляйте PIXEL из веб-браузера. Также используйте REST API и создавайте свои собственные приложения.См. Новую функцию очереди в документации REST API, которая позволяет каскадировать несколько событий (анимацию GIF, изображения PNG и прокручиваемый текст) на основе событий из вашего приложения или службы.

pixelweb.jar REST API Docs

ПК Windows GUI версии 4.1.0 (не поддерживается)

ПК Windows GUI версии 4.0.0 (не поддерживается)

К сожалению, приложение Windows для ПК официально не поддерживается. Лучше всего работать с PIXEL с приложениями Android, но вы можете попробовать приложение Windows для ПК, если у вас нет устройства Android.Мы наблюдали неоднозначные результаты, когда приложения PIXEL для Windows работали на одних компьютерах, но не работали на других. Перед запуском приложения PIXEL подключите Bluetooth-соединение с вашего ПК к PIXEL, используя код: 0000 или используйте через USB.

PIXEL для пользователей собранной рамы: убедитесь, что выбранный тип модели / светодиодной панели: PIXEL V2 (по умолчанию) на вкладке «Настройки»

Mac OSX GUI версии 4.1.0

Mac OSX GUI, версия 4.0.0

К сожалению, приложение Mac PIXEL официально не поддерживается. Мы видели, что это работает на некоторых компьютерах Mac, но не на других.Лучше всего работать с PIXEL с приложениями Android, но вы можете попробовать приложение Mac, если у вас нет устройства Android. Это приложение будет работать только через USB с помощью кабеля USB A-A и не будет работать через Bluetooth. Отключите адаптер Bluetooth, установите тумблер на боковой стороне корпуса PIXEL в положение USB для ПК. В командной строке терминала введите ls /dev/tty.usb*, чтобы получить порт вашего PIXEL Frame, он будет примерно таким: /dev/tty.usbmodem1411. Вам нужно будет ввести этот порт на вкладке настроек приложения, а затем перезапустить.

Приложение

PIXEL имеет открытый исходный код и доступно на github

Создание собственного светодиодного арта

PIXEL позволяет вам сосредоточиться на своем искусстве, а не на программировании.До PIXEL типичные светодиодные проекты, такие как Arduino, требовали кодирования. Arduino, безусловно, сделал это проще, чем предыдущие методы, но все же вам нужно было написать код или подключить схему. С помощью PIXEL просто создайте свой GIF и поделитесь им с одним из приложений PIXEL.

При создании рисунков для PIXEL есть несколько нюансов при работе со светодиодами. Основное предостережение — низкая контрастность (цвета с небольшой разницей между ними), цвета не отображаются на светодиодах. Также настоятельно рекомендуется использовать черный фон вместо сплошного цветного фона.С черным фоном (то есть с выключенными светодиодами) ваши работы будут более заметны на светодиодах.

Для начала взгляните на GIF-файлы, поставляемые с PIXEL. И не стесняйтесь делать ремиксы и изменять их в своих собственных работах.

PIXEL имеет 9-битную цветовую палитру, всего 512 цветов, ту же цветовую палитру, что и игровые приставки Sega Genesis, Sega Nomad и TurboGrafx-16. Если вы используете цвета за пределами цветовой палитры PIXEL, это тоже нормально, и программа PIXEL найдет ближайший цвет в палитре.

Многие художники используют Adobe Photoshop для создания пиксельной графики. Вот хороший урок о том, как настроить Photoshop для пиксельной графики, а также цветовую палитру (образец) для Photoshop и Illustrator.

Создание анимации

Используя ваш любимый видеоредактор, экспортируйте анимацию в анимацию.формат файла gif. PIXEL имеет 32 x 32 или 1024 светодиода, каждый светодиод = 1 пиксель, что означает разрешение 32 x 32. Если ваша анимация имеет более высокое разрешение, это тоже нормально, PIXEL: LED ART автоматически масштабирует ее до 32 × 32 или 64 × 64 (без сглаживания) на SUPER PIXEL. Просто имейте в виду, что изображение с высоким разрешением не будет хорошо смотреться на дисплее 32 × 32. Вот два примера и связанные с ними исходные файлы (эти конкретные файлы примеров находятся в формате Adobe Flash Pro, но вы можете использовать любой видеоредактор, кроме анимированного.формат gif).

Рекомендуемая задержка кадров GIF / кадров в секунду

	Потоковое воспроизведение через Bluetooth	Запись с локальным воспроизведением или подключением по USB
ПИКСЕЛ	100 мс / 10 кадров в секунду	20 мс / 50 кадров в секунду
СУПЕР ПИКСЕЛЬ	200 мс / 5 кадров в секунду	70 мс / 14 кадров в секунду

При потоковой передаче через Bluetooth используйте задержку кадра 100 мс (10 кадров в секунду) или меньше из-за задержки Bluetooth.При записи GIF в локальное хранилище для автономной работы 20 мс — это самая высокая частота кадров в PIXEL. Если у вашего GIF задержка кадра быстрее 20 мс, это нормально и будет воспроизводиться, программное обеспечение PIXEL автоматически уменьшит задержку кадра до 20 мс. См. Различные значения частоты кадров для SUPER PIXEL выше.

В настоящее время приложения

PIXEL поддерживают запись только одного GIF-файла за раз. Если вам нужно написать несколько GIF-файлов, объедините ваши GIF-файлы в один большой GIF с помощью Photoshop, следуя этим инструкциям, или используйте веб-сайт, например picasion.com, чтобы объединить гифки. Следуйте этим инструкциям для сайта picasion.com. PIXEL не поддерживает переменную частоту кадров, поэтому поддерживайте одинаковую частоту кадров для всех GIF-файлов. Каждый кадр в GIF занимает 2 КБ в ПИКСЕЛЕ и 8 КБ в СУПЕР ПИКСЕЛЕ. Здесь вы найдете GIF размером 64 × 64.

Фотографии

Фотографии в PIXEL действительно просты. Используя свой любимый редактор, сохраните изображение в разрешении 32 × 32, используя формат файла .PNG. Если ваше изображение не 32 × 32, приложение PIXEL: LED ART масштабирует его за вас.Просто имейте в виду, что изображения с высоким разрешением не будут хорошо отображаться на светодиодном дисплее 32 × 32. Вот несколько примеров и связанных с ними исходных файлов .PNG. Вы также можете создавать пиксельные изображения прямо со своего Android-устройства и напрямую экспортировать их в PIXEL с помощью приложения PIXEL Editor или любого редактора изображений Android, который поддерживает совместное использование Android.

Наложения для смешанной техники

Передние панели

PIXEL взаимозаменяемы с печатными рисунками для смешанных установок. Просто открутите четыре винта вручную, никаких инструментов не требуется, а затем прикрепите один из шести дизайнов панелей смешанной техники или один из ваших собственных.

Специальная рама / установка

Будучи художником или творческим человеком, вы, возможно, захотите сделать свою собственную рамку или какую-либо другую установку. Версия для дома, PIXEL Guts, включает в себя светодиодную матрицу RGB, плату контроллера PIXEL, кабели и источник питания. Используйте это руководство по монтажу для установки светодиодной панели.

Вот индивидуальная установка, которую мы сделали для вечеринки в честь Хэллоуина

Запись и инструкции по установке для вечеринки в честь Хэллоуина

Чтобы загружать и делиться контентом PIXEL с другими пользователями PIXEL, присоединяйтесь к сообществу Google+ под названием «Контент PIXEL».

ПИКСЕЛЕЙ: LED ART Maker’s Kit | ПИКСЕЛЬ: LED ART

Создавайте светодиодные художественные инсталляции и носимые устройства с помощью недорогих светодиодных матричных панелей на базе HUB75. PIXEL поддерживает установку с разрешениями 32 × 16, 32 × 32, 64 × 32, 64 × 64 и 128 × 32. Просто скачайте бесплатные приложения PIXEL для iOS, Android или Raspberry Pi и отправьте GIF-анимацию, прокручиваемый текст и свои собственные пиксельные рисунки за секунды, без пайки или кодирования! В качестве дополнительного бонуса бесплатные приложения включают более 100 произведений оригинальной пиксельной графики, заказанных для этого проекта.

Плата PIXEL: LED ART включает в себя встроенную карту microSD, позволяющую сохранять ваши проекты светодиодных изображений локально, которые будут бесконечно зацикливаться на светодиодах после того, как ваше устройство будет отключено от Bluetooth. Или оставьте свой Android или Raspberry Pi подключенным, а пользовательский код — это интерактивное приложение, отображающее искусство или прокручивающее сообщения, используя наш пример кода с открытым исходным кодом, включая поддержку внешних датчиков (внешние датчики поддерживаются только в прошивке Android).

ВАЖНО : Наборы PIXEL Maker, приобретенные до февраля 2018 года, НЕ совместимы с iOS и поддерживают только Android и Raspberry Pi.

По умолчанию PIXEL Maker’s Kit устанавливается с прошивкой только для Android, которая поддерживает светодиодные панели от 32 × 16 до 64 × 64. Однако, если вам нужна поддержка iOS и / или носимых устройств с низким энергопотреблением, вы можете легко переключить прошивку, скопировав файлы изображений на карту microSD на вашей плате PIXEL.

Краткое руководство

Прошивка	Android	iOS	Малина Пи	Датчики Grove	Низкое энергопотребление для носимых устройств	Опора светодиодной панели Hub75 (панели E-Pin не поддерживаются)
Android и Raspberry Pi (по умолчанию)	Есть	№	Есть	Есть	№	32 × 16, 32 × 32,64 × 32, 64 × 64
iOS и Android 32 × 16	Есть	Есть	№	№	Есть	32 × 16 Только
iOS и Android 32 × 32	Есть	Есть	№	№	Есть	32 × 32 Только

В набор PIXEL Maker’s Kit входят:

Пиксель 2.5 Доска
Кабель питания для светодиодной матрицы
Кабель USB 2.0 A — A (5 футов)
Карта MicroSD
Bluetooth CSR 4.0 USB-ключ
Внешний выключатель
Ленточный кабель IDC для светодиодной матрицы (9 дюймов)
Бесплатные приложения для iOS, Android и Raspberry Pi

Корабли из Калифорнии, США

Корабли из Шэньчжэня, Китай

Примеры проектов DIY на Instructables

Если вы создаете портативное носимое устройство с батарейным питанием, используйте образ прошивки с низким энергопотреблением iOS / Android 32 × 16 или iOS / Android 32 × 32 и обратитесь к этому образцу проекта носимых устройств для получения инструкций.

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

ВАЖНО : PIXEL разработан для работы со светодиодными матричными панелями на базе HUB75.HUB75 — это стандартная светодиодная панель со стандартным 16-контактным разъемом IDC. Но разные производители HUB75 реализуют различный порядок пикселей, который может быть совместим или несовместим с PIXEL Maker’s Kit. Поэтому настоятельно рекомендуется приобретать только проверенные светодиодные панели из списка ниже. Заказ напрямую из Китая на таких сайтах, как Aliexpress, будет намного дешевле, но возврат невозможен, если светодиодная панель несовместима.

Число P — это шаг или расстояние от центра одного светодиода до следующего.P6 — 6 мм, P4 — 4 мм, P3 — 3 мм и т. Д. P3 будет самым плотным / самым маленьким дисплеем, а P10 — наименее плотным / самым большим дисплеем. Все светодиодные панели используют стандарт HUB75.

Обратите внимание, что хотя разъем выглядит одинаково, панели HUB75E (с дополнительным E-контактом), HUB08 и HUB12 (одноцветные) не будут работать. Светодиодные ленты WS28XX / neopixels также не совместимы. Панели HUB75 с набором микросхем драйвера светодиодов FM6126A работать не будут.

ВАЖНО : По состоянию на январь 2019 года некоторые поставщики предлагают другую панель на базе набора микросхем FM6126A , этот набор микросхем не будет работать с PIXEL.Также несовместим чипсет ICN2028 . Известно, что наборы микросхем ICN2037 и JXI5020 работают с PIXEL.

Примечание. При заказе с AliExpress всегда сначала уточняйте у поставщика (вы можете использовать чат AliExpress) и убедитесь, что набор микросхем — ICN2037 или JXI5020, а панель — HUB75, а не HUB75E.
Светодиодная матричная панель Размеры Результат Мощность Банкноты
p10 / Шаг 10 мм
JS Industrial 32 × 16 P10 1/8 Сканирование 320 мм x 96 мм x 12 мм / 12.6 ″ x 6,3 ″ x 0,5 ″ Пасс 5В, 2А Может гирляндное соединение для 64 × 16, хороший размер для прокрутки сообщений. Используйте прошивку с низким энергопотреблением для портативных приложений.
P6 / Шаг 6 мм
Adafruit 32 × 16 P6 1/8 сканирования 192 мм x 96 мм x 12 мм / 7,6 дюйма x 3,8 дюйма x 0,5 дюйма Пасс 5В, 2А Может гирляндное соединение для 64 × 16, хороший размер для прокрутки сообщений. Используйте прошивку с низким энергопотреблением для портативных приложений.
Adafruit 32 × 32 P6 190,5 x 190,5 x 14 мм / 7,5 x 7,5 x 0,55 дюйма Пасс 5 В, 4 А или 5 В, 20 А для 4 гирляндной цепи Шлейфовое соединение для 64 × 32 или 64 × 64
RGX 32 × 32 P6 192 * 192 мм Пасс 5 В, 4 А или 5 В, 20 А для 4 гирляндной цепи Шлейфовое соединение для 64 × 32 или 64 × 64
Adafruit 64 × 32 P6 1/16 сканирование 385 мм x 190 мм x 13 мм / 15.2 дюйма x 7,5 дюйма x 0,5 дюйма Не тестировалось 5В, 10А Не проверено, но должно работать. Шлейфовое соединение для 64 × 64
P5 / Шаг 5 мм
Seeedstudio 32 × 32 P5 160 мм x 160 мм / 6,3 ″ x 6,3 ″ Не тестировалось 5В, 4А Не тестировался, но должен работать
Adafruit 64 × 32 P5 318 мм x 158 мм x 15 мм / 12,5 дюйма x 6,2 дюйма x 0,6 дюйма Не тестировалось 5В, 10А Не проверено, но должно работать.Шлейфовое соединение для 64 × 64
eBay 64 × 32 P5 318 мм x 158 мм x 15 мм / 12,5 дюйма x 6,2 дюйма x 0,6 дюйма Пасс 5В, 10А Шлейфовое соединение для 64 × 64
JS Industrial 64 × 64 P5 1/16 Сканирование 320 мм x 320 мм x 15 мм / 12,6 дюйма x 12,6 дюйма x 0,6 дюйма Пасс 5В, 20А
Amazon Германия Azerone 64 × 32 P5 320 мм x 160 мм Пасс 5В, 20А
P4 / Шаг 4 мм
Amazon Azerzone 64 × 32 (гибкий) 256 мм x 128 мм Пасс 5В, 10А 28.02.2019, заказан на Amazon, доставка 15 дней из Китая, гибкая панель
Seeedstudio 64 × 32 P4 256 мм x 128 мм Не тестировалось 5В, 10А Не проверено, но должно работать.Шлейфовое соединение для 64 × 64
Adafruit 32 × 32 P4 1/16 сканирование 128 мм x 128 мм x 17 мм / 5,0 ″ x 5,0 ″ x 0,65 ″ Не тестировалось 5В, 4А Не проверено, но должно работать. Можно подключить гирляндой для 64 × 32 или 64 × 64
Meiyad 32 × 32 P4 128 мм x 128 мм x 17 мм / 5,0 ″ x 5,0 ″ x 0,65 ″ Пасс 5В, 4А Meiyad — производитель светодиодных панелей в Шэньчжэне, Китай.
NovaeLED P4 Отказ Изображение искажено, порядок пикселей отключен
Шаг P3 / 3 мм
Amazon 64 × 32 P3 191 мм x 96 мм x 15 мм / 7.5 дюймов x 3,8 дюйма x 0,6 дюйма Пасс 5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи Шлейфовое соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
SRYLED 64 × 32 P3 AliExpress 91 мм x 96 мм x 15 мм / 7,5 дюйма x 3,8 дюйма x 0,6 дюйма Пасс 5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи В примечаниях к заказу на AliExpress укажите, что на панели не должно быть булавки «E».
Может гирляндное соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
AliExpress 64 × 32 P3 191 мм x 96 мм x 15 мм / 7.5 дюймов x 3,8 дюйма x 0,6 дюйма Пасс 5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи Шлейфовое соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
Adafruit 64 × 32 P3 191 мм x 96 мм x 15 мм / 7,5 дюйма x 3,8 дюйма x 0,6 дюйма Пасс 5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи Проверено, работает. Возможна гирляндная цепь для 64 × 32 или 64 × 64. Видео 64 × 64 P3 по сравнению с P6
Meiyad 64 × 64 P3 Отказ 5В, 10А Отображается некорректно, панели со штифтом «E» работать не будут.
Яо Цай Син 64 × 32 P3 AliExpress 192 мм x 96 мм Отказ 28.02.19 — Набор микросхем драйвера светодиодов FM6126A, светодиоды не включаются, подробности о том, почему FM6126A не работает
P2.5 / 2,5 мм шаг
SRYLED P2.5 64 × 32 AliExpress 160 мм x 80 мм Пасс 5В, 4А Синий и зеленый цветовые каналы пересекаются. Вам нужно будет выбрать тип матрицы P2.5 в приложении Android или приложении API, чтобы цвета отображались правильно.
64 × 64 P2.5 AliExpress 160 мм x 160 мм Пасс 5В, 10А Aliexpress, ВАЖНО : при заказе укажите сканирование 1/16 и HUB75 в примечаниях к заказу, или вы можете получить сканирование 1/32 и HUB75E, который несовместим с PIXEL.
Схемы подключения гирляндного соединения
ВАЖНО : 4-контактный разъем питания светодиодной матрицы на плате PIXEL можно использовать только для питания одной панели 32 × 32, так как разъем постоянного тока на плате PIXEL не может обрабатывать ток, потребляемый несколькими панелями 32 × 32. При питании более 32 × 32 проводите питание светодиодных матриц по-прежнему от того же источника питания, но не через плату PIXEL.
Подключение для видео 128 × 32
Рекомендуемые блоки питания
Блок питания Продавец Банкноты
5В, 2А Adafruit 5V, 2ASeeedstudio 5V, 2A
5В, 4А Adafruit 5V, 4A
5 В, 10 А Adafruit 5V, 10A
5В, 15А АЛИТОВЕ 5В, 15А Не подавайте питание на светодиодные панели через плату PIXEL, см. Электрическую схему для 64 × 64
Блок питания старого ПК Используйте шину 5 В, не используйте 12 В.Не подавайте питание на светодиодные панели через плату PIXEL, см. Электрическую схему для 64 × 64
Теория работы
В отличие от методов на основе Arduino, IOIO отличается тем, что о прошивке позаботятся вы. У вас есть полный контроль над выводами IOIO из кода вашего приложения, используя поставляемые библиотеки IOIO на основе Java; никаких дополнительных эскизов Arduino не требуется! Это значительно упрощает процесс, позволяя вам сосредоточиться исключительно на коде вашего приложения и не беспокоиться о коде платы / прошивки.Прошивку можно обновить с помощью приложения IOIODude с вашего ПК через USB.
IOIO имеет активное сообщество пользователей, которых можно найти на форуме пользователей IOIO.
Плата PIXEL LED Matrix IOIO — это настраиваемая плата IOIO, специально разработанная для управления светодиодной матрицей HUB75. Следующие выводы IOIO доступны на плате PIXEL LED Matrix через порты Grove. Grove — это стандартный 4-контактный разъем, созданный Seeedstudio, позволяющий быстро подключать различные датчики, совместимые с Grove.
Открытые контакты доступны для будущего расширения:
Тип разъема Контакты IOIO Банкноты
Роща 6, 35, 5 В, ЗЕМЛЯ GPIO, 5V (опциональный датчик алкоголя)
Роща 4, 5, 5 В, ЗЕМЛЯ GPIO, 5 В
Роща 31, 32, 3 В, ЗЕМЛЯ Аналоговый или GPIO, 3 В (дополнительный датчик приближения)
Роща 33, 34, 3 В, ЗЕМЛЯ Аналоговый или GPIO, 3 В
Роща 1, 2, 5 В, ЗЕМЛЯ I2C, 5 В
3-контактная розетка 36, 3V3, ЗЕМЛЯ Аналоговый или GPIO, 3 В
6-контактный штекер MCLR, 3 В, ЗЕМЛЯ, 38, 37.открыть Интерфейс программатора PICkit3
Для светодиодной матрицы используются следующие выводы IOIO: 7, 10, 11, 19, 20, 21, 22, 23, 24, 25, 27 и 28
Сделайте пиксель-арт за секунды с помощью машинного обучения
Пикселизируйте любое изображение с помощью нового фильтра PixelArt от Akvelon
Привет, читатели! Меня зовут Ирина, я специалист по анализу данных в Аквелоне.Недавно Аквелон добавил новый фильтр в DeepArt , платформу, которая с помощью нейронных сетей превращает фотографии и видео в произведения искусства. Этот новый фильтр называется PixelArt и может пикселизировать ваши фотографии и видео с помощью машинного обучения.
В этой статье я расскажу вам о компонентах машинного обучения этого проекта.
Давайте погрузимся во вселенную пиксельной графики!
Исторически пиксельная графика — одна из самых популярных эстетик в видеоиграх.Он стремится воссоздать внешний вид старых игр Nintendo и Arcade. В 90-х пиксельная графика была единственным вариантом для большинства консольных игр. Теперь стиль пиксель-арт снова популярен!
Пиксель-арт — это уникальный художественный стиль, в котором учитываются большие видимые пиксели, составляющие основополагающие элементы всего изображения.
Пиксель-арт так популярен в наши дни по нескольким причинам:
Эстетика. Пиксель арт выглядит потрясающе! Красота часто заключается в его простоте с фантастическим расположением больших цветных блоков пикселей.Чтобы добиться этого эффекта, художники-графики устанавливают ограничения и правила, чтобы изображения соответствовали ожидаемому ретро-результату.
Простота. Пиксель-арт прост для понимания, но отличается от обычного стиля изображений. Более того, создавать пиксель-арт относительно легко.
‘
Воспоминания. Pixel Art вызывает большие ностальгические чувства у геймеров, выросших на Nintendo, Super Nintendo или Genesis.
Некоторые картинки в пиксельном стиле могут удивить своей проработкой и идеей. Обычно на создание таких картин у художника уходит много времени, так как нужно учитывать ограничения в разрешении и цветовой палитре. Поэтому идея создания искусственного интеллекта, который будет автоматически применять пиксельный стиль к любой фотографии или картинке, казалась очень привлекательной!
Кто-то может подумать, что стиль пикселей — это просто изображения низкого качества с слишком большими пикселями, но я хочу объяснить, насколько это неправда.Используется определенная цветовая гамма, а также в каждом случае используется собственный размер пикселя, чтобы изображение выглядело более гармонично.
Таким образом, мы можем сформулировать следующие особенности стиля пикселей:
Определенная цветовая схема : считается хорошей практикой использовать минимальное количество цветов; в идеале — стандартные 16 цветов, доступные на подавляющем большинстве видеоподсистем, даже самых ранних: в них три бита кодируют сигналы R, G, B, а четвертый бит кодирует яркость.
Сделать отдельных пикселей четко видимыми , но не обязательно в изображениях с низким разрешением.
Пикселизируйте свой любимый мем и наслаждайтесь
Определение задачи
Теперь, когда мы определили, что такое стиль пиксельной графики, мы можем перейти к практической стороне этой статьи. Наша задача — создать модель, которая будет делать обычную картинку, фото, мем, что угодно, и конвертировать ее в стиль пиксель-арт.
Приведем простой пример, чтобы лучше понять, что именно мы должны делать.Представьте, что первая фотография — это фотография вашего любимого питомца, а вторая — картина Ван Гога «Звездная ночь». Итак, вы хотите получить новый образ вашего питомца, но в стиле Ван Гога.
Другими словами, вам нужно извлечь содержимое из фотографии вашего питомца и извлечь стиль из второго изображения. После этого вы можете сгенерировать новое изображение, объединив содержимое вашей фотографии со стилем из второго изображения. Такие задачи называются преобразованием изображения в изображение.
Преобразование изображения в изображение — это класс задач визуализации и графики, целью которого является изучение соответствия между входным и выходным изображениями.
Если мы используем модели машинного обучения или нейронные сети для решения задач преобразования изображения в изображение, то этот подход называется «Передача нейронного стиля».
Например, если вы хотите превратить лошадей в зебр или груш в лампочки с помощью машинного обучения — вы станете волшебником с палочкой «Передача стиля»!
Общие концепции
Поскольку мы должны сгенерировать новое изображение определенным образом, мы будем использовать GAN (Generative Adversarial Network).Архитектура GAN состоит из модели генератора для вывода новых вероятных синтетических изображений и модели дискриминатора, которая классифицирует изображения как реальные (из набора данных) или поддельные (сгенерированные). Модель дискриминатора обновляется напрямую, тогда как модель генератора обновляется через модель дискриминатора. Таким образом, две модели обучаются одновременно в состязательном процессе, в котором генератор пытается лучше обмануть дискриминатор, а дискриминатор пытается лучше идентифицировать поддельные изображения.
Возможные подходы
Как вы уже догадались, есть несколько подходов, чтобы сделать то, что мы хотим:
1.Pix2Pix model . Модель Pix2Pix — это тип условной GAN, в которой создание выходного изображения зависит от входного, в данном случае исходного изображения. Исходное изображение и целевое изображение вводятся в дискриминатор, и он должен определить, является ли цель правдоподобным преобразованием исходного изображения. В этой ситуации используется только парный набор данных i.Каждое изображение в оригинальном стиле связано с одним и тем же изображением, но в другом стиле.
2. Модель CycleGAN . CycleGAN — это класс моделей, которые включают автоматическое обучение моделей преобразования изображения в изображение без парных примеров. Он преобразует изображения из одной области в другую и наоборот. Основное отличие этого подхода от подхода Pix2Pix заключается в том, что нет необходимости использовать парные наборы данных. Модели обучаются неконтролируемым образом с использованием коллекции изображений из исходного и целевого домена, которые не должны быть связаны каким-либо образом.
Сбор парных данных — сложная задача, потому что иногда эти данные могут не существовать. Вот почему мы решили использовать модель передачи в стиле CycleGAN.
Если вы все еще изучаете основы науки о данных, эта информация как раз для вас. Но если у вас есть некоторый опыт в области науки о данных, вы уже знаете, что у нас есть два способа найти данные:
Поиск существующего набора данных в открытых источниках
Собирать / анализировать данные для вашей задачи самостоятельно
Начиная с задачи пикселизации нетривиально, на момент написания этой статьи подходящих наборов данных не существовало.Поэтому мы выбрали второй путь.
Забегая вперед, скажу, что у нас было несколько подходов к отбору данных.
В первом подходе мы экспериментировали с пользовательскими наборами данных. Мы использовали ImageNet и MS COCO для домена A и проанализировали действительно великолепные изображения из //hello.eboy.com/eboy/ images для домена B.
Domain A
Domain B
Но почти все результаты модели были похожи на эти:
Во втором подходе использовался этот набор данных.t содержит много изображений персонажей мультфильмов на белом фоне, которые используются для домена A, и множество изображений персонажей мультфильмов Pixel Art на белом фоне, которые используются для домена B.
Домен A
Домен B
Вы будете будет абсолютно прав, если вы воскликнете, что «этот набор данных содержит только карикатуры, как эта модель может работать с изображениями реальных людей или фотографиями!»
Сохраняйте спокойствие и просто смотрите на результат…
Ага, работает очень хорошо! Но как наша модель может превратить людей в пиксель-арт, если мы обучаем ее только на мультфильмах?
Полагаю, все дело в обобщении модели.В двух словах: в процессе обучения, когда модель анализирует данные, она пытается идентифицировать закономерности на разных уровнях и запоминать их. А после обучения на обучающем наборе модель может усваивать новые данные и делать точные прогнозы. Иногда модель может находить закономерности, которые люди не могут идентифицировать. Поэтому выбор и сбалансированность набора данных очень важны.
Архитектура CycleGAN более подробно
Как вы уже знаете, GAN содержит генератор и дискриминатор.Выше мы также сказали, что CycleGAN преобразует изображения из одного домена в другой и наоборот . По этой причине архитектура CycleGAN содержит два генератора и два дискриминатора.
Основной дизайн
Первый генератор получает изображение из домена A (в нашем случае любое изображение) и пытается сгенерировать изображение из домена B (версия изображения в стиле Pixel Art). Первый дискриминатор получает сгенерированные изображения и реальные изображения Pixel Art из набора обучающих данных и пытается отличить сгенерированные изображения от реальных изображений.Генератор и дискриминатор имеют противоположные цели и противоположные функции потерь, поэтому они обучаются одновременно от одной эпохи к другой.
Второй генератор и дискриминатор работают в противоположном направлении — генератор получает изображение из домена B и пытается создать версию входного изображения «домена A». Дискриминатор пытается отличить реальные изображения «области А» от сгенерированных изображений.
Основная интересная особенность CycleGAN заключается в том, что он получает изображения из домена A, генерирует версию «домена B», а затем пытается воспроизвести версию «домена A», используя сгенерированную версию «домена B».В идеале исходное изображение и после прохождения цикла с использованием двух генераторов должны быть одинаковыми, поэтому CycleGAN также использует еще две функции потерь для сравнения изображений после прохождения цикла (домены от A к B и от B к A).
Реализация модели
Для реализации мы решили использовать метод трансферного обучения, потому что он удобный, быстрый и дает отличные результаты обучения. Мы использовали PyTorch в качестве фреймворка нейронной сети, PyCharm IDE для модели обучения с графическим процессором, а также записные книжки Jupiter и Google Colab для загрузки контрольной точки и отображения результатов.
Мы были вдохновлены, как только увидели этот репозиторий, который включает предварительно обученные модели Pix2Pix, CycleGAN, CUT и FastCUT для преобразования стиля изображения. Мы взяли эти модели за основу и обучили каждую из них на нашем пользовательском наборе данных мультфильмов. Пожалуйста, изучите репо, чтобы узнать больше о типе набора данных и различных моделях, потому что мы будем использовать все это ниже.
Если у вас уже есть контрольная точка и вы не хотите обучать модель, вы можете перейти к разделу «Вывод».
Если вы хотите использовать эти модели с настраиваемым набором данных, как мы, просто:
Клонировать репозиторий и установить требования
Загрузите предварительно обученную модель (например.грамм. Horse2zebra) с помощью следующего скрипта: bash ./scripts/download_cyclegan_model.sh <имя предварительно обученной модели>
Добавьте свой собственный набор данных в каталог ./datasets
Перейдите к обучению модели
Для просмотра результатов обучения и графиков потерь, запустите python -m visdom.server и щелкните URL-адрес http: // localhost: 8097.
5. Протестируйте модель, используя приведенный ниже код:
Результаты теста будут сохранены в html-файле здесь:
./ results / <название выбранной модели> /test_latest/index.html .
Вы можете найти больше сценариев в каталоге сценариев .
Отлично! Теперь, когда у вас есть файл весов, вы можете предположить, что вы уже получили хорошие результаты.
А теперь мы можем перейти к части вывода !
Вывод
Мы должны инициализировать нашу архитектуру модели и загрузить наш файл весов, который также называется контрольной точкой. Несмотря на то, что наша сетевая архитектура при обучении включала в себя генераторы и дискриминаторы, в процессе использования мы возьмем только ту часть, которая генерирует изображение, то есть только генератор.Вы можете увидеть все архитектуры моделей в репозитории, так как они слишком велики для включения в статью. Обратите внимание, что код ниже представлен в формате записной книжки.
Давайте взглянем на код!
Во-первых, нам нужно загрузить предварительно обученный dict состояния модели CycleGAN Generator для пикселизации изображения. Вы можете сделать это любым удобным для вас способом. В нашем случае код выглядит так:
Теперь мы импортируем необходимые библиотеки:
После этого мы должны определить классы модели.Для этого мы будем использовать ResNet, что означает остаточную сеть. Если вы не знаете об остаточной нейронной сети, вы можете изучить ее подробнее здесь. Это действительно интересный подход, решающий проблему исчезающего градиента.
Итак, вернемся к нашей модели, ResnetBlock является частью ResnetGenerator , который используется для получения версий входных изображений Pixel Art.
Теперь мы можем определить основную модель. ResnetGenerator — это нейронная сеть, которая получает любое изображение и преобразует его в изображение Pixel Art.
Нам нужна функция, которая возвращает уровень нормализации на основе входной строки. Этот уровень используется в качестве параметра для конструктора класса ResnetGenerator .
Инициализация модели и состояние загрузки dict
Итак, пришло время создать объект ResnetGenerator со слоями нормы «экземпляра» и инициализировать его со случайными весами.
И, конечно же, нам нужно проверить и определить устройство в зависимости от доступности CUDA.
Мы загрузим загруженный файл состояния и передадим его в сеть, чтобы изменить веса на предварительно обученные значения.
Отлично, теперь мы можем перейти к последней, но не менее важной части, касающейся применения модели и получения результатов.
Загрузить и преобразовать изображение
Давайте загрузим изображение, которое будет пикселизировано.
При работе с изображениями мы всегда должны применять преобразованные операционные изображения перед их передачей в нейронную сеть. Набор преобразований зависит от вашей задачи, но в этом случае мы будем использовать простое стандартное преобразование: превратить изображение в тензор факела и нормализовать его.
Просто загрузите загруженное изображение в код Python и примените преобразования.
Обработка изображения и сохранение вывода в файл
Наконец, мы можем передать преобразованное изображение в нейронную сеть.
После этого нам понадобится последняя функция, которая преобразует вывод нейронной сети ResnetGenerator (то есть тензор PyTorch) в массив numpy. Этот массив numpy можно сохранить на диск как изображение.
Просто сохраните и отобразите пиксельное изображение.
Отлично смотрится! Но в этом случае мы можем только визуально оценить, насколько изображение соответствует стилю пиксельной графики. Конечно, могут возникнуть разногласия по поводу окончательного цветового решения или того, насколько хорошо итоговое изображение соответствует стилю пиксельной графики, решать вам.
Итак, в этом руководстве вы должны были узнать:
Что такое стиль пиксельной графики
Общие правила пиксельной графики
Задача преобразования изображения в изображение и переноса стиля
Существующие подходы к решению переноса стиля
Какой выбор эффектов набора данных
Как определить и обучить модель CycleGAN на пользовательском наборе данных
Большое спасибо за внимание!
Лучшие 12 инструментов Pixel Art Maker для игрового дизайна — Buildbox | Создатель игр
Вы ищете создателя пиксельной графики, который поможет вам создать фантастическую пиксельную графику и анимацию спрайтов для вашей игры?
Если да, то вам повезло! Мы исследовали всемирную паутину и собрали одни из лучших инструментов для создания пиксельной графики, которые вы можете использовать для создания собственной пиксельной графики в Интернете с минимальными усилиями.
Эти классные программы для редактирования пикселей варьируются от бесплатных и очень удобных до более продвинутых профессиональных программ. Их можно использовать в качестве альтернативных вариантов для создания игрового арта или в качестве компаньона с другими программами для графического дизайна, такими как Photoshop.
Использование этих мощных редакторов с настройками создания пикселей может ускорить и упростить весь процесс создания пиксельной графики для вашей игры.
Итак, пусть начнется неровный обратный отсчет!
через GIPHY
Лучшие 12 инструментов Pixel Art Maker для игрового дизайна
# 1 — Pro Motion NG

Pro Motion NG от
Cosmigo — один из самых популярных инструментов пиксельной графики для разработчиков и дизайнеров мобильных игр.Профессиональные студии, такие как Glu Mobile, Halfbrick, Gameloft и другие, использовали этого средства создания пиксельной графики, чтобы помочь им в разработке многих своих популярных игр, включая классическую инди-игру Shovel Knight. Он имеет широкий набор функций, которые позволяют рисовать пиксельные изображения, редактировать и анимировать спрайты, как в Pro. Вы также можете создавать плитки с идеальным пикселем и карты уровней прямо в программе. Кроме того, есть множество эффектов слоя, режимов рисования, текстур, инструментов кисти, анимации и параметров затенения.
Pro Motion NG доступен на платформе Windows.Однако для пользователей Mac есть несколько обходных путей, которые вы можете попробовать, например Wine и PlayOnMac, чтобы загрузить его. Они предлагают как ограниченную бесплатную версию, так и полную платную версию за 39 долларов.
# 2 — Асепрайт

Еще один отличный инструмент для создания пиксельной графики — Aseprite. Этот редактор пикселей имеет все основные функции, необходимые для создания профессионально выглядящего пиксельного искусства для вашей игры. Кроме того, он имеет удобный интерфейс, который отлично подходит для всех, кто плохо знаком с пиксельной графикой.Вы можете создавать анимированные гифки, последовательности изображений и листы спрайтов в png. или json. Файлы. Существуют также различные варианты цвета и раскраски, включая управление палитрой, настраиваемые кисти и простые в использовании режимы наложения. Вы даже можете создавать пиксельные анимации, используя луковицу кожи, чтобы просматривать другие кадры для сравнения во время разработки.
Aseprite доступен для Windows и MacOS за 15 долларов.
# 3 — Pyxel Edit

Созданный Даниэлем Кварфордтом, Pyxel Edit — это программа для создания пиксельной графики, которая идеально подходит для инди-разработчиков.Этот инструмент для рисования и анимации пикселей охватывает все основы и доступен бесплатно в расширенной бета-версии по цене всего 9 долларов. Вы можете создавать классные пиксельные анимации и изображения и экспортировать их в виде листов спрайтов или даже в формате GIF. Подобно Cosmigo Pro Motion NG, вы также можете переворачивать, вращать, редактировать и синхронизировать наборы элементов мозаики. В этот урезанный редактор включены все основные функции создания пикселей, так что вы можете сосредоточиться на дизайне. Он встроен в Adobe Air и доступен как для пользователей Windows, так и для Mac.
# 4 — PiskelApp

Piskel — отличный бесплатный вариант для создания 2D-пиксельной графики в Интернете. Он имеет открытый исходный код и основан на браузере с дополнительной загружаемой офлайн-версией для пользователей Windows и Mac. Вы можете сразу приступить к созданию анимации и пиксельной графики для дизайна своей игры. С удобством создавайте гифки, спрайт-листы png или zip-файлы, сохраняя каждый кадр отдельно. Существуют также настройки, позволяющие импортировать изображения и рисовать поверх них, просматривать предварительный просмотр в реальном времени, быстро изменять размер и экспортировать прямо на свой компьютер.В приложении Piskel также есть возможность поделиться своими творениями с другими любителями пиксельной графики в онлайн-галерее витрин.
# 5 — PikoPixel

PikoPixel — еще один бесплатный редактор пикселей с открытым исходным кодом для создания пиксельной графики и спрайтов. Это в первую очередь для пользователей Mac с совместимостью с Linux и BSD. Этот инструмент для редактирования прост в использовании с безграничной функцией отмены. Вы можете создавать пиксельные рисунки, отслеживая изображения. Используйте широкий спектр цветовой палитры и параметров наложения и даже настройте фоновый холст.Это бесплатный инструмент, который предоставляет художникам-пиксельным художникам солидный набор функций.
# 6 — GraphicsGale
GraphicsGale — бесплатная программа для создания пиксельных изображений для пользователей Windows, аналогичная Paint.net. Вы можете рисовать пиксельную графику и анимацию, используя популярные инструменты редактирования, такие как наложение цветов, управление слоями, использование различных кистей и перьев, а также желанный вариант снятия шкуры с лука. Если вы художник и у вас есть несколько классных набросков, которые вы хотите преобразовать в пиксельную графику, это легко сделать с помощью GraphicsGale.Функция TWAIN позволяет вам сделать снимок вашего шедевра и импортировать его в программное обеспечение с любой цифровой камеры или сканера. Вы также можете предварительно просмотреть любую анимацию в процессе редактирования, чтобы помочь вам получить правильный дизайн.
# 7 — GIMP

Бесплатная альтернатива Photoshop с открытым исходным кодом, известная как GIMP, также может использоваться для создания пиксельной графики. В Интернете есть множество обучающих программ, которые шаг за шагом покажут вам, как с его помощью создать собственный игровой арт в пиксельном стиле.Как и в Photoshop, для начинающих требуется обучение, но если вы средний или опытный пользователь программного обеспечения для графического дизайна, который знаком со всеми командами и инструментами быстрого доступа, это отличный бесплатный вариант для использования.
# 8 — Редактор пикселей Lospec
Lospec Pixel Editor — это бесплатный инструмент на основе браузера, который позволяет любому создавать пиксельную графику. Он удобен для новичков и имеет простой интерфейс и предустановки, которые помогут вам начать работу. Вы можете выбрать свой собственный размер изображения и цветовую палитру из раскрывающегося списка или из определенной предустановки.Предустановленные параметры включают Gameboy Color, Pico-8 или Commodore 64. В нем нет функций, но в нем есть основные инструменты, необходимые для создания классных 8-битных игровых изображений на лету.
# 9 — Крита
Krita — это инструмент графического дизайна, который вы также можете использовать в качестве создателя пиксельной графики. Эта бесплатная программа с открытым исходным кодом имеет многие из тех же высококачественных инструментов рисования и редактирования, что и другие в этом списке. Созданный исключительно для художников, которым нужен недорогой инструмент для дизайна, Krita позволяет создавать все виды искусства, от портретов и комиксов до пиксельной графики.Вы можете найти множество руководств о том, как использовать его для создания пиксельной графики, на YouTube и в разделе «Обучение». Кривая обучения похожа на GIMP, но ее определенно стоит проверить.
# 10 — шифер
Slate — бесплатный редактор пикселей, удобный для новичков. Вы можете скачать его для Windows, Mac и Linux через GitHub. С помощью Slate вы можете создавать и редактировать пиксельные изображения, добавлять слои, создавать сногсшибательные 2D-плитки для своей игры и многое другое. Существует также опция, аналогичная другим инструментам, о которых мы упоминали, для предварительного просмотра анимации.Slate призван упростить создание спрайтов и анимации. Кроме того, вы можете настроить свой интерфейс. Таким образом, вы видите только то, что хотите, без каких-либо дополнительных инструментов на боковой панели. Это простой редактор пикселей, который упрощает работу.
# 11 — Pixilart

Pixilart — бесплатное онлайн-приложение для создания пиксельной графики и социальное приложение, которое позволяет создавать не только пиксельные анимации и спрайты, но и значки. Ваши изображения можно сохранять или делиться с друзьями через социальные сети.Он ориентирован на любителей 8-битного ретро-искусства всех возрастов как безопасное место для общения и обмена. Вы можете общаться в чате и взаимодействовать с тысячами активных членов сообщества в пиксельной графике. Это идеальная площадка для новичков, которые учатся создавать пиксельную графику. У них также есть версия мобильного приложения, доступная как для iOS, так и для Google Play.
# 12 — Pixie Pixel Editor
Pixie Pixel Editor — еще один бесплатный инструмент на основе браузера, который вы можете использовать. Этот упрощенный создатель пиксельной графики имеет все основные инструменты рисования и рисования, необходимые для создания собственного пиксельного искусства.Наряду с основными инструментами рисования в нем есть быстрые подсказки, варианты воспроизведения, сохранения и изменения размера. В нем нет ничего необычного, но это удобный веб-сайт, который можно добавить в закладки и использовать, когда вы испытываете затруднения или хотите попрактиковаться в своих навыках создания пикселей.
Машинное обучение — это развлечение. Часть 7. Злоупотребление генерирующими состязательными сетями для создания 8-битной пиксельной графики | Адам Гейтгей
Так почему же исследователи искусственного интеллекта создают сложные системы для создания немного странно выглядящих изображений спален?
Идея состоит в том, что если вы можете создавать изображения чего-либо, вы должны понимать это.
Посмотрите на это фото:
Собака. Точнее моя собака.
Вы сразу поймете, что это изображение собаки — пушистого существа с четырьмя ногами и хвостом. Но для компьютера изображение — это просто числовая сетка, представляющая цвет каждого пикселя. Компьютер не понимает, что изображение представляет собой концепцию.
Но теперь представьте, что мы показали компьютеру тысячи изображений собак, и после просмотра этих изображений компьютер смог самостоятельно создать новые изображения собак, включая разные породы собак и изображения с разных ракурсов.Может быть, мы могли бы даже попросить его для определенных типов изображений, например, «вид сбоку на гончую».
Если бы компьютер был в состоянии это сделать, и изображения, которые он создавал, имели нужное количество ног, хвостов и ушей, это было бы доказательством того, что компьютер знает, какие части составляют «собаку», даже если ему никто не сказал. явно. Так что в некотором смысле хорошая генеративная модель является доказательством базового понимания — по крайней мере, на уровне малышей.
Вот почему исследователи так увлечены построением генеративных моделей.Они кажутся способом обучить компьютеры понимать концепции без явного объяснения значения этих концепций. Это большой шаг по сравнению с существующими системами, которые могут учиться только на обучающих данных, которые были тщательно предварительно помечены людьми.
Но если результатом всех этих исследований станут программы, генерирующие изображения собак, сколько лет до того, как мы получим первый компьютерный календарь Dog-A-Day в качестве побочного эффекта?
Да, роботы приходят на работу каждому. В итоге.
И если вы можете создать программу, которая понимает собак, почему бы не программу, которая понимает что-нибудь еще? А как насчет программы, которая может генерировать неограниченное количество стоковых фотографий людей, пожимающих руки? Я уверен, что кто-то за это заплатит.
Я имею в виду … конечно, это ужасная идея для стартапа с искусственным интеллектом. Но я определенно слышал идеи для стартапов хуже , так что … может быть?
Хорошо, может быть, программа, которая генерирует плохие стоковые фотографии, была бы не такой уж интересной. Но, учитывая скорость прогресса генеративных моделей за последний год, кто знает, где мы будем через 5 или 10 лет.Что произойдет, если кто-то изобретет систему для создания целых фильмов? Или музыку? Или видеоигры?
Если вы посмотрите в будущее на 20–30 лет и прищуритесь, вы уже можете представить мир, в котором развлечения могут быть на 100% созданы машинами:
Индустрия видеоигр — первая сфера развлечений, в которой начнутся серьезные эксперименты с использованием ИИ для создания сырых содержание. Помимо очевидного пересечения диаграммы Венна между инженерами по компьютерным играм и машинным обучением, существует огромный финансовый стимул инвестировать в автоматизацию разработки видеоигр, учитывая бюджеты современных видеоигр класса AAA в размере 300+ миллионов долларов.
Мы все еще находимся на заре генеративных моделей на основе машинного обучения, и их практическое применение в настоящее время довольно узкое, но с ними очень весело поиграть. Посмотрим, что мы можем с ним сделать.
Чтобы построить DCGAN, мы создаем две глубокие нейронные сети. Затем мы заставляем их драться друг с другом, бесконечно пытаясь превзойти друг друга. В процессе они оба становятся сильнее.
Давайте представим, что первая глубокая нейронная сеть — это новый полицейский, которого обучают обнаруживать фальшивые деньги.Его работа — посмотреть на картинку и сказать нам, есть ли на ней настоящие деньги.
Поскольку мы ищем объекты на изображениях, мы можем использовать для этой работы стандартную сверточную нейронную сеть. Если вы не знакомы с ConvNets, вы можете прочитать мой предыдущий пост. Но основная идея состоит в том, что нейронная сеть, которая принимает изображение, обрабатывает его через несколько слоев, распознающих все более сложные элементы изображения, а затем выводит одно значение — в данном случае, независимо от того, содержит ли изображение изображение реального Деньги.
Эта первая нейронная сеть называется дискриминатором :
Дискриминаторная сеть
Теперь давайте представим, что вторая нейронная сеть — это новый фальшивомонетчик, который только учится создавать фальшивые деньги. Для этой второй нейронной сети мы перевернем слои в обычной ConvNet, чтобы все работало в обратном направлении. Таким образом, вместо того, чтобы делать снимок и выводить значение, он принимает список значений и выводит изображение.
Эта вторая нейронная сеть называется Generator :
Generator Network
Итак, теперь у нас есть полицейский ( Discriminator ), ищущий фальшивые деньги, и фальшивомонетчик ( Generator ), который печатает фальшивые деньги.Заставим их сражаться!
В первом раунде генератор будет создавать жалкие подделки, которые совсем не похожи на деньги, потому что он абсолютно ничего не знает о том, как должны выглядеть деньги:
Генератор делает первый (ужасный) фальшивый доллар
Но прямо сейчас Дискриминатор одинаково ужасен в своей работе по распознаванию денег, поэтому он не заметит разницы:
Дискриминатор считает, что доллар настоящий!
В этот момент мы вмешиваемся и сообщаем Дискриминатору, что эта долларовая купюра на самом деле подделка.Затем мы показываем ему настоящую долларовую купюру и спрашиваем, чем она отличается от фальшивой. Дискриминатор ищет новую деталь, чтобы отделить настоящую деталь от фальшивой.
Например, Дискриминатор может заметить, что на настоящих деньгах есть изображение человека, а на фальшивых — нет. Используя эти знания, Дискриминатор узнает, как отличить подделку от настоящей. Он становится немного лучше в своей работе:
Дискриминатор повышает уровень! Теперь он может обнаружить очень плохие фальшивые доллары.
Теперь мы начинаем раунд 2. Мы сообщаем Генератору, что изображения денег внезапно отвергаются как фальшивые, поэтому ему нужно активизировать свою игру. Мы также сообщаем ему, что Дискриминатор теперь ищет лица, поэтому лучший способ запутать Дискриминатора — это поставить лицо на счет:
Генератор дает немного больше фальшивых долларов
И фальшивые банкноты принимаются как действительные. опять таки! Итак, теперь Дискриминатору нужно снова взглянуть на настоящий доллар и найти новый способ отличить его от фальшивого.
Эта игра между Генератором и Дискриминатором продолжается тысячи раз, пока обе сети не станут экспертами. В конце концов Генератор производит почти идеальные подделки, а Дискриминатор превратился в главного детектива, ищущего малейшие ошибки.
В момент, когда обе сети достаточно обучены, чтобы люди были впечатлены фальшивыми изображениями, мы можем использовать фальшивые изображения для любых целей.
Итак, теперь, когда мы знаем, как работают DCGAN, давайте посмотрим, сможем ли мы использовать их для создания новых изображений для видеоигр в стиле 1980-х.
Давайте создадим DCGAN, который пытается создавать скриншоты воображаемых видеоигр для Nintendo Entertainment System (или NES) на основе снимков реальных игр:
Идея состоит в том, что если мы сможем создать убедительные скриншоты воображаемых видеоигр, мы сможем скопируйте и вставьте фрагменты искусства из этих снимков экрана и используйте их в нашей собственной видеоигре в стиле ретро. Поскольку сгенерированные видеоигры никогда не существовали, они даже не были бы воровством ( Может быть … подробнее об этом позже ).
Искусство видеоигр в то время было очень простым.Поскольку у NES был такой маленький объем памяти (игры использовали гораздо меньше памяти, чем занимает эта статья!), Программистам приходилось использовать множество уловок, чтобы уместить игровую графику в память. Чтобы максимально использовать ограниченное пространство, в играх использовалась графика на основе плиток, где каждый экран в игре состоит всего из нескольких (обычно 16×16 пикселей) повторяющихся графических плиток.
Например, начальный экран The Legend of Zelda состоит всего из 8 уникальных плиток:
Вот плитки для всей игровой карты The Legend of Zelda:
Иногда они меняют цвета, чтобы разные области выглядят по-разному, но это все.
Наша цель — создать подобный лист тайлов для нашей игры. Из-за этого нам все равно, выглядят ли создаваемые нами скриншоты игры полностью реалистичными. Вместо этого мы просто ищем формы и узоры, которые мы можем использовать в качестве плиток 16 x 16 в нашей игре — например, камни, воду, мосты и т. Д. Затем мы можем использовать эти плитки для создания нашего собственного 8-битного стиля. уровни видеоигры.
Получение данных
Для обучения нашей системы нам нужен большой объем данных. К счастью, для NES существует более 700 игр, из которых мы можем извлечь.
Я использовал wget для загрузки всех скриншотов игр NES с веб-сайта Музея видеоигр (извините за очистку вашего сайта!). После нескольких минут загрузки у меня было чуть более 10000 снимков экрана сотен игр для NES:
Всего лишь несколько из 10000 снимков экрана, составляющих набор данных.
Прямо сейчас DCGAN работают только с довольно маленькими изображениями — 256 квадратных пикселей или так. Но полное разрешение экрана NES составляло всего 256 на 224 пикселя, так что это не проблема. Чтобы упростить задачу, я обрезал каждый снимок экрана NES до квадрата 224 пикселя.
Настройка DCGAN
На github есть несколько реализаций DCGAN с открытым исходным кодом, которые вы можете попробовать. Я использовал реализацию Tensorflow Тэхуна Кима. Поскольку DCGAN не контролируются, все, что вам нужно сделать, это поместить данные в папку, настроить основные параметры, начать обучение и затем ждать, чтобы увидеть, какие результаты вы получите.
Вот как выглядит образец исходных данных обучения:
Теперь начинается обучение. Сначала выходной сигнал генератора представляет собой чистый шум.Но постепенно он начинает обретать форму, поскольку Генератор учится делать свою работу лучше:
После нескольких тренировочных раундов изображения начинают напоминать кошмарные версии классических игр Nintendo:
По мере продолжения обучения мы начинаем видеть кирпичи и блоки, которые мы надеемся найти. Вы также можете видеть элементы экрана, такие как полосы жизни и даже текст:
Здесь все становится сложнее. Откуда мы знаем, что компьютер создает совершенно новое искусство, а не просто извергает искусство непосредственно из обучающих изображений? На двух из этих изображений вы можете ясно видеть строку меню из Super Mario Bros.3, а также панель заголовка и кирпичики из оригинальной Super Mario Bros.
Срыгивание тренировочных данных — определенно то, что может случиться. Используя большой набор обучающих данных и не тренируясь слишком долго, мы можем попытаться уменьшить вероятность того, что это произойдет. Но это острый вопрос, и исследования по нему продолжаются.
Поскольку я просто стремлюсь к эстетике, я настраивал модель до тех пор, пока она не произвела на меня оригинальное изображение. Но я не могу доказать , что новое искусство полностью оригинально, кроме как путем поиска в обучающих данных аналогичного искусства и проверки того, что его нет.
После нескольких часов обучения сгенерированные изображения содержали плитки размером 16 x 16, которые мне нравились. Я искал несколько вариаций базового каменного блока, узоров кирпича, водных узоров, кустов и некоторых общих «жутких» плиток фоновой атмосферы.
Затем мне нужно предварительно обработать сгенерированные изображения, чтобы убедиться, что в них используются только 64 цвета, доступные на NES:
Оригинальная Nintendo могла отображать только эти 64 цвета.

Светодиодная матричная панель	Размеры	Результат	Мощность	Банкноты
p10 / Шаг 10 мм
JS Industrial 32 × 16 P10 1/8 Сканирование	320 мм x 96 мм x 12 мм / 12.6 ″ x 6,3 ″ x 0,5 ″	Пасс	5В, 2А	Может гирляндное соединение для 64 × 16, хороший размер для прокрутки сообщений. Используйте прошивку с низким энергопотреблением для портативных приложений.
P6 / Шаг 6 мм
Adafruit 32 × 16 P6 1/8 сканирования	192 мм x 96 мм x 12 мм / 7,6 дюйма x 3,8 дюйма x 0,5 дюйма	Пасс	5В, 2А	Может гирляндное соединение для 64 × 16, хороший размер для прокрутки сообщений. Используйте прошивку с низким энергопотреблением для портативных приложений.
Adafruit 32 × 32 P6	190,5 x 190,5 x 14 мм / 7,5 x 7,5 x 0,55 дюйма	Пасс	5 В, 4 А или 5 В, 20 А для 4 гирляндной цепи	Шлейфовое соединение для 64 × 32 или 64 × 64
RGX 32 × 32 P6	192 * 192 мм	Пасс	5 В, 4 А или 5 В, 20 А для 4 гирляндной цепи	Шлейфовое соединение для 64 × 32 или 64 × 64
Adafruit 64 × 32 P6 1/16 сканирование	385 мм x 190 мм x 13 мм / 15.2 дюйма x 7,5 дюйма x 0,5 дюйма	Не тестировалось	5В, 10А	Не проверено, но должно работать. Шлейфовое соединение для 64 × 64
P5 / Шаг 5 мм
Seeedstudio 32 × 32 P5	160 мм x 160 мм / 6,3 ″ x 6,3 ″	Не тестировалось	5В, 4А	Не тестировался, но должен работать
Adafruit 64 × 32 P5	318 мм x 158 мм x 15 мм / 12,5 дюйма x 6,2 дюйма x 0,6 дюйма	Не тестировалось	5В, 10А	Не проверено, но должно работать.Шлейфовое соединение для 64 × 64
eBay 64 × 32 P5	318 мм x 158 мм x 15 мм / 12,5 дюйма x 6,2 дюйма x 0,6 дюйма	Пасс	5В, 10А	Шлейфовое соединение для 64 × 64
JS Industrial 64 × 64 P5 1/16 Сканирование	320 мм x 320 мм x 15 мм / 12,6 дюйма x 12,6 дюйма x 0,6 дюйма	Пасс	5В, 20А
Amazon Германия Azerone 64 × 32 P5	320 мм x 160 мм	Пасс	5В, 20А
P4 / Шаг 4 мм
Amazon Azerzone 64 × 32 (гибкий)	256 мм x 128 мм	Пасс	5В, 10А	28.02.2019, заказан на Amazon, доставка 15 дней из Китая, гибкая панель
Seeedstudio 64 × 32 P4	256 мм x 128 мм	Не тестировалось	5В, 10А	Не проверено, но должно работать.Шлейфовое соединение для 64 × 64
Adafruit 32 × 32 P4 1/16 сканирование	128 мм x 128 мм x 17 мм / 5,0 ″ x 5,0 ″ x 0,65 ″	Не тестировалось	5В, 4А	Не проверено, но должно работать. Можно подключить гирляндой для 64 × 32 или 64 × 64
Meiyad 32 × 32 P4	128 мм x 128 мм x 17 мм / 5,0 ″ x 5,0 ″ x 0,65 ″	Пасс	5В, 4А	Meiyad — производитель светодиодных панелей в Шэньчжэне, Китай.
NovaeLED P4		Отказ		Изображение искажено, порядок пикселей отключен
Шаг P3 / 3 мм
Amazon 64 × 32 P3	191 мм x 96 мм x 15 мм / 7.5 дюймов x 3,8 дюйма x 0,6 дюйма	Пасс	5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи	Шлейфовое соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
SRYLED 64 × 32 P3 AliExpress	91 мм x 96 мм x 15 мм / 7,5 дюйма x 3,8 дюйма x 0,6 дюйма	Пасс	5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи	В примечаниях к заказу на AliExpress укажите, что на панели не должно быть булавки «E». Может гирляндное соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
AliExpress 64 × 32 P3	191 мм x 96 мм x 15 мм / 7.5 дюймов x 3,8 дюйма x 0,6 дюйма	Пасс	5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи	Шлейфовое соединение для 64 × 64. Видео 64 × 64 P3 по сравнению с P6
Adafruit 64 × 32 P3	191 мм x 96 мм x 15 мм / 7,5 дюйма x 3,8 дюйма x 0,6 дюйма	Пасс	5 В, 4 А или 5 В, 10 А для 2 гирляндной цепи	Проверено, работает. Возможна гирляндная цепь для 64 × 32 или 64 × 64. Видео 64 × 64 P3 по сравнению с P6
Meiyad 64 × 64 P3		Отказ	5В, 10А	Отображается некорректно, панели со штифтом «E» работать не будут.
Яо Цай Син 64 × 32 P3 AliExpress	192 мм x 96 мм	Отказ		28.02.19 — Набор микросхем драйвера светодиодов FM6126A, светодиоды не включаются, подробности о том, почему FM6126A не работает
P2.5 / 2,5 мм шаг
SRYLED P2.5 64 × 32 AliExpress	160 мм x 80 мм	Пасс	5В, 4А	Синий и зеленый цветовые каналы пересекаются. Вам нужно будет выбрать тип матрицы P2.5 в приложении Android или приложении API, чтобы цвета отображались правильно.
64 × 64 P2.5 AliExpress	160 мм x 160 мм	Пасс	5В, 10А	Aliexpress, ВАЖНО : при заказе укажите сканирование 1/16 и HUB75 в примечаниях к заказу, или вы можете получить сканирование 1/32 и HUB75E, который несовместим с PIXEL.

Блок питания	Продавец	Банкноты
5В, 2А	Adafruit 5V, 2ASeeedstudio 5V, 2A
5В, 4А	Adafruit 5V, 4A
5 В, 10 А	Adafruit 5V, 10A
5В, 15А	АЛИТОВЕ 5В, 15А	Не подавайте питание на светодиодные панели через плату PIXEL, см. Электрическую схему для 64 × 64
	Блок питания старого ПК	Используйте шину 5 В, не используйте 12 В.Не подавайте питание на светодиодные панели через плату PIXEL, см. Электрическую схему для 64 × 64

Тип разъема	Контакты IOIO	Банкноты
Роща	6, 35, 5 В, ЗЕМЛЯ	GPIO, 5V (опциональный датчик алкоголя)
Роща	4, 5, 5 В, ЗЕМЛЯ	GPIO, 5 В
Роща	31, 32, 3 В, ЗЕМЛЯ	Аналоговый или GPIO, 3 В (дополнительный датчик приближения)
Роща	33, 34, 3 В, ЗЕМЛЯ	Аналоговый или GPIO, 3 В
Роща	1, 2, 5 В, ЗЕМЛЯ	I2C, 5 В
3-контактная розетка	36, 3V3, ЗЕМЛЯ	Аналоговый или GPIO, 3 В
6-контактный штекер	MCLR, 3 В, ЗЕМЛЯ, 38, 37.открыть	Интерфейс программатора PICkit3

машина Color By Number: Pixel Art машина для Андроид

Рисуем в Фотошоп улицу в стиле пиксель арт / Creativo.one

1.

2. Меняем цвета

3. Планируем расположение

4. Разделяй и умножай

5. Заканчиваем поверхность

Как начать делать пиксель арт #4 (RUS) | by Кирилл Евстигнеев

Базовый шейдинг

Как работает свет

Базовая структура

Работа с фото референсом

О гранях

Моя версия

Распространенные ошибки

Мягкие грани

Пиллоушейдинг

Плоские тени

А что теперь?

Пиксель Арт (часть 5)

Старая школа пиксель арт стиль НЛО аркада машины игры кабинета Клипарт

Описание

Подобные клипарты

как умение писать код влияет на профессию — Дизайн на vc.ru

На NFT-токенах сейчас зарабатывают миллионы — но что это вообще такое

ПИКСЕЛЕЙ: LED ART | Платформа для LED Pixel Art

приложений | ПИКСЕЛЬ: LED ART

Создание собственного светодиодного арта

Фотографии

ПИКСЕЛЕЙ: LED ART Maker’s Kit | ПИКСЕЛЬ: LED ART

Рекомендуемые блоки питания

Теория работы

Сделайте пиксель-арт за секунды с помощью машинного обучения

Архитектура CycleGAN более подробно

Лучшие 12 инструментов Pixel Art Maker для игрового дизайна — Buildbox | Создатель игр

Машинное обучение — это развлечение. Часть 7. Злоупотребление генерирующими состязательными сетями для создания 8-битной пиксельной графики | Адам Гейтгей

Получение данных

Настройка DCGAN

Добавить комментарий Отменить ответ