Старый добрый пиксель-арт! — уроки фотошоп

Уроки пиксель-арта

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

Клиника, короче! Кто бы мне объяснил, что заставило меня сесть и начать рисовать смайлы, которых и без моей пачкотни в сети такое количество…

Видимо, это какой-то этап в развитии человеческой особи, который Дарвин в своей теории почему-то не учел! Ведь не может же быть, что…

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

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

Частичное или полное «переосмысление» этого урока на других ресурсах только с разрешения господина Fool'а! Далее авторский текст…

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

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

Поэтому те, кто привык читать Шекспира в подлиннике, могут ознакомиться с оригинальной версией туториалов на господина Zoggles'а.

   се ниже перечисленные уроки не были любезно предоставлены как предыдущий, но зато добро на публикацию ссылок получено! Не поверите, запил даже! Но авторское право — есть авторское право, а поэтому все ссылки уведут вас на другой сайт, может и вернетесь… Возвращайтесь, а?! Ну, пожалуйста, а?! Я в ларек сгоняю! Чего изволите? Да не очень-то и хотелось!

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

А вот низкого поклона с расшибанием лба об пол (как я Fool'у кланялся), его не будет, конечно! Потому, что как не крути, а зажал Gas уроки, зажал! Сможет ли он дальше жить беззаботно без поклона моего? Да, думаю, легко!

   у а самостоятельно подобные уроки писать не стал, так как глупо изобретать виласапет, когда уже кто-то это сделал до тебя, к тому же плодить клонов богопротивно, а самая главная причина — лень, твою мать!

Источник: http://error70.narod.ru/tutor.html

История pixel art. Прошлое и будущее

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

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

Впервые в 1982 году термин pixel art был использован в корпорации Xerox Адель Голдбертом и Робертом Флегалом, а вот сама графика использовалась за 10 лет до этого все в той же фирме Xerox. Также в какой-то степени можно считать pixel art’ом и занятие, которым занимались наши бабушки-прабабушки – вышивание крестиком, неправда ли, похоже — один крестик – один пиксель =)

Большинство из нас впервые увидели пиксельную графику на экранах телевизоров, играя в супермарио, танчики и другие игры на  телевизионных приставках Super Nintendo, Sega’s Mega Drive. На тот момент это был единственный доступный способ отображения компьютерной графики.

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

Появлялись статьи известных людей о том, что смерть pixel art неизбежна и не за горами.

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

Целевая аудитория в большинстве своем повзрослевшие мальчики и девочки, которые выросли на все тех же Супер братья Марио – сантехниках, спасающих принцессу, Черепашки-ниндзя (по мотивам американских мультфильмов), Робокоп, Контра — игры Super Nintendo, одни названия которых у представителей того поколения навевают целую бурю эмоций. Поэтому пиксельная графика у этих людей и вызывает волну ностальгии, а если есть спрос – значит, есть и предложение.

На первый взгляд ничего сложного в  пиксельной графике нет – относительно простые рисунки на самом деле требуют кропотливой работы, ведь pixel art рисунок нарисован от начала и до конца с использованием только ручного редактирования – т.е.

каждый пиксель нарисован вручную при помощи “карандаша”.

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

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

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

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

В данный момент pixel art в большинстве своем используется не как необходимость (как было раньше, когда только появилось это понятие) а как своеобразная модная фишка и направление в искусстве.

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

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

Читайте также:  Живая фотография - уроки фотошоп

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

От себя по традиции выражаю благодарность за информативную статью.

В свое время я застал Pixel Art именно в различных приставочных и компьютерных играх — по сравнению с нынешними играми, это конечно, трэш был:) Но было в этом какой-то шарм и своеобразный стиль, поэтому я тоже склоняюсь к мысли, что в будущем pixel art сможет стать своего рода концептуальным направлением в искусстве и графическом дизайне. Кстати, есть у меня для всех любителей пиксель арта подарок — как-то видел в YouTube очень интересное видео в данном стиле, впечатления просто потрясающие:

По моему здорово!

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

Источник: http://design-mania.ru/web-design/articles/istoriya-pixelart/

Лучшие инструменты и трюки от гуру пиксель арта

[1] Если перевести на русский, то получится Пупырчатый Стэйк))  

Обаяние Пиксель Арта

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

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

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

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

Лучшие инструменты для пиксель художника

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

Это особенно удобно для определения главных цветовых палитр, и он также имеет несколько удобных инструментов для быстрого редактирования и фильтрации вашего пиксель арта, доводя результаты до невообразимых высот.Graphics Gale особенно хорош в анимации по временной линии (time line).

Его основной набор инструментов очень похож на Photoshop, когда дело доходит до пиксель арта, в частности Gale имеет поддержку слоёв, но кое в чём другом он сильно превосходит Photoshop, это когда дело доходит до покадровой анимации, которая является одной из основ пиксель арта.

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

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

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

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

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

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

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

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

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

Хитрости и трюки пиксель арта.

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

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

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

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

Читайте также:  3 способа интересно обработать фото - уроки фотошоп

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

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

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

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

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

В результате получилась игра которая выглядит очень классически, часто сравниваемая с классикой от Lucas Arts нашими сторонниками, но с настроением и атмосферой которые, трудно было достичь используя только традиционные для пиксель арта техники. Такой стиль не подходит для каждой игры, но попал в яблочко для The Darkside Detective.

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

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

Пиксель арт и геймплей

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

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

Пол Конвэй, Пиксель Художник

Оригинал статьи.

Источник: https://render.ru/ru/_/post/11008

Create 8-Bit Pixel Art with Photoshop (Part 1 of 3)

Figure 1: New 50×50 pixel file in Photoshop

by Alexandria O’Brien

In this tutorial I’ll go through how to create a few different game sprites in Photoshop CC/CS6 using that retro, 8-bit pixel look. The game items and characters that I illustrate will be based on my favorite game genre: fantasy, adventure.

Note: If you need to see a larger version of any of the images, just right-click and view the image in a different tab.

Setting Up Photoshop To Make Pixel Art

Source: Pixel Art – Photoshop Tutorial ( http://youtu.be/hFZBUWHVSrM)
1. Make a new square document anywhere from 20 to 100 pixels (depending on how large you want your sprite to be). I’m going to work with a 50 px canvas.

  • Width: 50 pixels
  • Height: 50 pixels
  • Resolution: 72 Pixels/Inch
  • Color Mode: RGB (8-bit)
  • Background Contents: Transparent
Figure 1: New 50×50 pixel file in Photoshop

Figure 2: New 50×50 blank canvas in Photoshop

2. Get your tools ready: select the pencil tool (under the brush tool dropdown menu) and set the size of the brush to 1 pixel. Select the eraser tool and change that to be 1 pixel in size, and the mode to be “pencil.”

Figure 3: The Pencil Tool is under the Brush Tool drop-down menu Figure 4: Change the pencil tool size to one pixel

Figure 5: The eraser tool set to 1 pixel in “pencil” mode.

3. To help show where the pixels are on the canvas, we’ll turn on the grid view. Adjust the grid view setting under Edit>Preferences>Guides, Grid & Slices. Change the grid to show every 1 pixel (with 1 subdivision). Click OK and then turn the grid on so you can see it. Go to View>Show>Grid.

Figure 6: Adjust the grid preferences Figure 7: Change the grid to show every 1 pixel Figure 8: Turn on the grid

4. One more change–go back under Preferences>General and change “Image Interpolation” to Nearest Neighbor (preserve hard edges).

Figure 9: Change Image Interpolation to Nearest Neighbor

Now you’re all set to start making pixel art!

Make a Character

Every good fantasy adventure game has a hero. We’re going to start by making a single character sprite.

1. We’ll start with the 50 by 50 pixel file we set up. Since we made the file with a transparent background, I’m going to add a Solid Color background layer so we can see the grid without seeing Photoshop’s transparency pattern too.

Источник: https://blog.learntoprogram.tv/pixel-art-with-photoshop-part-1/

Рисунок в стиле пиксел-арт

Создайте документ с белым фоном и размером  640×480. Для каждого шага урока используйте отдельный слой. Готовы? Давайте начнем.

Возьмите стандартную круглую кистьи нарисуйте черную схему дерева. Это дерево имеет несколько раскидистых ветвей на левой стороне.

Поставьте жесткость кисти 0, вот палитра цветов, именно такую цветовую схему использую для прорисовки ствола дерева:

Читайте также:  Ключевые слова для сайта. это нужно знать! - уроки фотошоп

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

Затем, возьмите самый темный синий цвет (больше фиолетового), и сделайте то же самое теневой стороне дерева.

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

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

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

Теперь, используйте инструмент Smudge  tool (Размазывание /Палец)

Смешайте все эти линии, используя размер кисти приблизительно 15-20 для ствола с силой 20 %. Для меньших ветвей, уменьшите размер кисти. Работайте аккуратно, не торопясь.

Удостоверьтесь, что инструмент Smudge  tool установлен в Normal (Нормальный) режим. Размазывайте цвета медленно, чтобы получить смесь, которая выглядела бы так:

Инструмент размазывания  имеет тенденцию делать края слишком смазанными.
Поэтому, выберите инструмент Еraser tool(Ластик) и немного обострите края дерева.

Текстура ствола.
Возьмите инструмент Smudge  tool(Размазывание /Палец) снова, уменьшите размер кисти до 3, нажим, интенсивность до 90-94 %.

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

Зажимая и удерживая левую клавишу мышки, ведите темную линию вверх.

Вы получите хорошую темную линию как на этой картине.

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

Для получения  более легких цветов, меняйте режим наложения кисти на Lighten (Замена светлым) или Нормальный способ.

Вы можете сделать несколько акцентов на стволе дерева при помощи инструмента Dodge tool (Осветлитель):

Выберите подходящий размер кисти с настройками экспозиции в 20 %, а диапазон установил Highlights (Света). Теперь слегка пройдитесь инструментом по краям дерева, не затрагивая середину.

Создайте новый слой. Убедитесь, что он находится в самом верху палитры слоёв.

Каково дерево без листьев? Для листвы автор использовал кисть #66, с диаметром 90 пикселей:

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

Вот цветовая схема для рисования листьев.

Используйте ту же самую кисть, установите темно – зеленый цвет. Попытайтесь сделать маленькие «кучкообразные» участки для более реалистичного вида. Рисуя темно–зеленым, уменьшайте нажим кисти.
Примечание: автор использовал легкие мазки  темно-коричневого цвета к крошечным ветвям.

Теперь используйте светло-зеленый цвет. Распределите светло-зеленый цвет более экономно, чем более темные оттенки. Примените светло-зеленый цвет к листве на вершине дерева. Нижняя часть листвы  должна быть более скрыта от света.

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

Примените к слою с листвой  Filters — Pixilate – Mosiac (Фильтр — Оформление – Мозаика), и использую размер ячейки — 2. Автор фильтр оформления и к слою листвы и к слою ствола дерева.

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

У каждой секции листвы есть свой собственный слой. Чтобы изменить цвет листьев, примените Image — Adjustments — Color Balance (Изображение – Коррекция – Цветовой баланс) или нажмите CTRL+B. Поиграйте с регуляторами средних тонов.

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

Рисуйте тем же способом, каким рисовались деревья.

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

Используя  Smudge  tool(Размазывание /Палец), создайте текстуру на камне. Автор использовал поочередно режим Darken (Замена темным) и Lighten (Замена светлым) для кисти.

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

Обострите немного края камня и примените фильтр Filters — Pixilate – Mosiac (Фильтр — Оформление – Мозаика).

Нарисуйте еще несколько камней вокруг. Примените такую цветовую палитру:

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

Теперь приступаем к рисованию травы и веселых, пушистых кустарников!

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

Добавьте темно-зеленый цвет у основания камней.

Добавьте светло-зеленый цвет у вершины камней.

Filters — Pixilate – Mosiac (Фильтр — Оформление – Мозаика),<\p>

Нарисуйте кустарники различных цветов, чтобы заполнить пространство.

(Примечание переводчика: Здесь видно, что автор создал новый слой и заполнил его наполовину черным и переложил слой на задний план).

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

Инструмента Smudge  tool(Размазывание /Палец) с размером кисти 30, интенсивность 20 % и в Нормальном режиме. Наносите горизонтальные и вертикальные мазки. Вертикальные мазки применяйте для создания холмов.

Теперь воспользуйтесь кистью травы (#112). Диаметр приблизительно равен 16 пикселям. Непрозрачность приблизительно к 30-35 %. Распределите траву на всем пространстве зеленых частей. Рисуя траву на переднем плане, уменьшите диаметр кисти, приблизительно 20-22 пикс. А возле горизонта поставьте диаметр кисти  приблизительно 10-12px.

Добавим немного теней около каменных глыб и деревьев при помощи инструмента Burn tool

Источник: http://kandaliza2008.ucoz.ru/publ/risunok_v_stile_piksel_art/2-1-0-544

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