прозрачный цвет это какой цвет

Прозрачный цвет в Photoshop

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

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

ИТАК, ПУНКТ ПЕРВЫЙ:

Когда вы рисуете в цифре поверх другого рисунка или монохромной картины, то существует 2 возможных проблемы:

№1 Вид как у Плохо Раскрашенного Старого Фото (просто посмотрите на старые раскрашенные фотографии). Такого нам не надо.
№2 Вид как у Уродливой Аэрографии (представьте аэрографический рисунок фиолетового волка воющего на луну, на автомобиле). Такое нам тоже не нужно.

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

ДАВАЙТЕ НАЧНЁМ С ОСНОВ:

Режимы наложения слоёв

Наносить цвет в Photoshop я начинаю с создания нового слоя и подбора режима смешивания для него. В примере ниже Маленькая Красная Шапочка «У-Тебя-Сегодня-Будут-Неприятности», я наложил сплошной красный цвет на выделенную область её плаща. Изменяя режим смешивания, я получаю различные, порою радикальные изменения.

Как вы можете видеть, большинство из них, если использовать поодиночке дают нам вид раскрашенной фотографии как в проблеме №1.
Здесь нам необходимо использовать комбинацию из нескольких различных слоёв с разными режимами смешивания. Давайте взглянем на следующие комбинации:

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

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

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

Определённые режимы смешивания изменяют насыщенность сильнее, чем другие, одни могут одновременно затемнять, другие высветлять.

КОРОЧЕ СКЛИФОСОВСКИЙ, ВСЁ ЭТО ПОЛНАЯ ХРЕНЬ, ЗАЧЁМ ВСЁ УСЛОЖНЯТЬ? ПОЧЕМУ БЫ ПРОСТО НЕ РИСОВАТЬ НА СЛОЕ С РЕЖИМОМ NORMAL?

Слои с режимом Normal великолепны! Если вы начинающий, то вам следует работать только на них, пока вы не наберётесь опыта. Они ведут себя наиболее предсказуемым образом и невероятно гибки в использовании, если вы рисуете кистью со сниженной Opacity или Flow.
Однако, при добавлении слоёв поверх картины выполненной традиционными материалами, вы со временем обнаружите, что лишаетесь, части оригинальной рисунка в процессе рисования, и что итоговый результат начинает выглядеть всё хуже (проблема №2). Чтобы раскрыть потенциал слоёв в Photoshop на полную мощность, вам следует использовать прозрачность.
Photoshop обладает колоссальным количеством инструментов для раскрашивания. Вам всего лишь нужно найти наиболее подходящий вам. Нет правильного или неправильно варианта. Вы можете использовать всё что вы захотите, чтобы перенести идеи из своей головы на экран.
Для меня, большинство моих слоёв имеют режим Multiply, Color, Soft Light и Screen. Вы можете сделать всё, что только можете себе вообразить, используя лишь эти 4 режима.

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

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

Слой Soft Light это чистое безумие. Он никому не подчиняется, у него нет хозяина. Математика, что лежит в основе его алгоритма, не до конца изучена наукой. Что я знаю, так это то, что если я использую светлый цвет на таком слое, то я получу очень яркую насыщенность и сохраню детали под цветом. Например, я использовал светлый зелёный цвет на слое Soft Light, чтобы выделить его в сравнении с остальной частью картины.

Слой Color. Здесь я его не показал, потому что использую его очень дозировано, но я использую его для того, чтобы усилить или ослабить цвет в определённых областях картины. Этот режим смешивания очень близок к раскрашиванию фотографий (и я не должен ещё раз предупреждать вас о том, как это плохо). Просто помните, что не надо использовать слои Color слишком часто, используйте их только в некоторых местах, в таком случае они будут работать идеально. Например, используйте их для снижения насыщенности: если область цвета кажется вам слишком красной, то я выбираю синий цвет и понемногу наношу его на слое Color, это поможет успокоить красный цвет.

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

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

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

Источник

Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:

Здравствуйте уважаемые начинающие веб-мастера

Мы уже научились создавать фоновые изображения.

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

Для создания эффекта прозрачности в CSS применяются:

1. Формат RGBA — создаёт прозрачный цвет.

Аббревиатура RGBA включает в себя три цвета

б. G — green (зелёный);

г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

Записывается следующим образом:

2. Свойство CSS opacity — делает прозрачным любой элемент контента.

Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

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

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

Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.

Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

И добавим в эту вьюгу, прекрасную представительницу холодного царства.

Как видно из результата, получилась какая то аппликация, а не картина.

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

Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

Давайте зададим картинке прозрачность равную 0.1

Как видите, у вьюги проявилось лицо.

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

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

Давайте создадим блок с фоном, и напишем в нём прозрачный текст.

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

Желаю творческих успехов.

Перемена

— Мама, мама! Вовка меня всю обрызгал!
— А ты его тоже обрызгай.
— Но, мама, как? Я же девочка!

— Официант! Почему в моей котлете волосы?
— Понимаете, у нас повар однорукий, он котлеты
на груди лепит, вот и налипли.
— Представляю, чем он у вас перец
фарширует!

Источник

Hexadecimal color code for transparency · GitHub

Навигация по статье

Конвертер цветов

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов

Имя	Цвет	Код	RGB	HSL
white	#ffffff или #fff	rgb(255,255,255)	hsl(0,0%,100%)	Белый
silver	#c0c0c0	rgb(192,192,192)	hsl(0,0%,75%)	Серый
gray	#808080	rgb(128,128,128)	hsl(0,0%,50%)	Тёмно-серый
black	#000000 или #000	rgb(0,0,0)	hsl(0,0%,0%)	Черный
maroon	#800000	rgb(128,0,0)	hsl(0,100%,25%)	Тёмно-красный
red	#ff0000 или #f00	rgb(255,0,0)	hsl(0,100%,50%)	Красный
orange	#ffa500	rgb(255,165,0)	hsl(38.8,100%,50%)	Оранжевый
yellow	#ffff00 или #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Желтый
olive	#808000	rgb(128,128,0)	hsl(60,100%,25%)	Оливковый
lime	#00ff00 или #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Светло-зелёный
green	#008000	rgb(0,128,0)	hsl(120,100%,25%)	Зелёный
aqua	#00ffff или #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Голубой
blue	#0000ff или #00f	rgb(0,0,255)	hsl(240,100%,50%)	Синий
navy	#000080	rgb(0,0,128)	hsl(240,100%,25%)	Тёмно-синий
teal	#008080	rgb(0,128,128)	hsl(180,100%,25%)	Сине-зелёный
fuchsia	#ff00ff или #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Розовый
purple	#800080	rgb(128,0,128)	hsl(300,100%,25%)	Фиолетовый

Ключевое слово currentColor

RGBA значение

Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который задает непрозрачность для цвета.

Значение цвета RGBA задается с помощью:

Параметр Alpha является числом между 0,0 (полностью прозрачным) и 1,0 (не прозрачным вообще):

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

Так же, как название цвета «Tomato», но 50% прозрачный:

С помощью RGB

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Система HSL

При установке цвета в системе HSL, указываются три параметра — оттенок, насыщенность и осветление. Оттенок определяется на основе цветового кгруга. Он указывается в градусах от 0 до 360. 0 градусов соответствует самому верху круга. При этом, никаких знаков ставить не нужно, указывается просто число.

Насыщенность определяет яркость цвета. Она указывается в процентах от 0 до 100.

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

Чтобы задать тексту тот же цвет, нужно указать ему следующий стиль:

Код в шестнадцатиричной системе

Перед числом ставится знак #. Чтобы устаносить такой же цвет текста, стиль нужно указать так:

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

В коде цвета буквы могут быть как большими, так и маленькими.

Цветовые значения, разделённые пробелами

Подбор цвета

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

Источник

CSS прозрачность (Opacity vs RGBA)

На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA. Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.

CSS прозрачность Opacity

Прозрачность через CSS Opacity

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

div <
background: url(images/yourimage.jpg); /* Фон картинка */
width: 750px;
height: 100px;
margin: auto;
>
.blue <
background: #027ав4; /* Цвет полупрозрачного фона */
opacity: 0.3; /* Значение полупрозрачности фона */
height: 70px;
>
h1 <
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
>

CSS прозрачность в формате RGBA

Формат для записи цвета RGBA, является более современной альтернативой для свойства opacity. R (red), G (green), B(blue) – значит : красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.

Теперь давайте рассмотрим наш пример с использованием RGBA. Заменим эти строчки в стилях.

background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */

на следующую одну строку

background: rgba(2, 127, 212, 0.3);

Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

Результат примера с RGBA:

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

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

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer, тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.

Вывод

Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer. Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 1 ):

спасибо за полезную статью.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник

Цвета в CSS. Прозрачный цвет

Прозрачность картинки

Для создания эффекта прозрачности в CSS используется свойство opacity.

CSS прозрачность в формате RGBA

Теперь давайте рассмотрим наш пример с использованием RGBA. Заменим эти строчки в стилях.

background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */

на следующую одну строку

background: rgba(2, 127, 212, 0.3);

Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

Цветовые значения, разделённые пробелами

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

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

Видоизменяем код на такой:

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

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

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

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

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

Как задается прозрачность CSS: формальности

За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).

Данное свойство характеризуется следующими признаками:

Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:

Значения

Песочница

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

Ключевое слово currentColor

Система HSL

Насыщенность определяет яркость цвета. Она указывается в процентах от 0 до 100.

Чтобы задать тексту тот же цвет, нужно указать ему следующий стиль:

Прозрачность при наведении

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

Код в шестнадцатиричной системе

Перед числом ставится знак #. Чтобы устаносить такой же цвет текста, стиль нужно указать так:

В коде цвета буквы могут быть как большими, так и маленькими.

Прозрачный фон (background)

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

Как задать прозрачность?

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

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1. Рассмотрим пример.

TODO supply a title Тут будет много Вашего текста

Источник