Светодиодный экран фотошоп: Эффект текста на светодиодном экране в Adobe Photoshop

Создайте свой собственный эффект экрана LED / TV на Photoshop !!! Создайте свой собственный эффект экрана LED / TV на Photoshop !!!

Если вы были в мире фотошопов несколько лет (как и я), вы будете знать, что эффект телевизионного экрана существует уже почти 10 лет. Я узнал об этом впервые в конце 90-х, когда я был тощим маленьким ребенком, играющим в Photoshop 5.0 !!! В этом посте я покажу вам немного другую технику , эмулирующую светодиодный экран (один из тех гигантских экранов с довольно большими светодиодными лампочками, которые вы видите на городских зданиях, концертах, событиях и т. Д.).), а также я расскажу о том, как эмулировать эффект обычного телевизионного экрана (хотя обычные телевизоры с ЭЛТ теперь исчезают …).

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

1. Прежде всего, я напомню (или обучу вас), что этот тип эффекта основан на использовании шаблонов и заполнении слоя шаблонами. Итак, во-первых, давайте создадим шаблон. Сначала я начну с эффекта светодиодного экрана. В зависимости от того, какого эффекта вы хотите добиться, и какой у вас вкус к этой работе, установите ширину / высоту нового документа. Я выберу 4X4, итого 16 пикселей. Но вы можете пойти как 2X2, если хотите, или пойти больше. Я предполагаю, что эта работа предназначена для Интернета, поэтому я придерживаюсь режима RGB. Если вы планируете распечатать это, вы должны использовать Illustrator. Помните, что у классического светодиодного экрана есть квадратные ячейки, а не прямоугольники, поэтому лучше сохранять ширину / высоту одинаковыми, если только у вас нет совершенно другой идеи.
2. Давайте начнем рисовать. Чтобы сделать этот экран универсальным для любого цветового режима, я выберу только оттенки серого. Но если вы знаете, какой цветовой тон вы будете использовать поверх него, вы можете использовать этот конкретный цвет. Во-первых, увеличьте как можно больше, так как мы работаем с ячейкой 4X4. Затем выберите инструмент «Карандаш» и установите кисть на 1 пиксель. Просто чтобы было проще визуализировать, сейчас я все покраслю в темно-серый. Помните, что этот шаблон состоит из более темного окружения и затем более светлой центральной области, которая показывает подсветку каждой лампочки. Время установить цвет подсветки, и я выбрал # d1d1d1. Это будет цвет более светлой части вещей. Я выбрал ячейку рядом с верхним правым, но не в углу (в данном случае, ячейка № 7) в качестве центра подсветки. Затем нам нужно немного растянуть цвета, чтобы они не были слишком неровными. Вы можете использовать это как шаблон сразу же, если ваше произведение искусства ему подходит, но я выберу его немного сгладить. На атрибутах инструмента Карандаш вверху установите непрозрачность инструмента Карандаш до 50%. (обратите внимание, что он должен был быть на уровне 100% для предыдущих штрихов!) Далее, давайте аккуратно закрасим некоторые ячейки вокруг выделенных краев с помощью карандаша с непрозрачностью 50%.Я выбрал только 4 ячейки или около того, которые непосредственно касались выделенной ячейки, и оставил диагональные, как вы можете видеть, нетронутыми. На этом этапе, даже если вы используете цвет вместо серого, вы должны увидеть более светлый оттенок этого цвета. В этом преимущество использования инструмента «Карандаш» только с одним цветом и его каскадирование — вы сохраняете постоянный цвет, а для тех, кто еще меньше понимает, какие цвета темнее / светлее, от вас уходит работа по угадыванию !!! Теперь давайте продолжим рисовать.Установите свой карандаш так, чтобы его непрозрачность составляла 30%, и продолжайте работу с другими ячейками. А потом 15%. И затем при 5%, вы можете подправить некоторые другие клетки, чтобы немного осветлить их, чтобы придать им естественный вид. И вот мой готовый образец продукта !!!
   Обратите внимание, что большинство рисунков требуют, чтобы вы совпали с ячейками противоположного конца, чтобы, когда он связан с рисунком, они совпали полностью без зазубрин. Но не слишком переживайте по этому поводу — пока изменения не кардинальные (что они не являются), все должно быть хорошо, потому что шаблоны очень маленькие, и это должно создать эффект светодиодных лампочек над, с долинами и пиками окраски.
3. На этом шаге мы сохраним это как шаблон, чтобы мы могли использовать его в фактическом документе, с которым вы хотите его использовать. Перейдите в «Правка»> «Определить шаблон» и введите имя для этого шаблона, которое будет описательным. Теперь шаблон сохраняется для универсального использования, и вы можете перейти к следующему шагу, который является началом вашей фактической иллюстрации.
4. Баннер моего нового веб-сайта должен иметь размер 768 X 125, поэтому давайте начнем документ. Экран должен идти на всю страницу, поэтому мне понадобится слой, который покрывает всю иллюстрацию.Самый простой способ сделать это с самого начала — щелкнуть правой кнопкой мыши на «фоновом» слое и нажать «Дублировать». Давайте назовем этот слой «LED Screen». После того, как слой настроен, давайте щелкнем правой кнопкой мыши по этому слою и перейдем к «Blending Options», и нажмите «Pattern Overlay». Убедитесь, что вы нажали на заголовок «Наложение рисунка», а не только на флажок, чтобы увидеть параметры наложения рисунка. По умолчанию вы получите первый шаблон в списке шаблонов. Последним шаблоном в списке шаблонов должен быть шаблон, который мы только что создали на предыдущих шагах.Выберите это. (Другой способ создания слоя шаблона — перейти в меню «Слои»> «Новый слой заливки»> «Шаблон» в верхнем меню, но я просто предпочитаю этот способ, поскольку у меня более простой доступ к параметрам шаблона в режиме наложения, поэтому я легко могу изменить масштаб / непрозрачность позже) Давайте установим непрозрачность шаблона на 50%, или где-то там. Это наложенный рисунок поверх других иллюстраций для создания этого эффекта, поэтому он не должен быть таким сильным. Вы можете сделать это ИЛИ вы можете установить прозрачность всего слоя ниже позже.Это зависит от того, как вы собираетесь перекрывать слои позже. Обратите внимание, что в моем дизайне, поскольку я использовал нейтральные цвета в оттенках серого для своего рисунка, я могу изменить цветовой тон этого слоя, щелкнув «Color Overlay» и установив цвет наложения. Вы хотите, чтобы и рисунок, и цвет отображались, поэтому установите меньшую непрозрачность этого цветового наложения — у вас есть возможность делать все что угодно. В моем случае я выберу темно-бордовый цвет в качестве наложенного тона и добавлю 50%.
5. Как только это будет установлено, вы увидите следующее изображение: У нас есть наложение цвета И НАЛОГ на шаблон.Теперь этот шаблон все еще выглядит довольно скучно для меня. Давайте добавим в него соевые вкусности, чтобы оживить обстановку.
6. Первое, что я хочу сделать, — это наложить на него градиент, чтобы придать ему оттенок и объем. Давайте сначала создадим новый слой, нажав кнопку «Новый слой» (которая выглядит как лист бумаги, сложенный в углу) в окне «Слои». Это создаст новый слой, на котором ничего нет. Поместите этот слой поверх нашего слоя с рисунком. Ради отличия назовите его «градиентный слой».Как только этот слой появится, давайте выберем инструмент Градиент. В настройках инструмента «Градиент» я выберу опцию, позволяющую перейти от цвета к прозрачности. Это выглядит так: После того, как это выбрано, давайте поместим это на новый слой, который мы только что создали. Поместите его от краев к центру, чтобы получить эффект черного тумана на окраинах рамы. Вот как выглядит мой: После того, как это установлено, установите непрозрачность слоя градиентного слоя, чтобы он был ниже, чтобы вы все еще могли видеть рисунок время от времени.
7. Теперь я хочу добавить туда фоновое изображение, которое гармонирует с узорами. Давайте выберем фотографию, которая достаточно велика, чтобы соответствовать всей длине нашего кадра. Я открыл новую фотографию, обрезал ее до нужных частей, а затем установил ширину 768. Давайте выделим всю фотографию (Ctrl + A) и затем скопируем ее (Ctrl + C). Перейдите в наш файл баннера на фотошоп. Вставьте его (Ctrl + V). Фотография будет автоматически добавлена ​​в качестве нового слоя. Поместите новый слой фотографий между «слоем градиента» и «Led Background», а затем установите непрозрачность слоя на более низкую, чтобы рисунок мог просвечивать.
8. Теперь, когда мы зашли так далеко, пришло время внести небольшие изменения. Отрегулируйте непрозрачность «Наложение цвета» и «Наложение рисунка» слоя «Светодиодный фон». Также играйте с непрозрачностью «Градиентный слой», а также с недавно созданным фото-слоем. Каждый проект имеет разные цветовые тона и разные фотографии, а что нет, поэтому в конце концов все сводится к точной настройке для достижения наилучшего оптического эффекта. Есть мой конечный продукт после корректировок.

Теперь, к эффекту экрана телевизора: я обманул вас, я не покажу вам, как это сделать.Но так как вы можете создать эффект светодиодного экрана сейчас, эффект экрана телевизора должен быть простым куском. Помните, что экран телевизора состоит из двух чередующихся строк. Итак, все, что вам нужно, это начальный шаблон шириной 1 пиксель и высотой 2 пикселя, верхняя ячейка которого белая, а нижняя ячейка черная. И тогда остальные шаги одинаковы. Если вы хотите увидеть пример эффекта телевизионного экрана, перейдите на этот веб-сайт, который я сейчас создаю.

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

Поделись историей, выбери платформу!

Имитация экрана компьютера в Adobe Photoshop

Узнайте, как создать собственный шаблон RGB и повторно используемый шаблон смарт-объектов для имитации эффекта экрана компьютера в Adobe Photoshop.

Шаг 1
Откройте Photoshop и выберите «Файл»> «Создать». В новом окне установите имя «Узор», ширину — 3 пикселя, высоту — 3 пикселя, разрешение — 72 пикселя / дюйм и обязательно установите цветовой режим RGB. Нажмите ОК.

Шаг 2
Нажмите «D» на клавиатуре, чтобы сбросить цвета переднего плана и фона.Увеличьте изображение как можно больше (максимум 3200%). Выберите Rectangle Tool (U) и нарисуйте квадрат 1x1px в верхнем левом углу.

Шаг 3
Дважды щелкните миниатюру слоя (откроется окно выбора цвета), установите цвет # 8484FE и нажмите OK.

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

Шаг 4
Как только вы сделали все девять квадратов, перейдите в Layer> Flatten Image.

Шаг 5
Теперь мы преобразуем это изображение в шаблон, который мы будем использовать на нашем экране. Для этого перейдите в Select> All (это выберет весь контент на нашем холсте). Теперь перейдите в Edit> Define Pattern. Установите имя шаблона «RGB texture» и нажмите «ОК». Теперь у нас есть шаблон, который можно использовать в Photoshop, и теперь мы можем работать с нашим основным изображением.

Шаг 6
Закройте окно Pattern и перейдите в File> New.Установите название документа на «Экран»; a Ширина 1200 пикселей, Высота 900 пикселей, Разрешение до 72 точек на дюйм, Цветовой режим до RGB и нажмите кнопку ОК.

Шаг 7
Выберите инструмент Rectangle Tool (U) и нарисуйте прямоугольник такой же ширины и высоты холста.

Перейдите в «Слой»> «Стиль слоя»> «Наложение рисунка». В окне «Стиль слоя» нажмите на миниатюру рисунка и в раскрывающемся списке миниатюр выберите «RGB-текстуру». Нажмите ОК.

Перейдите в меню «Слой»> «Умные объекты»> «Преобразовать в смарт-объект». Мы преобразуем этот слой в смарт-объект, чтобы потом преобразовать его, сохранив только что примененную текстуру. Теперь перейдите в Layer> Layer Style> Inner Shadow и примените следующие настройки:

Все еще в окне Layer Style, нажмите на Blending Options и установите непрозрачность заполнения на 40%. Нажмите ОК.

Чтобы работать более комфортно, давайте переименуем слой. Перейдите в «Слой»> «Переименовать слой» и установите имя «RGB текстуры.«

Шаг 8
Теперь мы создадим наш главный смарт-объект, который будет содержать наш снимок экрана. Нажмите на фоновый слой и выберите инструмент« Прямоугольник »(U) (мы делаем это, чтобы создать новый слой под слоем «Текстура RGB»). Нарисуйте прямоугольник с той же шириной и высотой холста.

Перейдите в «Слой»> «Переименовать слой» и установите имя на «Синий». Объект, давайте создадим восемь направляющих, которые помогут нам с искажением.Перейдите в View> New Guide и установите для первого направляющего значение Horizontal и -60px, как показано. Нажмите ОК.

Повторите этот процесс еще семь раз и установите направляющие на:
Горизонтальные: -13px
Горизонтальные: 872px
Горизонтальные: 1210px
Вертикальные: -184px
Вертикальные: 0px
Вертикальные: 1206px
Вертикальные: 1360px

000000 Перейдите в Слой> Смарт-объекты> Преобразовать в смарт-объект. Перейдите в Edit> Transform> Distort и сделайте искажение, щелкнув по каждому углу выделения и перетащив их на пересечения направляющих, которые мы только что создали, чтобы сделать то же самое искажение, как показано.Как только вы закончите, нажмите клавишу Enter (Return) на клавиатуре.

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

Чтобы вы лучше видели эффекты, которые мы будем применять с этого момента, давайте поместим наш снимок экрана в смарт-объект. Двойной щелчок по миниатюре слоя «Синий»; это откроет новый холст, где мы будем размещать наш снимок экрана, но перед его размещением нам нужно создать 4 направляющих в этом документе, чтобы помочь нам узнать безопасные пределы показанного изображения, поскольку наш объект уже искажен.Итак, перейдите в View> New Guide и установите четыре направляющих на:
по горизонтали: 35px
по горизонтали: 842px
по вертикали: 110px
по вертикали: 1176px

Откройте снимок экрана. Выберите «Выделение»> «Все». Перейдите в Edit> Copy и закройте документ захвата экрана. Вернитесь к недавно открытому холсту смарт-объекта и перейдите в «Правка»> «Вставить».

Как вы можете видеть, снимок экрана был помещен в холст смарт-объекта. Обратите внимание на направляющие; прямоугольник, который они образуют, является «безопасной областью» вашего снимка экрана; это поможет вам позже (если вы решите изменить захват), чтобы разместить изображение и установить точную часть захвата, которую вы хотите увидеть в окончательном документе.Выберите «Файл»> «Сохранить» и закройте свой холст смарт-объекта. Как видите, ваш документ «Экран» был обновлен с использованием только что размещенного нами снимка экрана.

На панели «Слои» нажмите стрелку рядом с режимами наложения и в раскрывающемся списке выберите «Исключение».

Перейдите в Filter> Blur> Gaussian Blur и установите радиус 1,5 пикселя. Нажмите ОК.

Шаг 9
Поскольку нам понадобится еще три копии нашего смарт-объекта, давайте дублируем уже имеющуюся у нас копию.С выделенным синим слоем перейдите в Layer> Duplicate Layer. В новом окне установите имя «Зеленый» и нажмите «ОК».

Снова перейдите в Layer> Duplicate Layer и в новом окне установите имя «Red» и нажмите OK.

Последний раз. Перейдите в Layer> Duplicate Layer и в новом окне установите имя «Master» и нажмите OK.

Шаг 10
Убедитесь, что выбран «мастер» слой и выберите «Слой»> «Стиль слоя»> «Параметры наложения».Установите режим наложения на Overlay и уменьшите непрозрачность заполнения до 40%. Проверьте эффект Inner Shadow, примените следующие настройки и нажмите OK.

На панели слоев щелкните правой кнопкой мыши (Control-click) на значке смарт-фильтра рядом с именем слоя и выберите «Очистить смарт-фильтры».

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

Шаг 12
Теперь мы будем работать с уровнями каждого слоя для достижения эффекта RGB.Выберите «Синий» слой, нажав на название слоя на панели слоев. Перейдите в Слой> Новый корректирующий слой> Уровни. Установите имя «Уровни синего» и обязательно установите флажок «Использовать предыдущий слой для создания обтравочной маски». Нажмите ОК. Примечание: появится окно Свойства уровней.

В окне «Свойства уровней» щелкните значок стрелки рядом с названием канала RGB и в раскрывающемся списке выберите красный канал.

В Output Levels установите уровень подсветки (тот, что справа) на 0.

Теперь выберите из выпадающего списка Зеленый канал. Опять же, установите уровень подсветки (тот, что справа) на 0.

Нажмите на название зеленого слоя, чтобы выбрать его, и перейдите в «Слой»> «Новый корректирующий слой»> «Уровни». Установите имя «Зеленые уровни» и обязательно установите флажок «Использовать предыдущий слой для создания обтравочной маски». Нажмите ОК.

В окне «Свойства уровней» щелкните значок стрелки рядом с названием канала RGB и в раскрывающемся списке выберите красный канал.

В Output Levels установите уровень подсветки (тот, что справа) равным 0.

Теперь выберите из выпадающего списка Синий канал. Опять же, установите уровень подсветки (тот, что справа) на 0.

Шаг 14
Нажмите на имя Красного слоя, чтобы выбрать его, и перейдите в Слой> Новый корректирующий слой> Уровни. Установите имя «Красные уровни» и обязательно установите флажок «Использовать предыдущий слой для создания обтравочной маски».Нажмите ОК.

В окне Свойства уровней нажмите значок стрелки рядом с названием канала RGB и в раскрывающемся списке выберите Зеленый канал.

В Output Levels установите уровень подсветки (тот, что справа) равным 0.

Теперь выберите из выпадающего списка Синий канал. Опять же, установите уровень подсветки (тот, что справа) на 0.

Шаг 15
Как вы можете видеть, эффект экрана почти завершен, нам просто нужно добавить последний штрих, сделав несколько кривых корректировки.Нажмите на имя слоя «RGB Texture» на панели слоев, чтобы сделать его активным, и перейдите в «Слой»> «Новый корректирующий слой»> «Кривые». Установите имя «Корректировки кривых» и нажмите «ОК».

В окне свойств кривых щелкните значок стрелки рядом с именем кривой RGB и в раскрывающемся списке выберите «Зеленый».

Нажмите на правую верхнюю точку кривой и установите значение «Ввод» равным 230.

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

Нажмите на правую верхнюю точку кривой и установите значение« Ввод »равным 230.

Шаг 16
Теперь, когда мы закончим наш экранный эффект, легко отредактировать наш скриншот с помощью смарт-объекта Мы создали. Если вы хотите изменить его, просто дважды щелкните по миниатюре слоя «Мастер». В новом окне документа, поместите свой скриншот, сохраните файл и закройте его. Ваш новый снимок экрана теперь находится в главном Экранный документ.

,Скачать бесплатно

Led screen photoshop для Windows

3 Вегас LED Screens LLC 226 Freeware

— это инструмент управления, применяемый для экрана с твердыми пикселями и экрана с виртуальными пикселями.

15 KARPOLAN 3837 Freeware

Просмотр на экране состояния клавиш Num, Caps и Scroll Lock.

29 БАНГДА КАНАДА ИНК. +798 Freeware

LED Center — это программа для создания сообщений для вашей светодиодной фирмы.

7 GreenScreen Wizard LLC 1290 условно-бесплатная

Green Screen Wizard — это автономная программа удаления хроматических ключей.

46 Iconico 456 условно-бесплатная

Экранные штангенциркули измеряют все, что вы хотите на вашем экране.

bottin.com 9 Freeware

Скринсейвер в стиле слайд-шоу с огромной коллекцией фотографий Альп.

1 Цифровая Анархия, Inc.426 условно-бесплатная

Создает маски для вашего синего или зеленого изображения на экране в Photoshop.

51 Русис Системс 39 Freeware

Led Display — мощный инструмент, предназначенный для создания светодиодных дисплеев.

SoftCollection 117 условно-бесплатная

Программа

SoftCollection LED Line позволяет вам создать виртуальный светодиодный стол в воздухе.

9 MSI 592 Freeware

LED Manager — это утилита, которая помогает вам контролировать светодиод на ноутбуке.

4 Александр Пенкин коммерческий

LED Tool 4 — Вот фантастический макрос для размещения светодиодов.

4 Сямэнь Sunled Оптоэлектронные Технологии Co., Ltd. 17 Freeware

LED Badge — это приложение, которое позволяет отображать сообщения на светодиодный значок.

50 HuaCanXing Co., Ltd. 25 Freeware

LED Build позволяет создавать сообщения для светодиодных панелей.

Энгельманн Медиа ГмбХ 26 условно-бесплатная

Это плагин для Photoshop, Photoshop Elements и Photoshop-совместимых приложений.

5 Nik Software, Inc. 2774 коммерческий

переопределение шумоподавления для Adobe Photoshop & Photoshop Elements.

YouSendIt 29 Freeware

Плагин YouSendIt для Photoshop позволяет отправлять файлы прямо из Photoshop.

,