Как сделать прозрачный цвет фона

Как в Photoshop замнить белый на прозрачный?

Представь себе скан мятого листа. Так вот, надо сделать png с альфа каналом, так, что бы на нем были только помятости.

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

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

UPD: Спасибо sumnix
Оригинал:

Результат:

Пример:

Оценить 1 комментарий

Alt + Перетаскивание
Не уж то это так сложно? Или Вы написали это, потому что не умеете работать с Gimp.

p.s.
Давайте не продолжать этот бессмысленный спор — есть области, в которых Photoshop превосходит Gimp, и есть области, в которых Gimp превосходит Photoshop.

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

1. Отройте файл
2. Если это была картинка, то сначала делаем Ctrl+A, Ctrl+X, Ctrl+V
3. Ctrl+A
4. В доке управления слоями на слое Layer 1 создаем Clipping Mask (внизу кнопка, где создать новый слой, удалить слой)
5. Открываем док управления каналами Window > Channels
6. В нем будут 4 слоя + наша маска
7. Выбираем самый контрастный слой, например Red, остальные выключаем
8. Делаем на этом слое Ctrl+A, Ctrl+C
9. Включаем все слои, активным делаем нашу маску, Ctrl+V
10. Правим яркость, контрастность, уровни на этой маске, добиваясь наиболее приемлемого результата.

Источник

Как сделать прозрачный фон в css

Дата публикации: 2016-03-30

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

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

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

Как реализуется

Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

Зачем все это нужно?

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Полупрозрачность

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Блог Vaden Pro

Способы создания прозрачных фонов

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

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

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

CSS свойство Opacity

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

В результате мы получили полупрозрачный блок:

Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

Источник

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

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

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

Часть 1. Как бесплатно сделать фон изображения прозрачным в Интернете

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

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

Кроме того сделать фон прозрачным, встроенный редактор Aiseesoft Free Background Remover даже позволяет изменять фон на другой цвет или изображение по своему усмотрению. Вы можете изменять размер, обрезать, вращать и перемещать изображение для создания персонализированного контента.

Следующие ниже шаги помогут вам быстро приступить к работе.

Часть 2. Как бесплатно удалить фон изображения в Photoshop

Но пока успокойтесь. Мы поделимся самым простым способом помочь вам удалить фон с помощью Photoshop. Кстати, следующая операция основана на Photoshop CS6.

Часть 3. Как бесплатно использовать GIMP для создания прозрачного фона

GIMP расшифровывается как GNU Image Manipulation Program, бесплатный кроссплатформенный редактор изображений. Как и Photoshop, он также имеет множество сложных функций и настраиваемых параметров. Вот шаги, чтобы стереть фон.

Часть 4. Как бесплатно изменить фон изображения на прозрачный с помощью краски

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

Часть 5. Как бесплатно получить прозрачный фон с помощью Illustrator

Часть 6. Как бесплатно сделать фото фон прозрачным в PowerPoint

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

Часть 7. Как бесплатно стереть белый фон с помощью Publisher

Часть 8. Часто задаваемые вопросы о том, как сделать фон прозрачным

1. Могу ли я получить изображение в формате JPG с прозрачным фоном?

Нет, не можешь. Вместо этого вы должны использовать PNG или GIF. Эти 2 формата поддерживают прозрачность.

3. Как избавиться от прозрачного фона?

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

Большинство методов, которые мы представили сегодня, основаны на системе Windows. Если вы уже установили на свой компьютер такое программное обеспечение, как Paint, PowerPoint и Publisher, вы можете им попробовать. Просто помните, что не все фоновые изображения можно удалить. Чтобы сделать прозрачный фон с помощью этих программ нужно следить за тем, чтобы у картинки был простой фон.

Что касается PS, Illustrator, GIMP и Aiseesoft Free Background Remover, они более профессиональные и мощные. Среди них проще понять Aiseesoft Free Background Remover. Он отлично работает как на Windows, так и на Mac. И вам не нужно устанавливать на свой компьютер какое-либо программное обеспечение.

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

Что вы думаете об этом посте.

Рейтинг: 4.7 / 5 (на основе голосов 119) Подпишитесь на нас в

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

Как объединить две фотографии в одну? Вот подробное руководство по объединению изображений с тремя приложениями для слияния фотографий на iPhone и Android.

Что такое PNG? В чем разница между PNG и JPG? Как конвертировать PNG в формат JPG? Пусть лучший учебник дает вам удовлетворительные ответы.

Изменить фон изображения

Источник

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью.

Opacity в Firefox, Safari, Chrome, Opera и IE9

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

Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%).

Opacity в Internet Explorer 8 и ниже

Internet Explorer 8 и более ранняя версия поддерживает только свойство Microsoft «alpha filter» для контроля прозрачности элемента.

Opacity в разных браузерах

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

Включение alpha filter для управления прозрачностью в Internet Explorer 8 и более ранних версиях создает недопустимый код в таблице стилей, поскольку это свойство только для Microsoft, а не стандартное свойство CSS.

Opacity для изображений

Все три изображения на иллюстрации ниже взяты из одного исходного изображения. Единственные различия между ними — уровень их непрозрачности.

Изменение opacity при наведении мыши

В следующем примере демонстрируется распространенное использование непрозрачности изображения CSS — когда непрозрачность изображений изменяется при наведении указателя мыши на изображение.

Наведите указатель мыши на изображения, чтобы увидеть эффект.

Текст в прозрачном поле

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

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

Прозрачность с использованием RGBA

В дополнение к RGB CSS3 представил новый способ — RGBA (Red Blue Green Alpha) для указания цвета, который включает альфа-прозрачность как часть значения цвета.

Указание цвета в формате RGBA — это очень простой способ установить прозрачность.

Первые три числа, представляют цвет в значениях RGB, т.е. красный (0-255), зеленый (0-255), синий (0-255), а четвертое, представляет значение альфа-прозрачности в диапазоне от 0.0 до 1.0 ( 0 делает цвет полностью прозрачным, тогда как значение 1 делает его полностью непрозрачным).

Одна важная характеристика, которую следует отметить в отношении прозрачности RGBA, — это способность контролировать прозрачность отдельных значений цвета элементов. С помощью RGBA мы можем сделать цвет текста элемента прозрачным и оставить фон без изменений.

Или измените только прозрачность фона.

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

Объявление запасного цвета

Не все браузеры поддерживают цвета RGBA. Тем не менее, вы можете предоставить альтернативу, такую как сплошной цвет в формате RGB или прозрачное изображение PNG для браузеров, которые не поддерживают свойство RGBA.

Internet Explorer 8 и более ранние версии не поддерживают цвета RGBA. Они используют gradient filter для достижения эффекта RGBA, использование которого не рекомендуется.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по таблицам в CSS

Руководство по свойству margin в CSS

Руководство по выравниванию элементов в CSS

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник