Как сделать лицо пикселями

Создаём Пиксельный Портрет в программе Adobe Photoshop

Вы хотите придать своей фотографии или фотографии кого-то из ваших знакомых ретро вид?

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

Если вы ищите уже готовую графику в стиле ретро пикселей, то вы можете найти её на сайте Envato Market.

1. Подготавливаем Фотографию

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

Шаг 1

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

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

Шаг 2

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

Шаг 3

Вставьте фотографию. Расположите слой с фотографией ниже слоя с направляющими линиями.

Шаг 4

Шаг 5

Скопируйте выровненное лицо, а затем вклейте на новый слой. Отразите дубликат слоя по горизонтали, а затем уменьшите степень Непрозрачности (opacity) до 50% Создав две идентичные половинки лица, мы создали усреднённый вариант, теперь нет необходимости переживать относительно совмещения освещения на фотографиях для пиксельного портрета.

Шаг 6

Удалите слой с направляющими линиями, они нам больше не пригодятся.

Прошу прощения, если этот портрет не даст вам ночью заснуть.

2. Создаем Цветовую Палитру

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

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

Шаг 1

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

Шаг 2

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

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

Если вы не сильно привередливы, то вы можете округлить значения (кратные 5 или 10).

Шаг 3

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

Шаг 4

Далее, добавьте больше вариантов выбранных оттенков, подобрав их по яркости, 10% выше или ниже. Вы можете дойти до 100%, но вам вряд ли придётся снизиться до 0%.

Шаг 5

И, наконец, подберите ещё несколько вариантов с различными цветовыми тонами, примерно на 10˚ холоднее (краснее) и на 10˚ теплее (желтее).

Это практически вся цветовая палитра, которая нам понадобится.

3. Закрашиваем Фото

Пришло время для настоящей работы!

Шаг 1

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

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

Начинаем рисовать, используя инструмент Карандаш (Pencil Tool (B).

Чтобы было удобнее работать, вы можете увеличить изображение на 600-800%, а рядом открыть отдельное окно с той же самой картинкой в 100% масштабе, таким образом, вы сможете сравнивать процесс закрашивания.

Шаг 2

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

Шаг 3

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

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

Шаг 4

Продолжайте заливать цветом!

Шаг 5

Не уверены, какой цвет использовать поверх того или иного участка фотографии? Отберите цветовой оттенок с помощью инструмента Пипетка (Eye Dropper), а затем начните хаотично рисовать поверх палитры цветов. Какой цвет больше всего сливается с нарисованной кривой? Тот цвет и выбирайте.

Подсказка: вы можете задавать новые цветовые оттенки в процессе работы с карандашом, для этого удерживая клавишу (Alt), щёлкните по цветовым оттенкам на холсте..

Шаг 6

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

Шаг 7

Ускоряем работу с закрашиванием.

Шаг 8

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

Шаг 9

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

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

Шаг 10

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

Шаг 11

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

Шаг 12

Продолжаем заливать участки лица.

Шаг 13

Шаг 14

Продолжайте работать над улучшением этих участков.

Завершив заливку носа, отразите завершённые участки лица на противоположную сторону.

Шаг 15

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

Продолжаем работать над щеками.

Шаг 16

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

Шаг 17

Заканчиваем подбородок (или растительность на лице).

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

Шаг 18

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

Шаг 19

Промежуточный этап. Проверяем прогресс после отражения.

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

Шаг 20

Ещё раз отражаем заливку и мы почти завершили работу с цветом кожи. Переходим к контуру волос.

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

Шаг 21

Мы подошли к волосам на голове и я могу слегка улучшить форму причёски, чем на оригинале, почему бы и нет?

Шаг 22

Сейчас я улучшу линию волос на отдельном слое.

А затем объединю её с лицом.

Шаг 23

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

Шаг 24

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

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

Шаг 25

Завершив работу с шеей, нет больше необходимости в цветовой палитре.

Шаг 26

Закрасьте рубашку, а также добавьте детали.

4. Проводим Ретушь и Завершаем Урок

Работа по заливке портрета завершена, но всё ещё осталось доработать некоторые детали.

Шаг 1

Нам больше не понадобится оригинальная фотография.

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

Шаг 2

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

Шаг 3

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

Шаг 4

Увеличиваем масштаб рисунка примерно до 500% (до значения кратное 100% и с выключенным сглаживанием). Теперь можете сохранить и показывать её!

Мы завершили урок! Отличная работа!

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

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

Источник

Цифровой пиксельный эффект с фотошопом

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

Вот исходное изображение, с которого я начну:

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

И просто как пример того, как легко мы можем создать то, что кажется совершенно другим эффектом, просто изменив режим наложения слоя, мы закончим с этим:

Шаг 1: дублируем фоновый слой

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

Я собираюсь продублировать этот слой с помощью сочетания клавиш Ctrl + J (Win) / Command + J (Mac), и теперь я вижу в палитре слоев, что у меня есть два слоя с копией фонового слоя над оригинал. Фотошоп назвал это «Слой 1»:

Шаг 2: Pixelate дублирующий слой

Нажмите OK, чтобы выйти из диалогового окна. Вот мое изображение после применения фильтра Мозаика:

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

Шаг 3: добавь маску слоя

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

Это добавляет маску слоя к «Слою 1», и если мы посмотрим на палитру слоев, то увидим, что она также добавляет миниатюру маски слоя справа от миниатюры содержимого слоя:

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

Шаг 4: выберите инструмент градиента

Шаг 5: Сброс переднего плана и цвета фона, если это необходимо

Мы хотим, чтобы черный цвет был нашим цветом переднего плана, а белый — цветом фона. Обычно это цвета переднего плана и фона в Photoshop, за исключением случаев, когда у нас выбрана маска слоя, что мы и делаем в настоящее время. Всякий раз, когда мы выбираем маску слоя, цвета по умолчанию меняются местами, причем белый цвет становится основным цветом по умолчанию, а черный — цвет фона по умолчанию. Чтобы быстро установить цвета переднего плана и фона на черный и белый соответственно (помня, что у нас выбрана маска слоя), нажмите D на клавиатуре, чтобы вернуть им значения по умолчанию, а затем нажмите X, чтобы поменять их местами. В палитре «Инструменты» вы увидите, что образец цвета «Передний план» теперь отображается черным, а образец цвета фона — белым:

Шаг 6: выберите градиент «передний план к фону»

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

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

Шаг 7: перетащите градиент от черного к белому на маске слоя

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

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

Шаг 8: заполните маску слоя белым

Давайте посмотрим на другой вариант нашего эффекта «цифрового пикселя». Во-первых, нам нужно удалить градиент, который мы добавили к маске слоя минуту назад. Мы могли бы просто нажать Ctrl + Z (Победа) / Command + Z (Mac), чтобы отменить его, но давайте вместо этого заново закрасим маску слоя белым. Чтобы сделать это, с выбранной миниатюрой маски слоя в палитре «Слои» и белым в качестве текущего цвета фона, используйте сочетание клавиш Ctrl + Backspace (Win) / Command + Delete (Mac), чтобы залить маску слоя цветом фона (белым ). Миниатюра маски слоя снова будет отображаться сплошным белым цветом, а изображение снова будет полностью пикселированным:

Шаг 9: выбери инструмент Brush Tool

Выберите Brush Tool из палитры Tools или нажмите B для сочетания клавиш:

Шаг 10: нарисуйте черным, чтобы показать части изображения

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

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

Шаг 11: понизь непрозрачность пикселированного слоя

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

Вот мое изображение после понижения непрозрачности слоя с пикселями, создавая наш второй вариант эффекта:

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

Чтобы создать еще больше вариаций эффекта, поэкспериментируйте с различными режимами наложения для пиксельного слоя, перейдя к параметрам режима наложения в верхнем левом углу палитры «Слои» и выбрав другие из списка. Во-первых, я собираюсь установить непрозрачность моего пиксельного слоя на 100%. Затем я изменю режим смешивания слоя с «Normal» на Darken :

Вот эффект, который я получаю, когда слой с пикселями установлен на «Darken»:

Вот эффект, который я получаю в режиме наложения «Осветлить»:

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

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

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

Посетите наш раздел « Фотоэффекты », чтобы узнать больше об эффектах Photoshop!

Источник