Rgba что это

Рис. 1. Альфа-канал в Фотошопе

Альфа-канал можно использовать для разных целей (например, в альфа-канале может находиться карта глубины), но нас интересует только прозрачность. Для фотомонтажа стереоракурсов. Можно сделать стереоракурсы заднего плана в одной программе, переднего — в другой, и наложить их друг на друга. Например, можно создать стереоракурсы в программе Барельеф (Барельеф работает с цветовой моделью RGBA) и наложить их на стереоракурсы пейзажа, снятые одним фотоаппаратом со сдвигом. Программа трёхмерного моделирования 3D Studio Max тоже создаёт ракурсы в цветовой модели RGBA, так что можно убрать задний план и заменить его другим. С помощью альфа-канала можно комбинировать стереофрагменты, созданные в самых разных программах с использованием самых разных техник.

Но это еще не всё. Можно делать фотомонтаж не только на уровне стереоракурсов, но и на уровне кодированных под линзовый растр изображений, потому что программы Photoprojector Easy и Photoprojector тоже работают с цветовой моделью RGBA .

Существует распространенный способ изготовления детских фотографий для линзового растра — с помощью шаблонов, когда портрет ребёнка вырезается и помещается между задними и передними объемными (а чаще плоскими) слоями, уже заранее заготовленными (родители выбирают понравившийся им шаблон). При этом вначале создаётся несколько стереоракурсов ребёнка с шаблоном, потом эти ракурсы кодируются («полосатятся»).

Можно эту работу выполнить совсем в другом порядке: вначале закодировать задний объемный план, передний объемный план, сохранить их в таком виде на диске. Потом вырезать плоский портрет ребенка, закодировать его отдельно, или вообще не кодировать, просто вставить между задним и передним кодированным изображением. После этого объединить все три закодированных слоя в Фотошопе. То есть, осуществить фотомонтаж на уровне кодированных (чересполосных) изображений.

Что это нам даёт? Ну, во-первых, экономию времени. А во-вторых, гибкость в работе. Ведь у нас теперь нет необходимости в слоёном жёстко заданном шаблоне. У нас теперь есть полная свобода творчества. Задний план — это может быть закодированная настоящая стереофотография (например, снятая одним фотоаппаратом со сдвигом). На переднем плане — закодированная трехмерная модель из 3D Studio Max. Мало того, можно создать отдельный кодированный слой с вариоэффектом. Добавить 2D-3D, сделанное в Барельефе , PSD 3D Converter -е или StereoMorpherPlus -е. Все эти закодированные слои объединить в Фотошопе (вы, конечно, понимаете, что при этом необходимо совместить выравнивающие риски), и останется только вставить портрет ребёнка. Причём по желанию можно сделать часть слоёв невидимыми, убрать какую-нибудь надпись или вариоэлемент.

Теперь о том, как работать с альфа-каналами.

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

Если вы по каким-то причинам сделали резкий переход от белого к черному, тогда размойте альфа-канал. Меню Filter-> Blur -> Gaussian Blur. Достаточно размыть на один пиксель:

Как создать в Фотошопе альфа-канал без удаления фона

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

Самый простой способ — выделить невидимый фон или видимый фрагмент и нажать на эту кнопку (выделена красным кружочком) в закладке каналов:

Если вы перепутали прозрачность с непрозрачностью, тогда сделайте негатив для альфа-канала Image -> Adjustments -> Invert (Ctrl+I).

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

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

Чтобы увидеть быструю маску, сделайте невидимыми каналы RGB (щелкните по глазу напротив RGB, показано красной стрелкой):

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

Обратите внимание на сохранение изображения с альфа-каналом в формате TIFF. Поставьте галочку Alpha channels:

Инструмент ЛАССО

При использовании инструментов лассо обратите внимание на параметр Feather, поставьте его равным 1 px, так мы создадим небольшое размытие края, чтобы получить более естественный фотомонтаж, мы говорили об этом выше:

Инструмент ПЕРО

Выбрав инструмент перо , аккуратно обводим объект. Затем, замкнув выделение, нажмите на правую кнопку мыши и вызовите диалог Make Selection :

В диалоге Make Selection ставим Feather Radius в 1 пиксель, чтобы получить слегка размытый край.

Как работать с альфа-каналом в программе Барельеф

Для работы с альфа-каналом в программе Барельеф ничего особенного делать не нужно. Если вы загружаете Изображение в цветовой модели RGBA, то и сгенерированные ракурсы будут в цветовой модели RGBA. Обратите внимание, внизу слева (показано красной стрелкой) показывается цветовая модель загруженного изображения:

После генерации ракурсы автоматически открываются в программе MultiViewer:

При этом вы видите вместо заднего плана черный цвет. На самом деле задний план не исчез. Если вы откроете те же ракурсы в Фотошопе, то задний план будет на месте:

Разные программы по-разному отображают изображения с альфа-каналом.

Как сама картинка может быть использована для создания альфа-канала

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

Закрасим стрекозу белым цветом, а фон — черным.

Вот теперь мы позаботимся о прозрачности крыльев стрекозы. Выделим крылья, обесцветим их, сделаем негатив. После этого изменим яркость крыльев, чтобы сделать прожилки на них ярче (Image->Adjustment->Brightness/Contrast).

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

Теперь добавляем крылья к карте прозрачности:

При фотомонтаже такие крылья выглядят естественно:

Как превратить альфа-канал в обычную для Фотошопа прозрачность, в Фотошопе и MultiViewer-e

Предположим, мы сделали картинку с альфа-каналом, теперь мы хотим сделать фотомонтаж в программе Фотошоп. Мы описали метод, при которых задний план не удаляется, а просто помечается как прозрачный (черный цвет в альфа-канале). Но для фотомонтажа этот фон нужно просто убрать. Откроем изображение в Фотошопе и откроем закладку со слоями. Мы видим, что наша картинка состоит из одного слоя под названием Background (фон). Его нельзя ни повернуть, ни добавить слой-маску. Поэтому нужно превратить его в обычный слой. Щелкните по значку Background два раза, появится окошко New layer . В графе Name (Имя) слой называется Layer 0 , можно это изменить, назвать слой как-нибудь по-другому и нажать ОК :

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

Получили слой маску:

А теперь нужно альфа-канал скопировать и вставить в эту слой-маску. Либо с помощью закладки Layers, либо с помощью закладки Channels, что не важно:

С помощью закладки Channels удобнее. Только нужно все каналы RGB сделать невидимыми, щелкнуть по глазику напротив RGB:

Ну, теперь можно сделать просто Copy-Paste (скопировать-вставить). Можно через меню Edit->Copy. Странно, не получается, команда Copy неактивна! Это потому что перед копированием нужно сделать выделение. Нажимаем в меню Select -> Select All (выделяем всё). Только после этого можно копировать. Фотошоп приучает нас мыслить правильно. Чтобы скопировать, нужно знать, что копировать, т.е. выделить нужную область.

Теперь выделяем мышкой канал Layer 0 Mask и делаем Edit-Paste:

После этого делаем видимыми RGB каналы и невидимыми остальные каналы:

Кто знает более быстрый и простой способ превращения альфа-канала в прозрачность в Фотошопе, будем очень признательны.

Эту же процедуру можно проделать с помощью программы MultiViewer :

Загружаем картинку в программу командой File -> Add images , затем нажимаем на команду File -> Save as Multilayer PSD . Multilayer значит многослойный, но поскольку у нас загружена только одна картинка, то и слой будет один. Создастся файл вот в таком виде:

Можно сделать и для нескольких файлов, загрузить в программу MultiViewer несколько изображений командой Add images , затем создать многослойный PSD-файл командой Save as Multilayer PSD , но всё обрежется по наименьшему изображению:

Ничто нам не заменит Фотошоп.

Как создать в Фотошопе альфа-канал с удалением фона

Создать альфа-канала с удалением фона, значит просто стереть этот фон резинкой. Но перед этим нужно преобразовать слой Background в слой Layer 0 . Мы об этом писали выше:

Кроме обычной резинки, есть замечательный инструмент Background Eraser Tool . Нажимаем на клавишу ALT на клавиатуре (держим её не отпуская), появляется пипетка. Этой пипеткой мы отмечаем фон, который хотим стереть (щелчок левой кнопкой мыши):

Отпускаем клавишу ALT и водим резинкой. Стирается только фон:

Подробнее читайте в руководстве программы. Другой инструмент, Magic Eraser Tool , по действию напоминает волшебную палочку для выделения Magic Wand Tool , но есть различие — если вы нажмёте на клавишу ALT, опять же появится пипетка, которой можно пометить базовый цвет.

Также можно использовать специальный плагин к Фотошопу Background Remover www.imageskill.com

Теперь внимание! При сохранении файла поставьте галочку Save Transparency (сохранить прозрачность) в настройках TIFF, иначе альфа-канала в файле не будет.

Как работать с альфа-каналом в программе PSD 3D Converter

Если вы хотите сохранить сгенерированные ракурсы в цветовой модели RGBA, выбираете меню Settings(Настройки) , выбираете Settings for saving (Настройки сохранения) и дальше отмечаете Flatten frames and save as TIFF files in RGBA colour mode (only for RGB). (Сводим слои и сохраняем в TIFF файлы в цветовой модели RGBA (Исходное изображения должно быть в цветовой модели RGB)) :

Как работать с альфа-каналом в программе StereoMorpherPlus, PhotoProjectorEasy, PhotoProjector

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

Фотомонтаж на уровне кодированных (чересполосных) изображений

При фотомонтаже на уровне кодированных изображений, нужно помнить о параллаксах. У заднего плана параллакс должен быть больше, чем у переднего, иначе задний объект начнет «продавливаться» сквозь передний, выглядит это неестественно. Если предполагается сделать три слоя: задний — с фоном, средний — с портретом ребенка, передний — с подписями и украшениями, то лучше сделать так, чтобы у фона везде был только положительный параллакс, чтобы вся сцена была «утоплена» внутрь, а у переднего — отрицательный параллакс, чтоб предметы «висели» в воздухе перед плоскостью открытки. При таком распределении параллаксов неприятностей не возникнет. Плоский слой с портретом ребенка не имеет никакого параллакса, его даже не нужно кодировать, просто вставить между двумя закодированными слоями, предварительно увеличив до нужного размера. При создании и кодировании фона и переднего плана нужно выбирать одинаковые настройки и размеры. Фон просто кодируется и открывается в Фотошопе. Ракурсы переднего плана создаются в цветовой модели RGBA, кодируются, создается кодированное изображение в цветовой модели RGBA, затем альфа-канал превращается в прозрачность (смотрите раздел выше). Далее передний план копируется и вставляется в новом слое поверх фона. Таким образом получаются два слоя — заготовка:

После вставки портрета между слоями, изображение можно свести в один слой: Layer — Flatten Image. Распечатать. Просушить. Склеить.

Как автоматизировать — макрокоманды, пакетная обработка

Если вы обрабатываете большое количество фотографий в Фотошопе, то все ваши действия можно записать в макрокоманду (Action), и вам не нужно повторять эти действия каждый раз — просто запускаете макрокоманду.

Выберите Window -> Actions .

Появится закладка Actions . Нажмите на черный треугольник справа от надписи Actions , откроется меню. Выберите в меню команду New Set. — создать ряд из макрокоманд, назовите его, например, Мои макрокоманды . Теперь выберите в меню New Action и нажмите на кнопку Record , с этого момента все ваши действия будут записываться в эту макрокоманду. В том же меню вы найдёте команды Save (Сохранить) и Load (Загрузить) .

Остановите запись макрокоманды, нажав на черный квадратик внизу закладки Actions . Наша макрокоманда записана. Теперь ее можно раскрыть и просмотреть все шаги, которые мы туда записали. Эти шаги можно выделить, стереть, сдвинуть, скопировать. Работа с макрокомандами интуитивно понятна, её можно легко освоить «методом тыка» (вы же знаете, как пользователи не любят читать руководства).

Вот такие замечательные возможности таит в себе Фотошоп. Не будучи программистом, можно спокойно создавать нужные макрокоманды. Но и это еще не все. Вы можете обработать целый каталог с помощью пакетной обработки: File -> Automate -> Batch.

Е. А. Вазенмиллер

RGBA — CSS полупрозрачность

Посмотри внимательно на рисунок. Фон у выпадающего окошка сделан полупрозрачным. Это довольно частый дизайнерский прием. Давай подумаем, как это можно реализовать.

Задача

Сделать кроссбраузерный полупрозрачный цвет.

Решение

Первая мысль в данной ситуации — использовать для фона png24-картинку с уже заданной полупрозрачностью. Но эта картинка совершенно лишняя. Можно прекрасно обойтись и без нее (а значит без лишнего запроса к серверу). Давай все-таки попробуем найти оптимальное решение.

Вторая мысль — использовать CSS-свойство opacity. Но в данном случае это не очень удобно. Ведь полупрозрачным тогда станет не только фон, но и надписи. Да, собственно, все окошко сразу.

Конечно, можно попробовать добавить дополнительный контейнер и применять opacity только к нему, но этот HTML-элемент будет предназначен только для оформления и явно будет лишним. Можно ли обойтись без него?

Конечно можно! Если использовать RGBA.

Формат описания цвета RGBA

CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255, вдруг кто не знает).

Синтаксис у этого дела очень простой:

background: rgb( 0, 255, 0); /* чистый зеленый цвет */

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).

background: rgba( 255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */

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

А где мне взять эти циферки?

Посмотреть на составляющие цвета можно используя инструмент фотошопа «пипетка»

О кроссбраузерности

Так как функция RGB значительно старше, чем RGBA и присутствует еще со времен стандарта CSS2, то для подстраховки от самых древних браузеров можно использовать такую дублирующую конструкцию:

.someBlock

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

Отдельно придется позаботиться об IE. Ослоподобные аж до 8-ой версии включительно не понимают RGBA.

Как всегда: землю — крестьянам, фабрики — рабочим, а ослам — костыль! В виде фильтра gradient.

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

.someBlock

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

Для справки: в фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Соответственно шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

По теме:

• CSS прозрачность
• Градиент: CSS3 против CSS2 + картинка
• PNG и прозрачность в IE6

• CSS приемы
  • «Дергание» сайта
  • background position со смещением
  • clearfix
  • CSS прозрачность
  • CSS хаки
  • RGBA — CSS полупрозрачность
  • Затемнение фона
  • Кроссбраузерный
    

    ---

  • Обнуление отступов
  • Порядок описания ссылок
  • Прелоад изображений
  • Сброс стилей
  • Сокращения в CSS
  • Убираем рамку с эл-ов в фокусе
  • Условные CSS
  • Условные комментарии
  • Поворот вокруг своей оси
  • Поворот объекта вокруг свой
  • Resize для textarea в Safari и Chrome
  • Блочная верстка форм
  • Кастомные checkbox и radio на CSS
  • Кросбраузерные input и textarea
  • Кроссбраузерный button
  • Нестандартные checkbox
  • Нестандартные radio
  • Нестандартные select
  • Нестандартные select multiple
  • Нестандартные поля выбора файла
  • Нестандартные текстовые поля
  • О кроссбраузерности placeholder
  • Отступы у checkbox и radio
  • Оформление input type=search
  • Резиновая кнопка
  • Текст в поле type=»password»
  • Блоки равной высоты в строке
  • Колонки равной высоты
  • Прижимаем подвал к низу
  • Ресайз окна: потомок перерос родителя
  • Сайт в центре экрана
  • Фиксированная колонка + резиновая + clear:both
  • CSS 3D лента
  • CSS3 всплывающие подсказки
  • IMG внутри блока — убираем странный отступ
  • IMG: меняем рисунок при наведении
  • Аккордеон на чистом CSS3
  • Валидный target=»_blank»
  • Верстка рейтингов
  • Верстка содержания
  • Вставка спецсимволов в генерируемый контент
  • Вставка стрелок
  • Индивидуальные стили для li. Избавляемся от классов.
  • Масштабируемая картинка в резиновой колонке
  • Многоколоночный текст на CSS3
  • Нестандартное подчеркивание
  • Отменяем обтекание текстом картинки
  • Оформление внешних ссылок
  • Оформление изображений по align
  • Оформляем «ol»
  • Правильные анонсы новостей
  • Список определений. Требуем невозможного.
  • Firefox
    • -moz-box-shadow и -moz-border-radius — это кошмар CPU
    • Позиционирование внутри button
    • Ширина input type=file
    • Onload в IE9
    • z-index в IE6-7
    • Баг с текстом при применении Alpha фильтра
    • Масштабирование и PIE
    • Отступы в кнопках в IE6-7
    • Проблемы с em
    • Эмуляция after и before для IE 6-7
    • Эмуляция data:URL для IE6-7 — используем MHTML-включение
    • hasLayout
    • Max-width
    • Min-height
    • Min-width
    • Min-width и max-width одновременно
    • PNG и прозрачность
    • Высота блока 1px
    • Дублирование символов
    • Дырка под футером
    • Как перекрыть select
    • Обрезка контента c отрицательным margin в IE6
    • Отступы плавающих блоков
    • Проблемы с размерами блоков
    • Псевдокласс :first-child
    • Псевдокласс hover в IE 6
    • Селектор потомков >
    • Селекторы атрибутов [type=…]
    • Сестринский селектор
    • Смещение на 1px
    • Ссылки с вложением
    • Устраняем flickering
    • Эмуляция position:fixed
    • overflow-y
    • Не подгружаются шрифты @font-face
    • Проблема с oveflow: hidden
    • Скругление img
    • HTML шаблон для мобильных устройств
    • Выпадающее меню на CSS
    • Выравнивание навигации из блоков по центру
    • Выравнивание навигации по середине
    • Резиновое меню
    • Резиновое меню из блоков
    • Убираем класс для первого элемента
    • Box-sizing: переключаем блочную модель
    • inline-block: простое свойство для непростых задач
    • Вертикальная позиция для строчного элемента
    • Вертикальное выравнивание
    • Выравнивание по центру с position: absolute
    • Вычисляемые отступы
    • Два в одном: позиция + размеры
    • Долой отступы между строчными элементами (и блоками)
    • Обходим схлопывание margin
    • Центрирование картинки в блоке
    • Центрирование резинового блока по горизонтали
    • Активация flash
    • Вставка flash в HTML
    • Вставляем ролик с YouTube
    • Как отключить flash
    • Как перекрыть flash
    • Параметры для вставки объектов
    • Ссылка на flash объекте
    • CSS треугольники
    • Аппаратное ускорение анимации
    • Встраиваем изображения — data:URL
    • Градиент: CSS3 против CSS2 + картинка
    • Лесенка спрайтов — сложный случай поклейки
    • На одну картинку меньше. Спецсимвол ×
    • Необычные тени с CSS3 box-shadow
    • Оптимизация Google Web Fonts
    • Оптимизация фонов с помощью Canvas
    • Проблемы с border-radius
    • Псевдоэлемент before для маркера списка
    • Скругление углов. Обзор методов.
    • Сокращаем HTML5 код
    • Спрайты: меньше картинок — больше скорость
    • Тень для блока
    • Фигуры с углами на CSS
    • Шаблоны градиентов
    • Дополнение Skype
    • Подключить favicon
    • Профилактика сайта: максимально простое оповещение
    • Ссылки на skype
    • @font-face в деталях
    • Cufon — нестандартный шрифт средствами JS
    • font-size: 100.01% для html
    • Безопасные шрифтовые CSS стеки для англоязычных текстов
    • Безопасные шрифтовые CSS стеки для рунета
    • Безопасные шрифты
    • Вертикальный текст
    • Используем псевдоэлемент :first-letter
    • Контур для текста
    • Нестандарный шрифт. Быть ему или нет?
    • Нестандартный шрифт средствами CSS
    • Плавающий :first-letter
    • Подмена текста изображением
    • Соответствия шрифтов Windows, Mac и Unix/Linux
    • Строчный :first-letter
    • Текст под углом
    • Текст с CSS градиентом
    • Тень для текста
    • Эффект отражения

    HTML RGB и RGBA

    Значение цвета RGB представляет красный, зеленый и синий источники света.

    Значение цвета RGBA — это расширение RGB с альфа-каналом (непрозрачность).

    RGB значение цвета

    В HTML цвет может быть задан как значение RGB, используя эту формулу:

    Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета со значением от 0 до 255.

    Это означает, что существует 256 x 256 x 256 = 16777216 возможных цветов!

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

    Другой пример, rgb (0, 255, 0) отображается как зеленый, потому что зеленый имеет самое высокое значение (255), а два других (красный и синий) установлены на 0.

    Чтобы отобразить черный цвет, установите все цветовые параметры равными 0, например: rgb(0, 0, 0).

    Чтобы отобразить белый цвет, установите все цветовые параметры равными 255, например: rgb(255, 255, 255).

    Поэкспериментируйте, смешивая значения RGB ниже:

    Похожие публикации:

    1. Как выйти из папки
    2. Как понять текущий месяц
    3. Как скачать темы для astra linux
    4. Что такое edx org