Как сделать белый цвет прозрачным. Как сделать цвет прозрачным в Фотошопе

Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

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

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

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

Задаем прозрачность у css background

Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

Background-color: rgba(173, 57, 22, 0.5)

Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.

Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

Прозрачный фон на примере

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

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

Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.

Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.

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

Вам понадобится

• - Adobe Photoshop.

Инструкция

Откройте в Adobe Photoshop нужную картинку (пункт меню «Файл» (File) -> «Открыть» (Open) или горячие клавиши Ctrl+O). Кликните пункт меню «Выделение» (Select) -> «Цветовой диапазон» (Color Range). Появится окно «Цветовой диапазон» (Color range).

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

Найдите пункт «Разброс» (Fuzziness) – с его помощью можно расширить диапазон выбираемых цветов. Ниже находятся пункты «Выделенная область» и «Изображение». Если выбрать первый, то в превью-окошке программы будет предварительно отображаться выделенная область. Если второй, то изображение будет показано целиком.

В правой части окна находятся три кнопки с изображением пипеток. На первой из них просто пипетка, на второй – пипетка с плюсом, а на третьей – с минусом. Нажмите на первую и кликните в превью-окошке или на самом документе по тому цвету, который вы хотите сделать прозрачным. Выберите пункт «Выделенная область», чтобы увидеть, какие участки изображения выбрались.

Если вы хотите добавить к выделенному цвету еще один, нажмите на «Пипетка+», а затем кликните по этому цвету. Если убавить, то действуйте аналогичным образом, только при помощи «Пипетки-». Выбрав необходимый цвет (или цвета), нажмите ОК. Как видите, в документе выбранные цвета стали выделенными.

В списке слоев (если он отсутствует, нажмите F7) нажмите правой кнопкой мыши по фону, в появившемся меню выберите «Из заднего плана», а в следующем окне – сразу ОК. Фон превратится в слой. Нажмите Delete на клавиатуре. Выделенные участки станут прозрачными.

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

В данной статье мы разберемся, как можно сделать прозрачный рисунок в Ворде 2007, 2010 и его более новых версиях, 2013 и 2016. Это может потребоваться, если Вы хотите написать на изображении нем какой-нибудь текст, или сделать его фоном страницы.

Итак, будем использовать в качестве примера вот такой рисунок.

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

Перейдите на вкладку «Вставка» , кликните по пункту «Фигуры» и выберите из выпадающего списка «Прямоугольник» .

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

Сместите его вниз, чтобы он не перекрывал картинку.

Кликните правой кнопкой по нарисованной фигурке и выберите из контекстного меню пункт .

Откроется окно «Формат рисунка» . В нем перейдите на вкладку «Заливка» и поставьте маркер в поле «Рисунок или текстура» . Потом нажмите на кнопку «Файл» .

Найдите на компьютере тот файл, которое в документе Ворд нужно сделать прозрачным, выделите его и нажмите «Вставить» .

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

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

В нарисованном прямоугольнике будут границы. Если они не нужны, перейдите на вкладку «Цвет линии» и отметьте маркером пункт «Нет линий» .

Закройте окно «Формат рисунка» , нажав на соответствующую кнопку.

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

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

Переместите его немного ниже, кликните по нему правой кнопкой мыши и выберите из списка .

Справа откроется блок «Формат рисунка» . В нем нажмите вверху по ведерку с краской, разверните меню «Заливка» и отметьте маркером «Рисунок или текстура» . В качестве заливки для нашего прямоугольника нужно выбрать требуемое изображение. Поэтому нажмите «Файл» .

Найдите картинку на компьютере, выделите ее и нажмите «Вставить» .

Когда изображение будет добавлено в Word, чтобы сделать нужный фон достаточно перетащить ползунок в поле «Прозрачность» на подходящее значение.

Если линия вокруг картинки не нужна, разверните меню «Линия» и поставьте маркер в поле «Нет линий» .

Область «Формат рисунка» можете закрывать.

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

Также в Ворд можно изменить прозрачность не всего рисунка, а только отдельных областей. Выделите объект, перейдите на вкладку «Работа с рисунками» – «Формат» , нажмите на кнопку «Цвет» и выберите из открывшегося списка .

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

Области на картинке, с выбранным цветом станут такими, как вам надо. В примере они белого цвета. Это потому, что лист белый. Если у Вас будет выбран фон страницы другого цвета, то и прозрачные области на изображении станут этого же цвета.

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

Как вы наверняка уже знаете, в MS Word можно работать не только с текстом, но и с рисунками. Последние после добавления в программу можно даже редактировать с помощью большого набора встроенных инструментов. Однако, учитывая тот факт, что Ворд — это все-таки текстовый редактор, с некоторыми задачами по работе с изображениями бывает не так просто справиться.

Одна из задач, с которой могут столкнуться пользователи данной программы — необходимость изменить прозрачность добавленного рисунка. Это может потребоваться для того, чтобы уменьшить акцент на изображении, либо же визуально “отдалить” его от текста, а также по ряду других причин. Именно о том, как в Ворде изменить прозрачность рисунка мы и расскажем ниже.

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

2. Перейдите во вкладку “Вставка” и нажмите кнопку “Фигуры” .

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

4. Правой кнопкой мышки кликните внутри добавленной фигуры.

5. В открывшемся справа окне в разделе “Заливка” выберите пункт “Рисунок” .

6. Выберите в открывшемся окне “Вставка картинок” пункт “Из файла” .

7. В окне проводника укажите путь к рисунку, прозрачность которого необходимо изменить.

8. Нажмите “Вставить” для добавления рисунка в область фигуры.

9. Кликните правой кнопкой мышки по добавленному рисунку, нажмите на кнопку “Заливка” и выберите пункт “Текстура” , а затем “Другие текстуры” .

10. В окне “Формат рисунка” , которое появится справа, перемещайте ползунок параметра “Прозрачность” , пока не добьетесь желаемого результата.

11. Закройте окно “Формат рисунка” .

11. Удалите контур фигуры, внутри которой находится картинка. Для этого выполните следующие действия:

• Во вкладке “Формат” , которая появляется при нажатии на фигуру, разверните меню кнопки “Контур фигуры” ;
• Выберите пункт “Нет контура” .
• Кликните в пустом месте документа, чтобы выйти из режима редактирования.

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

Совет: Для настройки внешнего вида рисунка можно использовать параметр “Смещение” , который находится под параметром “Прозрачность” , расположенным в окне “Формат рисунка” .

12. После внесения всех необходимых изменений, закройте окно “Формат рисунка” .

Изменение прозрачности части рисунка

Среди инструментов, представленных во вкладке “Формат” (появляется после добавления рисунка в документ) есть и те, с помощью которых можно сделать прозрачным не все изображение, а его отдельную область.

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

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

1. Добавьте изображение в документ, воспользовавшись нашей инструкцией.

2. Дважды кликните по изображению, чтобы открылась вкладка “Формат” .

3. Нажмите на кнопку “Цвет” и выберите в выпадающем меню параметр “Установить прозрачный цвет” .

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

5. Выбранная вами область рисунка (цвет) станет прозрачной.

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

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

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

Тот же рисунок со значением параметра "Насыщенность цвета" 66 %

Тот же рисунок с эффектом перекрашивания

Изменение яркости рисунка

Перекрашивание рисунка

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

Изменение прозрачности цвета

Изменение яркости рисунка

Насыщенность - это интенсивность цвета. При повышении насыщенности рисунок становится ярче, а при ее уменьшении цвета становятся более серыми.

Изменение оттенка цвета рисунка

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

Перекрашивание рисунка

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

Изменение прозрачности цвета

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