Создать фотографию экрана ноутбука крупным планом (с пикселями)

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

Пример:

или даже лучше, более трехмерное изображение, подобное этому .

возможно, можно было бы сделать наложение узора, чтобы имитировать пиксельную сетку, и установить для слоя «затемнение» или другой подходящий вариант смешивания. Вероятно, «достаточно близко», чтобы придать изюминку без необходимости симулировать субпиксели и т. д. Шаблон должен быть специфичен для определенного размера экрана, иначе сетка будет выглядеть забавно на фоне фактически отображаемых границ пикселей.
Интересно, что ваш пример не очень хорошо показывает субпиксельные эффекты в белых областях. Если я наведу лупу на белое пространство рядом с ним, настроенное на получение пикселей одинакового размера, я определенно увижу цветные субпиксели (на стандартном офисном Iiyama, выглядит как 95ppi)
Я увеличивал холст Photoshop и делал снимок экрана, а затем искажал перспективу, чтобы имитировать фотографию. Это будет отображать пиксели, как запросил OP. Конечно, это не будет отображать пиксели / артефакты ЖК-монитора, как имитирует длинная процедура ниже. Но эта процедура — чертовски много усилий для чего-то, что вы можете быстро сделать скриншотом, или для максимального реализма, снятого цифровой камерой за 1 минуту.
@ user8356 Я не уверен, что понимаю технику, которую вы описываете, можете ли вы объяснить ее подробнее? Создаст ли масштабирование в Photoshop и снимок экрана «сетку», подобную той, которую мы видим на ЖК-мониторе крупным планом?
Я знаю очень хороший шейдер ЭЛТ для Blender: mrmotarius.itch.io/mrmocrt Конечно, не так много ноутбуков с ЭЛТ...

Ответы (2)

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

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

Давайте начнем с создания шаблона субпикселя ЖК-дисплея. Самый маленький из них, который я могу себе представить, это следующий шаблон размером 9×9 пикселей:

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

Нарисуйте узор в документе размером 9×9 пикселей, выберите «Все» и используйте «Правка» > «Определить узор» , чтобы превратить его в узор:

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

© Мэдс Вольф

Поскольку наш шаблон повторяется каждые 9×9 пикселей, нам нужно увеличить его в 9 раз (900%), используя интерполяцию ближайшего соседа :

Нажмите на изображение, чтобы увидеть в полном размере.

Мы применяем шаблон, добавляя слой Pattern сверху с режимом наложения, установленным на Multiply :

Нажмите на изображение, чтобы увидеть в полном размере.

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

  • Примените фильтр «Размытие по Гауссу» с радиусом 1 пиксель , чтобы сгладить узор.

  • Примените фильтр Unsharp Mask с параметром Amount , установленным на 400% , Radius , установленным на 3 пикселя , и Threshold , установленным на 0 уровней , чтобы смешать субпиксели.

  • Примените фильтр «Размытие по Гауссу» с радиусом 0,5 пикселя , чтобы снова немного сгладить узор.

  • Примените фильтр «Размытие по Гауссу» с радиусом 4 пикселя и режимом наложения « Экран» , чтобы добавить немного свечения.

  • Добавьте корректирующий слой «Уровни» , чтобы осветлить изображение и добавить немного контраста.

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

Я бы использовал смарт-объект со смарт-фильтрами , чтобы сделать фильтры неразрушающими:

Нажмите на изображение, чтобы увидеть в полном размере.

Это можно рассматривать как «сырье» для дальнейших манипуляций. Например, добавьте немного перспективы с помощью Free Transform , примените фильтр Lens Blur , добавьте небольшое отражение, используйте фильтр Camera Raw, чтобы скорректировать изображение как фотографию, добавьте немного зернистости в процессе:

Нажмите на изображение, чтобы увидеть в полном размере.

Замечательный пост @Wolff! Вот что я получил с вашей техникой для этой реальной веб-страницы: i.stack.imgur.com/LwLEf.png
@Basj, здорово! Немного муара, которого, возможно, можно было бы избежать, подкорректировав размытие. Но опять же, реальная фотография может иметь такой же муар.
@Wolff, если цель состоит в том, чтобы имитировать реальную фотографию типичного экрана, Муар делает это. OTOH, ваш пример с пиксельным искусством (IMO) лучше без
@Basj это не фото??? ух ты
@htmlcoderexe Скриншот + техника, описанная в этом ответе :)
Вольф, ты легенда!!

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

введите описание изображения здесь

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

введите описание изображения здесь

Можно даже на камеру телефона что-то приблизительное снять…

введите описание изображения здесь

Штатив значительно помог бы обоим этим усилиям ;)

Конечно, да :) Но, может быть, есть инструменты Photoshop, чтобы воссоздать эту пиксельную "сетку" + эффекты размытия?
@Basj Очевидно, просто увеличьте изображение с ближайшими соседними каналами сдвига и т. Д.
Вам также придется смоделировать целую кучу маленьких кругов с более темными границами, меньше, чем каждый «пиксель», даже в чисто белых областях. Затем вам нужно будет угадать подходящую перспективу и добавить размытие объектива. Быстрее вытащить камеру.