инструкция по применению / Блог компании Playgendary / Хабр
Инди-разработчикам нередко приходится совмещать сразу несколько ролей: геймдизайнера, программиста, композитора, художника. И, когда дело доходит до визуала, многие выбирают пиксель-арт — на первый взгляд он кажется простым. Но чтобы сделать красиво, нужно много опыта и определенные навыки. Нашел туториал для тех, кто только начал постигать основы этого стиля: с описанием специального софта и техник рисования на примере двух спрайтов.
Фон
Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.
Порог вхождения в пиксель-арте сравнительно низкий по сравнению с традиционным артом и 3D-графикой, что привлекает инди-разработчиков. Но это вовсе не означает, что будет просто доделать игру в этом стиле. Я видел много инди-девелоперов с пиксель-арт метроидваниями на краудфандинговых платформах. Они думали, что закончат все за год, но на самом деле им нужно было еще лет шесть.
Metal Slug 3 (Arcade). SNK, 2000 год
Пиксель-арт на том уровне, на котором большинство хочет его создавать, отнимает много времени, а кратких обучалок очень мало. Работая с 3D-моделью вы можете вращать ее, деформировать, перемещать отдельные ее части, копировать анимации с одной модели на другую и так далее. Пиксель-арт высокого уровня почти всегда отнимает кучу сил на скрупулезное размещение пикселей на каждом фрейме.
В общем, я предупредил.
А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!
Софт
Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.
Paint (бесплатно)
Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.
Piskel (бесплатно)
Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.
GraphigsGale (бесплатно)
GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.
Aseprite ($)
Пожалуй, самый популярный редактор на данный момент. Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.
GameMaker Studio 2 ($$+)
Photoshop ($$$+)
Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).
Прочее
Мой набор для пиксель-арта. Все черное, только сейчас заметил.
Графический планшет ($$+)
Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.
Суппорт запястья ($)
Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.
96×96 пикселей
Final Fight. Capcom, 1989 год
Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.
На таком большом спрайте будет легче показать технику, о которой я хочу рассказать. Также попиксельная отрисовка больше похожа на традиционные формы арта (например, рисование или живопись), с которыми вы, возможно, лучше знакомы. Освоив базовые техники, мы перейдем к спрайтам поменьше.
1. Выбираем палитру
Пиксель — гораздо более глубокое понятие в пиксель-арте, чем в любых других цифровых сферах. Пиксель-арт определяют его ограничения, например, цвета. Важно правильно подобрать палитру, она поможет определить ваш стиль. Но на старте я предлагаю не думать про палитры и выбрать одну из существующих (или просто несколько рандомных цветов) — вы легко можете ее поменять на любом этапе.
Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.
2. Грубые контуры
Начнем прорисовку с помощью инструмента Карандаш. Нарисуем скетч так же, как делаем это с обычной ручкой и бумагой. Конечно, пиксель-арт и традиционный арт пересекаются, особенно когда речь идет о таких крупных спрайтах. Мои наблюдения показывают, что сильные художники по пиксель-арту как минимум неплохо рисуют от руки и наоборот. Так что развивать навыки рисования всегда полезно.
3. Проработка контуров
Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.
Неровности
Нужно научиться рисовать две базовые линии в пиксель-арте: прямые и кривые. С ручкой и бумагой все сводится к мышечному контролю, но мы-то работаем с крошечными цветными блоками.
Примеры:
Прямые
Кривые
Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.
Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.
4. Применяем первые цвета
Раскрасьте своего персонажа с помощью заливки или другого подходящего инструмента. Палитра упростит эту часть работы. Если софт не предусматривает использование палитр, можно поместить ее прямо в картинку, как на примере выше, и выбирать цвета с помощью пипетки.
В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.
5. Шейдинг
Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.
Форма и объем
Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.
Сглаживание (anti-aliasing, анти-алиасинг)
Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:
Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.
Так АА выглядит на плече орка. Он нужен, чтобы сгладить линии, отображающие изгиб его мышц
Сглаживание не должно выходить за пределы спрайта, который будет использоваться в игре или на фоне, цвет которого неизвестен. Например, если вы примените АА для светлого фона, на темном фоне сглаживание будет смотреться некрасиво.
6. Выборочный контур
Ранее контуры были полностью черными, из-за чего спрайт смотрелся очень мультяшно. Картинка была словно разделена на сегменты. Например, черные линии на руке слишком контрастно отображают мускулатуру, и персонаж выглядит менее цельным.
Если спрайт станет более естественным, а сегментация не столь явной, то базовые формы персонажа будут легче читаться. Для этого можно использовать выборочный контур — частично заменить черный контур более светлым. На освещенной части спрайта можно использовать самые светлые цвета или, там где спрайт соприкасается с негативным пространством, можно полностью убрать контур. Вместо черного нужно использовать цвет, который был выбран для тени — так сохраниться сегментация (для разграничения мышц, меха и так далее).
Также на этом этапе я добавил более темные тени. Получилось три градации зеленого на коже орка. Наиболее темно-зеленый цвет можно использовать для выборочного контура и АА.
7. Финальные штрихи
В конце стоит добавить блики (самые светлые пятна на спрайте), детали (серьги, заклепки, шрамы) и прочие улучшения, пока персонаж не будет готов или пока не придется перейти к следующему.
Есть несколько полезных приемов, которые можно применить на этом этапе. Поверните рисунок горизонтально, это часто помогает выявить ошибки в пропорциях и шейдинге. Также можно убрать цвет — выставить насыщенность на ноль, чтобы понять, где нужно изменить тени.
Создание шумов (dithering, дизеринг)
Пока что мы в основном применяли крупные, цельные участки теней. Но есть и другая техника — дизеринг, которая позволяет перейти от одного цвета к другому без добавления третьего. Посмотрите на пример ниже.
Верхний градиент от темного к светлому использует сотни различных оттенков синего.
Средний градиент использует всего девять цветов, но в нем все еще слишком много оттенков одного цвета. Возникает так называемый бандинг (от англ. band — полоса), при котором из-за толстых однородных полос глаз фокусируется на точках соприкосновения цветов, вместо самих цветов.
На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.
На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.
Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.
Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!
8. Последний взгляд
Одна из опасностей пиксель-арта в том, что он кажется легким и простым (из-за его структуры и ограничений стиля). Но в итоге вы потратите огромное количество времени на доработку своих спрайтов. Это похоже на головоломку, которую нужно решить — вот почему пиксель-арт привлекает перфекционистов. Помните, что один спрайт не должен отнимать слишком много времени — это лишь крохотный кусочек крайне сложного скопления кусочков. Важно не терять видение общей картины.
Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.
И порой полезно ненадолго оставить спрайт, чтобы чуть позже взглянуть на него свежим взглядом.
32×32 пикселя
Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.
В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».
Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.
Создание маленьких спрайтов — это постоянные компромиссы. Если вы добавите обводку, можете потерять место для тени. Если у вашего персонажа четко отображены руки и ноги, голова скорее всего должна быть не очень большой. Если эффективно использовать цвет, выборочную обводку и сглаживание, то отрисованный объект будет казаться больше, чем он есть на самом деле.
Для маленьких спрайтов мне нравится стиль тиби: персонажи выглядят очень мило, у них большие головы и глаза. Отличный способ создать яркого героя в ограниченном пространстве, да и в целом, очень приятный стиль. Но, возможно, вам нужно показать мобильность или силу персонажа, тогда вы можете уделить меньше пространства голове, чтобы тело выглядело более мощно. Все зависит от ваших предпочтений и целей.
Целая команда в сборе!
Форматы файлов
Такой результат может заставить понервничать любого пиксель-артиста
Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.
Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.
Как правильно делиться пиксель-артом
Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.
Есть несколько советов, как сохранить пиксель-арт в нужном качестве для различных соцсетей.
Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или убедитесь, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).
Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.
Насколько я знаю, невозможно опубликовать картинку в Instagram без потери качества. Но она точно будет выглядеть лучше, если вы увеличите ее хотя бы до 512х512 пикселей.
Pixel Art — Раскраска по номерам играть онлайн
Если Вы устали от долгих и безрезультатных поисков в Google Play не только увлекательной, но и полезной игры, тогда скорее находите в приложении утиллиту Sandbox. За этим простым, на первый взгляд, названием скрывается увлекательный мир раскрасок, который уже успел завоевать сердца миллионов геймеров на постсоветском пространстве!В игре представлен огромный выбор рисунков для раскрашивания! Вы точно найдете те, что Вам понравятся!
Все картинки состоят из прономерованных пикселей. Каждый номер обозначает определенный цвет. Вам нужно заполнить картинку правильными оттенками. Вы можете выбрать как рисунок с минимальным количеством цветовых акцентов, так и можете сразу взяться за более пестрый. Выбор за Вами!
В игре нет ни одного лишнего элемента. Разработчики создали для нее очень удобный и простой интерфейс, при работе с которым у Вас не возникнет никаких трудностей. В основном окне игры расположен список рисунков для раскраски. Внизу страницы находятся прономерованные цвета, а слева Вы увидите базу Ваших картинок. Их Вы, кстати, можете просто сохранять в приложении, а можете сохранить сразу в свой смартфон и показывать своим знакомым и друзьям. Очень важный момент – во время игры Вас не будут отвлекать дополнительные всплывающие баннеры, ведь создатели исключили появление в игре рекламного контента!
Эта игра – настоящая находка для всех возрастных категорий! Для детей она полезна в контексте развития их творческого потенциала, а также для изучения в интересном и увлекательном формате названия цветов и чисел! Ведь, как известно, в игровой форме ребята учатся намного быстрее! Sandbox также поможет развить у них фантазию, моторику, а также привить с детства любовь к великому и прекрасному искусству! Кто знает, может, именно после знакомства с этой игрой, Ваш малыш настолько полюбит творчество, что посвятит ему свою жизнь!
Взрослые, в свою очередь, смогут использовать эту игру в качестве таймкиллера во время продолжительных ожиданий или длительных переездов, антидепрессанта при нервных перенапряжениях и просто для развития своих креативных навыков и получения эстетического удовольствия! Родители и дети могут также вместе весело и творчески проводить время, играя в приложение Sandbox. Для игры нет никаких ограничений! Вы можете играть в любое время и в любом месте! Скорее скачивайте эту чудесную игру на свой смартфон и создавайте настоящие шедевры!
Pixel art в GIMP для начинающих
Это адаптация урока по созданию pixel art в Фотошопе. Статья оставлена практически в первозданном виде. Публикация и адаптация согласованы с автором, но с аккаунта на этом сайте он вряд ли ответит.
1. История пиксель арта (очень коротко)
Юрий Гусев, он же Fool.
Pixel art (пишется без дефиса) или пиксельная графика — направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля — это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.
Это — не pixel art. Хотя изображение цифровое, создано с помощью компьютера и состоит из пикселей — оно НЕ рисовалось на уровне точек. К сожалению, практически недоказуемо, потому что автор всегда может заявить обратное. Вот почему на конкурсах по пиксельной графике обычно одно из условий -предоставить иллюстрацию на разных этапах работы (WIP — work in progress).
Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).
Разновидность пиксель арта — т. н. line art. Неизвестный автор.
Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно — он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики — всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Наивысшая точка развития pixel art’а в видеоиграх. Хотя официально апогей приписывают 2-му и 3-му поколениям, на мой взгляд он пришёлся несколько позже. Именно на приставках 4-го поколения (Sega MD, SNES, TurboGrafx-16 и Neo Geo) вышли игры с самой красивой и безупречной по технике пиксельной графикой. Это несмотря на то, что технология наступала на пятки и повсеместно предпринимались попытки ввести в игры full motion video, а также спрайты, созданные на основе фотографий, видеоматериалов и заранее визуализированных 3D-моделей.
Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
У дизайнеров из «eBoy» было трудное детство, они провели его в восточной Германии и были начисто лишены возможности наслаждаться изящными искусствами. Потому не научились рисовать ничего кроме пиксельной графики. Но главная их заслуга — они убедили рекламодателей, что pixel art это модно и круто. Если по мнению дизайнеров из «eBoy» ГДРовские игрушки и одежда были некрасивыми — интересно, что бы они сказали про советские?
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.
Еще одна заметная фигура — голландец Хэнк Ниебург, начавший карьеру пиксельного художника аж в 1989-м. В конце 90-х был вынужден зарабатывать на жизнь вебдизайном и едва сводил концы с концами, но с 2000-го снова рисует pixel art, теперь уже для мобильных игр.
Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!
Pixel dolls, развлечение для взрослых девочек, ненаигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного. pixparadise.net
2. Графический редактор
Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.
Microsoft Paint — оружие последнего шанса, когда рисовать уже совсем негде. Это «круги», во всяком случае Paint считает именно так. Особенно примечателен уродец в центре, который даже не симметричен.
GIMP прекрасно подходит для создания пиксель арта, для этого есть инструмент «Карандаш», в котором можно использовать и динамику рисования, а заливать цветом можно при помощи инструмента «Заливка». Если запереть альфа-канал слоя, то можно заливать одним цветом несвязанные области на всём слое просто перетаскивая цвет из палитры на холст.
Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов — отлично. Если также позволяет сохранять файлы — просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.
Тоже своего рода пиксель арт, картина составлена из… кубиков Рубика! 1330 кубиков, размер полотна 116×107 см, автор Джон Куигли (John Quigley).
Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику — это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.
3. Общие принципы пиксель арта
И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил — кому до них дело?
Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2×2 пикселя, или 3×3. Но строить изображение всё же предпочтительно из отдельных пикселей.
Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:
За исключением ладоней у человечка, которые вроде как являются авторской задумкой, все элементы, в которых толщина линии превысила 1 пиксель, нужно исправить.
Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:
http://pc.kiteretsu.jp/games/zka/zka.htm
Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее — что называется, не наш метод.
Кадр из игры Duct. Казалось бы, всё в порядке, но толщина обводки и прочих элементов рисунка всюду колеблется между 1-м и 2-мя пикселями.
Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).
То самое исключение, Jimmy Two Shoes. Здесь пиксельная графика стремится повторить стиль оригинального мультфильма, на персонажах которого основана игра, и в котором все персонажи имеют чётковыраженную обводку.
Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы — фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):
Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее — там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель — в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя.
Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу — это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.
Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):
Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель — только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:
Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии.
Вообще прямые линии это здорово — но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.
Выделенные красным участки нарушают плавность скругления, потому что их длина резко выбивается из длины соседних фрагментов.
Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:
Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:
На рисунке есть и грубые ошибки, и просто неудачных скругления, и изломы встречаются — попробуйте исправить картинку на основе того, что уже знаете. На этом с линиями у меня всё, предлагаю немного порисовать.
И пусть вас не смущает простота примеров, научиться рисовать можно только рисуя — даже такие простейшие вещи. Те же eBoy составляют свои огромные красивые картины из мелких деталей, многие из которых нарисованы отдельно друг от друга.
4. Практикуемся в рисовании
4.1. Рисуем склянку с живой водой
1. Форма объекта, пока можно не использовать цвет.
2. Красная жидкость.
3. Меняем цвет стекла на голубой, добавляем затенённые участки внутри пузырька и светлый участок на предполагаемой поверхности жидкости.
4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?
5. Аналогично рисуем склянку с синей жидкостью — здесь тот же цвет стекла, плюс три оттенка синего для жидкости.
4.2. Рисуем арбуз
1. Нарисуем круг и полукруг — это будут арбуз и вырезанная долька.
2. Обозначим вырез на самом арбузе, а на дольке — границу между корочкой и мякотью.
3. Заливка. Цвета из палитры, средний оттенок зелёного — цвет корки, средний красный — цвет мякоти.
4. Обозначим переходный участок от корки к мякоти.
5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно — семечки! Если скрестить арбуз с тараканами, будут расползаться сами.
6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) — чтобы придать объём самому арбузу.
5. Dithering (смешивание цветов)
Дизеринг, или смешивание — техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ — чередовать пиксели в шахматном порядке:
Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям — на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:
Наложение на участок красного цвета синих пикселей в шахматном порядке создаёт иллюзию фиолетового цвета.
Но и позже, когда количество цветов перестало быть проблемой, дизеринг можно было видеть в видеоиграх в роли тени (чтобы не нагружать железо полупрозрачностью, художники часто обозначали тень участком чёрных пикселей, расположенных в шахматном порядке и накладывавшихся на фон).
Game Boy, 4 цвета (чёрный, белый и два оттенка серого). Настоящий вызов художнику!
Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.
Еще два варианта дизеринга:
Расширенная версия базового дизеринга, с заводом отдельных пикселей смешиваемых цветов.
Продвинутая версия, позволяет получить наиболее плавный переход от одного цвета к другому (путём кропотливого отрисовывания).
Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше — можно. Меньше лучше не делать.
Ниже пример неудачного дизеринга. Несмотря на то, что подобную технику можно часто встретить на спрайтах из видеоигр, нужно отдавать себе отчёт в том, что телевизионный экран существенно сглаживал изображение, и такая гребёнка, да еще в движении, глазом не фиксировалась:
Ну, хватит теории. Предлагаю еще немного попрактиковаться.
6. Более сложные примеры
6.1. Рисуем меч
Такой несерьёзный меч для несерьёзного проекта:
1. Форма. Здесь всё просто.
2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.
3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание — я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени — справа и снизу.
4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию — дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить — не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?
5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.
6.2. Робот
Один из самых распространённых способов рисования «с нуля» — изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» — сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:
Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:
Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:
На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках — по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём — это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно — бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.
Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!
Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:
Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю — это также придаст рисунку больше плавности.
Особое внимание обращаю на грудную панель: теневые участки толщиной в 1 пиксель, на освещённой кромке появляется чёткий блик, для которого использую самый светлый цвет из палитры.
Также приглядитесь к глазам, у них уже есть блики, основной цвет и тень. Кладу тень по всему роботу:
Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):
Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).
Здесь сложно давать какие-либо советы, кроме одного — учитесь рисовать, изучайте тени, теорию света. Двигаемся дальше, дизеринг:
Выбираем любую границу между двумя цветами и выкладываем пиксели этих цветов в шахматном порядке. Самые светлые пятна я оставил без дизеринга, что подчёркивает резкость блика. Также дизеринга нет на ногах — слишком миниатюрные элементы, его там просто негде выкладывать. Теперь финальный штрих, заклёпки, обозначающие зубы, и игривая антенна:
Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним — цвет светлой тени, и правый нижний — цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок — я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.
Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно — вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:
WIP, тот самый Work in Progress:
Собственно, на этом всё. Ну а напоследок несколько полезных ссылок:
Перемещение или копирование ячеек и содержимого ячеек
Используйте Cut , Copy и Paste для перемещения или копирования содержимого ячейки. Или скопируйте определенное содержимое или атрибуты из ячеек. Например, скопируйте полученное значение формулы без копирования формулы или скопируйте только формулу.
Когда вы перемещаете или копируете ячейку, Excel перемещает или копирует ячейку, включая формулы и их результирующие значения, форматы ячеек и комментарии.
Вы можете перемещать ячейки в Excel, перетаскивая их или используя команды Вырезать и Вставить .
Перемещение ячеек путем перетаскивания
Выделите ячейки или диапазон ячеек, которые вы хотите переместить или скопировать.
Укажите на границу выделения.
Когда указатель становится указателем перемещения , перетащите ячейку или диапазон ячеек в другое место.
Перемещение ячеек с помощью функции «Вырезать и вставить»
Выберите ячейку или диапазон ячеек.
Select Home > Cut
Введение в компьютерную графику, раздел 2.1 — Пиксели, координаты и цвета
Раздел 2.1
Пиксели, координаты и цвета
Для создания двухмерного изображения каждая точка изображения назначен цвет. Точка в 2D может быть идентифицирована парой числовых координаты. Цвета также могут указывать численно.Однако присвоение номеров точкам или цвета несколько произвольны. Итак, нам нужно потратить некоторое время изучение систем координат, которые связывают числа в точки и цветовые модели, которые ассоциировать числа с цветами.
2.1.1 Координаты пикселей
Цифровое изображение состоит из строк и столбцов пикселей. Пиксель в таком изображении можно указать, указав, какой столбец и какая строка содержит Это. В терминах координат пиксель можно определить парой целых чисел, дающей номер столбца и номер строки.Например, пиксель с координатами (3,5) будет находиться в столбце номер 3 и строке номер 5. Обычно столбцы нумеруются слева вправо, начиная с нуля. Большинство графических систем, включая те, которые мы будем изучать в этой главе нумеруйте строки сверху вниз, начиная с нуля. Некоторые, в том числе OpenGL, вместо этого пронумеруйте строки снизу вверх.
Обратите внимание, в частности, что пиксель, который определяется парой координаты ( x , y ) зависят от выбора системы координат.Вам всегда нужно знать, какая система координат используется, прежде чем вы узнаете, что точка, о которой вы говорите.
Номера строк и столбцов определяют пиксель, а не точку. Пиксель содержит много точек; математически он содержит бесконечное количество точек. Цель компьютерной графики — не на самом деле цвет пикселей — это создание изображений и манипулирование ими. В каком-то идеале смысл, изображение должно быть определено путем указания цвета для каждой точки, а не только для каждый пиксель. Пиксели являются приблизительными.Если представить себе, что существует истинный, идеальный изображение, которое мы хотим отобразить, то любое изображение, отображаемое путем раскрашивания пикселей, будет приближение. Это имеет много значений.
Предположим, например, что мы хотим нарисовать отрезок линии. Математическая линия не имеет толщины и будет невидимым. Итак, мы действительно хотим нарисовать толстую линию сегмент с определенной шириной. Допустим, линия должна быть один пиксель в ширину. Проблема в том, что, если линия не горизонтальная или вертикальная, мы не можем нарисовать линию, раскрашивая пиксели.Диагональная геометрическая линия закроет некоторые пикселей только частично. Невозможно сделать часть пикселя черной, а часть белой. Когда вы пытаетесь нарисовать линию только с черными и белыми пикселями, в результате получается неровная эффект лестницы. Этот эффект является примером того, что называется «алиасингом». Также можно увидеть сглаживание в очертаниях символов, нарисованных на экране, и в диагональных или изогнутых границах между любые два региона разного цвета. (Термин «алиасинг», вероятно, происходит от того факта, что идеальные изображения естественно описываются в координатах действительных чисел.Когда вы пытаетесь представить изображение с использованием пикселей, многие координаты действительных чисел будут отображаться в одно и то же целое число координаты пикселей; все они могут рассматриваться как разные имена или «псевдонимы» для тот же пиксель.)
Антиалиасинг — это термин, обозначающий методы, которые предназначены для уменьшить эффект наложения спектров. Идея состоит в том, что когда пиксель только частично покрытый фигурой, цвет пикселя должен быть смесью цветов форма и цвет фона. Рисуя черную линию на белом фоне, цвет частично покрытого пикселя будет серым, с оттенком серого в зависимости от на долю пикселя, покрытого линией.(На практике, вычисляя это площадь точно для каждого пикселя было бы слишком сложно, поэтому используется приблизительный метод.) Вот, например, геометрическая линия, показанная слева, вместе с двумя приближениями этой линии, сделанной раскрашиванием пикселей. Линии сильно увеличены, чтобы вы могли видеть отдельные пиксели. Линия справа нарисована с использованием антиалиасинга, а линия справа средний нет:
Обратите внимание, что сглаживание не дает идеального изображения, но может уменьшить «неровности», которые вызваны алиасингом (по крайней мере, при просмотре в нормальном масштабе).
Есть и другие проблемы, связанные с отображением вещественных координат в пиксели. Например, какая точка в пикселе должна соответствовать целочисленным координатам. например (3,5)? Центр пикселя? Один из углов пикселя? В общем, мы думаем, что числа относятся к левому верхнему углу пикселя. Другой способ подумать об этом — сказать, что целочисленные координаты относятся к линии между пикселями, а не сами пиксели. Но это все еще не определяет точно, какие пиксели будут затронуты при рисовании геометрической формы.Например, вот две линии, нарисованные с использованием графики холста HTML, показаны сильно увеличенными. Линии должны быть окрашены в черный цвет с ширина линии в один пиксель:
Верхняя линия проведена от точки (100,100) до точки (120,100). В графика холста, целочисленные координаты, соответствующие линиям между пикселями, но когда рисуется линия в один пиксель, она расширяет половину пикселя по обе стороны от бесконечно тонкой геометрической линии. Итак, в верхней строке линия, как она нарисована, лежит наполовину в одном ряду пикселей и половину в другом ряду.Графическая система, использующая сглаживание, визуализировал линию, раскрашивая оба ряды пикселей серые. Чистая линия проведена от точки (100,5,100,5) до (120,5, 120,5). В этом случае линия проходит ровно по одной строке пикселей, который окрашивается в черный цвет. Серые пиксели на концах нижней строки связаны с тот факт, что линия заходит только на половину пикселей в своих конечных точках. Другие графические системы могут отображать одни и те же линии по-разному.
Следующая интерактивная демонстрация позволяет вам экспериментировать с пикселей и сглаживания.(Обратите внимание, что в любой интерактивной демонстрации, прилагаемой к этой книге, вы можете нажать значок вопросительного знака в верхнем левом углу для получения дополнительной информации о том, как его использовать.)
Для демонстрации требуется JavaScript.
Так как JavaScript недоступен,
демонстрация не работает.
Все это усложняется еще и тем, что пиксели не те, к которым привыкли. быть. Пиксели сегодня меньше! Разрешение устройства отображения можно измерить с точки зрения количества пикселей на дюйм на дисплее, количество, относящееся к как PPI (пикселей на дюйм) или иногда DPI (точек на дюйм).Ранние экраны, как правило, имели разрешение где-то близко к 72 PPI. При таком разрешении и при обычном просмотре расстояние, отдельные пиксели хорошо видны. Некоторое время казалось, что большинство дисплеи имели около 100 пикселей на дюйм, но дисплеи с высоким разрешением сегодня могут иметь 200, 300 или даже 400 пикселей на дюйм. При самых высоких разрешениях индивидуальные пиксели больше нельзя различить.
Тот факт, что пиксели бывают такого диапазона размеров, является проблемой, если мы используем системы координат на основе пикселей.Изображение создано в предположении, что есть 100 пикселей на дюйм будут выглядеть крошечными на дисплее с разрешением 400 пикселей на дюйм. Линия шириной в один пиксель хорошо выглядит при 100 PPI, но при 400 PPI линия шириной в один пиксель, вероятно, очень худой.
На самом деле, во многих графических системах «пиксель» на самом деле не относится к размер физического пикселя. Вместо этого это просто еще одна единица измерения, которая устанавливается системой как нечто подходящее. (В настольной системе пиксель обычно составляет около одной сотой дюйма. На смартфоне, который обычно если смотреть с более близкого расстояния, значение может быть ближе к 1/160 дюйма.Кроме того, значение пикселя как единицы измерения может измениться, когда: например, пользователь увеличивает веб-страницу.)
Пиксели вызывают проблемы, которые не решены полностью. К счастью, они меньше проблем для векторной графики, которую мы буду использовать в этой книге. Для векторной графики пиксели становятся проблемой только во время растеризация, этап преобразования векторного изображения в пиксели для отображения. Само векторное изображение можно создать с помощью любого удобная система координат.Он представляет собой идеализированный, независимый от разрешения образ. Растрированное изображение — это приближение к идеальному изображению, но как его сделать приближение можно оставить аппаратному обеспечению дисплея.
2.1.2 Реальные системы координат
При работе с 2D-графикой вам дается прямоугольник, в котором вы хотите нарисуйте графические примитивы. Примитивы задаются с помощью некоторой системы координат прямоугольника. Должна быть возможность выбрать подходящую систему координат. для приложения.Например, если прямоугольник представляет пол спланировать комнату размером 15 на 12 футов, тогда вы можете использовать система координат, в которой единицей измерения является один фут, а диапазон координат от 0 до 15 по горизонтали и от 0 до 12 в вертикальном направлении. Единица измерения в данном случае — футы. а не пикселей, и одна ступня может соответствовать многим пикселям в образ. Координаты пикселя, как правило, являются действительными числами. а не целые числа. На самом деле про пиксели лучше забыть и просто подумайте о точках на изображении.У точки будет пара координат, заданных действительными числами.
Чтобы указать систему координат на прямоугольнике, вам просто нужно указать горизонтальные координаты для левого и правого края прямоугольника и вертикальные координаты для Верх и низ. Назовем эти значения слева , справа , сверху и снизу . Часто они мыслится как xmin , xmax , ymin и ymax , но нет оснований предполагать, что, например, сверху меньше нижний .Нам может понадобиться система координат в вертикальная координата которого увеличивается снизу вверх вместо сверху вниз. В этом случае верхний будет соответствовать максимальное значение y вместо минимального значения.
Чтобы позволить программистам указывать систему координат, они хотели бы использовать, было бы хорошо иметь подпрограмму, такую как
setCoordinateSystem (слева, справа, снизу, сверху)
Графическая система будет автоматически отвечать за преобразование координаты из указанной системы координат в пиксельные координаты.Такая подпрограмма может быть недоступна, поэтому полезно посмотреть, как преобразование делается вручную. Рассмотрим общий случай. Данные координаты точки в в одной системе координат, мы хотим найти координаты той же точки за секунду система координат. (Помните, что система координат — это всего лишь способ присвоения чисел к точкам. Это точки настоящие!) Предположим, что горизонтальная и вертикальная ограничения: старый Левый , старый Правый , старый Верхний и старый Нижний для первая система координат, и новые, слева , новые, справа , новые, сверху , и newBottom для второго.Предположим, что точка имеет координаты ( oldX, oldY ) в первой системе координат. Мы хотим найти координаты ( newX, newY ) точки во второй системе координат
Формулы для newX и newY затем даются
новыйX = новыйLeft + ((oldX - oldLeft) / (oldRight - oldLeft)) * (newRight - newLeft)) newY = newTop + ((oldY - oldTop) / (oldBottom - oldTop)) * (newBotom - newTop)
Логика здесь такова, что oldX расположен на определенной части расстояния от oldLeft до старый Правый .Эта дробь равна
((oldX - oldLeft) / (oldRight - oldLeft))
Формула для newX просто говорит, что newX должен находиться на той же части расстояния от новый Левый до новый Правый . Вы также можете проверить формулы, проверив, что они работают, когда oldX равно oldLeft или oldRight , и когда oldY равно oldBottom или oldTop .
В качестве примера предположим, что мы хотим преобразовать некоторую систему координат действительного числа с ограничениями слева , справа , сверху и снизу в пикселях координаты в диапазоне от 0 слева до 800 справа и от 0 вверху 600 внизу. В этом случае newLeft и newTop равны нулю, и формулы становятся просто
newX = ((oldX - слева) / (справа - слева)) * 800 newY = ((oldY - вверху) / (внизу - вверху)) * 600
Конечно, это дает newX и newY как действительные числа, и они будут иметь для округления или усечения до целых значений, если нам нужны целочисленные координаты пикселей.Обратное преобразование — переход от пиксельных координат к действительным числовым координатам — это тоже полезно. Например, если изображение отображается на экране компьютера, и вы хотите реагировать на щелчки мышью по изображению, вы, вероятно, получите координаты мыши в терминах целочисленных пиксельных координат, но вы захотите преобразовать эти пиксельные координаты в выбранная вами система координат.
Однако на практике вам обычно не придется выполнять преобразования самостоятельно, поскольку большинство графические API предоставляют более высокоуровневый способ задания преобразований.Мы поговорим подробнее о это в Разделе 2.3.
2.1.3 Соотношение сторон
Соотношение сторон прямоугольника — это отношение его ширины к высоте. Например, соотношение сторон 2: 1 означает, что прямоугольник вдвое больше его высоты, а соотношение сторон 4: 3 означает, что ширина в 4/3 раза больше высоты. Хотя соотношение сторон часто записываются в виде ширина : высота , я буду использовать этот термин для обозначения фракция ширина / высота .У квадрата соотношение сторон равно 1. Прямоугольник с соотношением сторон соотношение 5/4 и высота 600 имеет ширину, равную 600 * (5/4), или 750.
Система координат также имеет соотношение сторон. Если горизонтальные и вертикальные пределы для система координат: слева , справа , снизу и сверху , как выше, то соотношение сторон — это абсолютное значение
(справа - слева) / (сверху - снизу)
Если система координат используется для прямоугольника с таким же соотношением сторон, то при просмотре в В этом прямоугольнике одна единица в горизонтальном направлении будет иметь такую же кажущуюся длину, что и единица в вертикальное направление.Если соотношения сторон не совпадают, будет некоторое искажение. Например, форма, определяемая уравнением x 2 + y 2 = 9 должен быть кругом, но это будет верно, только если соотношение сторон ( x , y ) система координат соответствует соотношению сторон области рисования.
Не всегда плохо использовать разные единицы длины по вертикали и горизонтали. направления. Однако предположим, что вы хотите использовать координаты с пределами слева , справа , нижний и верхний , и вы хотите сохранить соотношение сторон.В таком случае, в зависимости от формы отображаемого прямоугольника вам, возможно, придется отрегулировать значения любого из слева и справа или снизу и сверху , чтобы соотношения сторон совпадали:
Мы более подробно рассмотрим геометрические преобразования позже в этой главе, а сейчас мы увидим некоторый программный код для настройки систем координат.
2.1.4 Цветовые модели
Речь идет о самых элементарных основах компьютерной графики.Один из них системы координат. Другой — цвет. Цвет на самом деле — удивительно сложная тема. Мы рассмотрим некоторые части темы, наиболее актуальные для компьютерной графики. Приложения.
Цвета на экране компьютера представлены комбинацией красного, зеленого и синего света. Различные цвета получаются за счет изменения интенсивности каждого типа света. Цвет может быть задается тремя числами, обозначающими интенсивность красного, зеленого и синего цветов. Интенсивность может быть указана как число в диапазоне от нуля, для минимальной интенсивности, до единицы, для максимальная интенсивность.Этот метод указания цвета называется цветовой моделью RGB, где RGB означает красный / зеленый / синий. Например, в цветовой модели RGB число тройное (1, 0,5, 0,5) представляет цвет, полученный при установке полной интенсивности красного, а зеленый и синий настроены на половинную интенсивность. Значения красного, зеленого и синего цвета называются цветовыми компонентами этого цвета в цветовой модели RGB.
Свет состоит из волн различной длины. Чистый цвет — это цвет, для которого весь свет имеет одинаковую длину волны, но в целом цвет может содержать много длин волн — математически, бесконечное число.Как же тогда мы можем представить все цвета, комбинируя только красный, зеленый и синий свет? Фактически, мы не можем этого сделать.
Вы, наверное, слышали, что комбинации трех основных или «основных» цветов достаточно. для представления всех цветов, потому что человеческий глаз имеет три типа цветовых датчиков, которые обнаруживают красный цвет, зеленый и синий свет. Однако это только приближение. Глаз действительно содержит три виды датчика цвета. Датчики называются «конусными ячейками». Однако клетки колбочек не реагируют исключительно на красный, зеленый и синий свет.Каждый вид колбочек в той или иной степени реагирует на световые волны в широком диапазоне длин волн. Данный сочетание длин волн будет стимулировать каждый тип клеток до определенной степени, а интенсивность стимуляция определяет цвет, который мы видим. Другая смесь длин волн, которая стимулирует каждый тип колбочек в одинаковой степени будет восприниматься как один и тот же цвет. Так воспринимается цвет может быть определен тремя числами, дающими интенсивность стимуляции три типа колбочек.Однако невозможно произвести все возможные схемы стимуляция путем сочетания всего трех основных цветов, независимо от того, как эти цвета выбраны. Это просто факт о том, как на самом деле работают наши глаза; могло быть иначе. Три основных цвета могут дать достаточно большую часть набора воспринимаемых цветов, но есть цвета, которые вы можете увидеть в мире, которые вы никогда не увидите на своем компьютере экран. (Все это обсуждение относится только к людям, у которых есть три типа конусная ячейка.Цветовая слепота, когда кому-то не хватает одного или нескольких видов колбочек, является на удивление часто.)
Диапазон цветов, который может воспроизводиться таким устройством, как экран компьютера, называется цветовую гамму этого устройства. На разных экранах компьютеров могут быть разные цветовая гамма, и одни и те же значения RGB могут давать несколько разные цвета на разных экранах. Цветовой охват цветного принтера заметно отличается — и, вероятно, меньше — чем цветовая гамма экрана, что объясняет, почему печатное изображение, вероятно, выглядит не так, как на экране.(Принтеры, кстати, делают цвета иначе, чем на экране. В то время как экран объединяет свет, чтобы создать цвет, принтер сочетает в себе чернила или красители. Из-за этой разницы цвета, предназначенные для принтеров, часто выражается с помощью другого набора основных цветов. Общая цветовая модель для цветов принтера CMYK с использованием цветов: голубой, пурпурный, желтый и черный.)
В любом случае, наиболее распространенной цветовой моделью для компьютерной графики является RGB. Цветов RGB больше всего часто представляется с использованием 8 бит на компонент цвета, всего 24 бита для представления цвета.Такое представление иногда называют «24-битным цветом». 8-битное число может представлять 2 8 или 256 различных значений, которые мы можем принять для — положительные целые числа от 0 до 255. Затем цвет определяется как тройка целых чисел. (r, g, b) в этом диапазоне.
Это представление работает хорошо, потому что 256 оттенков красного, зеленого и синих примерно столько, сколько может различить глаз. В приложениях, где обрабатываются изображения при вычислениях с компонентами цвета обычно используются дополнительные биты на компонент цвета, чтобы избежать визуальных эффектов, которые могут возникнуть из-за ошибок округления в вычислениях.Такие приложения могут использовать 16-битное целое число или даже 32-битное значение с плавающей запятой для каждый компонент цвета. С другой стороны, иногда используется меньше бит. Например, один общая цветовая схема использует 5 бит для красного и синего компонентов и 6 бит для зеленого компонент, всего 16 бит для цвета. (Зеленый получает дополнительный бит, потому что глаз более чувствителен к зеленому свету, чем к красному или синему.) Этот «16-битный цвет» экономит память по сравнению с 24-битным цветом и чаще использовался, когда память была дороже.
Помимо RGB существует множество других цветовых моделей. RGB иногда критикуют за то, что он не интуитивно понятен. Например, для большинства людей не очевидно, что желтый состоит из комбинации красного и зеленого. Близкородственные цветовые модели HSV и HSL описывают тот же набор цветов, что и RGB, но пытаются сделать это более интуитивно понятным способом. (HSV иногда называют HSB, с буквой «B» означает «яркость». HSV и HSB — это одна и та же модель.)
Буква «H» в этих моделях означает «оттенок», основной спектральный цвет.По мере увеличения H цвет меняется с красного на желтый, затем на зеленый, затем на голубой, затем на синий и пурпурный, а затем обратно к красному. Значение H часто принимается в диапазоне от 0 до 360, поскольку цвета можно считать как расположено по кругу с красным цветом как на 0, так и на 360 градусов.
«S» в HSV и HSL означает «насыщенность», и принимается в диапазоне от 0 до 1. Насыщенность 0 дает оттенок серого (оттенок зависит от значение V или L). Насыщенность 1 дает «чистый цвет», а уменьшение насыщенности приводит к например, добавить больше серого к цвету.«V» означает «ценность», а «L» означает «легкость». Они определяют, насколько ярким или темным будет цвет. Основное отличие состоит в том, что в модели HSV чистые спектральные цвета встречаются при V = 1, в то время как в HSL они встречаются при L = 0,5.
Давайте посмотрим на некоторые цвета в цветовой модели HSV. На рисунке ниже показано цвета с полным диапазоном H-значений, для S и V равными 1 и 0,5. Обратите внимание, что при S = V = 1 вы получить яркие, чистые цвета. S = 0,5 дает более бледные, менее насыщенные цвета. V = 0,5 дает более темные цвета.
Наверное, легче понять цветовые модели, взглянув на некоторые реальные цвета и как они представлены. Вот интерактивная демонстрация, которая давайте сделаем это для цветовых моделей RGB и HSV:
Для демонстрации требуется JavaScript.
Так как JavaScript недоступен,
демонстрация не работает.
Часто к цветовым моделям добавляют четвертый компонент. Четвертый компонент называется альфа и цветовые модели, которые его используют, упоминается такими именами, как RGBA и HSLA.Альфа — это не цвет как таковой. Обычно используется для представления прозрачности. Цвет с максимальным значением альфа полностью непрозрачен; то есть это совсем не прозрачно. Цвет с альфа равным нулю полностью прозрачен и, следовательно, невидимый. Промежуточные значения дают полупрозрачные или частично прозрачные цвета. Прозрачность определяет, что происходит, когда вы рисуете одним цветом (цветом переднего плана) поверх другого цвета (цвет фона). Если цвет переднего плана полностью непрозрачен, он просто заменяет цвет фона.Если цвет переднего плана частично прозрачный, затем он смешивается с цветом фона. Предполагая, что альфа-компонент находится в диапазоне от От 0 до 1, цвет, который вы получите, можно вычислить как
новый_цвет = (альфа) * (цвет_переднего плана) + (1 - альфа) * (цвет_фона)
Это вычисление выполняется отдельно для компонентов красного, синего и зеленого цветов. Это называется альфа-смешением. Эффект похож на просмотр фона через цветное стекло; цвет стекла добавляет оттенок к цвету фона.Этот тип смешивания — не единственное возможное применение. альфа-компонента, но он самый распространенный.
Цветовая модель RGBA с 8 битами на компонент использует всего 32 бита для представления цвета. Это удобное число, поскольку целочисленные значения часто представляются 32-битными значениями. 32-битное целочисленное значение можно интерпретировать как 32-битный цвет RGBA. Как находятся цветовые компоненты расположение внутри 32-битного целого числа несколько произвольно. Самый распространенный макет — хранить альфа-компонент в восьми старших битах, за которым следуют красный, зеленый и синий.(Это должно вероятно, это можно назвать цветом ARGB.) Однако используются и другие раскладки.
Как сохранить пиксельную графику от vanmall на DeviantArt
Комментарии
Как сохранить пиксельную графику
В этом уроке я покажу вам, как сохранить пиксельную графику. Сохранение, безусловно, одна из самых важных вещей, и я видел, как кто-то портит свою работу, просто сохраняя много в неправильном формате. Итак, я надеюсь, что это руководство поможет вам всем.
Свяжитесь с
Если вы думаете, что не полностью поняли это руководство, вы всегда можете отправить мне сообщение, и я отвечу вам.
Полезная информация
Уровень:
Время:
Vanmall Pixel Art Tutorial Series Guide
Основы пиксельной графики
Как начать с пиксельной графики
Разница между изометрической и неизометрической пиксельной графикой Как сделать дизеринг в пиксельной графике
Как создать тени и источники света в пиксельной графике
Как добавить текстуры в пиксельную графику
Как сделать пиксель прозрачным
Как сохранить пиксельную графику
Как сделать круглые объекты в пиксельная графика
Как использовать референсы в пиксельной графике
Как легко заменить цвета (MS Paint)
Pixel Art Exterior
Как сделать викторианский дом?
Как сделать пиксельное дерево
Как сделать пиксельную крышу
Как сделать пиксельный дом 1
Как сделать пиксельный дом 2
Pixel Art Interior
Как сделать пиксельную кровать
Как сделать стул из пикселей
Как сделать стол из пикселей
Как сделать диван из пикселей
Как сделать плитку из пикселей
Как сделать столешницу из пикселей
Как сделать пиксельный холодильник
Как сделать пиксельный барный стул
Как сделать пиксельную печь
Как сделать пиксельный цветочный горшок
Как сделать пиксельную лампу
Как сделать пиксельную тумбочку
Как сделать пиксельный аквариум
Как сделать пиксельный камин
Как сделать пиксельный шкаф
Как сделать пиксельный ковер
Как сделать пиксельные шторы
Как сделать пиксельную кухню
Как сделать сделать пиксельную спальню
Как сделать пиксельную гостиную
Персонажи пиксельного искусства
Как сделать пиксель eminem 1
Как сделать пиксель eminem 2
Как создать маленький пиксельный персонаж / спрайт
Pixel Art Text
Как создать пиксельный текст
Объекты Pixel Art
Как сделать пиксельный драгоценный камень
Как сделать пиксельный цветок
Pixel Art Premium
Основы Pixel Art
на данный момент самая популярная вещь на моей странице.Идея состоит в том, чтобы принять предложения сообщества и попытаться сделать на основе этих вещей учебное пособие, попутно помогая другим извращенцам. Вы также можете найти мои уроки по пиксельной графике в таких группах, как #TutorialsForYou, #TutorialsClub и #PixelCommunity.
Вот список руководств из моей серии учебных пособий по пиксель-арт, уроки, которые подчеркнуты, и полужирным шрифтом уже являются готовыми учебниками, которые вы можете прочитать, другие учебники без подчеркивания — это учебные пособия, которые будут опубликованы на deviantART в ближайшем будущем.
Вы также можете предложить новую серию уроков по пиксельной графике, оставив комментарий на странице моего профиля, на этих уроках или отправив мне сообщение.
Наслаждайтесь!
пиксельных шрифтов — создание текстовых дизайнов с использованием пиксельных шрифтов
О пиксельных шрифтах
Пиксельные шрифты, также известные как экранные шрифты или растровые шрифты, представляют собой шрифты, состоящие из мелких пикселей. Пиксельные шрифты отображают текст в виде простых блоков, а не сложных кривых, как это делают большинство обычных шрифтов. Таким образом, очевидное преимущество пиксельных шрифтов перед обычными шрифтами состоит в том, что тексты, использующие пиксельные шрифты, могут выглядеть четкими и ясными даже в очень маленьких размерах.Пиксельные шрифты очень популярны в Интернете из-за их четкости и четкости, особенно на веб-сайтах, требующих четкости текста небольшого размера, таких как веб-сайты во флэш-памяти.
Поскольку пиксельные шрифты обычно разрабатываются таким образом, чтобы пиксель за пикселем соответствовать экрану компьютера, лучше всего он будет отображаться с заданным размером. Thyme Nu, созданный Мишелем Троем, представляет собой типичное семейство шрифтов пиксельного стиля. Семейство содержит шесть шрифтов, и они идеально подходят как для небольших разрешений экрана, так и для вывода на большие размеры.
Тимьян Ню от Мишеля Троя
Чтобы скачать бесплатные пиксельные шрифты, вы можете взглянуть на нашу коллекцию пиксельных шрифтов. Если вы ищете профессиональные пиксельные шрифты с хорошим кернингом, альтернативами и широкой поддержкой символов, обратите внимание на пиксельные шрифты на MyFonts.com. Если вы не хотите хлопот с загрузкой и установкой шрифтов, а просто хотите использовать пиксельные шрифты в Интернете, вам следует воспользоваться нашим инструментом для генерации текста ниже.
Создание текстовых изображений с использованием пиксельных шрифтов
Вы можете использовать следующий инструмент для создания текстовых изображений на основе выбранного вами цвета, текстовых эффектов и размеров с использованием пиксельных шрифтов за секунды.Затем вы можете сохранить изображение или использовать кнопку EMBED для получения ссылок на изображения. Если вы хотите дополнительно изменить изображение, например повернуть, согнуть или размыть, вы можете использовать наши инструменты для работы с изображениями.
ВЫБЕРИТЕ ШРИФТ
MinecraftherorgHEARM___ledfontLITEBRITloudnoiseblackopticbotREGISTERrepetballsontbazaroniCW_BITMPD3BeatmapismD3LitebitmapismDigitaldreamFatDigitaldreamFatSkewdomsq00TT8bitlim8bitlimo8bitlimr8blimroaesymattalphbetaArcadeArcadeClassicBleedingPixelsBlockstepped 3DBlocksteppedBlox2editundoedundotedunlineFAILEDhomespunHumanoidHumanoidStraightka1KarmaFutureKleinHeadline-BoldObliqueLotsOfDotzMary Джейн OlyffMinecrafter_3MinercraftoryMKPixelProjectNine PinNovemberoriga___origap__PICAHMR_PICAHMS_PICHABS_PICHXPL_Pixelic WarPixelsDream-DemiBoldPixelSplitter-BoldRosesareFF0000SF PixelateStitchWarrior demounlearn2unlearneVCR_OSD_MONO04B_03__04B_19__04B_30__3Dventure8-Bit Madness8-бит pusab8-BIT ЧУДО .